Writes and audits Tailwind CSS v4 utility classes against a design-token system.
npx skills add https://github.com/apuya/react-basics-ui --skill tailwind-apuya
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/apuya/react-basics-ui/tree/main/.claude/skills/tailwind Command: npx skills add https://github.com/apuya/react-basics-ui --skill tailwind-apuya
@config directive loads a JS config, and raw values in class strings bypass the design-token funnel. This Skill enforces the react-basics-ui conventions so every class resolves to a semantic token and no dead utilities ship. ## Core Features & Use Cases - Token-bound class authoring: Write arbitrary values with type hints like bg-[color:var(--semantic-*)] and h-[length:var(--semantic-*)] so classes reach the --primitive-* → --semantic-* token funnel without any JS config. - Class composition conventions: Compose conditional classes through cn() (clsx + tailwind-merge) and extract variant maps into co-located .styles.ts files as Record<Variant, string> objects. - Drift audits: Run grep-based audits that detect raw hex/px values, dead named utilities, missing type hints, dark: variants, @apply usage, and over-long inline class strings. - Use Case: When adding a new Button variant, define its classes in Button.styles.ts using shared fragments like FOCUS_RING, compose with cn(), and let dark mode follow automatically through token overrides instead of dark: utilities. ## Quick Start Ask the AI to style a component's hover state using the semantic token convention and audit the file for dead Tailwind utilities.High-intent search queries and answers about installing and using this skill.
Use the bracket syntax with a type hint, such as bg-[color:var(--semantic-brand-primary-default)] for colors or h-[length:var(--semantic-height-default)] for dimensions. The color: or length: hint is required so Tailwind v4 parses the value correctly.
Tailwind v4 does not auto-detect tailwind.config.js; it only loads when a stylesheet declares @config. Without that, named utilities from a JS config emit nothing. Convert them to arbitrary values like text-[color:var(--semantic-status-error-default)] or add entries to @theme.
Use a cn() helper combining clsx and tailwind-merge: clsx flattens conditionals and arrays, while twMerge resolves conflicts so the last class wins. Pass any incoming className prop last so consumer overrides take precedence.
In a token-driven system, redefine the semantic CSS variables under a [data-theme="dark"] selector instead of writing dark: variants in components. A single bg-[color:var(--semantic-surface-base)] then follows the theme automatically with one source of truth.
Extract classes into a co-located .styles.ts file when a component has a variant or size axis, or when a class string is reused. Define variant maps as Record<Variant, string> objects with as const and compose shared fragments like focus rings and disabled states.
oborchersManage design token architecture with a three-tier model and CSS custom properties.
PMDevSolutionsGenerate CSF3 Storybook stories and MDX autodocs from React component source.
erp-mafiaAudit Next.js/React frontend code for WCAG AA accessibility compliance.
mgd34msuImplement zero-runtime CSS-in-TypeScript with static extraction at build time.