skills.rest
motormetrics
motormetricsOFFICIAL
Explore all skills by this author →
Website𝕏@motormetricsGitHub

ui-design-system

Standardize dashboard UI components, typography, and color usage.

21|2|Updated Nov 5, 2023
Search Tags:#typography#accessibility#components#dashboard#tailwind#design-system#ui-patterns
One-click install
npx skills add https://github.com/motormetrics/motormetrics --skill ui-design-system-motormetrics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/motormetrics/motormetrics/tree/main/apps/web/.claude/skills/ui-design-system
Command: npx skills add https://github.com/motormetrics/motormetrics --skill ui-design-system-motormetrics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design-system skill standardizes dashboard UI across MotorMetrics, reducing visual drift and enforcing a cohesive, professional look on web interfaces.

Core Features & Use Cases

  • Design system enforcement for consistent navigation, cards, buttons, typography and spacing in the web dashboard.
  • Governance of colour palette, typography rules, rounded element patterns, and accessibility considerations to meet WCAG AA standards.
  • Use cases include building new components, reviewing existing UI for consistency, migrating components to the unified system, and auditing pages for design compliance.

Quick Start

Apply these UI guidelines to the current dashboard components to ensure a consistent, professional look.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I maintain visual consistency across dashboard UI components?▼

To maintain visual consistency across dashboard UI components, apply a standardized design system that governs color palette, typography rules, spacing, and layout grids. This prevents visual drift and enforces a cohesive professional look across all web interface elements.

What typography and color rules should I follow for a professional web app UI?▼

For a professional web app UI, follow design system rules that specify a defined color palette, typography hierarchy, and rounded element patterns. These rules ensure readability and aesthetic consistency across dashboard navigation, cards, and buttons while meeting accessibility requirements.

How do I audit existing dashboard pages for design system compliance?▼

You audit existing dashboard pages for design system compliance by reviewing interface elements like cards, buttons, and typography against established anti-patterns and design principles. This process identifies visual drift and ensures spacing and color usage meet WCAG AA standards.

Does this UI design system approach support WCAG AA accessibility standards?▼

Yes, this UI design system approach supports WCAG AA accessibility standards by enforcing specific accessibility requirements and color palette governance. It guides implementation of dashboard components to ensure navigation and typography remain accessible to all users.

What are common anti-patterns to avoid when building dashboard UI components?▼

Common anti-patterns to avoid when building dashboard UI components include diverging from the defined spacing, layout grids, and color palette. The design system specifies these anti-patterns to prevent visual drift and maintain a unified professional aesthetic across web app pages.

Related Skills

Explore More Design & Creative Skills→
levinbaenningerlevinbaenninger

tailwind-design-system

Standardize Tailwind CSS v4 design systems with React 19 component patterns.

Community
Advanced
shanehollomanshaneholloman

design-review

Audit UI pages, components, and breakpoints against a design-review checklist.

Community
Advanced
omanjayaomanjaya

tailwind-components

Generate reusable Tailwind CSS component patterns with accessible and responsive states.

Community
Basic
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate