component-gallery

Provide standardized CSS patterns and layout specifications for common UI components.

2|Updated Feb 5, 2026

Search Tags:#frontend #css #components #web-development #ui-design #design-system

Ready to run

npx skills add https://github.com/svengraziani/ui-design --skill component-gallery-svengraziani

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-gallery
Source: https://github.com/svengraziani/ui-design/tree/main/.claude/skills/component-gallery
Command: npx skills add https://github.com/svengraziani/ui-design --skill component-gallery-svengraziani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates design inconsistency and guesswork by providing concrete, production-ready CSS values for common UI components, ensuring a cohesive look across your application.

Core Features & Use Cases

Component Library: Provides specific sizing, padding, shadow, and layout values for buttons, forms, navigation, cards, and more.
Design System Standards: Offers guidance on accessibility, spacing scales, and visual hierarchy to maintain professional design quality.
Use Case: When building a new dashboard, use this skill to quickly retrieve the exact box-shadow, padding, and border-radius values for cards and buttons to match your existing design language.

Quick Start

Apply the component-gallery skill to generate the CSS for a primary button and a standard form input.

Frequently Asked Questions about component-gallery

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

FAQPage Schema

What are standardized CSS patterns for UI components?▼

Standardized CSS patterns for UI components are concrete, production-ready values for sizing, padding, and shadows that ensure visual consistency across web applications. They provide specific implementation details rather than abstract design principles for buttons, forms, and cards.

How do I get consistent CSS values for buttons and cards?▼

To get consistent CSS values for buttons and cards, apply standardized layout specifications that define exact box-shadow, padding, and border-radius. This eliminates design guesswork by providing concrete styling values that maintain a cohesive look across your application.

What's the best way to maintain design consistency in web development?▼

The best way to maintain design consistency in web development is using a component library with predefined spacing scales and visual hierarchy standards. This ensures professional design quality by offering specific CSS values and accessibility guidance for common UI elements.

Can I use these UI component patterns for building a dashboard?▼

Yes, you can use these UI component patterns for building a dashboard. They provide exact CSS values for elements like cards, forms, and navigation, allowing you to quickly retrieve styling details to match your existing design language during dashboard development.

Does this approach provide concrete CSS values or abstract design principles?▼

This approach provides concrete CSS values rather than abstract design principles. It delivers production-ready sizing, padding, shadow, and layout specifications for common UI components to satisfy the need for exact implementation details during frontend web development.

Why do my UI components look inconsistent across my application?▼

Your UI components look inconsistent due to design guesswork and lack of standardized CSS values. Using predefined layout specifications for sizing, padding, and shadows eliminates this problem by ensuring a cohesive look and maintaining professional design quality across your application.