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 环境、组件架构、状态/数据流、构建验证以及前端非功能性标准。用于配置或设计 React 前端及其构建、运行时边界时使用。
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-technical-spec -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-technical-spec --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-technical-spec .claude/skills/frontend-technical-spec && 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-technical-spec" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-technical-spec into .claude/skills/frontend-technical-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-technical-spec", 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-technical-specType 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-technical-spec -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-technical-spec --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-technical-spec .agents/skills/frontend-technical-spec && 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-technical-spec" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-technical-spec into .agents/skills/frontend-technical-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-technical-spec", 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-technical-spec -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-technical-spec --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-technical-spec .cursor/skills/frontend-technical-spec && 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-technical-spec" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-technical-spec into .cursor/skills/frontend-technical-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-technical-spec", 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-technical-spec--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-technical-spec -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-technical-spec --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-technical-spec .gemini/skills/frontend-technical-spec && 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-technical-spec" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-technical-spec into .gemini/skills/frontend-technical-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-technical-spec", 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-technical-specInstalls 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-technical-spec -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-technical-spec .github/skills/frontend-technical-spec && 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-technical-spec" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-technical-spec into .github/skills/frontend-technical-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-technical-spec", 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-technical-spec -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-technical-spec --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-technical-spec .opencode/skills/frontend-technical-spec && 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-technical-spec" agent skill from https://github.com/shinpr/ai-coding-project-boilerplate/tree/main/.claude/skills-zh-CN/frontend-technical-spec into .opencode/skills/frontend-technical-spec/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-technical-spec", 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.
frontend-technical-spec根据仓库依据定义 React 环境、组件架构、状态/数据流、构建验证以及前端非功能性标准。用于配置或设计 React 前端及其构建、运行时边界时使用。
Frontend Technical Spec is an agent skill from shinpr/ai-coding-project-boilerplate. 根据仓库依据定义 React 环境、组件架构、状态/数据流、构建验证以及前端非功能性标准。用于配置或设计 React 前端及其构建、运行时边界时使用。
Its SKILL.md is about 920 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 React and TypeScript. 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.
Read from SKILL.md and the folder at commit 56913a2. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
VITE_API_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Frontend Technical Spec loads about 917 tokens when it runs. Until then it costs about 25 tokens; SKILL.md has 162 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.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- 将本地 `.env` 文件排除在版本控制之外,并为所需的变量名提供不含机密信息的示例文件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.
The full file from shinpr/ai-coding-project-boilerplate at commit 56913a2, republished under its MIT licence (© shinpr). 162 words, ~917 tokens.
.claude/skills/frontend-technical-spec/SKILL.md (or your agent's skills folder).在应用工具或框架相关规则之前,先检查 package.json、锁文件、TypeScript/构建配置、CI 定义以及具有代表性的组件。只有当仓库依据明确指出时,才可将 React、Vite、Next.js、状态库、表单库或脚本视为可用。将基于周边模式得出的结论标注为推断结果。当某个缺失的决策会影响渲染架构、兼容性、安全性或验证方式时,停下来并指出所需的具体依据或用户决策。
以下规则适用于仓库配置已确认为基于 TypeScript 的 React 应用的情况。通过将当前需求与约束映射到组件职责、状态归属、服务端/客户端边界以及可观测的验证点来选择架构。
// 构建工具环境变量(仅限公开值;客户端暴露的变量需要 VITE_ 前缀)
const config = {
apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000',
appName: import.meta.env.VITE_APP_NAME || 'My App'
}
// 在前端中不可用
const apiUrl = process.env.API_URL.env 文件排除在版本控制之外,并为所需的变量名提供不含机密信息的示例文件处理机密信息的正确方式:
// 安全风险:API 密钥在浏览器中暴露
const apiKey = import.meta.env.VITE_API_KEY
const response = await fetch(`https://api.example.com/data?key=${apiKey}`)
// 正确做法:后端管理机密信息,前端通过代理访问
const response = await fetch('/api/data') // 后端负责处理 API 密钥认证React 组件架构:
按以下规则选择组件/状态模式:
状态管理模式:
useState 管理组件专属状态在整个 React 应用中保持一致的数据流:
单一数据源:每一份状态只有一个权威来源
单向流动:数据通过 props 自上而下流动
API Response -> State -> Props -> Render -> UI
User Input -> Event Handler -> State Update -> Re-render不可变更新:状态更新时使用不可变模式
// 不可变的状态更新
setUsers(prev => [...prev, newUser])
// 无效的可变状态更新
users.push(newUser)
setUsers(users)unknown)-> 类型守卫 -> State(类型有保证)// 类型安全的数据流
async function fetchUser(id: string): Promise<User> {
const response = await fetch(`/api/users/${id}`)
const data: unknown = await response.json()
if (!isUser(data)) {
throw new Error('Invalid user data')
}
return data // 类型已保证为 User
}按以下优先级从 packageManager 字段、锁文件或 CI 命令中确定包管理器。只执行所选清单文件中存在的脚本。
test - 运行测试实现完成后必须进行质量检查:
阶段 1-3:基础检查
check - Biome(lint + format)build - TypeScript 构建阶段过渡依据:所有已配置的 lint/format/type/build 检查均成功退出。缺失的必需脚本应连同其清单/配置路径一并报告,其余检查仍照常运行;该缺失的检查是否导致所需证明不可得,由 quality-fixer 的结果判定。
阶段 4-5:测试与最终确认
test - 执行测试check:all - 整体集成检查完成依据:已配置的测试全部通过,生产构建成功,且在测试修复后整体集成检查仍保持通过。将依赖特定环境的测试记录为受阻状态,并注明其确切的前提条件。
© shinpr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .claude/skills-zh-CN/frontend-technical-spec of shinpr/ai-coding-project-boilerplate.
Open the folder on GitHubat commit 56913a2
Frontend Technical Spec 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 Technical Spec this skillshinpr/ai-coding-project-boilerplate | 233 | — | ~917 | Automated safety check: Notes | 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 |
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.
novuhq/novu
Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.
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.
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
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.
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.
shinpr/ai-coding-project-boilerplate
Selects and designs the smallest integration/E2E test set that proves accepted behavior at an observable boundary.
shinpr/ai-coding-project-boilerplate
Evaluates and optimizes skill file quality using 9 content patterns and 10 editing principles.
shinpr/ai-coding-project-boilerplate
Defines React environment, component architecture, state/data flow, build verification, and frontend non-functional criteria from repository evidence.
shinpr/ai-coding-project-boilerplate
Applies React/TypeScript type safety, component design, and state management rules.
shinpr/ai-coding-project-boilerplate
Selects implementation strategy (vertical slice, horizontal, or hybrid) with risk assessment.
shinpr/ai-coding-project-boilerplate
Coordinates subagents through scale-based planning, approval, implementation, verification, and escalation flows.
Works with
Categories
根据仓库依据定义 React 环境、组件架构、状态/数据流、构建验证以及前端非功能性标准。用于配置或设计 React 前端及其构建、运行时边界时使用。. Frontend Technical Spec is an agent skill from shinpr/ai-coding-project-boilerplate.
Frontend Technical Spec fits situations like: frontend & Design work in your project.
Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-technical-spec -a claude-code`. Or copy the skill folder (.claude/skills-zh-CN/frontend-technical-spec in shinpr/ai-coding-project-boilerplate) into .claude/skills/frontend-technical-spec in your project. Claude Code loads it when a task matches its description.
Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-technical-spec -a codex`. Or copy the skill folder (.claude/skills-zh-CN/frontend-technical-spec in shinpr/ai-coding-project-boilerplate) into .agents/skills/frontend-technical-spec in your project. Codex loads it when a task matches its description.
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-technical-spec -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-technical-spec, .gemini/skills/frontend-technical-spec, .github/skills/frontend-technical-spec and .opencode/skills/frontend-technical-spec in your project.
Going by SKILL.md and its folder, Frontend Technical Spec needs credentials named VITE_API_KEY. Our summary lists: A credential in VITE_API_KEY.
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.
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
Frontend Technical Spec is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 917 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Frontend Technical Spec: 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.
shinpr (a GitHub user) maintains it in shinpr/ai-coding-project-boilerplate, which has 233 GitHub stars. The repository holds 41 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.