菜单
Redesign a page or component using the project design system components, CSS variables, and Tailwind utilities.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Implement a backlog story following the layer order (Domain, Database, API, Frontend, E2E) with TDD.
Review the backlog to determine what to work on next by checking epic and story statuses in docs/backlog/.
Automates pre-commit workflow: lint, test, review changes, then commit with conventional commit format.
Verify a story is complete by checking acceptance criteria, running all tests, and updating status.
Add end-to-end Playwright tests for a feature using data-testid selectors, with API and UI test patterns.
Add unit tests for domain logic, database adapters, API endpoints, or frontend components using Vitest patterns.
| name | redesign |
| description | Redesign a page or component using the project design system components, CSS variables, and Tailwind utilities. |
Available from @acme/design-system:
| Component | Usage |
|---|---|
| Button | Primary actions, variants: default, destructive, outline, secondary, ghost, link |
| Input | Text inputs with validation states |
| Label | Form field labels |
| Card | Content containers (CardHeader, CardTitle, CardContent, CardFooter) |
| FrostedPanel | Glass-morphism container for hero sections |
| Dialog | Modal dialogs with overlay |
| Toast | Notification system (default, destructive, success) |
| DropdownMenu | Action menus |
| PageSpinner | Loading states |
| EmptyState | Zero-data states with icon, title, description, action |
| ErrorAlert | Dismissible error messages |
| Skeleton | Loading placeholders |
The design system uses HSL CSS variables. See packages/frontend/src/styles/index.css for the full list:
--primary, --secondary, --destructive, --muted, --accent--background, --foreground, --card, --popover--border, --input, --ringdata-testid attributes for E2E testingpackages/frontend/src/routes/