Generate beautiful responsive components with houtini-lm

Quick Start

Jump straight into creating beautiful components with these ready-to-use prompts:

Create a responsive product card component with React and dark mode support

Generate an accessible contact form with validation and smooth animations

Build a responsive navigation menu for Vue with mobile hamburger menu

Generate a pricing card component and save it to C:/dev/components

What It Creates

Think of this as having a senior front-end developer and UX expert work together to create your perfect component. generate_responsive_component creates production-ready components with comprehensive accessibility features, modern CSS practices, and framework-specific implementations.

Every component generated includes:

• Responsive Design - Mobile-first approach that looks brilliant on every device
• Accessibility Excellence - WCAG 2.1 compliance with proper ARIA attributes and keyboard navigation
• Modern CSS - CSS custom properties, grid, flexbox, and cutting-edge features
• Cross-Browser Compatibility - Works beautifully across all modern browsers with fallbacks
• Performance Optimised - Efficient CSS, minimal repaints, smooth animations
• Framework Ready - Available in vanilla HTML/CSS, React, Vue, Angular, or Svelte

The components aren't just functional - they're beautiful, accessible, and ready for production use. Whether you're building a design system, rapid prototyping, or need a specific component for client work, this function delivers professional results instantly.

Parameters

Customise every aspect of your component generation:

Real-World Examples

Here's how to create different types of components for various scenarios:

React Product Card with Branding

houtini-lm:generate_responsive_component with:
- name: "ProductCard"
- type: "card"
- framework: "react"
- responsive: true
- accessible: true
- darkMode: true
- animations: true
- saveDirectory: "C:/dev/ecommerce-app/src/components"
- context: {
    "brandColors": ["#0066FF", "#00CC88", "#FF6B6B"],
    "typography": "Inter, system-ui",
    "borderRadius": "12px",
    "designSystem": "modern"
  }

Vue Navigation Menu

houtini-lm:generate_responsive_component with:
- name: "MainNavigation"
- type: "navigation"
- framework: "vue"
- responsive: true
- accessible: true
- animations: true
- context: {
    "mobileBreakpoint": "768px",
    "hamburgerStyle": "modern",
    "dropdownAnimation": "slide"
  }

Accessible Contact Form

houtini-lm:generate_responsive_component with:
- name: "ContactForm"
- type: "form"
- framework: "vanilla"
- responsive: true
- accessible: true
- animations: true
- context: {
    "validation": "client-side",
    "fields": ["name", "email", "message"],
    "submitButton": "Send Message"
  }

Modal Dialog with Overlay

houtini-lm:generate_responsive_component with:
- name: "ConfirmationModal"
- type: "modal"
- framework: "react"
- accessible: true
- animations: true
- context: {
    "focusTrap": true,
    "escapeClose": true,
    "overlayClose": true,
    "size": "medium"
  }

Custom Button with States

houtini-lm:generate_responsive_component with:
- name: "ActionButton"
- type: "button"
- framework: "svelte"
- accessible: true
- animations: true
- context: {
    "variants": ["primary", "secondary", "danger"],
    "sizes": ["small", "medium", "large"],
    "loadingState": true,
    "iconSupport": true
  }

What You Get Back

Each component generation delivers everything you need for production use:

🗂️ Complete File Structure

• Component files - HTML, CSS, JavaScript (and framework-specific versions)
• Demo HTML page - Working demonstration showing component variations
• Documentation - Usage examples, prop definitions, integration guidelines
• Package configuration - package.json and build setup for component libraries

📱 Responsive Design Excellence

• Mobile-first approach with breakpoint-specific styling
• Flexible layouts using CSS Grid and Flexbox
• Touch-friendly interactions with proper target sizes
• Performance optimisation with efficient CSS patterns

♿ Accessibility Built-In

• WCAG 2.1 AA compliance with proper contrast and focus management
• Screen reader support with semantic HTML and ARIA attributes
• Keyboard navigation with logical tab order and shortcuts
• Reduced motion support respecting user preferences

🎨 Modern CSS Features

• CSS custom properties for easy theming and customisation
• Modern layout techniques - Grid, Flexbox, Container Queries
• Advanced styling - backdrop-filter, clip-path, gradients
• Animation and transitions with proper timing and easing

⚛️ Framework-Specific Features

