用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/arbazkhan971/godmode --skill tailwind命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Turn on Godmode. 135 skills, 7 subagents, zero configuration. Routes to the right skill automatically.
Backup and disaster recovery. backup strategy, disaster recovery, RPO/RTO, data integrity, durability, runbook.
Changelog and release notes management. Keep a Changelog format, Conventional Commits auto-generation, breaking change communication, migration guides, audience-specific notes.
基于 SOC 职业分类
正在显示 SKILL.md
| name | tailwind |
| description | Tailwind CSS mastery. Configuration, custom plugins, responsive design, dark mode, performance, CVA. |
/godmode:tailwind, "set up Tailwind", "Tailwind config"# Detect Tailwind version and config
grep "tailwindcss" package.json 2>/dev/null
ls tailwind.config.* postcss.config.* 2>/dev/null
# Check for CSS conflicts
grep -E "styled-components|@emotion|sass|less" \
package.json 2>/dev/null
TAILWIND ASSESSMENT:
Version: <3.x / 4.x>
Framework: <React | Vue | Svelte | Angular>
Build tool: <Vite | Webpack | PostCSS CLI>
Component library: <shadcn | DaisyUI | custom | none>
Dark mode: <class | media | none>
Quality: HIGH | MEDIUM | LOW
Tailwind 4.x: CSS-first via @theme {} in app.css
with @import "tailwindcss". Define tokens as
CSS custom properties (oklch colors).
Tailwind 3.x: JS config via tailwind.config.ts
with satisfies Config. Use theme.extend.
Rules:
addComponents: multi-property (.btn, .card, .badge)
addUtilities: single-purpose (.text-balance)
addBase: element defaults (typography reset)
addVariant: state variants (hocus:, aria-selected:)
Reference theme values: theme('colors.brand.500')
BREAKPOINTS:
default: 0px (mobile)
sm: 640px, md: 768px, lg: 1024px
xl: 1280px, 2xl: 1536px
Mobile-first always.
IF reusable component: container queries over media
IF layout: max-w-* + flex-1, avoid fixed widths
IF typography: clamp() via arbitrary values
CLASS STRATEGY (recommended): toggle via html class
IF user toggle needed: class strategy
IF system-only: media strategy
IF multiple themes: CSS custom properties
SEMANTIC TOKENS:
:root { --color-bg: white; --color-text: black; }
.dark { --color-bg: #0a0a0a; --color-text: #fafafa; }
Components use var(--color-bg) -- no dark: prefix.
PREVENT FLASH: inline script in <head> reads
localStorage before render. Always support 3 modes:
light, dark, system.
JIT default in 3+/4 (generates only used classes).
Content paths must cover ALL template files.
Missing path = missing utilities in production.
NEVER construct classes dynamically.
bg-${color}-500 will NOT be included.
Use complete strings or object maps instead.
Minimize safelist (always in bundle).
Minimize @apply (defeats utility-first).
Target: <50KB gzipped CSS bundle.
CVA (Class Variance Authority):
Organize variants (size, color, state) cleanly.
cn() utility: twMerge(clsx(inputs))
Resolves conflicts, handles conditionals.
EXTRACT to component when:
Same classes appear 3+ times
Class list > 10 utilities
Dark mode doubles class count
DO NOT extract one-off layouts or 3-4 utility combos.
| Check | Status |
|------------------------------|--------|
| Content paths cover all files| PASS |
| Theme extends (not overrides)| PASS |
| Dark mode configured | PASS |
| No dynamic class construction| PASS |
| Minimal safelist + @apply | PASS |
| CVA/cn() for variants | PASS |
| Mobile-first responsive | PASS |
| CSS bundle <50KB gzipped | PASS |
| Focus-visible rings | PASS |
VERDICT: PASS | NEEDS REVISION
grep "tailwindcss" package.json 2>/dev/null
ls tailwind.config.* postcss.config.* 2>/dev/null
Append to .godmode/tailwind-results.tsv:
timestamp\taction\tfiles\tcomponents\tbuild\tcss_kb\tissues
TAILWIND: {action}. Files: {N}. Tokens: {N}.
CSS: {N}KB gzipped. Build: {status}. Issues: {N}.
KEEP if: build passes AND no visual regressions
AND CSS size stable or decreased
DISCARD if: build fails OR classes missing
OR CSS size increased >20%. Revert.
STOP when ALL of:
- Build passes, no CSS warnings
- All components use design tokens
- CSS bundle within budget (<50KB gzipped)
- No arbitrary values in markup