UI Component Builder

Create modern, reusable UI components with clean code, accessibility features, and responsive design for web applications and design systems.

When to Use This Skill

Use this skill for:

• Building design system components
• Creating reusable interface elements
• Developing interactive widgets
• Prototyping new UI patterns
• Converting designs to code
• Building accessible components
• Creating component libraries

Component Categories

Basic Components

• Buttons: Primary, secondary, outline, icon, loading states
• Inputs: Text, email, password, textarea, select, checkbox, radio
• Typography: Headings, paragraphs, lists, code blocks
• Images: Responsive images, avatars, thumbnails, galleries
• Icons: SVG icons, icon fonts, custom graphics

Layout Components

• Grid Systems: Flexible grid layouts with breakpoints
• Containers: Wrappers, sections, cards, panels
• Navigation: Headers, sidebars, breadcrumbs, pagination
• Spacing: Margins, padding, dividers, spacers

Interactive Components

• Modals: Dialogs, popups, overlays, confirmations
• Dropdowns: Menus, selects, autocomplete, combobox
• Tabs: Tab panels, accordion, collapsible sections
• Forms: Complete forms, validation, multi-step wizards

Advanced Components

• Data Display: Tables, charts, progress bars, badges
• Media: Video players, audio controls, image carousels
• Feedback: Alerts, notifications, tooltips, loading states
• Navigation: Mega menus, sidebar navigation, mobile menus

Technical Standards

Framework Support

Generate components for:

• React: Modern hooks, TypeScript support, proper props
• Vue: Composition API, TypeScript, reactive properties
• Vanilla JS: Modern ES6+, Web Components, no dependencies
• Svelte: Reactive declarations, component lifecycle
• Angular: Component architecture, reactive forms

Accessibility Features

All components include:

• ARIA Labels: Proper labeling for screen readers
• Keyboard Navigation: Tab order, focus management
• Color Contrast: WCAG AA compliance (4.5:1 ratio)
• Semantic HTML: Proper element usage and structure
• Focus Indicators: Visible focus states for all interactive elements

Responsive Design

Components work across:

• Mobile First: Optimized for small screens
• Breakpoint System: sm, md, lg, xl viewport sizes
• Touch Friendly: Adequate touch targets (44px minimum)
• Flexible Layouts: Adapts to container constraints

Implementation Features

Customization Options

• Theme Variables: CSS custom properties for easy theming
• Size Variants: Small, medium, large sizing options
• Color Schemes: Primary, secondary, success, warning, error
• Style Variants: Filled, outlined, text, ghost styles

Code Quality

• Clean Structure: Semantic HTML with proper nesting
• Efficient CSS: Modern CSS with minimal specificity
• Performance: Optimized for fast rendering and interaction
• Documentation: Inline comments and usage examples

Create production-ready components that enhance user experience and development efficiency.