Skills
.Work. You
Rest

design-system-principles

Official

Keep every UI consistent with tokens.

Design & Creative#theming#anti-patterns#design system#tokens#ui consistency#component reuse
AuthorTimeKast
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents visual and architectural drift in UI work by enforcing universal design system rules for tokens, component reuse, theming consistency, and anti-pattern avoidance.

Core Features & Use Cases

  • Token usage over hardcoded values: Ensures colors, spacing, radius, and shadows come from the design system so themes can override correctly.
  • Component reuse instead of inline UI: Forces consulting the project’s UI inventory and using existing kit components rather than creating uncatalogued primitives.
  • Multi-theme verification: Requires checking the same UI concepts across all defined themes to avoid inconsistencies in contrast, elevation, and palette behavior.
  • Paradigm-agnostic consistency: Applies equally to neumorphism, glassmorphism, material, and custom visual styles without changing the rules.

Quick Start

Apply these rules to any task that touches UI, components, styling, themes, or tokens by replacing hardcoded values with design-system tokens and reusing the project’s existing UI kit components across all themes.

Dependency Matrix

Required Modules

None required

Components

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: design-system-principles
Download link: https://github.com/TimeKast/AgendaInteligente/archive/main.zip#design-system-principles

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.