shadcn-ui-conventions
UI Component Conventions
The components/ui directory uses different conventions from the rest of the project. It's excluded from Biome/Ultracite linting to preserve shadcn/ui patterns.
When to use this skill
- When creating new UI components
- When modifying existing shadcn/ui components
- When implementing 8-bit retro styling
- When working with component imports and types
Linting
- Biome excludes this directory:
biome.jsonchas"!components/ui"in the includes - No Ultracite formatting: Components use their own patterns
- Run lint manually when needed:
npx biome check components/ui/
Import Patterns
Base components (e.g., button.tsx):
More from theorcdev/8bitcn-ui
fumadocs-mdx-structure
Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.
162rendering-animate-svg
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
928-bit-pixel-art-patterns
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
88fumadocs-component-docs
Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and examples.
86fumadocs-registry-integration
Register 8-bit components in registry.json for shadcn/ui add command. Apply when adding new components to the component library distribution.
60retro-css-architecture
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
53