runwhen-ui

Enforce RunWhen's MUI++ design system and token-based rules in frontend code.

1|Updated Apr 3, 2024

Search Tags:#consistency #frontend #tokens #ui-design #mui #design-system #design-standards

Ready to run

npx skills add https://github.com/runwhen-contrib/codecollection-registry --skill runwhen-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: runwhen-ui
Source: https://github.com/runwhen-contrib/codecollection-registry/tree/main/.claude/skills/ui
Command: npx skills add https://github.com/runwhen-contrib/codecollection-registry --skill runwhen-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI consistency across frontend work by enforcing RunWhen's MUI++ design system and token-based rules.

Core Features & Use Cases

Enforces stripe structure, lightness, typography, color usage, spacing, and borders using design tokens.
Guides consistency in pages, components, and styling during creation, update, or review for user-pages.
Supports PR reviews and refactors by checking adherence to RunWhen design guidelines.

Quick Start

Apply the RunWhen UI Design System tokens to your frontend components and validate typography, color, and spacing against the guidelines before submitting changes.

Frequently Asked Questions about runwhen-ui

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

FAQPage Schema

How do I enforce UI design standards across frontend components?▼

To enforce UI design standards across frontend components, apply a token-driven design system that specifies typography, color, spacing, and borders. This ensures engineering output aligns with design guidelines during component creation, updates, and reviews.

What are design tokens and how do they solve UI inconsistency?▼

Design tokens solve UI inconsistency by centralizing visual attributes like typography, color, spacing, and borders into reusable variables. Applying tokens in frontend code ensures that pages and components adhere to strict design system guidelines.

Can I use this to check MUI styling during a PR review?▼

Yes, you can use this to check MUI styling during a PR review. It validates frontend code against design guidelines, ensuring stripe structure, lightness, and token usage are correctly applied before submitting changes.

What is the best way to refactor frontend code for design system compliance?▼

The best way to refactor frontend code for design system compliance is to validate existing pages and components against token-based rules. This process checks adherence to typography, color, and spacing guidelines to resolve visual inconsistencies.

Do I need predefined design tokens to align engineering with design?▼

Yes, you need predefined design tokens to align engineering with design. Token-driven implementation requires established variables for typography, color, spacing, and borders to successfully enforce standards across user-pages.