tailwindcss by martinholovsky/claude-skills-generator
npx skills add https://github.com/martinholovsky/claude-skills-generator --skill tailwindcss文件组织:此技能采用拆分结构。高级模式请参阅
references/目录。
此技能提供 Tailwind CSS 专业知识,用于通过实用优先的 CSS 为 JARVIS AI 助手界面进行样式设计,创建一致且可维护的 HUD 设计。
风险等级:低 - 样式框架,安全攻击面最小
主要用例:
为每个样式化组件遵循此工作流程:
// tests/components/HUDPanel.test.ts
import { 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')
})
})
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
<!-- 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>
将重复的模式提取到 @apply 指令中:
/* 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;
}
}
# 运行所有样式相关测试
npm run test -- --grep "HUDPanel"
# 检查未使用的 CSS
npx tailwindcss --content './components/**/*.vue' --output /dev/null
# 验证构建大小
npm run build && ls -lh .output/public/_nuxt/*.css
// tailwind.config.js
// 良好:特定的内容路径
export default {
content: [
'./components/**/*.{vue,js,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./composables/**/*.ts'
]
}
// 不良:范围太广,包含未使用的文件
export default {
content: ['./src/**/*'] // 包含测试、故事等文件
}
// 良好:让 JIT 仅生成使用的实用程序
export default {
mode: 'jit', // v3+ 中默认启用
theme: {
extend: {
// 仅扩展所需内容
colors: {
jarvis: {
primary: '#00ff41',
secondary: '#0891b2'
}
}
}
}
}
// 不良:定义未使用的变体
export default {
variants: {
extend: {
backgroundColor: ['active', 'group-hover', 'disabled'] // 可能不会全部使用
}
}
}
<!-- 良好:当模式重复 3 次或以上时提取 -->
<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>
<!-- 不良:为单一样式使用 @apply -->
<style>
.my-unique-element {
@apply p-4 m-2 text-white; <!-- 直接在模板中使用实用程序即可 -->
}
</style>
<!-- 良好:移动优先,最少断点 -->
<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>
<!-- 不良:冗余的断点定义 -->
<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>
// 良好:单一的深色模式策略(JARVIS 始终为深色)
export default {
darkMode: 'class', // 使用 'class' 进行显式控制
theme: {
extend: {
colors: {
jarvis: {
bg: {
dark: '#0a0a0f', // 直接定义深色
panel: '#111827'
}
}
}
}
}
}
// 不良:当应用始终为深色时定义浅色/深色变体
<div class="bg-white dark:bg-gray-900"> <!-- 不必要的浅色样式 -->
// 良好:GPU 加速属性
export default {
theme: {
extend: {
keyframes: {
glow: {
'0%, 100%': { opacity: '0.5' }, // opacity 是 GPU 加速的
'50%': { opacity: '1' }
}
}
}
}
}
// 不良:触发布局重排的属性
keyframes: {
resize: {
'0%': { width: '100px' }, // 触发布局重新计算
'100%': { width: '200px' }
}
}
| 包 | 版本 | 备注 |
|---|---|---|
| tailwindcss | ^3.4.0 | 最新版,带 JIT 模式 |
| @nuxtjs/tailwindcss | ^6.0.0 | Nuxt 集成 |
| tailwindcss-animate | ^1.0.0 | 动画实用程序 |
// tailwind.config.js
export 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')
]
}
<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
">
<!-- 扫描线叠加层 -->
<div class="
absolute inset-0
bg-gradient-to-b from-transparent via-jarvis-primary/5 to-transparent
animate-scan
pointer-events-none
" />
<!-- 内容 -->
<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>
<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>
<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>
<!-- 良好 - 足够的对比度 -->
<span class="text-jarvis-primary"><!-- #00ff41 on dark bg --></span>
<!-- 良好 - 焦点可见 -->
<button class="focus:ring-2 focus:ring-jarvis-primary focus:outline-none">
<!-- 良好 - 屏幕阅读器文本 -->
<span class="sr-only">状态:活跃</span>
<!-- 不良 - 存在实用程序时使用自定义 CSS -->
<style>
.custom-panel {
padding: 1rem;
border-radius: 0.5rem;
}
</style>
<!-- 良好 - 使用实用程序 -->
<div class="p-4 rounded-lg">
<!-- 不良 - 混合的间距值 -->
<div class="p-3 mt-5 mb-2">
<!-- 良好 - 一致的尺度 -->
<div class="p-4 my-4">
<!-- 不良 - 硬编码十六进制值 -->
<div class="text-[#00ff41]">
<!-- 良好 - 主题颜色 -->
<div class="text-jarvis-primary">
npm testnpm run buildTailwind CSS 为 JARVIS 提供实用优先的样式设计:
请记住:JARVIS HUD 具有独特的视觉识别特征 - 保持与主题配置的一致性,并使用 vitest 测试所有样式。
参考资料:
references/advanced-patterns.md - 复杂布局模式每周安装数
273
仓库
GitHub 星标数
29
首次出现
2026年1月20日
安全审计
安装于
opencode216
gemini-cli207
codex203
cursor199
github-copilot193
claude-code181
File Organization : This skill uses split structure. See
references/for advanced patterns.
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 :
Follow this workflow for every styled component:
// tests/components/HUDPanel.test.ts
import { 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')
})
})
<!-- 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>
Extract repeated patterns to @apply directives:
/* 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;
}
}
# Run all style-related tests
npm run test -- --grep "HUDPanel"
# Check for unused CSS
npx tailwindcss --content './components/**/*.vue' --output /dev/null
# Verify build size
npm run build && ls -lh .output/public/_nuxt/*.css
// tailwind.config.js
// Good: Specific content paths
export default {
content: [
'./components/**/*.{vue,js,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./composables/**/*.ts'
]
}
// Bad: Too broad, includes unused files
export default {
content: ['./src/**/*'] // Includes tests, stories, etc.
}
// Good: Let JIT generate only used utilities
export default {
mode: 'jit', // Default in v3+
theme: {
extend: {
// Only extend what you need
colors: {
jarvis: {
primary: '#00ff41',
secondary: '#0891b2'
}
}
}
}
}
// Bad: Defining unused variants
export default {
variants: {
extend: {
backgroundColor: ['active', 'group-hover', 'disabled'] // May not use all
}
}
}
<!-- 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>
<!-- 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>
// 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
// Good: GPU-accelerated properties
export default {
theme: {
extend: {
keyframes: {
glow: {
'0%, 100%': { opacity: '0.5' }, // opacity is GPU-accelerated
'50%': { opacity: '1' }
}
}
}
}
}
// Bad: Layout-triggering properties
keyframes: {
resize: {
'0%': { width: '100px' }, // Triggers layout recalc
'100%': { width: '200px' }
}
}
| 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 |
// tailwind.config.js
export 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')
]
}
<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>
<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>
<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>
<!-- 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>
<!-- 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">
<!-- Bad - Mixed spacing values -->
<div class="p-3 mt-5 mb-2">
<!-- Good - Consistent scale -->
<div class="p-4 my-4">
<!-- Bad - Hardcoded hex -->
<div class="text-[#00ff41]">
<!-- Good - Theme color -->
<div class="text-jarvis-primary">
npm testnpm run buildTailwind CSS provides utility-first styling for JARVIS:
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 patternsWeekly Installs
273
Repository
GitHub Stars
29
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
opencode216
gemini-cli207
codex203
cursor199
github-copilot193
claude-code181
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装
Voicebox 开源语音合成与克隆工具:本地化 TTS 工作室,替代 ElevenLabs
271 周安装
临床报告撰写指南:病例报告、诊断报告、临床试验报告与患者文档的AI辅助工具
271 周安装
Supabase Postgres 最佳实践指南 | 8大类别性能优化与安全规则
271 周安装
React Three Fiber物理引擎教程 - r3f-physics(Rapier)快速入门与实战
271 周安装
Flutter Drift 数据库使用指南 - 类型安全 SQLite 与响应式流查询
271 周安装
create-docs:Nuxt Content/Docus 自动生成生产级文档站点工具
271 周安装