Tailwindcss

martinholovsky/claude-skills-generator/skills/tailwindcss

作者 martinholovsky1086ef25672a无许可证47 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10个月前更新

Tailwind CSS utility-first styling for JARVIS UI components

仅含说明Design & CreativeSoftware Development
AI 生成的概览

为 JARVIS HUD 组件提供 Tailwind CSS 实用类样式指导，涵盖主题配置、TDD 测试与性能建议。

功能
该技能提供使用实用类为 JARVIS AI 助手界面编写 Tailwind CSS 样式的指导。内容涵盖主题配置（颜色、字体、动画）、HUD 面板、状态指示器和按钮模式、响应式布局、默认深色模式、无障碍以及 CSS 性能实践。它还描述了先写组件测试的测试驱动工作流与构建检查，并指向一个参考文件以了解高级模式。
适用场景
适用于使用 Tailwind CSS 为 JARVIS UI 组件编写样式、定义或扩展 JARVIS 主题，或审查实用类、响应式与无障碍约定。适合处理 HUD 面板、状态指示器、按钮和动画工具类的工作。
运行要求
仅为说明性内容，不附带脚本。假定项目使用 Tailwind CSS（约 v3.4），可选 Nuxt 集成、tailwindcss-animate 与 @tailwindcss/forms，并具备 vitest 等测试运行器和 npm 构建命令。

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
typescript
// tests/components/HUDPanel.test.tsimport { describe, it, expect } from 'vitest'import { mount } from '@vue/test-utils'import HUDPanel from '~/components/HUDPanel.vue'
describe('HUDPanel', () => {  it('renders with correct JARVIS theme classes', () => {    const wrapper = mount(HUDPanel, {      props: { title: 'System Status' }    })
    const panel = wrapper.find('[data-testid="hud-panel"]')    expect(panel.classes()).toContain('bg-jarvis-bg-panel/80')    expect(panel.classes()).toContain('border-jarvis-primary/30')    expect(panel.classes()).toContain('backdrop-blur-sm')  })
  it('applies responsive grid layout', () => {    const wrapper = mount(HUDPanel)    const grid = wrapper.find('[data-testid="panel-grid"]')
    expect(grid.classes()).toContain('grid-cols-1')    expect(grid.classes()).toContain('md:grid-cols-2')    expect(grid.classes()).toContain('lg:grid-cols-3')  })
  it('shows correct status indicator colors', async () => {    const wrapper = mount(HUDPanel, {      props: { status: 'active' }    })
    const indicator = wrapper.find('[data-testid="status-indicator"]')    expect(indicator.classes()).toContain('bg-jarvis-primary')    expect(indicator.classes()).toContain('animate-pulse')
    await wrapper.setProps({ status: 'error' })    expect(indicator.classes()).toContain('bg-jarvis-danger')  })
  it('maintains accessibility focus styles', () => {    const wrapper = mount(HUDPanel)    const button = wrapper.find('button')
    expect(button.classes()).toContain('focus:ring-2')    expect(button.classes()).toContain('focus:outline-none')  })})
Step 2: Implement Minimum to Pass
vue
<!-- components/HUDPanel.vue --><template>  <div    data-testid="hud-panel"    class="bg-jarvis-bg-panel/80 border border-jarvis-primary/30 backdrop-blur-sm rounded-lg p-4"  >    <div      data-testid="panel-grid"      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"    >      <slot />    </div>    <span      data-testid="status-indicator"      :class="statusClasses"    />    <button class="focus:ring-2 focus:outline-none focus:ring-jarvis-primary">      Action    </button>  </div></template>
<script setup lang="ts">import { computed } from 'vue'
const props = defineProps<{  title?: string  status?: 'active' | 'warning' | 'error' | 'inactive'}>()
const statusClasses = computed(() => ({  'bg-jarvis-primary animate-pulse': props.status === 'active',  'bg-jarvis-warning': props.status === 'warning',  'bg-jarvis-danger': props.status === 'error',  'bg-gray-500': props.status === 'inactive'}))</script>
Step 3: Refactor if Needed

Extract repeated patterns to @apply directives:

css
/* assets/css/components.css */@layer components {  .hud-panel {    @apply bg-jarvis-bg-panel/80 border border-jarvis-primary/30 backdrop-blur-sm rounded-lg p-4;  }
  .hud-grid {    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;  }}
