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.