skills.rest
childrentime
childrentimeCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Normalize frontend design to match a team's design system.

1.0k|140|Updated Sep 18, 2022
Search Tags:#typography#a11y#tokens#design-system#spacing#ui-consistency#normalize
One-click install
npx skills add https://github.com/childrentime/reactuse --skill normalize-childrentime
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/childrentime/reactuse/tree/main/packages/website-astro/.agents/skills/normalize
Command: npx skills add https://github.com/childrentime/reactuse --skill normalize-childrentime

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to maintain visual consistency across features; this Skill provides a structured approach to analyze and rework features to conform to the design system.

Core Features & Use Cases

  • Replace hard-coded styles with design tokens and system components.
  • Align typography, color, spacing, and components to the design system across features and pages.
  • Use the workflow to normalize a feature such as a new dashboard module to match tokens and component patterns.

Quick Start

Describe the feature to normalize and I will align it to the design system.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align UI elements to an existing design system?▼

To align UI elements to a design system, you replace hard-coded styles with design tokens and map features to system components. This ensures consistent typography, spacing, and color across pages.

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

Replacing hard-coded styles with design tokens involves mapping custom values to your system's predefined tokens. This normalizes typography, color, and spacing while avoiding one-off styles across features.

How do I normalize a frontend feature to match component patterns?▼

Normalizing a frontend feature requires analyzing its current styles and remapping them to established component patterns. This workflow aligns new modules like a dashboard directly to your design system.

Can I use this to fix accessible contrast and spacing inconsistencies across pages?▼

Yes, you can use this to fix accessible contrast and spacing inconsistencies. It analyzes your feature and reworks it to satisfy accessibility requirements and consistent spacing using design tokens.

When do I need to normalize UI consistency for a new dashboard module?▼

You need to normalize UI consistency when adding new features like a dashboard module that introduce one-off styles. It aligns the new module's typography, spacing, and components to the system.

Related Skills

Explore More Design & Creative Skills→
FldicoahkiinFldicoahkiin
1

normalize

Audits UI and aligns typography, spacing tokens, and patterns to design system standards.

Community
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
Michae2xlMichae2xl

design-system

Generate and audit design systems by scanning CSS and component patterns.

Community
Advanced