---
name: ui-component-builder
description: Build reusable UI components with modern frameworks like React, Vue, and vanilla JavaScript. Creates accessible, responsive, and customizable interface elements including buttons, forms, modals, navigation, and complex widgets.
---

# 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.