skills.rest
zaid-khan-code
zaid-khan-codeCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-ui-conventions

Standardize shadcn/ui component implementation with Radix primitives and React 19 ref patterns.

3|2|Updated Mar 25, 2026
Search Tags:#components#shadcn/ui#biome#tailwind#react-19#8bit#ref-handling
One-click install
npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill shadcn-ui-conventions-zaid-khan-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui-conventions
Source: https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms/tree/main/.agents/skills/shadcn-ui-conventions
Command: npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill shadcn-ui-conventions-zaid-khan-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes guesswork when building or updating shadcn/ui components by preserving the project's required structure, import order, typing patterns, and React 19 ref behavior.

Core Features & Use Cases

  • Base component guidance for Radix-based UI files, cva variants, and cn usage.
  • 8-bit wrapper guidance for retro-styled components, including stylesheet imports and base-component composition.
  • Lint and formatting exceptions for components/ui so shadcn patterns remain intact while still supporting manual checks.
  • Use it when adding a new dialog, button, or other reusable component that must follow the repository's conventions.

Quick Start

Apply the shadcn-ui-conventions skill to a new or existing components/ui file and align its imports, typing, and ref handling with the repository's expected pattern.

Frequently Asked Questions about shadcn-ui-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure shadcn/ui components to support React 19 ref handling?▼

Structure shadcn/ui components by applying React 19 ref patterns alongside Radix primitives and class-variance-authority variants. This ensures proper ref forwarding and consistent typing across your reusable UI component files.

Can I use Biome for linting and formatting inside the components/ui directory?▼

Yes, Biome supports lint and formatting exceptions for the components/ui directory. This preserves required shadcn/ui patterns intact while still allowing manual checks elsewhere in your project.

What's the best way to build 8-bit retro styled variants of shadcn/ui components?▼

Build 8-bit retro variants by creating wrapper components that compose base shadcn/ui elements and import dedicated retro stylesheets. This approach keeps base Radix structure intact while applying themed styling.

Do I need class-variance-authority to manage styling for shadcn/ui components?▼

Yes, class-variance-authority is required to manage cva variants for shadcn/ui components. Combined with cn utilities, it standardizes conditional class application across base and 8-bit wrapper variants.

How do I standardize import ordering when refactoring reusable UI components?▼

Standardize import ordering by aligning new or existing components/ui files with the repository's expected pattern. This enforces consistent import structure for Radix primitives, cva variants, and cn utilities.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
TheOrcDevTheOrcDev
2.0k

registry-component-patterns

Register 8-bit components in registry.json for shadcn/ui add workflows.

Community
Basic
kimjuyoung1127kimjuyoung1127

dangapp-cva-factory

Build reusable UI primitives with class-variance-authority and a shared cn() merge path.

Community
Intermediate
bklitbklit
1.5k

shadcn

Manage shadcn/ui component lifecycle and configuration in React projects.

Official
Advanced