Menü
Use when building or restyling any page or component.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | apply-design-system |
| description | Use when building or restyling any page or component. |
Maintain visual consistency and premium aesthetics across the codebase:
Read DESIGN.md first:
bg-[#ab33ff]). Use Tailwind classes mapped to theme tokens (e.g. bg-primary, text-muted-foreground, border-border).Reuse Existing Primitives:
<Button> for triggers.<Card> for layouts.<FormField> for form inputs.<DataTable> for listing grids/rows.<Modal> for alerts and overlays.<StarRating> for review scores.useToast for user notices.Consistency & Feel:
transition-all duration-200 hover:scale-[1.01].p-6 or p-4 for containers, px-4 py-2 for buttons).Use when adding a brand-new CRUD resource beyond the core entity (e.g. a second model the PS requires).
Use when constructing forms, inputs, submit behaviors, validation displays, and feedback toast alerts.
Use when creating new Next.js route handlers using the custom helper wrapper.
Use whenever the Prisma schema changes and a migration is needed.
Use when integrating third-party APIs (e.g. SMTP emails, SMS notification gateways, payment checkout gates, or OCR parsers).
Use when adapting the template's placeholder Item entity to a hackathon problem statement's actual domain entity.