ui-system

Name: ui-system
Availability: InStock
Author: thorstarlord

Define literal and semantic design tokens for colors, spacing, and typography.

1|Updated May 6, 2026

Search Tags:#design system #design tokens #typography scale #ui theme #spacing scale #frontend specification #semantic color system

Ready to run

npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-system-thorstarlord

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-system
Source: https://github.com/ThorStarlord/interface-skills/tree/main/skills/ui-system
Command: npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-system-thorstarlord

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

ui-system eliminates token guesswork and visual drift by defining a shared design system vocabulary for colors, spacing, typography, elevation, border radius, and layout rules.

Core Features & Use Cases

Token foundation first: Produces both literal and semantic token layers so components reference meanings instead of raw values.
Pre-flight guided setup: Ensures the design system aligns with brand direction, theme requirements (light/dark), and density preferences.
Scales and rules: Establishes mathematically consistent spacing, ratio-based typography, bounded radius/elevation sets, and explicit breakpoints for downstream specs and generation.

Quick Start

Use ui-system to define the missing design tokens for a new project so component specs can reference existing semantic token names instead of inventing hex values and paddings.

Frequently Asked Questions about ui-system

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

FAQPage Schema

How do I create a design system with semantic and literal color tokens?▼

To create a design system with semantic and literal color tokens, define a two-layer token mapping where semantic references point to literal values. This enforces consistent visual meanings across components instead of raw hex values.

What is the best way to establish spacing and typography scales for a frontend specification?▼

Establishing spacing and typography scales requires defining mathematically consistent spacing increments and ratio-based typography sizes. These scales ensure downstream interface specifications maintain bounded, reusable layout and text proportions.

When do I need to define UI design tokens for a new frontend project?▼

You need to define UI design tokens when starting a new frontend project, when component specs reference non-existent token names, or when generated UI shows inconsistent visual values like mismatched paddings or raw colors.

How do I prevent inconsistent visual values and silent defaulting in my UI theme?▼

Prevent inconsistent visual values and silent defaulting by gathering required theme, brand, and density inputs upfront. This pre-flight setup ensures the token vocabulary aligns with direction before generating interface specifications.

Can I define both light and dark theme tokens using a two-layer token mapping?▼

Yes, you can define both light and dark theme tokens using a two-layer mapping. Semantic tokens reference different literal values based on theme requirements, allowing components to switch themes without changing token names.

What layout rules and elevation sets should a design system foundation include?▼

A design system foundation should include explicit breakpoints for layout rules, bounded border radius sets, and defined elevation scales. These establish consistent structural visuals for downstream component generation.