agentleFS
Sign inStart free
BuddhiliveBuddhilive/buddhi-cli/.agents/skills/design-md/SKILL.md

design-md

Skill1 starsChanged 15 days agoMITView on GitHub

Inspect repository stylesheets, Tailwind configs, and design tokens to create or update a two-layer DESIGN.md file (machine-readable tokens in YAML frontmatter + vivid aesthetic direction prose across 8 canonical Markdown sections) and validate WCAG 2.2 AA contrast. Use when establishing, auditing, or updating the project design system.

65 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use touchdesigner-mcp, teams-meeting-pipeline and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • john-data-chenSkill

    touchdesigner-mcp

    Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.

    Also in 7 projects that use this

  • john-data-chenSkill

    teams-meeting-pipeline

    Operate the Teams meeting summary pipeline via Hermes CLI — summarize meetings, inspect pipeline status, replay jobs, manage Microsoft Graph subscriptions.

    Also in 9 projects that use this

  • aivrarSkill

    competitor-news-monitor

    Watch named companies for material news; cited digests.

    Also in 6 projects that use this

  • mae616Skill

    p5js

    p5.js（クリエイティブコーディング）のProcessing由来「コードでスケッチ」思想を軸に、setup/drawループ・座標系・インタラクション・パフォーマンス最適化を整理する。p5.js、Processing、クリエイティブコーディング、ジェネラティブアート、インタラクティブ表現、ビジュアルプログラミング、Canvas描画、パーティクル、フラクタル、ノイズ表現に関する相談で必ず使うこと。ユーザーが「コードでアート」「動くビジュアル」「インタラクティブな描画」と言った場合にも適用する。

    Also in 12 projects that use this

  • jh941213Skill

    docs-ci

    문서 CI(링크·OpenAPI lint·breaking 게이트·mermaid 검증)나 문서 드리프트 감지(docs.yaml 신선도 검사)를 설치하거나 돌릴 때 사용. 문서 내용 작성은 docs-architecture·docs-interfaces·docs-manuals.

    Also in 3 projects that use this

  • jh941213Skill

    docs-interfaces

    API·이벤트 인터페이스 문서(OpenAPI·swagger·AsyncAPI 명세, 엔드포인트 레퍼런스, API 구성도·시퀀스, API CHANGELOG)를 만들거나 코드와 맞출 때 사용. 시스템 구성도는 docs-architecture, API 설계 원칙은 api-design-principles.

    Also in 3 projects that use this

  • +4 more from jh941213

The file

We split this skill into the rules it gives an agent

6 rules. 0 are common, 1 is distinctive, and 5 are very specific to this project.

  • 0

    Common

    Most of the 56 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 5

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Create or update the repository's DESIGN.md design system specification using real project stylesheets, Tailwind configs, and token files.

    line 8
  2. Very specific:

    Run the detection helper with --diff via the terminal-runner agent:

    line 25
  3. Very specific:

    Verify that extracted tokens match actual stylesheets (globals.css, tailwind.config.*, tokens.json).

    line 35
  4. Very specific:

    If setting a specific brand vibe or aesthetic metaphor, pass --aesthetic:

    line 36
  5. Very specific:

    If DESIGN.md already exists, confirm that all hand-crafted prose in ## Overview, ## Components, ## Do's and Don'ts, and any custom sections …

    line 40
  6. Distinctive:

    Run the built-in linter to verify canonical sections and test semantic foreground/background token pairs:

    line 49

“Common” is measured: kept by at least 6 in 10 of the 56 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

/design-md

Create or update the repository's DESIGN.md design system specification using real project stylesheets, Tailwind configs, and token files.

The DESIGN.md specification—introduced by Google in 2026—consists of two complementary layers:

  1. Machine-Readable Design Tokens (YAML Frontmatter): Deterministic tokens for colors, typography, spacing, rounded, and elevation.
  2. Human-Readable Design Rationale (Markdown Body): Natural language prose explaining the why and setting a vivid mental model for coding agents across the 8 canonical sections:
    • ## Overview: Vivid aesthetic direction prose (e.g. "A graduate-level computer science lecture handout in the tradition of an old established university") + Core visual principles.
    • ## Colors: Semantic role definitions and contrast compliance.
    • ## Typography: Type hierarchy, weights, and line-length limits (65ch).
    • ## Layout: Grid scale and container boundaries.
    • ## Elevation & Depth: Architectural layering and subtle borders over blurry shadows.
    • ## Shapes: Consistent corner geometry.
    • ## Components: Guidelines for Buttons, Cards, Inputs, and Modals with unbroken :focus-visible states.
    • ## Do's and Don'ts: Actionable positive and negative rules stopping AI visual drift.

Steps

  1. Inspect and Compute Diff: Run the detection helper with --diff via the terminal-runner agent:
    python .agents/skills/design-md/scripts/detect_design_md.py --diff
    Or examine detected tokens and facts in JSON mode:
    python .agents/skills/design-md/scripts/detect_design_md.py --json
  2. Review Proposed Design Tokens & Aesthetic Prose:
    • Verify that extracted tokens match actual stylesheets (globals.css, tailwind.config.*, tokens.json).
    • If setting a specific brand vibe or aesthetic metaphor, pass --aesthetic:
      python .agents/skills/design-md/scripts/detect_design_md.py --diff --aesthetic "A graduate-level computer science lecture handout in the tradition of an old established university: restrained, typographic, high-contrast, editorial."
    • If DESIGN.md already exists, confirm that all hand-crafted prose in ## Overview, ## Components, ## Do's and Don'ts, and any custom sections (e.g. ## Brand Voice) are preserved byte-for-byte.
  3. Apply Changes: Once verified, apply changes to create or update DESIGN.md:
    python .agents/skills/design-md/scripts/detect_design_md.py --apply
  4. Validate WCAG 2.2 AA Contrast & Structure: Run the built-in linter to verify canonical sections and test semantic foreground/background token pairs:
    python .agents/skills/design-md/scripts/detect_design_md.py --lint
    For deep reference on token schema and aesthetic archetypes, consult references/design-md-spec.md.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free