skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

design_components

Defines sizing, spacing, and state standards for UI components like buttons, cards, inputs, and icons.

Updated Jan 14, 2026
Search Tags:#accessibility#design system#atomic design#tailwind#ui components#spacing#button sizes
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill design-components-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design_components
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/design_components
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill design-components-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent component sizing and styling across a web interface leads to visual chaos and maintenance overhead. This Skill provides concrete sizing rules, state styles, and spacing standards for core UI components so teams build consistent interfaces. ## Core Features & Use Cases - Component Sizing Standards: Predefined dimensions for buttons (32px to 56px heights), cards (16-32px padding), inputs, and icons aligned to an 8-point grid. - State Style Definitions: Documented styles for hover, active, focus, disabled, and error states across interactive elements. - Atomic Design Workflow: A three-phase checklist covering component audit, variant setup with Tailwind or CVA, and testing with Storybook. - Use Case: When building a design system, use these standards to define button variants, form layouts, and icon spacing that stay consistent across every page. ## Quick Start Apply the design components standards to define button sizes, card padding, and input states for my new web interface.

Frequently Asked Questions about design_components

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

FAQPage Schema
What are standard button sizes for web design?▼

Standard button heights are 32px (small), 40px (medium/default), 48px (large), and 56px (extra large), with font sizes scaling from 14px to 20px. Horizontal padding ranges from 16px to 40px depending on size.

How do I create button variants with Tailwind CSS?▼

Use CVA (Class Variance Authority) with Tailwind to define variant structures for size, state, and style. Feed all values from a central design tokens file so every variant stays consistent with the 8-point grid system.

What spacing should I use between form elements?▼

Use 8px between a label and its input, 16px or 24px between inputs, 32px between form sections, and 24px top margin before the submit button. These values align with the 8-point grid.

How do I style focus and error states for input fields?▼

Set the focus state with a primary-colored border (primary-500) plus a ring outline, and the error state with an error-colored border (error-500). Disabled inputs use a neutral background (neutral-100) to signal inactivity.

When should I use Atomic Design for component organization?▼

Use Atomic Design when an interface has repeating elements that need to be broken into atoms, molecules, and organisms. It fits teams building design systems that require single-responsibility components and documented states for developer handoff.

Related Skills

Explore More Design & Creative Skills→
huangzidahuangzida

normalize

Audit UI elements and realign them with design system tokens.

Community
Advanced
GuibibiGuibibi

extract

Identify reusable UI patterns, components, and design tokens for design system extraction.

Community
Intermediate
DazlarusDazlarus

accessibility

Implements ARIA attributes, semantic HTML, and WCAG compliance for accessible web interfaces.

Community
Basic
delorenjdelorenj

shadcn-components

Manage and customize shadcn/ui components within a monorepo structure.

Community
Intermediate