Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
应用 React/TypeScript 类型安全、组件设计与状态管理规则。用于实现 React 组件时使用. An agent skill from shinpr/ai-coding-project-boilerplate.
Install Frontend Typescript Rules
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-rules --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-rules .claude/skills/frontend-typescript-rules && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend-typescript-rules" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-rules into .claude/skills/frontend-typescript-rules/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-rules", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-rulesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-rules --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-rules .agents/skills/frontend-typescript-rules && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-typescript-rules" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-rules into .agents/skills/frontend-typescript-rules/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-rules", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-rules --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-rules .cursor/skills/frontend-typescript-rules && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-typescript-rules" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-rules into .cursor/skills/frontend-typescript-rules/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-rules", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/shinpr/ai-coding-project-boilerplate.git --path .claude/skills-zh-CN/frontend-typescript-rules--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-rules --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-rules .gemini/skills/frontend-typescript-rules && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-typescript-rules" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-rules into .gemini/skills/frontend-typescript-rules/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-rules", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-rulesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-rules .github/skills/frontend-typescript-rules && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-typescript-rules" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-rules into .github/skills/frontend-typescript-rules/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-rules", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-rules --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills-zh-CN/frontend-typescript-rules .opencode/skills/frontend-typescript-rules && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-typescript-rules" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-typescript-rules into .opencode/skills/frontend-typescript-rules/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-typescript-rules", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-typescript-rules- GitHub stars
- 232
- Token cost
- ~891 tokens
- SKILL.md length
- 195 words
- Files
- 1
- Skills in repo
- 42
- Repo updated
- First seen
- Licence
- MIT
At a glance
应用 React/TypeScript 类型安全、组件设计与状态管理规则。用于实现 React 组件时使用. An agent skill from shinpr/ai-coding-project-boilerplate.
- Frontend & Design work in your project
- SKILL.md covers 前置条件检测, 反模式与阈值, 边界处的类型安全 and 组件与状态设计, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frontend Typescript Rules is an agent skill from shinpr/ai-coding-project-boilerplate. 应用 React/TypeScript 类型安全、组件设计与状态管理规则。用于实现 React 组件时使用。
Its SKILL.md is about 890 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. It works with TypeScript and React. The repository describes itself as: Agentic coding TypeScript boilerplate for Claude Code: sub-agent workflows with built-in quality checks and context engineering. The licence is MIT.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/frontend-typescript-rules”
What it can do on your machine
Read from SKILL.md and the folder at commit 56913a2. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend Typescript Rules loads about 891 tokens when it runs. Until then it costs about 20 tokens; SKILL.md has 195 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from shinpr/ai-coding-project-boilerplate at commit 56913a2, republished under its MIT licence (© shinpr). 195 words, ~891 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-typescript-rules/SKILL.md (or your agent's skills folder).- name
- frontend-typescript-rules
- description
- 应用 React/TypeScript 类型安全、组件设计与状态管理规则。用于实现 React 组件时使用。
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 合成事件保持类型安全。
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 契约保持显式 - Props 驱动： 当有一个明确的父组件拥有依赖项时，通过 props 传递。当多个非相邻的后代组件共享该值、且逐层传递 props 会引入无所有权作用的中间组件时，使用 Context 或既有的全局状态方案
- 自定义 Hook 是逻辑复用与依赖注入的基本单元（通过 Hook 注入协作对象以提升可测试性）
- 函数参数： 0-2 个使用位置参数；3 个及以上使用单一 options 对象
- State 结构： 显式定义 state 类型；对于具有离散转换的多字段 state，使用带判别联合 action 类型的
useReducer，而不是大量useState调用 - 服务端/客户端边界（仅限 RSC 框架，例如 Next.js App Router）：数据获取/渲染默认使用服务端组件，将交互逻辑隔离在所需最小范围的
"use client"边界之后；仅浏览器可用的 API（window、localStorage、事件处理函数）应保留在客户端组件内，因为在服务端组件中调用它们会破坏渲染。纯客户端 SPA（例如 Vite）没有服务端组件运行时，因此可跳过此项
错误处理
- 为每个错误设定一个明确的处理结果：将其转换为带类型的预期失败、在所属的 UI 边界处处理，或连同其诊断上下文一并向上传播。在拥有可观测性职责的层级记录日志，避免同一个失败被重复记录
- 快速失败： 遇到无效状态时应抛出异常，而不是静默返回兜底值
- 使用
Result类型将预期内的失败表示为值；将throw保留给非预期/不可恢复的情况 - 使用继承自基类
AppError的专用错误类，携带code（例如 ValidationError、ApiError、NotFoundError） - 各层职责： API 层将传输层错误转换为领域错误；Hook 向上传播
AppError；Error Boundary 捕获渲染期错误并展示兜底 UI - Effect 竞态/清理： 对
useEffect中的数据获取要防范乱序响应与卸载后的状态更新——中止或忽略过期结果（使用AbortController或挂载标志），或使用能自动取消与去重的服务端状态库（React Query/SWR）。仅靠try-catch无法覆盖这类情况 - 仅记录当前信任边界所允许的诊断字段；记录日志前应对凭证、令牌、支付数据等敏感值进行脱敏
type Result<T, E> = { ok: true; value: T } | { ok: false; error: E }
class AppError extends Error {
constructor(message: string, readonly code: string, readonly statusCode = 500) {
super(message); this.name = this.constructor.name
}
}Error Boundary ——唯一必须使用类组件的场景：
class ErrorBoundary extends React.Component<{ children: React.ReactNode; fallback: React.ReactNode }, { hasError: boolean }> {
state = { hasError: false }
static getDerivedStateFromError() { return { hasError: true } }
render() { return this.state.hasError ? this.props.fallback : this.props.children }
}项目约定
- 环境变量： 通过所配置打包器暴露的访问方式读取客户端环境变量。匹配已观察到的打包器：Vite 使用
import.meta.env.VITE_*，Next.js 公共变量使用process.env.NEXT_PUBLIC_*，CRA 使用process.env.REACT_APP_*。前端构建产物包含公开配置；敏感值应保留在服务端边界之后 - 构建体积与性能： 使用
build脚本对照项目预算监控构建体积；使用React.lazy+Suspense进行代码分割；组织状态结构以尽量减少重新渲染。记忆化（Memoization）：启用 React Compiler 时应依赖它；仅在有性能分析依据或身份稳定性依据时（经测量确认的瓶颈，或第三方 API/effect 依赖需要稳定的引用身份）才手动使用React.memo/useMemo/useCallback作为例外手段 - 命名： 组件/类型使用
PascalCase；变量/函数使用camelCase；Hook 以use为前缀；常量使用SCREAMING_SNAKE_CASE - 导入： 遵循在
tsconfig、lint 配置及代表性文件中观察到的别名与导入顺序规则。仅在配置的别名支持时使用src/绝对路径 - 格式化： 遵循仓库配置的格式化工具；若使用 Biome，分号与代码风格以其项目配置为准
© shinpr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills-zh-CN/frontend-typescript-rules of shinpr/ai-coding-project-boilerplate.
Open the folder on GitHubat commit 56913a2
Compare with similar skills
Frontend Typescript Rules next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Typescript Rules this skillshinpr/ai-coding-project-boilerplate | 232 | — | ~891 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Ink Tui Wizardnovuhq/novu | 40k | — | ~1.9k | Automated safety check: Pass | MIT | |
| Frontend Module Standardssiteboon/claudecodeui | 14k | — | ~2.6k | Automated safety check: Pass | AGPL-3.0 | |
| Dify Component Writing Guidelanggenius/dify | 158k | — | ~626 | Automated safety check: Pass | Custom licence | |
| React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase | 10k | 2 repos | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
- Official
Ink Tui Wizard
novuhq/novu
Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.
Frontend Module Standards
siteboon/claudecodeui
Enforces one repository's React and TypeScript module layout for code under src/: source-root imports, feature barrels, deliberate exports and no deep imports.
Dify Component Writing Guide
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
Formik Form Patterns
ChrisWiles/claude-code-showcase
Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.
More from shinpr/ai-coding-project-boilerplate
All 42 skills in this repoIntegration E2E Testing
shinpr/ai-coding-project-boilerplate
Selects and designs the smallest integration/E2E test set that proves accepted behavior at an observable boundary.
Skill Optimization
shinpr/ai-coding-project-boilerplate
Evaluates and optimizes skill file quality using 9 content patterns and 10 editing principles.
Frontend Technical Spec
shinpr/ai-coding-project-boilerplate
Defines React environment, component architecture, state/data flow, build verification, and frontend non-functional criteria from repository evidence.
Frontend Typescript Rules
shinpr/ai-coding-project-boilerplate
Applies React/TypeScript type safety, component design, and state management rules.
Implementation Approach
shinpr/ai-coding-project-boilerplate
Selects implementation strategy (vertical slice, horizontal, or hybrid) with risk assessment.
Subagents Orchestration Guide
shinpr/ai-coding-project-boilerplate
Coordinates subagents through scale-based planning, approval, implementation, verification, and escalation flows.
Related
Works with
Categories
Questions about Frontend Typescript Rules
What does Frontend Typescript Rules do?
应用 React/TypeScript 类型安全、组件设计与状态管理规则。用于实现 React 组件时使用. An agent skill from shinpr/ai-coding-project-boilerplate. Frontend Typescript Rules is an agent skill from shinpr/ai-coding-project-boilerplate.
When should I use Frontend Typescript Rules?
Frontend Typescript Rules fits situations like: frontend & Design work in your project.
How do I install Frontend Typescript Rules in Claude Code?
Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a claude-code`. Or copy the skill folder (.claude/skills-zh-CN/frontend-typescript-rules in shinpr/ai-coding-project-boilerplate) into .claude/skills/frontend-typescript-rules in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Typescript Rules in Codex?
Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a codex`. Or copy the skill folder (.claude/skills-zh-CN/frontend-typescript-rules in shinpr/ai-coding-project-boilerplate) into .agents/skills/frontend-typescript-rules in your project. Codex loads it when a task matches its description.
Can I use Frontend Typescript Rules in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-typescript-rules, .gemini/skills/frontend-typescript-rules, .github/skills/frontend-typescript-rules and .opencode/skills/frontend-typescript-rules in your project.
What does Frontend Typescript Rules need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Typescript Rules is instructions for the agent only.
Does Frontend Typescript Rules access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Typescript Rules safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frontend Typescript Rules use?
Frontend Typescript Rules is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Typescript Rules use?
About 891 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frontend Typescript Rules?
Skills that share tags, products or a category with Frontend Typescript Rules: Web Artifacts Builder (anthropics/skills, 180k stars), Ink Tui Wizard (novuhq/novu, 40k stars), Frontend Module Standards (siteboon/claudecodeui, 14k stars) and Dify Component Writing Guide (langgenius/dify, 158k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Typescript Rules?
shinpr (a GitHub user) maintains it in shinpr/ai-coding-project-boilerplate, which has 232 GitHub stars. The repository holds 42 skills in this directory. The repository was last updated on October 4, 2026.
Source: shinpr/ai-coding-project-boilerplate on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.