skills.rest
sgpropertyanalytics
sgpropertyanalyticsOFFICIAL
Explore all skills by this author →
GitHub

design-system

Consolidate UI tokens, components, and layout rules for React-based dashboards.

2|1|Updated Dec 15, 2025
Search Tags:#typography#ui#accessibility#frontend#components#design-system#design-patterns
One-click install
npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill design-system-sgpropertyanalytics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/sgpropertyanalytics/sg-property-analytics/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/sgpropertyanalytics/sg-property-analytics --skill design-system-sgpropertyanalytics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralized, cohesive design language and components reduce visual drift and speed up frontend development for dashboards.

Core Features & Use Cases

  • Unified color tokens, typography scales, component catalog, and responsive layout guides for consistent UI across apps
  • Reusable patterns for charts, cards, and navigation that accelerate feature delivery
  • Use Case: Teams can implement a shared dashboard UI with predictable visuals and accessible interactions across CCR/RCR/OCR segments

Quick Start

Integrate the design system by adopting the tokens, components, and layout patterns in your UI codebase to achieve a consistent dashboard experience.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I maintain visual consistency across multiple React dashboards?▼

To maintain visual consistency across React dashboards, adopt a centralized design system that defines unified UI tokens, typography scales, and component catalogs. This approach prevents visual drift and accelerates frontend development by providing reusable patterns for charts and cards.

What is a UI token and how does it standardize frontend components?▼

A UI token is a centralized design variable that standardizes frontend components by defining reusable color and typography scales. This ensures predictable visuals and accessible interactions across different dashboard interfaces without requiring manual style adjustments.

Does this design system include accessibility practices for UI components?▼

Yes, this design system includes accessibility practices for UI components. It defines specific interaction guidelines and accessibility practices alongside its component catalog to ensure robust, scalable, and accessible UI delivery across dashboard applications.

How do I start integrating a design system into my existing UI codebase?▼

To start integrating a design system into your UI codebase, adopt the predefined color tokens, typography scales, and responsive layout patterns. Applying these reusable rules to your charts and navigation components achieves a consistent dashboard experience quickly.

What is the best way to build reusable navigation and chart patterns for dashboards?▼

The best way to build reusable navigation and chart patterns for dashboards is utilizing a unified design system. It provides a shared component catalog and layout rules, enabling teams to accelerate feature delivery with predictable visuals across segments.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
jokken79jokken79
1

core-components

Implement core component libraries with design tokens for consistent UI styling.

Community
Intermediate
notbozhonotbozho

testing-library

Validate UI component behavior across React, Vue, and Svelte using Testing Library queries and user events.

Community
Intermediate
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced