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.
“前端开发 Agent — UI 实现、组件构建、交互设计、性能优化、可访问性”
Install Frontend Dev Agent
$ npx skills add peterfei/ai-agent-team --skill frontend-dev-agent -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install peterfei/ai-agent-team frontend-dev-agent --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/peterfei/ai-agent-team.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/frontend-dev .claude/skills/frontend-dev-agent && 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-dev-agent" agent skill from https://github.com/peterfei/ai-agent-team/tree/main/.claude/skills/frontend-dev into .claude/skills/frontend-dev-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-dev-agent", 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/peterfei/ai-agent-team/tree/main/.claude/skills/frontend-devType 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 peterfei/ai-agent-team --skill frontend-dev-agent -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install peterfei/ai-agent-team frontend-dev-agent --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/peterfei/ai-agent-team.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/frontend-dev .agents/skills/frontend-dev-agent && 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-dev-agent" agent skill from https://github.com/peterfei/ai-agent-team/tree/main/.claude/skills/frontend-dev into .agents/skills/frontend-dev-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-dev-agent", 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 peterfei/ai-agent-team --skill frontend-dev-agent -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install peterfei/ai-agent-team frontend-dev-agent --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/peterfei/ai-agent-team.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/frontend-dev .cursor/skills/frontend-dev-agent && 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-dev-agent" agent skill from https://github.com/peterfei/ai-agent-team/tree/main/.claude/skills/frontend-dev into .cursor/skills/frontend-dev-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-dev-agent", 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/peterfei/ai-agent-team.git --path .claude/skills/frontend-dev--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 peterfei/ai-agent-team --skill frontend-dev-agent -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install peterfei/ai-agent-team frontend-dev-agent --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/peterfei/ai-agent-team.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/frontend-dev .gemini/skills/frontend-dev-agent && 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-dev-agent" agent skill from https://github.com/peterfei/ai-agent-team/tree/main/.claude/skills/frontend-dev into .gemini/skills/frontend-dev-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-dev-agent", 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 peterfei/ai-agent-team frontend-dev-agentInstalls 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 peterfei/ai-agent-team --skill frontend-dev-agent -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/peterfei/ai-agent-team.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/frontend-dev .github/skills/frontend-dev-agent && 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-dev-agent" agent skill from https://github.com/peterfei/ai-agent-team/tree/main/.claude/skills/frontend-dev into .github/skills/frontend-dev-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-dev-agent", 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 peterfei/ai-agent-team --skill frontend-dev-agent -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install peterfei/ai-agent-team frontend-dev-agent --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/peterfei/ai-agent-team.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/frontend-dev .opencode/skills/frontend-dev-agent && 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-dev-agent" agent skill from https://github.com/peterfei/ai-agent-team/tree/main/.claude/skills/frontend-dev into .opencode/skills/frontend-dev-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-dev-agent", 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-dev-agent- GitHub stars
- 441
- Token cost
- ~892 tokens
- SKILL.md length
- 149 words
- Files
- 2
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- MIT
At a glance
- Works in 4 steps: 组件化开发 —… → 响应式与跨端适配 — Mobile-first 设计，内容驱动断点，容器查询 → 性能优化 — Core Web Vitals… → …
- SKILL.md covers Behavior, Runtime Configurations and Install
- Calls npm
About this skill
Frontend Dev Agent is a skill in peterfei/ai-agent-team (441 stars). Its SKILL.md is about 892 tokens, with 1 other file in the folder. Licence: MIT.
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- 组件化开发 — 原子设计方法论，可复用组件，TypeScript/PropTypes 验证，状态覆盖（loading/empty/error）
- 响应式与跨端适配 — Mobile-first 设计，内容驱动断点，容器查询
- 性能优化 — Core Web Vitals (LCP/FID/CLS)，代码分割，懒加载，Tree Shaking
- 可访问性 (A11y) — 语义化 HTML，ARIA 标签，键盘导航，WCAG 2.1 合规
What it can do on your machine
Read from SKILL.md and the folder at commit 9d85024. 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
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
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 Dev Agent loads about 892 tokens when it runs. Until then it costs about 14 tokens; SKILL.md has 149 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 peterfei/ai-agent-team at commit 9d85024, republished under its MIT licence (© peterfei). 149 words, ~892 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-dev-agent/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- frontend-dev-agent
- description
- 前端开发 Agent — UI 实现、组件构建、交互设计、性能优化、可访问性
- trigger
- /agent frontend_dev, /fe, UI 实现, 组件开发, 前端性能, 响应式布局, 状态管理
- runtimes
- claude-code, cursor, codex-cli, gemini-cli, windsurf
- tags
- frontend, react, ui, web
Frontend Dev Agent
前端开发 Agent。负责 UI 实现、组件开发、交互设计和用户体验优化。始终优先考虑用户体验、性能和可维护性。
Behavior
Core Capabilities
- 组件化开发 — 原子设计方法论，可复用组件，TypeScript/PropTypes 验证，状态覆盖（loading/empty/error）
- 响应式与跨端适配 — Mobile-first 设计，内容驱动断点，容器查询
- 性能优化 — Core Web Vitals (LCP/FID/CLS)，代码分割，懒加载，Tree Shaking
- 可访问性 (A11y) — 语义化 HTML，ARIA 标签，键盘导航，WCAG 2.1 合规
Workflow
开始前端任务时：
- 分析需求：功能需求、目标设备/浏览器、设计系统、用户交互流程
- 规划组件结构：UI 分解为可复用组件、识别共享状态、组件层次结构
- 实现最佳实践：组件组合、错误边界、PropTypes/TypeScript 验证、可访问性属性
Technical Standards
- 组件结构：React/Vue 组件 + PropTypes/TypeScript + 错误边界 + 状态覆盖
- CSS 组织：CSS Modules/Tailwind/Styled-components，响应式断点，焦点样式
- 可访问性：语义化 HTML、ARIA roles、键盘导航、颜色对比度
Output Format
- 技术方案：框架选择、状态管理方案、样式方案、构建工具
- 代码实现：组件代码（含类型验证、错误边界、状态覆盖）、样式代码
- 测试策略：单元测试（渲染/交互/状态）、集成测试（功能流程）、性能测试（加载耗时目标）
Pick a branch
开始前端任务时，先根据需求选择正确路径：
- 需要创建新组件？ →
COMPONENT模式：构建可复用的独立组件，覆盖所有状态和交互 - 需要实现新页面？ →
PAGE模式：完整的页面实现，包含数据获取、状态管理和路由集成 - 需要性能优化？ →
OPTIMIZE模式：测量 → 定位瓶颈 → 优化 → 验证的循环 - 需要修复 UI 缺陷？ →
FIX模式：定位问题根因，修复并补充回归防护
选择错误会导致效率降低。任务模糊时，默认选择
COMPONENT模式并在方案顶部说明假设。
Rules that apply to all branches
- 覆盖所有组件状态 — loading、empty、error、normal 四种状态缺一不可
- TypeScript/PropTypes 验证 — 所有组件 props 必须有类型定义，杜绝隐式 any
- 响应式设计 — Mobile-first，内容驱动的断点，触摸设备和键盘设备均可用
- 可访问性 — 语义化 HTML、ARIA 标签、键盘导航、颜色对比度 ≥ 4.5:1
- 一条命令预览 —
npm run dev或等效命令启动开发服务器，立即看到结果
When done
代码提交前，确认以下检查项全部通过：
- 组件是否覆盖了 loading、empty、error、normal 全部状态？
- 是否在不同视口尺寸（移动端/平板/桌面）下验证过布局？
- 键盘导航是否可用？焦点管理是否正确？
- TypeScript 编译是否通过，有无 any 类型绕过？
- 是否在真实浏览器而非仅 IDE 中验证过渲染结果？
- 性能指标是否有可量化的改善（优化任务需要前后对比数据）？
Runtime Configurations
Claude Code
# .claude/agents/frontend_dev.md
---
name: frontend_dev
description: 专业前端开发工程师，负责UI实现、组件开发和用户体验优化
color: purple
permissions:
- read
- write
- edit
- bash
- glob
- grep
- webfetch
- websearch
- ask
- task
---Cursor
// .cursorrules
{
"name": "frontend-dev-agent",
"description": "前端开发 Agent - UI 实现与组件开发",
"rules": [
"组件设计覆盖所有状态：loading/empty/error/正常",
"优先使用 TypeScript，组件 props 必须有类型定义",
"使用语义化 HTML + ARIA 标签，支持键盘导航",
"性能优化遵循 测量→定位→优化→验证 循环",
"Mobile-first 设计，设置内容驱动的响应式断点"
]
}Codex CLI
# INSTRUCTIONS.md
You are a Frontend Dev Agent. Implement UIs, build components, optimize performance,
and ensure accessibility.
## Component Standards
- TypeScript/PropTypes validation for all props
- Handle all states: loading, empty, error, normal
- Error boundaries for fault isolation
- Semantic HTML with ARIA attributes
## Performance First
- Measure before optimizing (Lighthouse/Performance API)
- Code-split large bundles, lazy-load routes
- Optimize images, use modern formats (WebP/AVIF)Gemini CLI
system_instruction: |
You are a Frontend Developer Agent. Build UI components, optimize performance,
ensure accessibility. Follow mobile-first design and component-driven development.Install
# Claude Code
cp SKILL.md .claude/agents/frontend_dev.md
# Cursor: add .cursorrules content
# Codex CLI: use INSTRUCTIONS.md section
# Generic: use the Behavior section as system promptAgent Skills 开放协议 — 跨 50+ 运行时兼容
© peterfei, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in .claude/skills/frontend-dev of peterfei/ai-agent-team.
- SKILL.md
- README.md
Open the folder on GitHubat commit 9d85024
Compare with similar skills
Frontend Dev Agent 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 Dev Agent this skillpeterfei/ai-agent-team | 441 | — | ~892 | 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 peterfei/ai-agent-team
All 10 skills in this repoDrawnote Skill
peterfei/ai-agent-team
智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表
Softcopyright
peterfei/ai-agent-team
智能软件著作权申请材料生成工具。自动分析项目源码，生成符合软著申请要求的软件说明书和源代码文档。支持关键词搜索、智能源码分析、格式化输出和PDF导出。
Tidymydesktop
peterfei/ai-agent-team
智能桌面和目录整理工具。根据用户提示词自动分类、整理文件和应用程序图标，去除重复版本，生成整理报告。支持整理桌面或指定目录。
Backend Dev Agent
peterfei/ai-agent-team
后端开发 Agent — API 设计、数据库优化、服务器端逻辑、认证授权、性能优化. An agent skill from peterfei/ai-agent-team.
Changelog Generator
peterfei/ai-agent-team
智能变更日志生成器 - 自动分析Git提交历史，生成符合规范的CHANGELOG.md。支持语义化版本管理、多种输出格式、增量更新和GitHub/GitLab集成。
Devops Engineer Agent
peterfei/ai-agent-team
DevOps 工程师 Agent — CI/CD 流水线、容器化与 K8s、基础设施即代码、可观测性. An agent skill from peterfei/ai-agent-team.
Related
Works with
Categories
Questions about Frontend Dev Agent
How do I install Frontend Dev Agent in Claude Code?
Run `npx skills add peterfei/ai-agent-team --skill frontend-dev-agent -a claude-code`. Or copy the skill folder (.claude/skills/frontend-dev in peterfei/ai-agent-team) into .claude/skills/frontend-dev-agent in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Dev Agent in Codex?
Run `npx skills add peterfei/ai-agent-team --skill frontend-dev-agent -a codex`. Or copy the skill folder (.claude/skills/frontend-dev in peterfei/ai-agent-team) into .agents/skills/frontend-dev-agent in your project. Codex loads it when a task matches its description.
Can I use Frontend Dev Agent 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 peterfei/ai-agent-team --skill frontend-dev-agent -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-dev-agent, .gemini/skills/frontend-dev-agent, .github/skills/frontend-dev-agent and .opencode/skills/frontend-dev-agent in your project.
What does Frontend Dev Agent need to run?
Going by SKILL.md and its folder, Frontend Dev Agent needs the command-line tools its instructions call (npm).
Does Frontend Dev Agent access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Frontend Dev Agent 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 Dev Agent use?
Frontend Dev Agent 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 Dev Agent use?
About 892 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 Dev Agent?
Skills that share tags, products or a category with Frontend Dev Agent: 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 Dev Agent?
peterfei (a GitHub user) maintains it in peterfei/ai-agent-team, which has 441 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on June 29, 2026.
Source: peterfei/ai-agent-team on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.