skills.rest
GainInsightDev
GainInsightDevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

af-retrofit-design-grammar

Retrofit existing projects with design tokens, component mapping, and Style Dictionary pipelines.

Updated Feb 8, 2026
Search Tags:#tokens#brownfield#retrofit#component mapping#style dictionary#design grammar
One-click install
npx skills add https://github.com/GainInsightDev/websites --skill af-retrofit-design-grammar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: af-retrofit-design-grammar
Source: https://github.com/GainInsightDev/websites/tree/main/.claude/skills/af-retrofit-design-grammar
Command: npx skills add https://github.com/GainInsightDev/websites --skill af-retrofit-design-grammar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of integrating a Design Grammar into existing projects, ensuring consistency and adherence to design principles.

Core Features & Use Cases

  • Token Setup: Establishes project-specific design tokens based on a grammar token schema.
  • Component Mapping: Aligns existing UI components with grammar definitions (atoms, molecules, organisms).
  • Build Pipeline Configuration: Sets up and configures the token build pipeline (e.g., Style Dictionary).
  • Use Case: When onboarding a new or legacy project into a design system, this skill ensures its UI elements and design tokens are compliant with the established Design Grammar.

Quick Start

Use the af-retrofit-design-grammar skill to add the Design Grammar to the current project.

Frequently Asked Questions about af-retrofit-design-grammar

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

FAQPage Schema
How do I integrate design tokens into an existing brownfield project?▼

To retrofit design tokens into an existing project, establish project-specific design tokens from a grammar token schema, map UI components to grammar types, and configure the build pipeline using Style Dictionary for consistent vocabulary.

What is the best way to align legacy UI components with a design grammar?▼

Aligning legacy UI components with a design grammar involves mapping your existing atoms, molecules, and organisms to established grammar definitions, ensuring your UI elements comply with the shared design vocabulary.

How do I configure a Style Dictionary build pipeline for W3C DTCG tokens?▼

Configuring a Style Dictionary build pipeline for W3C DTCG tokens involves setting up the token build pipeline to process project-specific design tokens, ensuring adherence to the W3C Design Token Community Group format.

Can I use this design grammar retrofit process for any existing codebase?▼

The design grammar retrofit process targets existing brownfield projects needing a shared design vocabulary. It establishes project-specific tokens and configures the build pipeline regardless of the legacy UI components present.

Do I need a predefined grammar token schema before retrofitting a project?▼

Yes, a predefined grammar token schema is required to establish project-specific design tokens. The retrofitting process maps existing components to grammar types based on these established definitions to ensure compliance.

Related Skills

Explore More Software Engineering Skills→
projectedanxprojectedanx
1

design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

Community
Intermediate
dylantarredylantarre
38

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

Community
Intermediate
donggyun112donggyun112
3

frontend-developer

Develop React and TypeScript user interfaces using the Redpanda UI Registry.

Community
Intermediate
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced