Audits Tailwind v4 and shadcn-svelte discipline gaps in SvelteKit UI code.
npx skills add https://github.com/jluckyiv/rivcomocktrial --skill audit-tailwind
Please help me install this Agent Skill. Skill: audit-tailwind Source: https://github.com/jluckyiv/rivcomocktrial/tree/main/.claude/skills/audit-tailwind Command: npx skills add https://github.com/jluckyiv/rivcomocktrial --skill audit-tailwind
Tailwind v4 + shadcn-svelte adoption across large codebases can drift due to dynamic class construction, incomplete interactive state coverage, and inconsistent dark mode strategies. This skill helps identify and remediate those gaps before milestones or releases.
Run the audit-tailwind script to scan your project’s UI code and generate a findings report.
High-intent search queries and answers about installing and using this skill.
To audit Tailwind v4 dynamic classes in a SvelteKit project, scan your web/src components to detect runtime-constructed class names, verify conditional classes use the cn() helper, and flag potential purging gaps before release.
The best way to check shadcn-svelte components for missing interactive states is to analyze buttons, links, and inputs for consistent hover, disabled, and focus-visible states, ensuring proper focus ring patterns are present across the UI layer.
To verify dark mode consistency in Tailwind v4, audit your components for color usage adherence to token-based approaches, ensuring minimal literal colors and checking that dark mode coverage is consistent across interactive elements.
Yes, this frontend audit detects missing cn() usage for conditional Tailwind classes by analyzing your SvelteKit web/src directory and flagging components that construct dynamic class names at runtime instead of using the cn() helper.
Yes, you can use this audit for pre-release QA on a large shadcn-svelte codebase to identify discipline drift, generate actionable findings for code reviews, and verify complete state coverage before milestones or releases.
Tailwind v4 purges dynamically constructed class names because its scanner cannot detect classes built at runtime, making it necessary to audit your components and flag these patterns to prevent missing styles in production.
antstanleyGuide shadcn-svelte component installation, theming, and dark mode integration.
SoyJuanMaGuide Tailwind-4 UI patterns with semantic classes and cn() for conditional styling.
linehaul-aiInstall and customize shadcn-svelte UI components in SvelteKit projects.
CodingHeaderAudit CSS for semantic naming, Tailwind usage, and dark-mode coverage.
