メニュー
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/