القائمة
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/