skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-stack-pro

Validate UI components against 8px grid, color, typography, dark mode, and 5-state rules.

Updated Jun 27, 2026
Search Tags:#design system#ui design#ui development#ui component#ui consistency
One-click install
npx skills add https://github.com/truongnat/aix --skill ui-stack-pro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-stack-pro
Source: https://github.com/truongnat/aix/tree/main/content/skills/ui-stack-pro
Command: npx skills add https://github.com/truongnat/aix --skill ui-stack-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enforces a consistent design system across all AI-generated UI components, preventing inconsistencies in padding, colors, and interaction states.

Core Features & Use Cases

  • Design System Enforcement: Ensures components adhere to a 8px grid, color system, typography scale, dark mode, and 5-state interactions.
  • Use Case: When generating any UI component, use the ui-stack-pro skill to ensure that the component follows the established design system guidelines.

Quick Start

Generate a new button component with ui-stack-pro, ensuring it adheres to the design system.

Frequently Asked Questions about ui-stack-pro

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

FAQPage Schema
How do I enforce UI consistency across AI-generated components?▼

To enforce UI consistency, validate components against a design system compliance layer that checks adherence to an 8px grid, color system, typography scale, dark mode, and 5-state interactions. This prevents inconsistencies in padding and colors.

What is a design system compliance layer for UI development?▼

A design system compliance layer operates over generated UI components to validate and enforce established rules. It ensures generated outputs adhere to specific grid dimensions, color palettes, typography scales, dark mode requirements, and interaction states.

How do I validate 8px grid and color system rules for UI components?▼

You validate 8px grid and color system rules by applying a design system enforcement process to your UI components. This compliance check ensures spacing, colors, typography, dark mode, and 5-state interactions align with established guidelines.

Can I use design system enforcement for existing UI reviews?▼

Yes, you can use design system enforcement for existing UI reviews. The compliance layer applies to both new projects and UI reviews, ensuring that all evaluated components adhere to the required design system guidelines.

What are the limitations of automated UI design system enforcement?▼

Automated UI design system enforcement requires strict adherence to predefined rules including an 8px grid, color system, typography scale, dark mode, and 5-state interactions. Components failing to meet these specific criteria will not pass the compliance validation.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
mcgilly17mcgilly17
2

Storybook Patterns

Document and test UI components with Storybook 7+ stories.

Community
Intermediate
zizzfizzixzizzfizzix

ui-consistency

Verify backend/admin UI components against design system semantic tokens and component catalog.

Community
Basic
AshesOfTheUndeadAshesOfTheUndead

artistic

Implement high-contrast design tokens and WCAG 2.2 accessibility rules.

Community
Intermediate