ui-design

Validate UI code against design-system standards and generate compliant components.

Updated Apr 18, 2026

Search Tags:#accessibility #generation #pre-commit #validate #code-review #design-system #ui-components

Ready to run

npx skills add https://github.com/psdjungpulzze/smartstudy --skill ui-design-psdjungpulzze

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/psdjungpulzze/smartstudy/tree/main/.claude/skills/i/ui-design
Command: npx skills add https://github.com/psdjungpulzze/smartstudy --skill ui-design-psdjungpulzze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validates UI code against Interactor design system standards and generates compliant components to accelerate UI work and ensure consistency across projects.

Core Features & Use Cases

Validation of universal standards (color palette, typography, spacing, border radii, dark mode, accessibility)
Framework-specific validation (Material UI patterns such as layout, components, and warnings)
Generation of compliant UI components (buttons, inputs, cards, modals, navigation)
Pre-commit UI checks and review-time validation to catch issues early

Quick Start

Use the ui-design skill to validate and generate UI components that conform to the design system before merging UI work.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I validate UI code against design-system standards before merging?▼

To validate UI code against design-system standards, apply pre-commit UI checks and review-time validation to catch inconsistencies early. This ensures universal standards for color, typography, spacing, and accessibility are met before merging.

Can I generate Material UI components that automatically meet design system requirements?▼

Yes, you can generate compliant UI components like buttons, inputs, and modals that satisfy Material UI framework-specific requirements. This ensures generated layout and component patterns meet design-system standards.

What UI standards are checked during a design handoff code review?▼

During a design handoff code review, universal UI standards including color palette, typography, spacing, border radii, dark mode, and accessibility are checked. Framework-specific Material UI patterns are also validated.

How do I automate pre-commit checks for accessibility and dark mode compliance?▼

Automate pre-commit checks by validating UI code against universal design-system standards, which include accessibility and dark mode compliance. This catches issues early during UI development and PR checks.

Does this validation tool work for generating framework-specific layout patterns?▼

Yes, framework-specific validation supports Material UI patterns such as layout, components, and warnings. It validates these patterns and generates compliant UI components to accelerate UI work.