메뉴
Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Git version control best practices: branching, commits, merging, conflict resolution, PR workflows. Use when managing branches, creating commits, merging code, or resolving conflicts.
Model selection strategy and routing. Use when choosing between models for different task types, subagent configurations, or optimizing token cost vs quality tradeoffs.
Security review skill: comprehensive security checklist and patterns. Use when adding authentication, handling user input, working with secrets, or creating API endpoints.
Extracts reusable patterns from sessions. Use at session end to capture debugging insights and project-specific knowledge.
Strategic compaction skill: suggests context compression at logical breakpoints. Use to suggest compaction at logical intervals during development sessions.
DevOps patterns: containerization, CI/CD, deployment strategies, monitoring. Use when containerizing apps, setting up pipelines, or deploying services.
| name | frontend |
| description | Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps. |
| allowed-tools | Read, Write, Edit, Bash, Grep, Glob |
本技能提供前端开发的最佳实践和模式，支持多框架按需加载。
package.json 按需加载）根据项目 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 | 可交互时间 |
详见 design-guide.md — AI 通用审美定义、设计思维方向矩阵、反模式清单与审查清单。
详见
rules/frontend/frontend-testing.md和rules/frontend/frontend-e2e.md（按文件类型自动加载）。
记住: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。