Normalize design elements to conform to design system standards and tokens.
npx skills add https://github.com/isacfg/presentations --skill i-normalize-isacfg
Please help me install this Agent Skill. Skill: i-normalize Source: https://github.com/isacfg/presentations/tree/main/.codex/skills/i-normalize Command: npx skills add https://github.com/isacfg/presentations --skill i-normalize-isacfg
This Skill ensures that a given feature or design element is brought into perfect alignment with an established design system, guaranteeing consistency and adherence to brand standards.
Normalize the 'user-profile-card' component to match the design system.
High-intent search queries and answers about installing and using this skill.
To align UI components with a design system, you audit current implementations against system documentation to identify typography and color deviations, then refactor them using design tokens and standard components to ensure consistency.
The best way to refactor hardcoded colors is to replace them with established design tokens. This process systematically maps custom color values to your design system's standardized color tokens for consistent application.
You fix UX inconsistencies by analyzing the feature against design system standards and applying corrections. This ensures adherence to UX consistency, usability, and accessibility requirements by replacing custom styles with system equivalents.
Yes, design system refactoring includes a cleanup phase to remove orphaned code. This phase systematically consolidates reusable elements and eliminates redundant styles left after applying standard design tokens and components.
Yes, you can use this to audit spacing and typography tokens. It analyzes current implementations to identify inconsistencies in typography, color, spacing, and motion, then systematically applies the correct design tokens.
You need to normalize a design element when it deviates from established design principles, such as using custom button styles instead of system components. Normalization brings the element into perfect alignment with brand standards.
ZiadNagarDefine motion tokens, choreography patterns, and reduced-motion support for design systems.
wpankBuild Tailwind CSS component libraries with CVA variants and theming.
CertChain-IUHIdentify design system deviations and produce a normalization plan for tokens and components.
Bloodrey41Audit UI implementations and realign typography, color, spacing, and tokens to the design system.
