Menu
How to add and structure UI components in the GetBlitz interface. Use this when tasked with building frontend UI or components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
| 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.Based on SOC occupation classification
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.
