skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn

Standardizes shadcn/ui-inspired component rules with token-first monochrome design guidance.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design-system#shadcn#ui-guidelines#token-first#component states
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill shadcn-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/shadcn
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill shadcn-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides a consistent, implementation-ready set of shadcn/ui-inspired design rules so teams can produce predictable, accessible UI without guessing tokens or interaction behavior.

Core Features & Use Cases

  • Token-first styling: Defines typography, color, rounded corners, and spacing as foundation constraints to keep the UI visually coherent.
  • Accessible interaction behavior: Specifies WCAG 2.2 AA goals with keyboard-first patterns and explicit focus-visible requirements.
  • Engineering-friendly component guidance: Requires do/don’t rules, concrete defaults, component states/variants, and testable quality gates for review.

Quick Start

Ask an AI agent to generate shadcn-style component guidance and ensure it uses the provided Geist/Fira Code typography scale, monochrome tokens, and explicit focus-visible keyboard behavior.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I build accessible UI components that meet WCAG 2.2 AA standards?▼

To build accessible UI components meeting WCAG 2.2 AA standards, apply token-first constraints with keyboard-first patterns and explicit focus-visible state handling. This enforces consistent interaction behavior and testable quality gates across your design system.

What is a token-first design system for monochrome interfaces?▼

A token-first design system for monochrome interfaces defines typography, color, rounded corners, and spacing as foundation constraints. This keeps UI visually coherent by standardizing component rule authoring across common elements.

How do I standardize component states and variants for a design system?▼

You standardize component states and variants by applying explicit do/don't rules, concrete defaults, and testable quality gates. This requires defining focus-visible behavior and interactive states for common UI elements.

Can I use shadcn-style rules to generate accessible component guidance?▼

Yes, you can use shadcn-style rules to generate accessible component guidance by applying monochrome tokens, Geist or Fira Code typography scales, and explicit keyboard interaction behavior into your AI agent prompts.

Does token-first styling work for engineering-friendly UI component reviews?▼

Token-first styling works for engineering-friendly UI reviews by providing concrete defaults, do/don't rules, and testable quality gates. This ensures predictable, accessible interfaces without guessing interaction behavior.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
bergsidebergside
2.3k

flat

Generate token-based UI component guidelines with WCAG 2.2 AA accessibility rules.

Official
Intermediate
bergsidebergside
2.3k

sleek

Enforce minimalist design-system specs with WCAG 2.2 AA accessibility rules.

Official
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate