What UI components are included in the gallery?

The gallery includes comprehensive patterns for buttons, forms, badges, breadcrumbs, pagination, navigation, tables, cards, modals, alerts, pricing pages, hero sections, and more.

Does this skill provide actual CSS values or just general advice?

It provides concrete specifications, including exact padding (e.g., 12px 20px), font sizes, hex/hsl shadow values, and border-radius measurements for production-grade styling.

Can I use this for mobile-first development?

Yes, the skill includes specific patterns for mobile navigation, responsive sidebar behavior, and general principles for how elements should scale on smaller screens.

How does this skill help with form accessibility?

It provides guidance on clear focus states, stacked label positioning, error message placement, and ensures validation doesn't rely on color alone.

UI Component Gallery

Name: UI Component Gallery
Author: svengraziani

bysvengraziani

•

デザインツール

Provides production-ready CSS patterns and specific design values for building consistent, high-quality web interfaces.

The UI Component Gallery skill serves as a comprehensive reference for developers building frontend interfaces with Claude. It moves beyond abstract design principles by providing concrete CSS specifications for over 20 common UI elements, including buttons, form inputs, cards, and complex marketing sections. By offering specific values for padding, shadows, font sizes, and layout structures, it ensures that generated code is visually polished and follows established industry best practices for hierarchy, accessibility, and user experience.

主な機能

01Implementation tips for interactive elements like modals, dropdowns, and alerts

02Specific CSS values for sizing, padding, and box shadows across 20+ components

03Visual hierarchy guidelines for marketing hero sections and pricing tables

042 GitHub stars

05Best practices for form validation, input layouts, and focus states

06Detailed patterns for complex navigation systems including mobile hamburger menus

ユースケース

01Implementing data-dense dashboards with optimized tables, badges, and activity feeds

02Building a professional design system or component library with consistent spacing and depth

03Refining AI-generated frontend code to meet high-fidelity visual standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add svengraziani/ui-design component-gallery

For use in Claude.ai and ChatGPT

Download Skill