skills.rest
Higashi-Kota
Higashi-KotaCOMMUNITY
Explore all skills by this author →
GitHub

workflow-review

Audit design-token pipelines from YAML through CSS and Tailwind transformations.

Updated Sep 14, 2025
Search Tags:#quality assurance#workflow automation#design system#Tailwind CSS#token generation#build pipeline#CSS variables
One-click install
npx skills add https://github.com/Higashi-Kota/react-tailwindcss-sandbox --skill workflow-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workflow-review
Source: https://github.com/Higashi-Kota/react-tailwindcss-sandbox/tree/main/.claude/skills/workflow-review
Command: npx skills add https://github.com/Higashi-Kota/react-tailwindcss-sandbox --skill workflow-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm.

What problem does it solve?

A broken or inefficient design token pipeline (Figma→YAML→CSS→Tailwind→Components) can lead to manual errors, generation failures, and inconsistent outputs. This Skill provides a comprehensive evaluation of your entire design token workflow, ensuring reliability and preventing costly build issues.

Core Features & Use Cases

  • Pipeline Integrity Check: Reviews the complete token transformation flow from design-tokens.yml to generated CSS and Tailwind utilities.
  • Auto-generation Verification: Ensures generate-theme-css.ts mappings are complete and accurately reflect YAML definitions.
  • Manual Edit Detection: Identifies any manual changes in generated CSS files that could be overwritten, flagging potential maintenance traps.
  • Validation Coverage Analysis: Pinpoints gaps in existing validation scripts and recommends new ones to enhance quality assurance.
  • Build Process Health: Tests and analyzes the health and reliability of all build commands (pnpm build:prepare, pnpm build:prod:app).
  • Use Case: Investigate why new design tokens aren't appearing as Tailwind utilities in your components, identifying missing mappings in the generation script or manual edits in generated CSS.

Quick Start

Use the workflow-review skill to audit the token pipeline and build process for the entire design system.

Frequently Asked Questions about workflow-review

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

FAQPage Schema
How do I audit a design token pipeline from YAML to CSS to Tailwind?▼

Design token pipeline auditing reviews the complete transformation flow from design-tokens.yml through generate-theme-css.ts mappings to final CSS and Tailwind utilities, identifying breaks, missing mappings, and generation failures that prevent tokens from appearing in components.

Why aren't my design tokens appearing as Tailwind utilities?▼

Missing or incomplete mappings in your generation script, manual edits in generated CSS files, or gaps in validation coverage can prevent tokens from reaching Tailwind. Pipeline auditing detects these issues and reports exactly where the flow breaks.

Can I detect manual edits in auto-generated CSS files?▼

Yes, pipeline auditing identifies manual changes in generated CSS that could be overwritten on rebuild, flagging maintenance risks and ensuring your generation script remains the single source of truth.

How do I validate my design system build process with pnpm?▼

Pipeline auditing tests build command health (pnpm build:prepare, pnpm build:prod:app), validates auto-generation integrity, and analyzes the complete workflow to ensure reliable builds and consistent design token outputs.

What validation gaps exist in my design token workflow?▼

Pipeline auditing pinpoints missing or incomplete validation scripts across your Figma→YAML→CSS→Tailwind flow, recommending new checks to enhance quality assurance and catch generation issues before production.

Do I need to manually verify CSS token generation?▼

No, pipeline auditing automates verification of design-tokens.yml mappings, generated-tokens.css, and theme.css outputs, detecting mismatches and manual edits without manual inspection.

Related Skills

Explore More Software Engineering Skills→
kaeligkaelig
7

design-analyst

Extract Figma component specifications and generate a Markdown brief.

Community
Advanced
csim-sgcsim-sg

tailwindcss-advanced-design-systems

Build scalable Tailwind CSS design systems with design tokens and @theme configuration.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
hoanghd218hoanghd218

ui-styling

Automate accessible themed UI components with shadcn/ui, Radix, and Tailwind CSS.

Community
Intermediate