Component Interface Design

This is a comprehensive guide for building UIs with shadcn/ui and Tailwind CSS. It enforces strict design constraints: two to three font weights max, 4px-based spacing, three shadow levels, and 200-300ms animations. The workflow pushes you to complete the visual interface before adding logic, which keeps designs clean and prevents the usual React mess of interleaved state and markup. Includes checklists for accessibility (ARIA labels, WCAG AA contrast, keyboard focus) and ready-to-use patterns for dashboards, forms, and data tables. The core philosophy prompt is useful if you want Claude to internalize the design system quickly. Best for teams that want enforced consistency rather than creative freedom.

skills.sh installs: 182
GitHub stars: 48
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add qodex-ai/ai-agent-skills --skill component-interface-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Shadcn UI Designer

Core Design Prompt

When designing any UI, apply this philosophy:

"Design a modern, clean UI following Shadcn principles: apply minimalism with ample white space and simple sans-serif typography; use strategic, subtle shadows for depth and hierarchy; ensure accessibility with high-contrast neutrals and scalable elements; provide beautiful defaults for buttons, cards, and forms that compose modularly; incorporate fluid, non-intrusive animations; maintain a professional palette of soft grays, whites, and minimal accents like purple; output as responsive, customizable React code with Tailwind CSS."

Design Rules

1. Typography Rule

Limit to 2-3 font weights and sizes per screen
Use Inter or system fonts for consistency

<h1 className="text-2xl font-semibold">Title</h1>
<p className="text-sm text-muted-foreground">Description</p>

2. Spacing Rule

4px-based scale: 4px, 8px, 16px, 24px, 32px
Tailwind utilities: p-1, p-2, p-4, p-6, p-8

<div className="p-6 space-y-4">
  <div className="mb-8">...</div>
</div>

SKILL.md on GitHub

Details

Repository: github.com/qodex-ai/ai-agent-skills
Categories: Frontend Development, AI & Agent Building, Design & UI/UX
First seen: Jun 3, 2026