skills.rest
Anuar7777
Anuar7777COMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Organize actionable guidelines for implementing shadcn/ui components and design patterns.

Updated Aug 27, 2026
Search Tags:#theming#ui#frontend#components#design-system#shadcn#semantic-tokens
One-click install
npx skills add https://github.com/Anuar7777/wedding-crm --skill shadcn-anuar7777
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Anuar7777/wedding-crm/tree/main/.cursor/.skills/frontend/shadcn
Command: npx skills add https://github.com/Anuar7777/wedding-crm --skill shadcn-anuar7777

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates guidance and patterns for implementing shadcn/ui components and design system conventions, helping teams adopt a consistent UI and accelerate frontend work.

Core Features & Use Cases

  • Patterns for component composition, theming, and semantic tokens to maintain visual consistency across projects.
  • Documentation and usage guidance for common shadcn/ui primitives, including input controls, forms, overlays, and icons.
  • Guidelines for integrating shadcn/ui into new or existing projects, validating accessibility, and enforcing design-system rules at scale.

Quick Start

Align your project with the shadcn preset and implement core components using the included guidelines.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I standardize shadcn/ui component usage across multiple frontend teams?▼

Standardize shadcn/ui adoption by applying actionable guidelines for component composition, theming, and semantic tokens. This ensures consistent UI implementation, validates accessibility, and enforces design-system rules across projects.

What are semantic tokens and how do they work with shadcn theming?▼

Semantic tokens in shadcn theming map primitive color values to functional UI roles like background or foreground. They maintain visual consistency across projects by decoupling design decisions from hardcoded component styles.

Can I use shadcn/ui components with base primitives instead of Radix?▼

Yes, shadcn/ui supports design systems built with both Radix and base primitives. The guidelines cover integrating and composing components regardless of the underlying primitive layer to maintain accessibility.

How do I integrate shadcn/ui into an existing frontend project?▼

Integrate shadcn/ui by aligning your project with the preset configuration and applying the included component usage patterns. This workflow captures integration steps to support automated discovery and adoption.

What is the best way to enforce accessibility rules in a shadcn design system?▼

Enforce accessibility rules by validating shadcn/ui components against the consolidated design system guidelines. This approach captures recommended patterns for overlays and input controls to support validation workflows.

Related Skills

Explore More Software Engineering Skills→
Marcus-BoniMarcus-Boni
1

shadcn

Manage shadcn components and project configurations via CLI.

Community
Advanced
hopeoverturehopeoverture
6

ui-library-usage-auditor

Audit shadcn/ui component usage for accessibility and design-system conformance.

Community
Advanced
broomvabroomva
3

arcan-glass

Implement glassmorphism and dark-first themes with OKLCh tokens for Next.js and Tailwind CSS v4.

Community
Intermediate
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced