name: aura-components
description: Build modern web UI components inspired by Aura design system. Use this skill when creating hero sections, forms, backgrounds, buttons, or any UI component with gradient effects, glassmorphism, animations, or modern aesthetics. Provides pre-built templates and generation scripts for responsive, accessible components.
license: MIT

Aura Components

Create production-ready UI components with modern aesthetics including gradients, glassmorphism, animations, and responsive designs.

Quick Start

Use pre-built templates from assets/components/ or generate custom components with scripts.

Component Categories

• Hero Sections: Landing page heroes with CTAs, navigation, galleries
• Forms: Contact, signup, multi-step wizards with validation
• Backgrounds: Gradients, patterns, animated effects
• Buttons: CTA, gradient, glassmorphic, animated
• Sections: Features, testimonials, pricing, stats

Using Components

Pre-built Templates

Copy templates from assets/components/[category]/ and customize:
- Replace placeholder text
- Update colors using CSS variables
- Adjust spacing and layout
- Add custom animations

Generate Components

Use scripts to create customized components:

python scripts/generate_component.py --type hero --style gradient --layout centered
python scripts/combine_components.py --components hero,features,cta --output index.html

Design Tokens

Components use CSS custom properties for consistent theming:

:root {
  --aura-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --aura-text-primary: #1a202c;
  --aura-text-secondary: #718096;
  --aura-bg-light: #f7fafc;
  --aura-radius: 12px;
  --aura-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

Component Structure

All components follow this pattern:

<section class="aura-component aura-[type]" data-aos="fade-up">
  <div class="aura-container">
    <!-- Component content -->
  </div>
</section>

Responsive Design

Components are mobile-first with breakpoints:
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px

Animations

Components include:
- AOS (Animate on Scroll) animations
- CSS transitions for interactions
- Gradient animations for backgrounds
- Micro-interactions on hover/focus

Accessibility

All components include:
- Semantic HTML structure
- ARIA labels where needed
- Keyboard navigation support
- Focus indicators
- Color contrast compliance

Performance

Components are optimized for:
- Lazy loading images
- CSS containment for animations
- Minimal JavaScript dependencies
- GPU-accelerated transforms

Framework Integration

Components work with:
- Vanilla HTML/CSS/JS
- React (use scripts/export_to_react.py)
- Vue (use scripts/export_to_vue.py)
- Tailwind CSS classes

References

For detailed information:
- Design patterns: See references/design-patterns.md
- Animation guide: See references/animations.md
- Color schemes: See references/color-schemes.md