← ClaudeAtlas

reference-analysislisted

Capture, inspect, compare, and translate supplied visual or interactive references into evidence-backed design and implementation specifications. Use for live websites, local HTML, screenshots, screen recordings, videos, prototypes, or reference packs when asked to reverse-engineer layout, visual systems, interaction, motion, responsive behavior, assets, or implementation requirements; compare several references; or turn inspiration into portable rules without copying its identity. Do not use for general internet research, product problem discovery, an originality audit, or the implementation itself.
sebastian-software/skills.sebastian-software.com · ★ 0 · Web & Frontend · score 70
Install: claude install-skill sebastian-software/skills.sebastian-software.com
# Reference Analysis Turn references into an inspectable specification. Preserve what was actually observed, label inference, and extract portable behavior rather than copying a source's brand, content, or complete composition. ## Workflow 1. Define the requested outcome and fidelity: - faithful reconstruction of material the user owns or may reproduce; - reference-informed direction that must remain original; - comparison of several references; - implementation specification, design brief input, or prompt-ready handoff. 2. Build a source registry. Record each file or URL, media type, role, visible version or capture date, ownership or reuse constraints supplied by the user, and access gaps. Prefer caller-supplied or contemporaneous captures over a live page that may have changed. 3. Read [Evidence capture](references/evidence-capture.md). Capture only the states needed to support the requested outcome, but cover the whole relevant experience rather than mistaking one hero frame for the system. 4. Create an observation ledger with source location or timestamp, direct observation, interpretation, confidence, and missing evidence. Keep browser behavior, source-code evidence, and visual inference distinguishable. 5. Extract the relevant contracts: - structure, hierarchy, pacing, and content density; - typography, color relationships, imagery, shape, depth, and icon language; - objects, states, controls, transitions, gestures, and feed