agentleFS
Sign inStart free
bifrost-proxybifrost-proxy/bifrost/.agents/skills/design-md/SKILL.md

design-md

Skill168 starsChanged 3 months agoMITView on GitHub

Use when changing Bifrost WebUI, desktop shell UI, public site, docs visual style, interaction patterns, layout, copy density, colors, typography, spacing, or component styling. Reads DESIGN.md as the product design contract and validates it with @google/design.md.

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

10 rules. 0 are common, 6 are distinctive, and 4 are very specific to this project.

  • 0

    Common

    Most of the 56 edited versions we read keep these.

  • 6

    Distinctive

    This author's own choices. Worth a look.

  • 4

    Very specific

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

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this skill before modifying:

    line 12
  2. Very specific:

    Read DESIGN.md from the repository root.

    line 21
  3. Distinctive:

    If the change touches site deployment, also follow the root AGENTS.md site deployment boundary.

    line 23
  4. Very specific:

    Treat DESIGN.md YAML front matter as the normative design-token source.

    line 27
  5. Distinctive:

    Treat the Markdown sections as rationale for how to apply those tokens.

    line 28
  6. Very specific:

    Prefer existing Ant Design tokens in web/ and the existing CSS variables in site/home/styles.css.

    line 29
  7. Distinctive:

    Keep operational UI dense, stable, and scan-friendly.

    line 30
  8. Distinctive:

    Use icons for tool actions when an established icon exists.

    line 32
  9. Distinctive:

    Keep card usage restrained: repeated items, modals, and genuinely framed tools.

    line 33
  10. Very specific:

    When editing DESIGN.md, run pnpm design:lint.

    line 34

“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

Bifrost DESIGN.md

This skill keeps Bifrost product interaction work consistent across agents and sessions.

When to Use

Use this skill before modifying:

  • web/ UI, layout, theme, navigation, dashboards, tables, modals, panels, or interaction copy
  • desktop/ shell UI and desktop-specific chrome
  • site/, docs/, or docs-en/ visual style, homepage, navigation, screenshots, or docs theme
  • any user-facing feature where color, density, component choice, spacing, typography, or visual hierarchy could drift

Required Reading

  1. Read DESIGN.md from the repository root.
  2. For process and verification details, read design/design-md-system.md.
  3. If the change touches site deployment, also follow the root AGENTS.md site deployment boundary.

Working Rules

  • Treat DESIGN.md YAML front matter as the normative design-token source.
  • Treat the Markdown sections as rationale for how to apply those tokens.
  • Prefer existing Ant Design tokens in web/ and the existing CSS variables in site/home/styles.css.
  • Keep operational UI dense, stable, and scan-friendly. Do not turn WebUI screens into marketing layouts.
  • Preserve light/dark parity. If a new color is needed in WebUI, route it through Ant Design token usage, CSS variables, or a documented DESIGN.md token.
  • Use icons for tool actions when an established icon exists; use text buttons only for clear commands.
  • Keep card usage restrained: repeated items, modals, and genuinely framed tools.
  • When editing DESIGN.md, run pnpm design:lint.

Verification

For design-token or design-rule changes:

pnpm design:lint

For UI implementation changes, add the normal module tests plus human_tests coverage required by the repository. At minimum, verify light and dark theme behavior for WebUI changes and record the result in the relevant human_tests/ document.

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