Initial commit

skills/ui-component-builder/SKILL.md

@@ -0,0 +1,87 @@
+---
+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.