skills.rest
raingernx
raingernxCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Enforce repo-wide UI consistency by reusing existing design-system components.

Updated Aug 27, 2026
Search Tags:#react#tailwind#tokens#design-system#component-reuse#ui-consistency
One-click install
npx skills add https://github.com/raingernx/KRUKRAFT --skill ui-design-system-raingernx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/raingernx/KRUKRAFT/tree/main/.codex/skills/ui-design-system
Command: npx skills add https://github.com/raingernx/KRUKRAFT --skill ui-design-system-raingernx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill ensures UI changes adhere to the canonical design system, preventing duplication and drift across the codebase.

Core Features & Use Cases

  • Reuse existing design-system primitives and components to enforce consistency across features and pages.
  • Validate design-token usage and layout patterns to align with the established design language.
  • Guide code reviews and onboarding by providing repo-wide design-system guidance to avoid duplicative abstractions.

Quick Start

Review the repository's design-system primitives and components to identify existing patterns and reuse them before implementing new UI.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I enforce design system consistency when reusing React and Tailwind components?▼

To enforce design system consistency, you reuse existing React and Tailwind primitives and tokens across pages, validating that new UI adheres to established patterns to prevent duplication and drift.

What is the best way to prevent UI component duplication and drift in a codebase?▼

Preventing UI duplication and drift involves following locked-component guidance and reusing canonical design-system primitives, ensuring all new features align with the established design language before implementation.

Does this design system enforcement approach require existing component code in the repository?▼

Yes, this approach requires actual component code to exist in the repo, ensuring the guidance provided aligns directly with the established tokens, patterns, and component variants already present.

How do I validate design token usage and layout patterns for new UI features?▼

You validate design token usage by checking new UI implementations against repo-wide design-system primitives, ensuring layout patterns and component variants align with the canonical design language.

Can I use this to guide code reviews for React design system adherence?▼

Yes, you can guide code reviews by providing repo-wide design-system guidance, helping reviewers identify when developers should reuse existing components instead of creating duplicative abstractions.

When should I not create new abstractions for my Tailwind UI components?▼

You should not create new abstractions when existing design-system primitives and locked components already cover the required UI patterns, as duplicating them causes drift and inconsistency across the codebase.

Related Skills

Explore More Design & Creative Skills→
kmshihab7878kmshihab7878
6

baseline-ui

Validate Tailwind CSS UI components for motion, typography, accessibility, and layout rules.

Community
Advanced
MeechYourGoalsMeechYourGoals
2

chravel-ui-consistency

Audit Chravel's user interface for visual consistency and design system adherence.

Community
Intermediate
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
dralgorhythmdralgorhythm
111

design-systems

Standardize UI components and design tokens across projects.

Community
Advanced