typescript-code-generation-rules

typescript-code-generation-rules is a cursor rule for coding agents from holtwood/awesome-cursorrules-zh. It costs 0 tokens per session (483 once invoked), scanned A, original, MIT.

A set of rules for writing React components in Next.js 14 with TypeScript, including typed props, function components, and export conventions.

In plain words
What is it for?
Use it when creating or editing .tsx components and page components.
Why use it?
It reduces inconsistent component definitions and makes component inputs easier for TypeScript to check.

Cursor rule

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add rules/holtwood/awesome-cursorrules-zh/typescript-code-generation-rules
Clone the repo
git clone --depth 1 https://github.com/holtwood/awesome-cursorrules-zh

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for typescript-code-generation-rules

README.md
[![agentmods](https://agentmods.dev/badge/rules/holtwood/awesome-cursorrules-zh/typescript-code-generation-rules.svg)](https://agentmods.dev/rules/holtwood/awesome-cursorrules-zh/typescript-code-generation-rules)
Your own site
<a href="https://agentmods.dev/rules/holtwood/awesome-cursorrules-zh/typescript-code-generation-rules"><img src="https://agentmods.dev/badge/rules/holtwood/awesome-cursorrules-zh/typescript-code-generation-rules.svg" alt="Measured on agentmods" height="20"></a>
Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 483 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.00483
Opus 5 $0.00000 $0.00242
Sonnet 5 $0.00000 $0.00097
Haiku 4.5 $0.00000 $0.00048

Measured yesterday against content hash 0c3a130f44a1, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

typescript-code-generation-rules scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

docs/rules/frontend/react/nextjs-14-seo/typescript-code-generation-rules.mdc · 57 lines

What it actually says

  • 始终使用 TypeScript 确保类型安全。提供适当的类型定义和接口。

  • 将组件实现为函数式组件,在需要状态管理时使用 hooks。

  • 提供清晰、简洁的注释来解释复杂逻辑或设计决策。

  • 建议与 Next.js 14 最佳实践一致的适当文件结构和命名约定。

  • 仅在创建客户端组件时使用 'use client' 指令。

  • 在 .tsx 文件中采用以下组件定义语法,让 TypeScript 推断返回类型:

    const ComponentName = () => {
      // 组件逻辑
    };
    
  • 对于 props,使用接口定义:

    interface ComponentNameProps {
      // Props 定义
    }
    const ComponentName = ({ prop1, prop2 }: ComponentNameProps) => {
      // 组件逻辑
    };
    
  • 在 .tsx 文件中对组件使用命名导出:

    export const ComponentName = () => {
      // 组件逻辑
    };
    
  • 对于页面组件,在 .tsx 文件中使用默认导出:

    const Page = () => {
      // 页面组件逻辑
    };
    export default Page;
    
  • 如果需要显式类型,优先使用 React.FCReact.ReactNode

    import React from 'react';
    const ComponentName: React.FC = () => {
      // 组件逻辑
    };
    // 或者
    const ComponentName = (): React.ReactNode => {
      // 组件逻辑
    };
    
  • 定义 React 组件时,避免不必要的类型注释,尽可能让 TypeScript 推断类型。

  • 仅在必要时使用 React.FCReact.ReactNode 进行显式类型,避免使用 JSX.Element

  • 编写干净、简洁的组件定义,不使用冗余的类型注释。

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 57 lines · 483 tokens per session scan A 0c3a130f44a1

Subscribe to this mod's changes

typescript-code-generation-rules is a cursor rule published in the GitHub repository holtwood/awesome-cursorrules-zh (232 stars, last pushed 29d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 483 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.