agentleFS
itsryanarmaniitsryanarmani/skills/design-context/SKILL.md

design-context

Skill1 starsChanged 6 days agoMITView on GitHub

Create, audit, or migrate repository design context. Use when a repo needs canonical .agents/brand.md and .agents/design.md files, a live /design.md document, a /brand page, or a fleet-wide design-context review. Ground every rule in the product and code. Never invent tokens for surfaces that do not exist.

3 other projects use a version of this.

Adopted by

Most recently taken up by

The file

Show its rules and text

We split this skill into the rules it gives an agent

22 rules. About 0 are common, 16 are distinctive, and 6 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈16

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 6

    Very specific

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

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Read references/contract.md before changing files or routes.

    line 10
  2. Very specific:

    Read AGENTS.md and .agents/context.yaml first when they exist.

    line 16
  3. Distinctive:

    Use these sources, in order:

    line 20
  4. Distinctive:

    Commit history for decisions that the current code does not explain.

    line 26
  5. Distinctive:

    Do not infer a visual system from a logo alone.

    line 30
  6. Distinctive:

    Use honest language for the selected type.

    line 41
  7. Very specific:

    Do not add colors, fonts, components, or motion to a no-surface repository.

    line 43
  8. Distinctive:

    Use exactly these paths:

    line 47
  9. Distinctive:

    Do not keep aliases, generated copies, redirects, or fallback paths.

    line 54
  10. Distinctive:

    Update AGENTS.md so agents read both files before public copy or interface work.

    line 56
  11. Very specific:

    Keep .agents/brand.md durable and surface-independent.

    line 60
  12. Distinctive:

    Use evidence for every factual claim.

    line 64
  13. Distinctive:

    Do not place component specifications or route behavior in this file.

    line 66
  14. Very specific:

    Keep .agents/design.md specific to the repository's actual surface.

    line 70
  15. Distinctive:

    Use these level-two headings in this order:

    line 72
  16. Very specific:

    Read product.url from .agents/context.yaml when present.

    line 91
  17. Distinctive:

    Treat a non-empty value as the canonical production home.

    line 93
  18. Very specific:

    Remove a trailing slash from product.url first.

    line 102
  19. Distinctive:

    Keep one tracked source. Fail the build or request when that source is missing.

    line 108
  20. Distinctive:

    Do not add a live route when the repository has no production URL.

    line 110
  21. Distinctive:

    Run the repository's format, test, type-check, and build commands.

    line 114
  22. Distinctive:

    Use the deployment tied to the proposed commit.

    line 124

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “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 context

Give humans and agents one verified source for brand identity and interface design.

Read references/contract.md before changing files or routes.

Workflow

1. Read repository context

Read AGENTS.md and .agents/context.yaml first when they exist.

Inspect the repository before drafting either document.

Use these sources, in order:

  1. Existing brand or design documents.
  2. Shared tokens, themes, and component code.
  3. Product copy, screenshots, and public assets.
  4. The built application and production site.
  5. Commit history for decisions that the current code does not explain.

Record conflicts. Prefer the shipped product over stale prose.

Do not infer a visual system from a logo alone.

2. Classify the repository

Choose one surface type:

  • product-ui: a website or application with a visual interface.
  • developer-ui: a CLI, API, SDK, or generated output with user-facing conventions.
  • content-ui: documentation, prose, media, or publishing workflows.
  • no-surface: infrastructure or internal data without a designed user surface.

Use honest language for the selected type.

Do not add colors, fonts, components, or motion to a no-surface repository.

3. Establish canonical files

Use exactly these paths:

  • .agents/brand.md
  • .agents/design.md

Move useful content from old locations. Delete the obsolete files in the same change.

Do not keep aliases, generated copies, redirects, or fallback paths.

Update AGENTS.md so agents read both files before public copy or interface work.

4. Write brand context

Keep .agents/brand.md durable and surface-independent.

Define the product identity, audience, promise, voice, claims, and naming rules.

Use evidence for every factual claim. Mark unresolved decisions instead of guessing.

Do not place component specifications or route behavior in this file.

5. Write design context

Keep .agents/design.md specific to the repository's actual surface.

Use these level-two headings in this order:

  1. Overview
  2. Colors
  3. Typography
  4. Layout
  5. Elevation & Depth
  6. Shapes
  7. Components
  8. Do's and Don'ts

Map every token to its source file when code defines it.

Describe interaction states, responsive behavior, accessibility, and motion where they exist.

For non-visual projects, translate headings to honest output rules. Explain any non-applicable section.

6. Publish eligible repositories

Read product.url from .agents/context.yaml when present.

Treat a non-empty value as the canonical production home.

Such repositories must expose:

  • <product.url>/design.md as text/markdown; charset=utf-8.
  • <product.url>/brand as a human-readable brand page.

Append both paths to the full production home, including any base path.

Remove a trailing slash from product.url first. Do not produce a double slash.

For example, https://example.com/tool owns /tool/design.md and /tool/brand.

Serve the tracked .agents/design.md content byte-for-byte at build time or request time.

Keep one tracked source. Fail the build or request when that source is missing.

Do not add a live route when the repository has no production URL.

7. Verify the result

Run the repository's format, test, type-check, and build commands.

For a production URL, also prove its appended routes:

  • <product.url>/design.md returns HTTP 200.
  • Its content type is Markdown with UTF-8.
  • Its response body matches .agents/design.md byte-for-byte.
  • <product.url>/brand returns HTTP 200.
  • The brand page works at mobile and desktop widths.

Use the deployment tied to the proposed commit. Do not test an older production release as proof.

8. Review the change

Reject the change when it:

  • invents visual rules that the repository does not use;
  • preserves a second source of truth;
  • publishes a stale generated copy;
  • treats brand and design as synonyms;
  • adds a redirect or fallback for an obsolete path;
  • claims live verification without a deployed commit;
  • adds /brand without clear, accessible content.

In a fleet rollout, complete one representative repository first.

Apply its verified contract to later repositories, but write each document from local evidence.

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.