skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Generate Shadcn/ui-inspired design-system rules with WCAG 2.2 AA accessibility criteria.

1|Updated Jul 9, 2026
Search Tags:#accessibility#design-system#shadcn#design-tokens#component-states#ui-guidelines#qa-checklist
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill shadcn-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/shadcn
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill shadcn-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates inconsistent Shadcn-inspired design decisions by providing implementation-ready, token-anchored UI rules and accessibility expectations.

Core Features & Use Cases

  • Token-driven foundations: Defines monochrome colors, Geist/Fira Code typography, and a consistent spacing/rounding system to prevent drift across components.
  • Component-ready guidance: Specifies how to document anatomy, variants, states (default/hover/focus-visible/active/disabled/loading/error), responsive behavior, and edge cases.
  • Accessible, testable outcomes: Enforces WCAG 2.2 AA, visible focus states, keyboard-first interaction rules, and QA checklist criteria for reviewability.
  • Use case: When you’re building a new feature in a React/TypeScript app, use the guidance to align button, input, and layout components with Shadcn-style design while staying accessible and consistent.

Quick Start

Ask for a complete component rule set for your target UI element using the shadcn foundations and required output structure.

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 states and design tokens?▼

Generate Shadcn UI rules to standardize design tokens, typography, and spacing, preventing visual drift. This provides implementation-ready guidance for consistent component states like default, hover, and focus-visible.

How do I ensure my React UI components meet WCAG 2.2 AA accessibility guidelines?▼

Apply structured UI guidelines enforcing WCAG 2.2 AA alignment, visible focus states, and keyboard-first interaction rules to ensure React component accessibility, generating a testable QA checklist for reviewability.

What is the best way to document component anatomy and variants for a UI design system?▼

Document component anatomy, variants, and interaction states using token-anchored UI guidelines. This approach provides structured output rules specifying responsive behavior and edge case handling for design system authoring.

Can I use semantic design tokens to prevent style drift in a TypeScript app?▼

Yes, mandate semantic token usage to prevent style drift in a TypeScript app by applying Shadcn-inspired foundations. These rules define consistent monochrome colors, spacing, and typography systems for UI libraries.

Does this design system guidance include acceptance criteria for component implementation review?▼

Yes, the design system guidance includes testable acceptance criteria and QA checklist steps for implementation review. This ensures consistent component behavior across common interaction states like loading, disabled, and error.

Related Skills

Explore More Design & Creative Skills→
adbertramadbertram

prowler-ui

Enforce Prowler UI component structure and styling with shadcn/ui and Tailwind.

Community
Intermediate
richtaborrichtabor
69

accessibility-review

Identify accessibility issues in UI components against WCAG 2.1/2.2 Level AA.

Community
Intermediate
indykishindykish
2

frontend-design

Plan and implement accessible React and TypeScript frontend interfaces with token-based theming.

Community
Advanced
guideopsguideops

fiction

Provide playful storybook-inspired UI design foundations with typography, color, and spacing scales.

Community
Intermediate