skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system-principles

Enforce design system token usage and component reuse across UI themes.

Updated May 19, 2026
Search Tags:#theming#anti-patterns#design system#tokens#ui consistency#component reuse
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill design-system-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-principles
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.agent/skills/design-system-principles
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill design-system-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about design-system-principles

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

FAQPage Schema
How do I prevent UI drift from hardcoded styling values?▼

Prevent UI drift by replacing hardcoded colors, spacing, radius, and shadows with design system tokens. This ensures themes override styles correctly and maintains visual consistency across the entire project.

Why does my UI look inconsistent across multiple themes?▼

UI inconsistencies across multiple themes occur when hardcoded values bypass the design system. Verify token usage for colors, contrast, elevation, and palette behavior across all defined themes to achieve multi-theme coherence.

What is the best way to enforce component reuse instead of creating inline UI?▼

The best way to enforce component reuse is to consult the project's existing UI inventory and utilize kit components rather than creating uncatalogued primitives. This eliminates architectural drift and maintains design system consistency.

Can I apply design system tokens to visual styles like neumorphism and glassmorphism?▼

Yes, you can apply design system tokens to neumorphism, glassmorphism, material, and custom visual styles. The paradigm-agnostic consistency rules apply equally across all visual paradigms without changing the token enforcement logic.

When do I need to review design system anti-patterns in my component creation workflow?▼

Review design system anti-patterns during any component creation, token usage, or theming verification task. This prevents visual and architectural drift by catching hardcoded styling, inconsistent scales, and theme mismatches early.

Related Skills

Explore More Design & Creative Skills→
c0x12cc0x12c
96

design-intelligence

Generate design tokens, color palettes, typography scales, and component inventories from project context.

Official
Intermediate
TimeKastTimeKast

kb-design-system

Enforce design-system consistency by auditing UI against token and kit rules.

Official
Intermediate
nachopalmerinachopalmeri

normalize

Identify feature deviations and align custom styles with design system tokens.

Community
Advanced
wasintohwasintoh
90

design-excellence

Polish AI-built UI with color, typography, spacing, and motion guidelines.

Community
Basic