reference-teardown
Skill1 starsChanged 11 days agoMITView on GitHub
Use when the user provides reference images, screenshots or URLs of sites they like. Breaks each reference into concrete reusable design and motion rules, never copying code, text or brand assets, and binds those rules to the brief and storyboard.
In this repository17 other files it gives its agents.
- AGENTS.mdAGENTS.md
- rules/AGENTS.mdAGENTS.md
- adapters/claude.mdCLAUDE.md
- asset-intakeSkill
- client-collabSkill
- design-tasteSkill
- diff-guardSkill
- motion-craftSkill
- no-slop-startSkill
- orchestratorSkill
- plannerSkill
- prompt-optimizerSkill
- reviewerSkill
- scene-3dSkill
- storyboardSkill
- teach-modeSkill
- visual-qaSkill
The file
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 28
Put the DNA into DESIGN.md and STORYBOARD.md.
≈ “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.
Files
Reference Teardown
References only help if they become rules. Write REFERENCES.md before DESIGN.md and STORYBOARD.md.
1. Inventory
List every reference. For URLs, open them with browser tools if available and capture frames at several scroll points. If only still images exist, say what stills cannot show (motion, transitions) and ask for a screen recording or a short description of the motion.
2. Teardown (one block per reference)
- What it is, and why it works, one line each
- Layout and composition: grid, zones, depth layers (ghost wordmark behind the object, copy at the edges), scale contrast
- Typography: roles, pairing, approximate size ratios, case
- Color and light: approximate palette with hex, light direction, atmosphere
- 3D hero: object, materials, camera, interaction hints and labels
- Motion and transitions: what scrolls or pins, how scenes change, which technique likely makes it
- UI chrome: HUD elements, meters, callouts, scrubbers, thumbnails
- The signature mechanic
- Reuse and avoid: principles to reuse; things never to copy (logos, brand names, copy, illustrations, licensed images, paid source code)
3. Reference DNA
Merge all teardowns into 5 to 8 prioritized rules, each noting which references support it. If references conflict, the user's stated priority wins.
4. Bind
Put the DNA into DESIGN.md and STORYBOARD.md. Choose an archetype, style and effects consistent with it. If a reference depends on assets we do not have, list substitutes.
5. Originality
Reuse mechanics, not identity. Never reproduce a reference's layout, copy or brand one to one. New concept, new composition, new copy.
6. Verify
In visual-qa, check screenshots against the DNA rules as a checklist, not against pixels.
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
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.