skills.rest
angelgarciasolorzano
angelgarciasolorzanoCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Generate design system guidelines for Shadcn UI components with WCAG 2.2 AA compliance.

Updated Sep 25, 2025
Search Tags:#accessibility#design system#ui design#Shadcn#component guidelines
One-click install
npx skills add https://github.com/angelgarciasolorzano/social-hub --skill shadcn-angelgarciasolorzano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/angelgarciasolorzano/social-hub/tree/main/.windsurf/skills/design-system
Command: npx skills add https://github.com/angelgarciasolorzano/social-hub --skill shadcn-angelgarciasolorzano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill generates comprehensive design guidelines for Shadcn's minimal UI system, providing clear, actionable rules for developers and designers.

Core Features & Use Cases

  • Design Tokens and Foundations: Defines color palettes, typography scales, and spacing to maintain consistency across components.
  • Component-Level Rules: Specifies the anatomy, states, variants, and interaction behavior for each component.
  • Accessibility Compliance: Ensures guidelines meet WCAG 2.2 AA standards for accessibility.
  • Content and Tone Standards: Offers guidelines for writing concise, helpful content with a professional tone.
  • Use Case: For a developer creating a new component for the Shadcn system, this Skill provides the foundational rules to ensure design consistency and accessibility.

Quick Start

Run the skill to generate design guidelines for a new component following the Shadcn design system.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I create design guidelines for Shadcn UI components?▼

Shadcn UI component guidelines define anatomy, states, variants, and interaction behavior to maintain visual consistency across your minimal UI design system.

What are the accessibility requirements for a Shadcn UI design system?▼

Shadcn UI design systems require WCAG 2.2 AA compliance, ensuring all component-level guidelines meet strict accessibility standards for users interacting with the framework.

How do I define design tokens for a minimal UI system?▼

Defining design tokens for a minimal UI system involves establishing foundational color palettes, typography scales, and spacing rules that dictate consistent component styling.

Does the Shadcn design system include content and writing standards?▼

Yes, the Shadcn design system includes content and tone standards that offer guidelines for writing concise, helpful content with a professional tone across UI components.

Can I use this to generate rules for a new component in an existing design system?▼

Yes, you can generate foundational rules for a new component in an existing design system, ensuring the new element follows established visual style and accessibility compliance.

Related Skills

Explore More Design & Creative Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
superpollo02superpollo02

skeumorphism

Generate skeumorphic design-system UI guidelines with WCAG 2.2 AA compliance.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
MadAppGangMadAppGang
7

design-references

Provide design system references for UI review tasks.

Official
Basic