normalize

Align frontend components with design system tokens for typography, color, spacing, and accessibility.

Updated Feb 22, 2026
One-click install
npx skills add https://github.com/luisartola/findes --skill normalize-luisartola
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/luisartola/findes/tree/main/.github/skills/normalize
Command: npx skills add https://github.com/luisartola/findes --skill normalize-luisartola

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design and components to align with the design system to ensure consistency across products and features.

Core Features & Use Cases

  • Design token enforcement: Replace hard-coded values with tokens for colors, typography, spacing.
  • Component conformance: Align custom implementations with design system components and patterns.
  • Accessibility & responsiveness: Ensure contrast, focus states, and responsive behavior meet guidelines.

Quick Start

Run a design-system audit on the target feature and refactor its styles to use tokens and reusable components.

Frequently Asked Questions about normalize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I align frontend components with a design system?

Align frontend components with a design system by auditing target features and refactoring styles to use tokens and reusable patterns. This ensures design token enforcement, component conformance, and accessibility responsiveness across platforms.

What is the best way to replace hard-coded values with design tokens?

Replacing hard-coded values with design tokens involves auditing custom implementations and mapping colors, typography, and spacing to the design system. This refactoring process improves consistency and reduces visual debt across products.

How do I ensure accessibility and responsiveness in frontend UI features?

Ensure accessibility and responsiveness in frontend UI features by verifying contrast, focus states, and responsive behavior against project guidelines. This conformance check aligns custom implementations with design system accessibility standards.

Can I use this to fix visual debt across multiple product features?

Yes, you can fix visual debt across multiple product features by normalizing designs to align with the design system. This process enforces token usage, design-pattern conformance, and quality checks across various platforms.

Does design system normalization require specific frontend frameworks?

Design system normalization does not require specific frontend frameworks. It applies to frontend components and UI features requiring token-based typography, color, spacing, and accessibility conformance across platforms.

Why does my custom UI implementation fail design pattern conformance checks?

Custom UI implementations fail design pattern conformance checks when hard-coded values bypass design tokens. Normalizing these features by refactoring styles to use tokens and reusable components ensures quality and consistency.