css-design-system
CommunityEnforce a consistent NestMatch UAE design system.
System Documentation
What problem does it solve?
NestMatch UAE frontend teams face visual inconsistency and maintenance overhead when styling across components and pages. A token-driven design system centralizes color, typography, spacing, shadows, borders, and breakpoints to enforce consistency and speed up UI development.
Core Features & Use Cases
- Token-driven styling: CSS custom properties defined in :root for colors, typography, spacing, and surfaces.
- Global theming: supports dark and light themes via data-theme attributes and tokens.
- Scoping and documentation: references in src/index.css and design-system/MASTER.md to ensure a single source of truth.
Use Case: When starting a new UI module, import the design system tokens and apply classes and tokens to achieve a cohesive look without re-defining values.
Quick Start
Install the design system by importing the CSS tokens from the master file before building any component styles.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: css-design-system Download link: https://github.com/HotspotVPN/Nest_Match_UAE/archive/main.zip#css-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.