Step 4: Run Full Verification
bash
# Run all style-related testsnpm run test -- --grep "HUDPanel"
# Check for unused CSSnpx tailwindcss --content './components/**/*.vue' --output /dev/null
# Verify build sizenpm run build && ls -lh .output/public/_nuxt/*.css

4. Performance Patterns

4.1 Purge Optimization

javascript
// tailwind.config.js// Good: Specific content pathsexport default {  content: [    './components/**/*.{vue,js,ts}',    './layouts/**/*.vue',    './pages/**/*.vue',    './composables/**/*.ts'  ]}
// Bad: Too broad, includes unused filesexport default {  content: ['./src/**/*']  // Includes tests, stories, etc.}

4.2 JIT Mode Efficiency

javascript
// Good: Let JIT generate only used utilitiesexport default {  mode: 'jit',  // Default in v3+  theme: {    extend: {      // Only extend what you need      colors: {        jarvis: {          primary: '#00ff41',          secondary: '#0891b2'        }      }    }  }}
// Bad: Defining unused variantsexport default {  variants: {    extend: {      backgroundColor: ['active', 'group-hover', 'disabled']  // May not use all    }  }}

4.3 @apply Extraction Strategy

vue
<!-- Good: Extract when pattern repeats 3+ times --><style>@layer components {  .btn-jarvis {    @apply px-4 py-2 rounded font-medium transition-all duration-200           focus:outline-none focus:ring-2 focus:ring-offset-2;  }}</style>
<!-- Bad: @apply for single-use styles --><style>.my-unique-element {  @apply p-4 m-2 text-white;  /* Just use utilities in template */}</style>

4.4 Responsive Breakpoints Efficiency

vue
<!-- Good: Mobile-first, minimal breakpoints --><div class="p-2 md:p-4 lg:p-6">  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4"></div>
<!-- Bad: Redundant breakpoint definitions --><div class="p-2 sm:p-2 md:p-4 lg:p-4 xl:p-6">  <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2"></div>

4.5 Dark Mode Efficiency

javascript
// Good: Single dark mode strategy (JARVIS is always dark)export default {  darkMode: 'class',  // Use 'class' for explicit control  theme: {    extend: {      colors: {        jarvis: {          bg: {            dark: '#0a0a0f',  // Define dark colors directly            panel: '#111827'          }        }      }    }  }}
// Bad: Light/dark variants when app is always dark<div class="bg-white dark:bg-gray-900">  // Unnecessary light styles

4.6 Animation Performance

javascript
// Good: GPU-accelerated propertiesexport default {  theme: {    extend: {      keyframes: {        glow: {          '0%, 100%': { opacity: '0.5' },  // opacity is GPU-accelerated          '50%': { opacity: '1' }        }      }    }  }}
// Bad: Layout-triggering propertieskeyframes: {  resize: {    '0%': { width: '100px' },  // Triggers layout recalc    '100%': { width: '200px' }  }}

5. Technology Stack & Versions

5.1 Recommended Versions

PackageVersionNotes
tailwindcss^3.4.0Latest with JIT mode
@nuxtjs/tailwindcss^6.0.0Nuxt integration
tailwindcss-animate^1.0.0Animation utilities

5.2 Configuration

javascript
// tailwind.config.jsexport default {  content: [    './components/**/*.{vue,js,ts}',    './layouts/**/*.vue',    './pages/**/*.vue',    './composables/**/*.ts',    './plugins/**/*.ts'  ],  darkMode: 'class',  theme: {    extend: {      colors: {        jarvis: {          primary: '#00ff41',          secondary: '#0891b2',          warning: '#f59e0b',          danger: '#ef4444',          bg: {            dark: '#0a0a0f',            panel: '#111827'          }        }      },      fontFamily: {        mono: ['JetBrains Mono', 'monospace'],        display: ['Orbitron', 'sans-serif']      },      animation: {        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',        'scan': 'scan 2s linear infinite',        'glow': 'glow 2s ease-in-out infinite alternate'      },      keyframes: {        scan: {          '0%': { transform: 'translateY(-100%)' },          '100%': { transform: 'translateY(100%)' }        },        glow: {          '0%': { boxShadow: '0 0 5px #00ff41' },          '100%': { boxShadow: '0 0 20px #00ff41' }        }      }    }  },  plugins: [    require('@tailwindcss/forms'),    require('tailwindcss-animate')  ]}

6. Implementation Patterns

6.1 HUD Panel Component

vue
<template>  <div class="    relative    bg-jarvis-bg-panel/80    border border-jarvis-primary/30    rounded-lg    p-4    backdrop-blur-sm    shadow-lg shadow-jarvis-primary/10  ">    <!-- Scanline overlay -->    <div class="      absolute inset-0      bg-gradient-to-b from-transparent via-jarvis-primary/5 to-transparent      animate-scan      pointer-events-none    " />
    <!-- Content -->    <div class="relative z-10">      <h3 class="        font-display        text-jarvis-primary        text-lg        uppercase        tracking-wider        mb-2      ">        {{ title }}      </h3>      <slot />    </div>  </div></template>

6.2 Status Indicator

vue
<template>  <div class="flex items-center gap-2">    <span :class="[      'w-2 h-2 rounded-full',      {        'bg-jarvis-primary animate-pulse': status === 'active',        'bg-jarvis-warning': status === 'warning',        'bg-jarvis-danger animate-ping': status === 'error',        'bg-gray-500': status === 'inactive'      }    ]" />    <span class="text-sm text-gray-300">{{ label }}</span>  </div></template>

6.3 Button Variants

vue
<template>  <button :class="[    'px-4 py-2 rounded font-medium transition-all duration-200',    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-jarvis-bg-dark',    {      'bg-jarvis-primary text-black hover:bg-jarvis-primary/90 focus:ring-jarvis-primary':        variant === 'primary',      'bg-transparent border border-jarvis-secondary text-jarvis-secondary hover:bg-jarvis-secondary/10 focus:ring-jarvis-secondary':        variant === 'secondary',      'bg-jarvis-danger text-white hover:bg-jarvis-danger/90 focus:ring-jarvis-danger':        variant === 'danger'    }  ]">    <slot />  </button></template>

7. Quality Standards

7.1 Accessibility

vue
<!-- Good - Sufficient contrast --><span class="text-jarvis-primary"><!-- #00ff41 on dark bg --></span>
<!-- Good - Focus visible --><button class="focus:ring-2 focus:ring-jarvis-primary focus:outline-none">
<!-- Good - Screen reader text --><span class="sr-only">Status: Active</span>

8. Common Mistakes & Anti-Patterns

8.1 Anti-Patterns

Avoid: Excessive Custom CSS
vue
<!-- Bad - Custom CSS when utilities exist --><style>.custom-panel {  padding: 1rem;  border-radius: 0.5rem;}</style>
<!-- Good - Use utilities --><div class="p-4 rounded-lg">
Avoid: Inconsistent Spacing
vue
<!-- Bad - Mixed spacing values --><div class="p-3 mt-5 mb-2">
<!-- Good - Consistent scale --><div class="p-4 my-4">
Avoid: Hardcoded Colors
vue
<!-- Bad - Hardcoded hex --><div class="text-[#00ff41]">
<!-- Good - Theme color --><div class="text-jarvis-primary">

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

来源与署名

来源：martinholovsky/claude-skills-generator位于skills/tailwindcss提交1086ef2

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 martinholovsky/claude-skills-generator 的技能

Windows Ui Automation

martinholovsky

指导安全的 Windows UI 自动化与 Win32 桌面自动化，包含进程校验、权限分级和审计日志。

Security4710个月前更新

Webgl

martinholovsky

指导面向 3D HUD 的 WebGL 2.0 着色器与特效开发，涵盖安全编译、资源限制与性能模式。

Software Development4710个月前更新

Gsap

martinholovsky

指导为 JARVIS HUD 面板、状态指示器、数据可视化和滚动效果实现 GSAP 动画。

Design & Creative4710个月前更新

Rabbitmq Expert

martinholovsky

指导 RabbitMQ 的设计与运维：交换机模式、可靠性、集群、安全与监控。

Software Development4710个月前更新

Celery Expert

martinholovsky

指导 Celery 分布式任务队列设计，涵盖任务模式、消息代理、重试、调度、监控与安全。

Software Development4710个月前更新

Cicd Expert

martinholovsky

指导设计安全高效的 CI/CD 流水线，涵盖测试门禁、缓存、制品签名与 GitOps 部署。

DevOps & Cloud4710个月前更新

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative179K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative179K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative179K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新