skills.rest
MichaelFrieze
MichaelFriezeCOMMUNITY
Explore all skills by this author →
Website𝕏@MichaelFriezeGitHub

shadcn

Enforce shadcn/ui composition, styling, and accessibility rules in React projects.

Updated Aug 27, 2026
Search Tags:#accessibility#shadcn/ui#form-validation#component-composition#tailwind-themes#base-vs-radix
One-click install
npx skills add https://github.com/MichaelFrieze/riffatlas --skill shadcn-michaelfrieze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/MichaelFrieze/riffatlas/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/MichaelFrieze/riffatlas --skill shadcn-michaelfrieze

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents inconsistent shadcn/ui usage by enforcing reliable component composition, styling, form patterns, and accessibility conventions.

Core Features & Use Cases

  • Component installation and project-aware guidance: Works with shadcn/ui CLI context and component registries to recommend what to add, update, or document.
  • Deterministic UI composition rules: Enforces correct structure for forms, overlays (Dialog/Sheet/Drawer), Cards, Tabs, Avatars, and grouped items.
  • Styling and theming consistency: Directs users to use semantic tokens, gap/size/truncate conventions, and safe dark mode behavior without manual dark overrides.
  • Base vs Radix API correctness: Handles API differences (e.g., asChild vs render, ToggleGroup prop differences, Select items prop requirements).

Quick Start

Ask the assistant: "Create a shadcn/ui settings form using FieldGroup and Field with ToggleGroup notification preferences, ensuring data-invalid/aria-invalid validation and gap-* spacing, then show the component code."

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I ensure consistent shadcn/ui component composition and styling across my React project?▼

Consistent shadcn/ui component composition is maintained by enforcing deterministic rules for forms, overlays, dialogs, and cards, while directing styling through semantic tokens and gap/size conventions rather than manual overrides.

What is the correct way to handle form validation and accessibility when building shadcn/ui forms?▼

Form validation and accessibility in shadcn/ui require using data-invalid and aria-invalid attributes within structured Field and FieldGroup components to ensure proper validation feedback and accessible user interactions.

How do I resolve API differences between Base and Radix when using shadcn/ui components like ToggleGroup?▼

Base vs Radix API differences in shadcn/ui are resolved by enforcing correct prop usage, such as handling asChild vs render patterns and addressing specific ToggleGroup and Select items prop requirements.

Does shadcn/ui support safe dark mode behavior without manual dark class overrides?▼

Safe dark mode behavior in shadcn/ui is achieved by utilizing semantic styling tokens instead of writing manual dark overrides, ensuring theme consistency across components automatically.

How do I add and manage shadcn/ui components using the CLI while maintaining project context?▼

Adding shadcn/ui components via the CLI is supported through project context awareness, which recommends what to add, update, or document based on your specific component registries and workflow.

What is the best way to structure shadcn/ui overlays like Dialog, Sheet, and Drawer to prevent composition errors?▼

Structuring shadcn/ui overlays correctly involves following deterministic composition rules that enforce the correct component hierarchy for Dialog, Sheet, and Drawer elements to prevent runtime errors and layout shifts.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

design-system

Define visual tokens, semantic themes, and component structures for design systems.

Community
Advanced
quanngynxquanngynx

shadcn

Enforce shadcn/ui component composition, styling, and accessibility rules.

Community
Advanced
tiantangcao1980-webtiantangcao1980-web
4

mui-base

Integrate headless MUI primitives into custom React design systems.

Community
Intermediate