ui-component-builder

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.