skills.rest
nicolaiprodromov
nicolaiprodromovCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Normalizes Puree UI designs to match SCSS variables and component conventions.

20|2|Updated Oct 5, 2025
Search Tags:#consistency#components#yaml#design-system#scss#normalize#ui-tokens
One-click install
npx skills add https://github.com/nicolaiprodromov/puree --skill normalize-nicolaiprodromov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/nicolaiprodromov/puree/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/nicolaiprodromov/puree --skill normalize-nicolaiprodromov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reconciles Puree UI designs (YAML/SCSS) with existing SCSS variables, color tokens, spacing, and component naming conventions to ensure consistent design language across projects.

Core Features & Use Cases

  • Aligns YAML/SCSS design tokens with established SCSS variables (colors, typography, spacing).
  • Detects deviations from component patterns and naming conventions, proposing fixes.
  • Produces a normalization plan and actionable steps to bring a feature into line with brand guidelines.

Quick Start

Run the frontend-design skill to gather context and execute the normalization plan to align the feature with existing SCSS variables and component patterns.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align Puree UI designs with existing SCSS variables?▼

You align Puree UI designs with SCSS variables by mapping YAML/SCSS design tokens to established color, typography, and spacing conventions, ensuring consistent design language across projects.

What is the best way to normalize design tokens in a YAML/SCSS pipeline?▼

Normalizing design tokens in a YAML/SCSS pipeline involves reconciling component naming conventions and token variables, producing an actionable plan to replace deviations with shared system values.

How does this approach handle hard-coded values in my design system?▼

It handles hard-coded values by detecting deviations from established SCSS variables and component patterns, guiding you through a structured plan from discovery to cleanup to enforce existing tokens.

Can I use this to fix typography and color deviations in my UI components?▼

Yes, you can use this to fix typography and color deviations by applying component token normalization across YAML/SCSS pipelines, bringing features into line with brand guidelines.

Do I need to run another tool before executing the normalization plan?▼

Yes, you should run a frontend-design skill first to gather context, then execute the normalization plan to align your feature with existing SCSS variables and component patterns.

Related Skills

Explore More Design & Creative Skills→
trevorbyrumtrevorbyrum
1

ui-review

Audit frontend code for design token violations and accessibility failures.

Community
Advanced
baloisebaloise
111

ds-create-token

Analyze SCSS files to create design tokens in Base.tokens.json.

Official
Intermediate
nicolaiprodromovnicolaiprodromov
20

colorize

Apply SCSS color variables to Puree UI components for visual hierarchy.

Community
Intermediate
ikastnerikastner

figma-to-code

Convert Figma designs into React/Next.js components with TypeScript and Tailwind.

Community
Advanced