菜单
How to add and structure UI components in the GetBlitz interface. Use this when tasked with building frontend UI or components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
| 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.