murillodutt/gdu/skills/tailwind
gdu/skills/tailwind/SKILL.md
Tailwind CSS v4 + Nuxt UI v4 semantic design system. Activates on .vue and .css files to enforce semantic tokens, CSS variables, Tailwind Variants, and automatic dark mode. Use when styling components to ensure design system compliance and dark mode support.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add murillodutt/cellm gdu/skills/tailwindInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 5:23 AM4.5s1 file scanned
SKILL.md
- description:
- Tailwind CSS v4 + Nuxt UI v4 semantic design system. Activates on .vue and .css files to enforce semantic tokens, CSS variables, Tailwind Variants, and automatic dark mode. Use when styling components to ensure design system compliance and dark mode support.
- cellm_scope:
- universal
- user-invocable:
- false
Nuxt UI v4 provides a complete semantic layer on top of Tailwind CSS v4. Use it.
Semantic Classes (MANDATORY)
| Category | Use | Never |
|----------|-----|-------|
| Colors | text-primary, bg-error, text-warning | text-blue-500, bg-red-600 |
| Text | text-dimmed, text-muted, text-toned, text-default, text-highlighted | text-gray-400, text-neutral-500 |
| Background | bg-default, bg-muted, bg-elevated, bg-accented, bg-inverted | bg-white, bg-gray-50 |
| Border | border-default, border-muted, border-accented, border-inverted | border-gray-200 |
| Radius | rounded-sm through rounded-3xl (driven by --ui-radius) | rounded-[12px] |
CSS Variables (--ui-*)
In Tailwind v4, the primary source of tokens is app/assets/css/main.css using the @theme directive. tailwind.config.ts is only maintained as a fallback for v3 compatibility:
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-sans: 'Public Sans', sans-serif;
}
Customize shades per mode in :root / .dark:
:root { --ui-primary: var(--ui-color-primary-500); }
.dark { --ui-primary: var(--ui-color-primary-400); }
Dark Mode
Dark mode is automatic via CSS variables. Nuxt UI components handle light/dark internally.
- Custom layouts: use semantic bg/text (
bg-default text-default) — dark mode comes free - Only write
dark:variants for non-Nuxt-UI elements with hardcoded values
Tailwind Variants (Component Theming)
Nuxt UI uses Tailwind Variants with slots, variants, and compoundVariants.
- Per-instance:
uiprop overrides slots:<UCard :ui="{ body: 'p-8' }" /> - Global:
app.config.tsunderui.{component}key classprop: overrides root/base slot only
Responsive
Mobile-first: class then sm: md: lg:. No arbitrary values (w-[347px]).
NEVER
- Hardcoded colors — no
blue-500,#hex,rgb() - Manual dark mode on Nuxt UI components — automatic via
--ui-* tailwind.config.tsas primary source — Tailwind v4 uses@themeinapp/assets/css/main.cssas the primary source of tokens.tailwind.config.tsis just a fallback for v3.- Arbitrary values — no
w-[347px],p-[13px] - Inline styles — use Tailwind classes or CSS variables
Related Skills
murillodutt/cellm/skills/prose
data-ai
VerifiedTrustedCommunity
Prose override — temporarily disable quantization and respond in readable prose. Use when relational density matters, for safety-critical explanations, onboarding handoffs, or when token economy is not the priority.
SKILL.mdUpdated Apr 23, 2026
murillodutt/cellm/skills/pr-guardian
development
VerifiedTrustedCommunity
Govern explicit weekly Super PRs or maintainer-requested PR merges. Evaluates a 10-criterion readiness checklist and performs governed merge only when a user-requested PR is READY. Never creates or keeps permanent PRs. Use when: 'pr-check', 'pr-merge', 'merge this PR safely', 'is PR ready', 'guard merge', or /sk-git delegates pr-merge.
SKILL.mdUpdated Apr 23, 2026
murillodutt/cellm/skills/compress-llm
data-ai
VerifiedTrustedCommunity
Operational surface for the compress-llm Layer-1 token I/O compressor. Enable, disable, switch mode, and inspect status without editing config files. Use when tuning compression pressure for the current session or project.
SKILL.mdUpdated Apr 23, 2026
murillodutt/cellm/skills/cellm-feedback
tools
VerifiedTrustedCommunity
Generate structured upstream feedback for the CELLM engineering team. Produces evidence-first Markdown at docs/evidence/<date>-cellm-feedback-*.md for bugs, anti-patterns, deprecation gaps, and harness surprises, with optional atom registration via knowledge_ops. Use when: 'feedback for CELLM', 'send to CELLM team', 'register this as atom', 'document this anti-pattern', 'report this bug upstream'. Trigger proactively on MCP schema/runtime mismatches, mechanical edit loops (>=3 sequential edits), short deprecation windows (<6 weeks), or reusable harness surprises. Do NOT trigger for routine feature work or project-local bugs.
SKILL.mdUpdated Apr 21, 2026