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.

주요 기능

01Multi-theme synchronization across CSS, TypeScript, and static assets.

02Advanced color management using OKLCH color space for perceptual uniformity.

03Structured CSS cascade management using defined @layer directives.

04Strict 8px grid spatial alignment and token verification for all layouts.

05Typography scale enforcement based on a Minor Third ratio (1.2).

061 GitHub stars

사용 사례

01Synchronizing semantic theme updates between web styles and server-side OG image generation.

02Implementing new site-wide themes including syntax highlighting and favicon assets.

03Modifying global design tokens for colors, typography, and spatial scales.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add samfolo/personal-site maintaining-design-system

For use in Claude.ai and ChatGPT

Download Skill