skills.rest
jey3dayo
jey3dayoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-review

Automate UI change reviews for design-system compliance and token usage.

Updated Apr 18, 2026
Search Tags:#design system#ui review#token usage#component routing#interaction consistency
One-click install
npx skills add https://github.com/jey3dayo/apm-workspace --skill design-system-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-review
Source: https://github.com/jey3dayo/apm-workspace/tree/main/catalog/skills/design-system-review
Command: npx skills add https://github.com/jey3dayo/apm-workspace --skill design-system-review

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the review of UI changes for design-system compliance, reusable component routing, token usage, and interaction consistency, streamlining the process and reducing manual effort.

Core Features & Use Cases

  • Design-System Compliance: Automatically checks UI changes against design-system guidelines.
  • Component Routing: Validates that components are using the correct routing paths.
  • Token Usage: Ensures that design tokens are used consistently across the application.
  • Use Case: After updating a UI component, run this Skill to automatically verify that it adheres to the design system without manual checks.

Quick Start

Use the design-system-review skill to review UI changes in the 'src/design-system' directory.

Frequently Asked Questions about design-system-review

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

FAQPage Schema
How do I automate design system compliance checks for UI changes?▼

Automate design system compliance by running a review script that checks UI changes against design-system guidelines, validating reusable component routing, token usage, and interaction consistency.

What is design token usage validation and how does it work?▼

Design token usage validation ensures design tokens are applied consistently across the application by automatically verifying that UI changes adhere to the predefined token standards.

Can I review UI component routing paths against design system standards?▼

Yes, you can review UI component routing paths by running an automated check that validates components are using the correct routing paths according to your design-system guidelines.

Do I need specific markdown files to check interaction consistency in UI development?▼

Yes, checking interaction consistency requires AGENTS.md, CLAUDE.md, DESIGN.md, and DESIGN_REVIEW.md files to provide the necessary guidance for the automated review process.

What's the best way to verify UI changes adhere to design system rules without manual checks?▼

The best way to verify UI changes without manual checks is to run an automated review script targeting the 'src/design-system' directory to validate compliance, routing, and token usage.

When should I run an automated design system review for UI development?▼

Run an automated design system review after updating a UI component to verify it adheres to design standards, ensuring component routing, token usage, and interaction consistency without manual intervention.

Related Skills

Explore More Software Engineering Skills→
jey3dayojey3dayo

design-md-workflow

Create paired DESIGN.md and DESIGN_REVIEW.md documents for UI design systems.

Community
Advanced
ilove323ilove323

design-system

Audit UI component naming, token usage, and documentation coverage.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced