design_components

Define standardized sizing, padding, and visual states for UI components.

43|11|Updated Dec 27, 2025

Search Tags:#frontend #design system #style guide #ui components #ux #sizing

Ready to run

npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill design-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design_components
Source: https://github.com/vuralserhat86/antigravity-agentic-skills/tree/main/skills/design_components
Command: npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill design-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill establishes consistent sizing and spacing rules for common UI components like buttons, cards, and inputs, ensuring a cohesive and professional user interface.

Core Features & Use Cases

Component Sizing Standards: Defines precise height, padding, and font sizes for buttons, cards, inputs, and icons.
State Management: Outlines visual styles for different component states (hover, active, focus, disabled).
Use Case: Ensure all buttons across your application adhere to a uniform size and appearance, improving user predictability and brand consistency.

Quick Start

Apply the default medium button size with 16px font and 12px/24px padding.

Frequently Asked Questions about design_components

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

FAQPage Schema

How do I standardize UI component sizing and padding using an 8-point grid?▼

Standardize UI component sizing by defining precise height, padding, and font sizes for buttons, cards, inputs, and icons using an 8-point grid system. This ensures a cohesive, professional interface with predictable user interactions.

How do I manage visual states for UI components like hover and focus?▼

Manage visual states by outlining explicit styles for hover, active, focus, and disabled conditions across your UI components. This enforces brand consistency and improves user predictability during interaction.

Can I use Tailwind CSS or CVA to create UI component variants?▼

Yes, you can use Tailwind CSS or CVA to support variant creation for your UI components. This allows you to systematically apply standardized sizing, padding, and visual state rules across different component configurations.

What is the best way to document and audit a frontend design system?▼

Document and audit a frontend design system by following a structured workflow that includes component definition, atomic auditing, testing, and documentation. This enforces consistent sizing and spacing rules across common UI elements.

Do I need a style guide to enforce consistent button sizes across my application?▼

You need a style guide to ensure all buttons across your application adhere to a uniform size and appearance. Defining precise heights, padding, and font sizes improves user predictability and brand consistency.