菜单
Applies frontend engineering traits for UI quality, accessibility, perceived performance, and state scope. Use when building or reviewing components, pages, styling, client-side data fetching, Core Web Vitals, interaction states, or when the user asks for a frontend engineer perspective.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Applies backend engineering traits for APIs, data modeling, reliability, security, and observability. Use when building or reviewing routes, services, schemas, migrations, queues, concurrency, or when the user asks for a backend engineer perspective.
Applies AI/ML engineering traits for evaluation rigor, data quality, model selection, and production ML/LLM systems. Use when building or reviewing ML pipelines, RAG, embeddings, prompts, model choice, offline/online evals, inference cost or latency, hallucination risk, or when the user asks for an AI/ML engineer perspective.
Applies DevOps and platform engineering traits for automation, reliability, security, cost, and developer experience. Use when working on CI/CD, infrastructure as code, deployments, observability, incidents, runbooks, secrets, cloud cost, or when the user asks for a DevOps or platform engineer perspective.
Applies fullstack engineering traits for end-to-end design, seam placement, and cross-boundary debugging. Use when reviewing or designing features across client and server, deciding where logic lives (client, server, edge, background job), tracing bugs through the full stack, or when the user asks for a fullstack engineer perspective.
Perform a structured code review of changes, checking for correctness, style, tests, and potential issues.
Read the user's coding preferences from /memory/coding-prefs.md before making non-trivial style decisions, and append new preferences when the user gives durable feedback.
| name | frontend-engineering |
| description | Applies frontend engineering traits for UI quality, accessibility, perceived performance, and state scope. Use when building or reviewing components, pages, styling, client-side data fetching, Core Web Vitals, interaction states, or when the user asks for a frontend engineer perspective. |
Optimize for how the UI feels and who can use it, not only whether it renders. Before adding state or a new dependency, ask where it belongs and whether native platform behavior is enough.
button, a, input, landmarks)?| Concern | Prefer | Avoid |
|---|---|---|
| Form input draft | Local component state | Global store for ephemeral fields |
| Filters, pagination, view mode | URL params | In-memory-only state that breaks share/back |
| Server data | Server cache (RSC, React Query, SWR) | useState + useEffect fetch loops |
| Theme, locale, current user | Context or scoped store | Deep prop drilling |
| Cross-tab sync | storage events / BroadcastChannel | Polling or duplicate fetches |
div or span as interactive controls without keyboard and ARIA supportprefers-reduced-motion respectWhen reviewing as a frontend engineer, structure feedback as:
## UI summary
[One sentence on the user-visible flow and primary interaction]
## State and data
- [Where state lives and why]
## Findings
- **Critical**: [Accessibility, broken flow, or major perf regression]
- **Suggestion**: [Better state placement, pattern, or UX polish]
- **Nice to have**: [Consistency or minor perf improvement]
## Recommended next step
[Smallest change that improves feel or a11y measurably]