Tailwind CSS Development Skill File Organization : This skill uses split structure. See references/ for advanced patterns. 1. Overview This skill provides Tailwind CSS expertise for styling the JARVIS AI Assistant interface with utility first CSS, creating consistent and maintainable HUD designs. Risk Level : LOW Styling framework with minimal security surface Primary Use Cases : Holographic UI panel styling Responsive HUD layouts Animation utilities for transitions Custom JARVIS theme configuration 2. Core Responsibilities 2.1 Fundamental Principles 1. TDD First : Write component tests before styling implementation 2. Performance Aware : Optimize CSS output size and rendering performance 3. Utility First : Compose styles from utility classes, extract components when patterns repeat 4. Design System : Define JARVIS color palette and spacing in config 5. Responsive Design : Mobile first with breakpoint utilities 6. Dark Mode Default : HUD is always dark themed 7. Accessibility : Maintain sufficient contrast ratios 3. Implementation Workflow (TDD) 3.1 TDD Process for Styled Components Follow this workflow for every styled component: Step 1: Write Failing Test First Step 2: Implement Minimum to Pass Step 3: Refactor if Needed Extract repeated patterns to @apply directives: Step 4: Run Full Verification 4. Performance Patterns 4.1 Purge Optimization 4.2 JIT Mode Efficiency 4.3 @apply Extraction Strategy 4.4 Responsive Breakpoints Efficiency 4.5 Dark Mode Efficiency 4.6 Animation Performance 5. Technology Stack & Versions 5.1 Recommended Versions Package Version Notes tailwindcss ^3.4.0 Latest with JIT mode @nuxtjs/tailwindcss ^6.0.0 Nuxt integration tailwindcss animate ^1.0.0 Animation utilities 5.2 Configuration 6. Implementation Patterns 6.1 HUD Panel Component 6.2 Status Indicator 6.3 Button Variants 7. Quality Standards 7.1 Accessibility 8. Common Mistakes & Anti Patterns 8.1 Anti Patterns Avoid: Excessive Custom CSS Avoid: Inconsistent Spacing Avoid: Hardcoded Colors 9. Pre Implementation Checklist Phase 1: Before Writing Code [ ] Write component tests for expected class applications [ ] Verify JARVIS theme colors are defined in config [ ] Check content paths include all source files [ ] Review existing components for reusable patterns Phase 2: During Implementation [ ] Use utilities before custom CSS [ ] Apply consistent spacing scale (4, 8, 12, 16...) [ ] Include focus states for all interactive elements [ ] Test responsive breakpoints at each size [ ] Use theme colors, never hardcoded hex values Phase 3: Before Committing [ ] All component tests pass: npm test [ ] Build completes without CSS errors: npm run build [ ] Check CSS bundle size hasn't grown unexpectedly [ ] Verify no unused @apply extractions [ ] Test accessibility with keyboard navigation 10. Summary Tailwind CSS provides utility first styling for JARVIS: 1. TDD : Write tests for class applications before implementation 2. Performance : Optimize content paths and use JIT mode 3. Theme : Define JARVIS colors and fonts in config 4. Utilities : Compose styles from utilities, extract patterns with @apply 5. Accessibility : Maintain focus states and sufficient contrast Remember : The JARVIS HUD has a distinct visual identity maintain consistency with the theme configuration and test all styling with vitest. References : references/advanced patterns.md Complex layout patterns