skills.rest
special-place-administrator
special-place-administratorCOMMUNITY
Explore all skills by this author →
GitHub

design

Extract design tokens from CSS/Tailwind configs and generate a living manifest.

Updated Mar 26, 2026
Search Tags:#css#tailwind#style-guide#visual-language#design-extraction#design-manifest#token-documentation
One-click install
npx skills add https://github.com/special-place-administrator/citadel_codex --skill design-special-place-administrator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/special-place-administrator/citadel_codex/tree/main/skills/design
Command: npx skills add https://github.com/special-place-administrator/citadel_codex --skill design-special-place-administrator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Documents and enforces a project's visual language by extracting design tokens from code and creating a living manifest that guides consistency.

Core Features & Use Cases

  • Design Manifest Generation: Creates a starter manifest for new projects or extracts patterns from existing styles to document color palettes, typography, spacing, and components.
  • Mode Support: Supports Extract Mode (analyzes CSS/Tailwind and components) and Generate Mode (prompts for preferences and builds a starter manifest).
  • Post-edit Hook: Validates edits against the manifest to surface only non-blocking warnings about deviations.

Quick Start

Run design on your project to generate or update your design manifest based on your current styles.

Frequently Asked Questions about design

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

FAQPage Schema
How do I extract design tokens from CSS and Tailwind configs?▼

Extract design tokens from CSS and Tailwind by running the Skill in Extract Mode, which analyzes your component files and configurations to compile a living manifest of your project's visual language.

Can I generate a design manifest for a new project from scratch?▼

Generate a design manifest for a new project by using Generate Mode, which prompts for your visual preferences and builds a starter document covering color palettes, typography, and spacing.

What is a living design manifest and when do I need one for my project?▼

A living design manifest documents your visual language to enforce consistency across components. You need one at project kickoff or when visual inconsistencies start appearing in your styles.

Does the design manifest validation block code edits that deviate from the style guide?▼

Manifest validation does not block code edits; the post-edit hook surfaces non-blocking warnings only, alerting you to visual deviations without halting your development workflow.

Can I use this to document visual inconsistencies in existing component files?▼

Document visual inconsistencies in existing component files by running Extract Mode, which identifies and compiles your current patterns into a living manifest to guide future styling decisions.

What is the best way to maintain a style guide across CSS and Tailwind configurations?▼

Maintain a style guide across CSS and Tailwind by generating a living manifest that captures your design tokens, then using the post-edit hook to validate ongoing changes against the documented visual language.

Related Skills

Explore More Design & Creative Skills→
EzequielpereyraaEzequielpereyraa

design-init

Scan Tailwind and CSS projects to extract design tokens and generate DESIGN.md.

Community
Advanced
GiorgioRicciardielloGiorgioRicciardiello

validate

Validate note schemas against predefined templates for required fields and link integrity.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

eslint-custom

Automate creation and publishing of custom ESLint rules and plugins.

Official
Advanced
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate