skills.rest
ethan-krich
ethan-krichCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Generate preset-aligned shadcn/ui React components with Tailwind semantic tokens.

7|1|Updated May 16, 2026
Search Tags:#accessibility#shadcn/ui#form validation#component composition#tailwind semantic tokens#preset workflow
One-click install
npx skills add https://github.com/ethan-krich/plannar --skill shadcn-ethan-krich
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/ethan-krich/plannar/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/ethan-krich/plannar --skill shadcn-ethan-krich

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents UI build mistakes and inconsistent styling by guiding how to structure shadcn/ui components, apply presets, and compose correct forms, overlays, icons, and Tailwind usage.

Core Features & Use Cases

  • Preset-aware shadcn workflows: Helps decide when to apply, merge, overwrite, or skip preset changes and ensures you use the CLI safely for project-aware operations.
  • Correct component composition & rules: Enforces best-practice structure for shadcn primitives (e.g., FieldGroup/Field for forms, Dialog titles for accessibility, TabsTrigger inside TabsList, proper icon usage with data-icon).
  • Project context + docs-driven updates: Uses injected project config context and directs you to fetch component docs/examples before implementing or troubleshooting.

Quick Start

Ask the AI: Create a shadcn/ui settings page component with FieldGroup and Field, ToggleGroup options, proper validation using data-invalid and aria-invalid, and semantic colors that match the project's current preset.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I structure accessible shadcn/ui form components correctly?▼

Use FieldGroup and Field wrappers to structure shadcn/ui forms, applying data-invalid and aria-invalid attributes for validation states. This enforces best-practice composition and prevents UI build mistakes by aligning with strict component rules.

How do I manage shadcn/ui presets safely without breaking styling?▼

Manage shadcn/ui presets safely by using the CLI for project-aware operations to apply, merge, overwrite, or skip changes. This enforces Tailwind semantic tokens and prevents inconsistent styling during preset updates.

Why does my shadcn/ui Dialog component fail accessibility checks?▼

Your shadcn/ui Dialog fails accessibility checks because it requires a Dialog title component to meet strict accessibility standards. This enforces correct base-vs-radix prop usage and ensures overlays meet required API constraints.

What is the correct way to compose shadcn/ui tabs and icons?▼

Compose shadcn/ui tabs by nesting TabsTrigger inside TabsList and use proper icon usage with data-icon attributes. This enforces best-practice structure for primitives and prevents component composition errors.

Do I need to fetch component docs before implementing shadcn/ui updates?▼

You need to fetch component docs and examples before implementing or troubleshooting shadcn/ui updates. This docs-driven approach uses injected project context from components.json to ensure correct, preset-aligned React code generation.

Related Skills

Explore More Software Engineering Skills→
sumik5sumik5
2

using-shadcn

Manage shadcn/ui components in React/Next.js projects via components.json.

Community
Intermediate
laymouna7laymouna7

shadcn

Manage shadcn/ui component installation, configuration, and design system adherence.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-syntax-field

Validate shadcn ui Field primitive accessibility and validation wiring.

Official
Advanced
mohamed-g-shoaibmohamed-g-shoaib

coss

Implement coss UI primitives in React with Tailwind styling and accessibility.

Community
Intermediate