skills.rest
psdjungpulzze
psdjungpulzzeCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/psdjungpulzze/smartstudy --skill ui-design-psdjungpulzze
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
klhklh
9

core-components

Provide reusable core components and design tokens for frontend UI development.

Community
Intermediate
carayacaraya
1

preact_ui

Create accessible Preact UI components with JSX/TSX patterns and automated accessibility checks.

Community
Intermediate
HomericIntelligenceHomericIntelligence
18

quality-run-linters

Run Mojo format, markdownlint, and pre-commit hooks for code quality checks.

Official
Intermediate
AshesOfTheUndeadAshesOfTheUndead

storytelling

Implement narrative-driven design systems with WCAG 2.2-compliant UI components and color tokens.

Community
Intermediate