• React - Hooks, TypeScript interfaces, props validation, unit test templates
• Vue - Composition API, reactive props, scoped styles, Vue 3 compatibility
• Angular - Component architecture, dependency injection, template syntax
• Svelte - Reactive declarations, component lifecycle, SvelteKit integration
• Vanilla - ES6 modules, custom elements, progressive enhancement

Component Types Available

Choose from these battle-tested component types, each with specialised features:

🔘 Button Components

Interactive buttons with multiple variants, states, and accessibility features:

• Multiple variants (primary, secondary, danger, ghost)
• Size variations (small, medium, large)
• Loading states with spinners
• Icon support and positioning
• Disabled and hover states

📝 Form Components

Complete forms with validation, accessibility, and smooth user experience:

• Client-side validation with error messaging
• Accessible form labels and descriptions
• Input types (text, email, textarea, select, checkbox, radio)
• Submit handling with loading states
• Progressive enhancement patterns

🃏 Card Components

Flexible card layouts perfect for content display:

• Header, body, and footer sections
• Image support with lazy loading
• Action buttons and links
• Hover effects and interactions
• Grid and list layout variations

🪟 Modal Components

Accessible dialogs with proper focus management:

• Focus trapping and restoration
• Escape key and overlay closing
• Scroll locking when open
• Multiple sizes and positions
• Smooth open/close animations

🧭 Navigation Components

Responsive navigation with mobile-first approach:

• Hamburger menu for mobile devices
• Dropdown menus with hover/click triggers
• Active state highlighting
• Breadcrumb navigation
• Skip navigation links

📐 Layout Components

Structural components for page organisation:

• Grid systems with responsive breakpoints
• Sidebar layouts with collapsing
• Header and footer components
• Container and section wrappers
• Flexible spacing systems

🎨 Custom Components

When you need something unique, describe your requirements and get a tailored solution.

Framework Support

Generate components in your preferred framework with framework-specific best practices:

⚛️ React Components

• Modern Hooks - useState, useEffect, custom hooks
• TypeScript Support - Proper typing and interfaces
• Props Validation - PropTypes or TypeScript validation
• Testing Setup - Jest and React Testing Library templates
• Performance - memo, useMemo, useCallback where appropriate

💚 Vue Components

• Composition API - Modern Vue 3 patterns
• Reactive Props - Proper prop definitions and validation
• Scoped Styles - CSS isolation with <style scoped>
• Emits Definition - Clear event handling patterns
• Slot Support - Flexible content injection

🅰️ Angular Components

• Component Architecture - Decorator patterns and lifecycle hooks
• Dependency Injection - Service integration where appropriate
• Template Syntax - Angular-specific directives and binding
• Input/Output Properties - Clean component communication
• Change Detection - Optimised update strategies

🧡 Svelte Components

• Reactive Declarations - Automatic reactivity patterns
• Component Lifecycle - onMount, onDestroy patterns
• Event Forwarding - Clean event bubbling
• Slot Content - Flexible content composition
• SvelteKit Ready - SSR and routing considerations

🌐 Vanilla HTML/CSS/JS

• ES6 Modules - Modern JavaScript patterns
• Custom Elements - Web Components when appropriate
• Progressive Enhancement - Works without JavaScript
• Browser Compatibility - Graceful degradation
• Performance First - Minimal JavaScript footprint

Best Practices

Get the most out of your component generation with these expert tips:

🎨 Design Context is Key

The more design context you provide, the better your component will be:

• Brand colours - Include your primary, secondary, and accent colours
• Typography - Specify your font families and hierarchies
• Spacing system - Mention if you use 8px grid, 4px increments, etc.
• Border radius - Specify your preferred corner rounding
• Design references - Mention design systems you admire

🚀 Performance Considerations

• Choose the right framework - Vanilla for simple components, React for complex state
• Enable animations wisely - Use sparingly for better performance
• Consider bundle size - Framework components add dependency weight
• Optimise for critical path - Essential components first

♿ Accessibility Excellence

• Always enable accessibility - It's rarely a performance concern
• Test with screen readers - Validate the generated ARIA attributes
• Check colour contrast - Ensure sufficient contrast ratios
• Test keyboard navigation - Verify all interactions work without a mouse

🔧 Development Workflow

• Use saveDirectory - Automatically organise your components
• Start with vanilla - Prototype quickly, then convert to frameworks
• Generate variations - Create multiple versions to compare approaches
• Iterate and refine - Use generated code as starting point for customisation

Troubleshooting

Common issues and their solutions: