DEV Community

@xggja
@xggja

Posted on

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

A website’s design goes beyond its first screenshot. Navigation changes on scroll, images respond to the cursor, typography shifts between viewports, and animations depend on specific triggers.

I’ve published REA Websites, a Codex skill that helps investigate those details and preserve the findings for future development.

Explore REA Websites on GitHub
What it does
The skill guides an agent through website research using Reverse Engineer Anything (REA).

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 The output is a reusable knowledge base: an index, coverage report, color palette, recreation guide, and supporting notes and captures where available. Evidence matters Findings distinguish between verified, inferred, estimated, and unknown details.

For example, a color extracted from inspected CSS has a different evidential basis from a color sampled from a screenshot. The documentation preserves that distinction.
Research first. Build when requested.
Completing research does not automatically start implementation.

When you explicitly request a build, the skill uses the saved findings as a reference. Your branding, content, and creative direction guide the result.
Install REA first
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.

REA Websites provides the workflow instructions and research references. REA supplies the investigation tools.

Installation instructions and example prompts are available in the repository README.

The project is available under the MIT license. Feedback and contributions are welcome.

Top comments (1)

Collapse
 
officialmailkr profile image
오피셜메일 •

CSS에서 직접 확인한 값과 화면에서 추정한 값을 구분하는 기준이 인상적입니다. 스크롤·호버처럼 상태에 따라 달라지는 관찰에는 뷰포트와 로그인 여부, 관찰한 동작도 함께 남기면 다음 개발자가 같은 조건을 재현하기 쉬울 것 같아요. 16개 영역 중 확인하지 못한 항목을 unknown으로 유지하고 구현은 별도 요청에서 시작한다는 경계도 명확하네요.