Normalize UI features to match a project's design system using tokens and components.
npx skills add https://github.com/SL-A-SH/my-portfolio --skill normalize-sl-a-sh
Please help me install this Agent Skill. Skill: normalize Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/normalize Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill normalize-sl-a-sh
Many UI features drift away from a project's established design system, producing inconsistent visuals, duplicated one-off components, fragile styles, and accessibility regressions; this Skill guides a systematic redesign to restore consistency and usability.
Normalize the homepage hero feature to match the repository's design system by running the frontend-design context protocol, replacing hard-coded styles with tokens, swapping in design-system components, and verifying accessibility and responsiveness.
High-intent search queries and answers about installing and using this skill.
To normalize UI components, you replace hard-coded styles with design tokens and swap bespoke UI for design-system components. This involves auditing pages or routes for inconsistencies, substituting styles, and verifying accessibility and responsive behavior.
Replacing hard-coded styles with design tokens requires discovering the project's established style conventions first. You then audit the feature, substitute inline values with the correct tokens, and replace custom elements with system components to restore visual consistency.
UI features drift away from the design system when duplicated one-off components and fragile styles accumulate. You can fix this by running a systematic normalization that locates design tokens, replaces custom UI, and removes orphaned code while verifying linting and tests.
Yes, design system normalization is effective for component library migrations. It guides the systematic replacement of custom UI elements with design-system components, ensures accessibility checks are performed, and cleans up orphaned code during the migration process.
Yes, normalizing a UI feature includes both accessibility checks and responsive adjustments. The execution phase ensures that after substituting hard-coded styles with tokens, the updated components maintain proper accessibility compliance and adapt correctly across different screen sizes.
Bloodrey41Identify reusable UI patterns and consolidate them into design system components and tokens.
congiulucAutomate end-to-end web app testing with Playwright across Chromium, Firefox, and WebKit.
Radiants-DAOCreate RadTools-compatible React components with typed props and radOS tokens.
joeylife94Detect visual inconsistencies in web designs using browser debugging tools.
