Audit React component Tailwind classes against the FirstWho design system.
npx skills add https://github.com/ryan-mahoney/ryan-llm-skills --skill design-align
Please help me install this Agent Skill. Skill: design-align Source: https://github.com/ryan-mahoney/ryan-llm-skills/tree/main/skills/design-align Command: npx skills add https://github.com/ryan-mahoney/ryan-llm-skills --skill design-align
Audits a React component tree to ensure styling and layout conform to the FirstWho design system, reducing design drift and rework across UI components.
Provide the path to the top-level React component to begin auditing and aligning it to the design system.
High-intent search queries and answers about installing and using this skill.
To audit Tailwind classes, provide the path to a top-level React component. The tool maps its subtree to design tokens, generates a grouped checklist of CSS corrections, and proposes changes aligned with your design system.
Fix UI consistency by auditing your React component tree against design system tokens. The tool identifies class usage mismatches and produces a concrete checklist of Tailwind CSS corrections to resolve design drift.
The best way to map Tailwind usage is referencing design-system tokens from docs and configuration files. The tool audits each component's classes against these tokens to outline a clear plan for approved updates.
Yes, the audit references design tokens from docs/design/design-system.md and tailwind.config.js. These files define the baseline rules used to map your React component classes and generate grouped CSS corrections.
Yes, you can audit a specific React component subtree. Provide the path to the top-level component, and the tool will map all its descendants to the design system and check their Tailwind classes for consistency.
Tailwind CSS may not match design tokens due to design drift across UI components. The tool audits your component tree, identifies class usage that deviates from the FirstWho design system, and proposes updates to fix inconsistencies.
somachakStandardize design tokens and component styling patterns for Tailwind-based React projects.
HeatMarieDocument Paperclip UI components, design principles, and tokens for React projects.
gaia-reactEnforce consistent Tailwind CSS utility usage and class merging in React components.
strongeronAudit React and Vite codebases for design system inconsistencies via static analysis.
