frontend-typescript-rules SKILL.md skillA
frontend-typescript-rules from shinpr/ai-coding-project-boilerplate is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add shinpr/ai-coding-project-boilerplate/frontend-typescript-rules@git:20260912.c0d4362Pins git:20260912.c0d4362 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- shinpr/ai-coding-project-boilerplate
- Path
.claude/skills-zh-CN/frontend-typescript-rules/SKILL.md- Versions recorded
- 3
- Latest version
- git:20260912.c0d4362, committed Sep 12, 2026
- First version recorded
- Aug 31, 2026
- Size
- 6,594 bytes
- Repository stars
- 234
- License
- MIT
应用 React/TypeScript 类型安全、组件设计与状态管理规则。用于实现 React 组件时使用。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# TypeScript 开发规则（前端）
前端专属的 React/TypeScript 实现规则：阈值、边界类型安全、组件/状态设计、错误处理与项目约定。
## 前置条件检测
在应用某项项目约定之前，先检查 TypeScript、打包器/框架、lint/format、路径别名以及具有代表性的组件配置。当配置或既有仓库模式支持某项约定时，将其视为已观察到；仅凭少量示例得出的结论应标注为推断。当存在相互冲突的模式，且会影响公共行为、兼容性或组件边界时，应停下来指出所需的权威来源或决策点。
## 反模式与阈值
触发设计调整的信号：
- Prop 透传超过 3 层 → 提升到 Context 或状态管理
- 组件超过 300 行 → 拆分
- Props 数量超过 10 个 → 拆分组件（3-7 个为合理区间）
- 可选 props 超过 50% → 引入默认值或 Context
- Props 嵌套超过 2 层 → 拉平
## 边界处的类型安全
将不可信或类型未知的数据接收为 `unknown`，并通过类型守卫进行收窄。仅当运行时/框架不变量能够证明所断言的类型时才使用 `as`，并在附近注释中记录该不变量。既有的生成代码或第三方声明中包含 `any` 属于需要包装的边界输入，而不是在应用契约中扩散 `any` 的理由。
在应用内部，React Props/State 已由类型保证——无需 `unknown`。在每一个外部边界处，先接收为 `unknown`，再通过类型守卫收窄后使用：API 响应、`localStorage`/`sessionStorage`、URL 参数、解析后的 JSON。受控组件的表单输入通过 React 合成事件保持类型安全。
```typescript
const raw: unknown = await (await fetch(url)).json()
if (!isUser(raw)) throw new ValidationError('invalid user')
const user = raw // 已收窄为 User
```
## 组件与状态设计
- **仅使用函数组件。** 类组件仅允许用于 Error Boundary（不存在对应的 Hook 方案）
- **显式为 Props 定义类型**，使用具名类型并解构：`function UserCard({ user, onSelect }: UserCardProps)`。直接在函数上标注 props 类型，使 props 契约保持显式
…Read the whole file at its exact version.
How to install
mdr add shinpr/ai-coding-project-boilerplate/frontend-typescript-rules@sha256:3d56e3fe3609eac3The line at the top of this page pins the label git:20260912.c0d4362, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_oxhbbznmmolow7ct)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 3 versions of this file, between Aug 31, 2026 and Sep 12, 2026, about one every 6 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20260912.c0d4362 latest | 2026-09-12 | c0d4362 | 6,594 B | A | view · diff |
| git:20260901.fbc397a | 2026-09-01 | fbc397a | 6,665 B | A | view · diff |
| git:20260831.b183037 | 2026-08-31 | b183037 | 6,722 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (6594 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
shinpr/ai-coding-project-boilerplate · 234 stars · license MIT · pushed 2026-10-14 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_oxhbbznmmolow7ct GET https://markdownregistry.com/api/v1/resolve?ref=shinpr/ai-coding-project-boilerplate/frontend-typescript-rules GET https://markdownregistry.com/api/v1/blob/3d56e3fe3609eac35161dfb30c1021e748f47ce261955423ddcd9ee158ddea4e
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from shinpr/ai-coding-project-boilerplate
Every file in shinpr/ai-coding-project-boilerplate