How are themes synchronized across the project?

When a theme changes, the skill prompts updates across CSS tokens, Shiki syntax overrides, TypeScript palettes, and binary favicon files to ensure global consistency.

Does this skill enforce specific language conventions?

Yes, it mandates British English throughout all code, comments, documentation, and rendered content.

What is the core spacing philosophy of this skill?

The skill enforces a strict 8px grid where all spatial decisions, sizing, and line heights must resolve to multiples of 8px, typically converted to rem units (1rem = 16px).

How does the skill handle different color formats?

It manages primary tokens in OKLCH for modern browser rendering while ensuring hex-code synchronization for legacy requirements like Satori-based OG image generation.

What is the CSS layer hierarchy used here?

It follows a specific cascade order: reset, tokens, base, components, and utilities, with prose styles intentionally unlayered to maintain override control.

Design System Maintenance

Name: Design System Maintenance
Author: samfolo

bysamfolo

•

디자인 도구

Manages design tokens, theme synchronization, and CSS architecture according to Swiss Style principles and an 8px grid.

소개

This skill provides a comprehensive framework for maintaining a sophisticated design system, ensuring absolute consistency across typography, spacing, and color themes. It guides Claude through managing CSS custom properties, enforcing a strict 8px grid, and synchronizing design tokens across multiple formats—from OKLCH colors in CSS to Hex values for OG images. Perfect for developers who value typographic precision and structured CSS layer hierarchies, the skill ensures that every design change adheres to a clean, grid-locked aesthetic.

주요 기능

Multi-theme synchronization across CSS, TypeScript, and static assets.
Advanced color management using OKLCH color space for perceptual uniformity.
Structured CSS cascade management using defined @layer directives.
Strict 8px grid spatial alignment and token verification for all layouts.
Typography scale enforcement based on a Minor Third ratio (1.2).
1 GitHub stars

사용 사례

Synchronizing semantic theme updates between web styles and server-side OG image generation.
Implementing new site-wide themes including syntax highlighting and favicon assets.
Modifying global design tokens for colors, typography, and spatial scales.

소개

주요 기능

Multi-theme synchronization across CSS, TypeScript, and static assets.
Advanced color management using OKLCH color space for perceptual uniformity.
Structured CSS cascade management using defined @layer directives.
Strict 8px grid spatial alignment and token verification for all layouts.
Typography scale enforcement based on a Minor Third ratio (1.2).
1 GitHub stars

사용 사례

Synchronizing semantic theme updates between web styles and server-side OG image generation.
Implementing new site-wide themes including syntax highlighting and favicon assets.
Modifying global design tokens for colors, typography, and spatial scales.