generate_responsive_component – Accessible Component Generator

Production-ready responsive components with WCAG 2.1 accessibility compliance and modern framework integration

Use local-llm:generate_responsive_component to create complete, accessible UI components that work across all devices and frameworks.

Perfect For

Design System Development
Create consistent, reusable component libraries with built-in accessibility features and comprehensive documentation.

Rapid Prototyping
Generate working interactive components instantly for mockups, client presentations, and proof-of-concept development.

Accessibility Compliance
Ensure components meet WCAG 2.1 standards from day one with proper ARIA attributes, keyboard navigation, and screen reader support.

Cross-Framework Development
Generate components for React, Vue, Angular, or vanilla JavaScript with framework-specific best practices built in.

Client Delivery
Provide production-ready components with custom branding, theme support, and comprehensive integration documentation.

Quick Start

local-llm:generate_responsive_component with:
- name: "ProductCard"
- type: "card"
- framework: "react"
- responsive: true
- accessible: true

Advanced component with auto-save:

local-llm:generate_responsive_component with:
- name: "NavigationMenu"
- type: "navigation"
- framework: "vue"
- darkMode: true
- animations: true
- saveDirectory: "C:/dev/components"

Component Generation Output

Complete Component Files

• Framework-Specific Implementation: React hooks, Vue composition API, Angular components with proper TypeScript integration
• Responsive CSS: Mobile-first design with breakpoint-specific styling and flexible grid systems
• Accessibility Features: ARIA attributes, keyboard navigation, focus management, and screen reader compatibility

Design System Integration

• Theme Variables: CSS custom properties for consistent branding and easy customisation
• Dark Mode Support: Automatic theme switching with system preference detection
• Animation System: Smooth transitions, micro-interactions, and reduced motion preferences

Developer Experience

• TypeScript Definitions: Complete type safety with props interfaces and component typing
• Documentation: Usage examples, prop definitions, and integration guidelines
• Demo Page: Working demonstration with multiple component variations

Component Example

Generated React Component

// ProductCard.tsx
interface ProductCardProps {
  title: string;
  price: number;
  image: string;
  onAddToCart: () => void;
  isLoading?: boolean;
}

export const ProductCard: React.FC = ({
  title, price, image, onAddToCart, isLoading = false
}) => {
  return (
    

      
      

        

          {title}
        
        

          £{price.toFixed(2)}
        
        
          {isLoading ? 'Adding...' : 'Add to Cart'}
        
      
    
  );
};

Responsive CSS Features

• Mobile-First Design: Optimised for touch interactions and small screens
• Flexible Grid: Adapts to container width with CSS Grid and Flexbox
• Accessibility Features: Focus indicators, sufficient colour contrast, readable typography
• Performance Optimised: Lazy loading, efficient CSS, minimal JavaScript

Parameters

Component Types

• button: Interactive buttons with states, loading, and accessibility
• form: Complete forms with validation, error handling, and submission
• card: Content cards with flexible layouts and interactive elements
• modal: Accessible modals with focus trapping and escape handling
• navigation: Responsive navigation with mobile menu support

Advanced Configuration

Design System Integration: Generate components that integrate seamlessly with existing design systems and brand guidelines.

// Design system component
local-llm:generate_responsive_component with:
- name: "PricingCard"
- type: "card"
- framework: "react"
- darkMode: true
- animations: true
- context: {
    "designSystem": "tailwind",
    "brandColors": ["#0066FF", "#00CC88"],
    "typography": "Inter, system-ui",
    "borderRadius": "8px"
  }

// Enterprise component library
local-llm:generate_responsive_component with:
- name: "DataTable"
- type: "custom"
- framework: "angular"
- responsive: true
- accessible: true
- saveDirectory: "C:/enterprise-components"

Component Development Workflow:

1. Generate base component with responsive and accessible features
2. Customise branding and design system integration
3. Test component with generate_unit_tests for quality assurance
4. Document component API with generate_documentation
5. Integrate into existing project and refine as needed

Framework-Specific Features

React Components

• Modern Hooks: useState, useEffect, custom hooks for component logic
• TypeScript Integration: Complete prop interfaces and component typing
• Performance Optimisation: React.memo, useMemo, useCallback where appropriate

Vue Components

• Composition API: Modern Vue 3 patterns with reactive state management
• Scoped Styles: CSS isolation with Vue’s scoped styling system
• Teleport Support: Portal patterns for modals and overlays

Angular Components

• Component Architecture: Proper lifecycle management and dependency injection
• Reactive Forms: Angular forms integration with validation
• Material Design: Angular Material integration where appropriate

Accessibility Features

WCAG 2.1 Compliance: All generated components include comprehensive accessibility features built in from the ground up.

• Semantic HTML: Proper element structure with meaningful roles and landmarks
• ARIA Attributes: Comprehensive labelling, descriptions, and state management
• Keyboard Navigation: Full keyboard accessibility with logical focus flow
• Screen Reader Support: Optimised for assistive technologies
• Colour Contrast: WCAG AA compliant contrast ratios and colour-blind friendly palettes

Pro Tips

Component Naming: Use descriptive PascalCase names that clearly indicate function (ProductCard, NavigationMenu, ContactForm).

Design System Integration: Provide brand colours and typography in context object for consistent styling across all generated components.

Responsive Testing: Generated components include CSS that works across devices, but always test on real devices for optimal user experience.

Auto-Save Workflow: Use saveDirectory parameter to automatically organise components in your project structure for immediate integration.

Related Functions

• generate_unit_tests – Create comprehensive test suites for component reliability
• generate_documentation – Document component APIs and usage patterns
• css_art_generator – Create custom visual elements and icons for components
• analyze_unused_css – Optimise component CSS for production deployment

Use local-llm:generate_responsive_component to create production-ready UI components – let Houtini handle the accessibility and responsive implementation while Claude focuses on component architecture and user experience design.