Menü
How to add and structure UI components in the GetBlitz interface. Use this when tasked with building frontend UI or components.
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.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Automates committing and pushing changes while ensuring a clean history of a single commit. Use when requested to commit and push changes, especially when pre-commit hooks or remote conflicts are expected.
How to create a new API backend service in the GetBlitz API using Dependency Injection. Use this when the user asks to implement or add a new backend service.
How to add or modify tRPC routes in the GetBlitz API. Use this when you need to expose a service through the API or create a new endpoint.
Basierend auf der SOC-Berufsklassifikation
| name | getblitz-ui-components |
| description | How to add and structure UI components in the GetBlitz interface. Use this when tasked with building frontend UI or components. |
This project uses Tailwind CSS v4 and a customized shadcn/ui library setup. Follow these rules when designing or adding components:
If the component is a standard UI element (like button, dialog, forms):
pnpm -F @getblitz/ui dlx shadcn@latest add [component]If the component is unique to the application:
packages/ui/src/components/.cn() utility for class merging.cva (class variance authority) for defining component variations (e.g., size, variant).packages/ui/src/index.ts.