skills.rest
sgcarstrends
sgcarstrendsOFFICIAL
Explore all skills by this author →
GitHub

ui-design-system

Enforce consistent UI patterns for the SG Cars Trends web application.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces a modern dashboard UI design system with a navy-blue palette, pill-shaped elements, and typography standards to ensure visual consistency.

Core Features & Use Cases

  • Design Principles: No sidebars, pill navigation, rounded cards, and generous whitespace.
  • Color & Typography: Semantic color usage with CSS variables and Tailwind mappings.
  • Component Patterns: Navigation, cards, buttons, status badges, and metrics display.

Quick Start

Use semantic CSS variables and typography components from @web/components/typography to style new dashboard components.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I enforce consistent UI patterns across my dashboard application?▼

Use semantic CSS variables and typography components to enforce consistent UI patterns. This design system applies navy color schemes, pill-shaped navigation, rounded cards, and grid-based spacing rules across all dashboard components, ensuring visual cohesion.

What are the core design principles for building dashboard components?▼

Dashboard design emphasizes no sidebars, pill-shaped navigation elements, large rounded cards, professional typography, and generous whitespace. These principles, combined with semantic color tokens and CSS variables, create a modern, accessible interface.

Can I use CSS variables and Tailwind with this design system?▼

Yes. This design system uses semantic CSS variables mapped to Tailwind for styling. Reference @web/components/typography to apply typography standards and color tokens when building or refactoring dashboard components.

How do I implement navigation, buttons, and status badges consistently?▼

The design system defines component patterns for navigation, cards, buttons, status badges, and metrics displays. Apply these patterns using semantic CSS variables and typography components to maintain consistency across new and existing UI elements.

When should I use this design system to review or upgrade existing components?▼

Apply this design system when reviewing existing UI for consistency, implementing new dashboard pages, or refactoring components. It ensures all elements—navigation, cards, buttons, and metrics displays—meet functional and technical requirements.

What accessibility features does this design system include?▼

The design system enforces professional typography standards and semantic color usage that support accessibility requirements. Use the defined color palette, spacing rules, and component patterns to build accessible dashboard interfaces.

Related Skills

Explore More Design & Creative Skills→
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
yermilovyermilov
7

design-system

Apply terminal-CRT design tokens to slide components and styles.

Community
Advanced