87 lines
3.4 KiB
Markdown
87 lines
3.4 KiB
Markdown
---
|
|
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. |