Agent skill
frontend
Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/frontend
SKILL.md
前端开发模式
本技能提供前端开发的最佳实践和模式，支持多框架按需加载。
快速参考
- 核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
- 框架支持: Vue 3 / React 18 / Svelte / Angular 17+（根据
package.json按需加载） - 性能目标: LCP < 2.5s, FID < 100ms, CLS < 0.1, TTI < 3.8s
- 设计原则: 单一职责、Props 向下、Events 向上、组合优于继承
触发条件
- 创建或修改前端组件
- 设计 UI/UX 交互
- 实现状态管理
- 性能优化
- 无障碍开发
框架专属模式
根据项目 package.json 依赖加载对应文件：
| 技术栈 | 加载文件 | 框架 |
|---|---|---|
| Vue | vue.md |
Vue 3, Nuxt 3 |
| React | react.md |
React 18, Next.js |
| Svelte | svelte.md |
Svelte, SvelteKit |
| Angular | angular.md |
Angular 17+ |
子文件索引
| 文件 | 内容 |
|---|---|
| vue.md | Vue 3 + Composition API 模式 |
| react.md | React 18 + Hooks 模式 |
| svelte.md | Svelte/SvelteKit 模式 |
| angular.md | Angular 17+ 模式 |
| performance.md | Core Web Vitals 优化 |
| tailwind.md | Tailwind 最佳实践 + v4 迁移 |
| design-guide.md | 设计方法论与审查清单 |
| patterns.md | 通用组件/状态管理/表单/动画/a11y 模式 |
性能指标
| 指标 | 目标 | 说明 |
|---|---|---|
| LCP | < 2.5s | 最大内容绘制 |
| FID | < 100ms | 首次输入延迟 |
| CLS | < 0.1 | 累积布局偏移 |
| TTI | < 3.8s | 可交互时间 |
设计美学（避免 AI Slop）
详见 design-guide.md — AI 通用审美定义、设计思维方向矩阵、反模式清单与审查清单。
测试模式
详见
rules/frontend/frontend-testing.md和rules/frontend/frontend-e2e.md（按文件类型自动加载）。
记住: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?