I built REA Websites: a research-first skill for understanding website design

Description and use

REA Websites automates comprehensive website research, producing a reusable knowledge base of design details for accurate future implementation.

Problem

Design details of a website are often hidden beyond the initial screenshot, making it hard to capture and reuse them for future development.

Outcome

The workflow yields a comprehensive, evidence‑based documentation of a website’s design, enabling consistent reuse and accurate implementation.

Workflow

• Install the upstream REA skill and connect REA MCP to your agent.
• Run REA Websites to guide the agent through a 16‑area checklist (layout, navigation, scrolling, photography, accessibility, etc.).
• Collect findings with evidential tags (verified, inferred, estimated, unknown).
• Generate a reusable knowledge base (index, coverage report, color palette, recreation guide).
• Optionally request a build; the skill uses the saved findings as a reference for implementation.

Evidence

The skill guides an agent through website research using Reverse Engineer Anything (REA).

Source

Its checklist covers 16 areas, including: Layout, spacing, typography, and color systems; Navigation, buttons, and cursor interactions; Scrolling, animations, and page transitions; Photography, galleries, and responsive behavior; Accessibility and observable performance.

Source

The output is a reusable knowledge base: an index, coverage report, color palette, recreation guide, and supporting notes and captures where available.

Source

For example, a color extracted from inspected CSS has a different evidential basis from a color sampled from a screenshot.

Source

When you explicitly request a build, the skill uses the saved findings as a reference.

Source

You must install the upstream reverse-engineer-anything skill on your computer and connect REA MCP to your agent before using REA Websites for research.

Source