skills.rest
runwhen-contrib
runwhen-contribOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Design & Creative Skills→
Nikhil-Chopra-7Nikhil-Chopra-7
1

component-styling

Style frontend components with a unified MUI and Tailwind approach.

Community
Intermediate
yxc023yxc023

frontend-design

Align frontend interfaces with design tokens, typography, color, and accessibility constraints.

Community
Advanced
kamal81684kamal81684

frontend-design

Convert UI design requirements into React or Vue frontend code with design tokens.

Community
Advanced
PiercingXXPiercingXX
1

simple

Convert Simple design tokens into component and accessibility rules.

Community
Basic