菜单
Use when building or structuring a React/Next.js + TypeScript + Tailwind frontend, choosing libraries, or wiring design tokens. Provides the opinionated blessed-library stack and the React-vs-Next decision, all on-token to DESIGN.md and accessible to WCAG AA.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when building or structuring a Python backend on FastAPI + SQLAlchemy 2.0 (async) + Alembic + Pydantic v2. Provides the opinionated project layout, the standard kit (auth, async jobs, caching, storage, observability), and best practices.
Use near the end of a project to generate CI and make the app deploy-ready. Produces a polyglot GitHub Actions workflow (lint, typecheck, test, build) and multi-stage Dockerfiles. The finish line is CI-green and container-ready, not an actual deploy.
Use when starting a frontend or working on its look and feel, to establish and enforce a DESIGN.md-driven custom design system as the single source of truth for tokens, components, and icons. Make any generated UI (including 21st.dev Magic output) conform to DESIGN.md.
Use when setting up local development services or running the project locally. Establishes the "stateful services in Docker, app runs native" pattern with Postgres, Redis, MinIO, and Mailpit.
Use after the plan is signed off, to drive the autonomous, plan-gated build to completion. Orchestrates per-task implementation, review, and verification in customer-experience-first order, stopping only on genuine blockers.
Use at the very start of a new project to turn a rough idea or a draft brief into a refined, agreed project brief. Looks for a user-written draft; refines it by questioning if present, or runs an interactive intake interview to create it if absent.
| name | frontend-development |
| description | Use when building or structuring a React/Next.js + TypeScript + Tailwind frontend, choosing libraries, or wiring design tokens. Provides the opinionated blessed-library stack and the React-vs-Next decision, all on-token to DESIGN.md and accessible to WCAG AA. |
Announce at start: "I'm using claude-engineer:frontend-development to build the frontend on the blessed stack."
references/frontend-stack.md)| Need | Default |
|---|---|
| UI primitives | shadcn/ui (own the code) over Radix/Base UI |
| Styling | Tailwind CSS v4 (@theme) + cva + tailwind-merge + clsx |
| Server/data state | TanStack Query (or Next server components/actions) |
| Client state | Zustand |
| Forms + validation | react-hook-form + Zod |
| Routing (non-Next) | React Router (TanStack Router if TS-first) |
| Tables | TanStack Table |
| Charts | Recharts (via shadcn charts) |
| Animation | motion (ex-Framer Motion) |
| Icons | lucide-react (+ custom typed SVG icons) |
| Toasts / cmd palette / DnD / upload | Sonner / cmdk / dnd-kit / react-dropzone + presigned uploads |
@theme/CSS vars; no hardcoded values (claude-engineer:design-system).any escapes.claude-engineer:testing-and-quality).apps/, shared UI/config in packages/ (claude-engineer:monorepo-and-tooling).Full detail: read references/frontend-stack.md (project structure, exact versions, tsconfig strict flags, ESLint flat config, token wiring, a11y checklist) on demand.
docs/conventions.md.