agentleFS
Sign inStart free
taljeontaljeon/plzdo/skills/design-source-router/SKILL.md

design-source-router

Skill9 starsChanged 16 days agoMITView on GitHub

Route frontend and UI design work to the smallest useful external design source, component catalog, DESIGN.md reference, OpenPencil inspection, Lighthouse-style quality gate, or project-local skill. Use when the user asks for vibe-coding UI resources, component inspiration, design-system extraction, DESIGN.md generation, web quality checks, motion/animation references, icon/brand references, or how to choose among many design sites without overloading Codex context.

The file

We split this skill into the rules it gives an agent

12 rules. About 0 are common, 9 are distinctive, and 3 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈9

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 3

    Very specific

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

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this skill to choose sources, not to install them.

    line 8
  2. Very specific:

    Read the target project's existing AGENTS.md, design tokens, components, and DESIGN.md first.

    line 18
  3. Very specific:

    If the user supplied a .fig or .pen, use $openpencil-cli before browsing inspiration.

    line 19
  4. Very specific:

    If the user needs persistent visual identity, use DESIGN.md and validate it before implementing UI.

    line 20
  5. Distinctive:

    If the user needs implementation patterns, choose one or two component libraries from the catalog.

    line 21
  6. Distinctive:

    If the user needs performance/accessibility confidence, use Lighthouse-style gates and the curated UI skills.

    line 23
  7. Distinctive:

    Read references/routing.md for source classes and install boundaries.

    line 25
  8. Distinctive:

    Do not install design MCP servers, browser extensions, Figma plugins, or npm packages from a catalog source without explicit preflight.

    line 29
  9. Distinctive:

    Do not copy branded assets, icons, screenshots, or complete component code without checking license and dependencies.

    line 30
  10. Distinctive:

    Do not let inspiration override the target project's product purpose, density, accessibility, or visual constraints.

    line 31
  11. Distinctive:

    Keep context compact: use the catalog search output and one or two selected sources, not the entire list.

    line 32
  12. Distinctive:

    When recommending sources, return:

    line 36

≈ “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 Source Router

Use this skill to choose sources, not to install them. The Meta Harness command is:

$META_HARNESS_ROOT/bin/harness design-sources 추천 "<goal>"

Set META_HARNESS_ROOT to the Meta Harness repository root when using this skill outside that repository.

Route

  1. Read the target project's existing AGENTS.md, design tokens, components, and DESIGN.md first.
  2. If the user supplied a .fig or .pen, use $openpencil-cli before browsing inspiration.
  3. If the user needs persistent visual identity, use DESIGN.md and validate it before implementing UI.
  4. If the user needs implementation patterns, choose one or two component libraries from the catalog.
  5. If the user needs visual direction, first use the installed $design-isms-reference skill to show three unchanged original candidates from Design -isms. This user explicitly wants original images and the source's own selection logic, without reinterpretation. Respect a fixed project identity or a different explicit reference. Use other inspiration galleries when the request calls for them.
  6. If the user needs performance/accessibility confidence, use Lighthouse-style gates and the curated UI skills.

Read references/routing.md for source classes and install boundaries.

Default Safety

  • Do not install design MCP servers, browser extensions, Figma plugins, or npm packages from a catalog source without explicit preflight.
  • Do not copy branded assets, icons, screenshots, or complete component code without checking license and dependencies.
  • Do not let inspiration override the target project's product purpose, density, accessibility, or visual constraints.
  • Keep context compact: use the catalog search output and one or two selected sources, not the entire list.

Output

When recommending sources, return:

  • Use: one to three sources with why.
  • Avoid: sources or runtime installs that are not needed.
  • Gate: verification command or evidence, such as screenshots, accessibility check, OpenPencil lint, DESIGN.md lint, or Lighthouse-style metrics.

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