Audit and realign UI components to match design system tokens and patterns.
npx skills add https://github.com/bfree-trainer/bfree --skill normalize-bfree-trainer
Please help me install this Agent Skill. Skill: normalize Source: https://github.com/bfree-trainer/bfree/tree/main/.claude/skills/normalize Command: npx skills add https://github.com/bfree-trainer/bfree --skill normalize-bfree-trainer
This Skill audits and realigns UI features that have drifted from the project's design system, fixing inconsistent spacing, hard-coded tokens, one-off components, and mismatched interaction patterns to restore visual and behavioral consistency across the product.
Run the normalize skill on the WorkoutPage component to audit its deviations and produce a prioritized plan to replace hard-coded styles with design tokens, swap bespoke elements for system components, and verify accessibility and responsive behavior.
High-intent search queries and answers about installing and using this skill.
To align UI components with a design system, audit pages and routes to replace hard-coded styles with design tokens, swap bespoke implementations for system components, and enforce accessibility and responsive behavior. This process corrects visual and behavioral drift.
The best way to refactor frontend features is to run a design system discovery audit, identify custom UI deviations, and execute a normalization plan that replaces one-off components with system components and applies correct design tokens for color, typography, and spacing.
You need to normalize a UI page during frontend development when a newly built feature or legacy route exhibits conceptual drift, inconsistent styles, or mismatched interaction patterns during redesigns, code reviews, or UI audits.
Yes, you can enforce accessibility and responsive behavior while replacing custom UI. The normalization process explicitly aligns motion, interactions, and accessibility standards alongside swapping bespoke elements for system components.
To verify cleanup after realigning UI components, consolidate reusable components, remove orphaned code, run linting and type checks, and add tests or documentation to prevent future regressions and ensure design system parity.
Mismatched interaction patterns and inconsistent spacing occur due to conceptual drift, missing design tokens, or bespoke implementations that deviate from the project's design system during rapid development or legacy feature updates.
priyansh19Establish and enforce CrewSpace UI design system standards across frontend components.
hb9397Implements responsive frontend UI components with CSS variables and design tokens.
davidrrowleyReview frontend interfaces for design quality and WCAG accessibility compliance.
vobaseNormalize UI implementations to match a project's design system.
