component-consistency-validation

Validate UI-kit changes across TSX, token CSS, Storybook, and Figma mappings.

2|Updated Dec 2, 2024
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill component-consistency-validation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-consistency-validation
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/component-consistency-validation
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill component-consistency-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validate that UI-kit changes across TSX components, token CSS, Storybook stories, and Figma mappings stay aligned, preventing drift during handoff.

Core Features & Use Cases

  • Cross-check TSX props and variants against story definitions to ensure supported configurations match.
  • Validate token usage and CSS token mappings against component styles to maintain visual consistency.
  • Report actionable recommendations and commands that maintainers can run to fix discrepancies.

Quick Start

After touching UI-kit TSX, tokens, Storybook, or Figma mappings, run the validation pass to get a concise report of inconsistencies and recommended fixes.

Frequently Asked Questions about component-consistency-validation

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

FAQPage Schema
How do I validate UI-kit changes across TSX, CSS tokens, and Storybook?▼

You can validate UI-kit changes by running local scripts under libs/ui that verify TSX exports, token references, and Storybook story definitions to detect alignment drift and produce prescriptive fix commands.

What is UI-kit cross-consistency validation for Figma mappings?▼

UI-kit cross-consistency validation is a verification process that aligns Figma mappings, TSX component props, token CSS, and Storybook stories to ensure supported configurations match and visual consistency is maintained during handoff.

When do I need to run Storybook and Figma mapping validation?▼

You need to run Storybook and Figma mapping validation whenever TSX components, token CSS, story definitions, or Figma artifacts have been modified to ensure cross-consistency and prevent drift before handoff.

Can I use local scripts to verify TSX exports and token references?▼

Yes, you can use local scripts under libs/ui to verify TSX component exports and token CSS references, which produces a concise report of inconsistencies and actionable commands that maintainers can run to fix discrepancies.

What's the best way to prevent UI-kit drift during design handoff?▼

The best way to prevent UI-kit drift during handoff is to validate that TSX props, variants, token CSS mappings, and Storybook stories stay aligned by running a cross-consistency check that reports actionable recommendations and fix commands.

Why does my Storybook story not match the TSX component variants?▼

Your Storybook story may not match TSX component variants because of uncaught drift after modifying UI-kit artifacts, which cross-consistency validation detects by checking supported configurations against story definitions and token usage.