Files
agentic-dev/docs/product/reference/README.md
Danijel Martinek 1483a45406 docs(product): commit design references under docs/product/reference/
Copy the founder's design handoff bundle (.proto/design/) into
docs/product/reference/ byte-for-byte so dispatch agents running in git
worktrees can read the HTML prototypes, veect-codebase/ prototype,
upload PNGs, and remaining bundle files (ADR-029: reference only, never
vendored into packages/). Ignore-list entries so whole-codebase auditors
and formatters skip reference material: .prettierignore (byte
preservation through lint-staged), .fallowrc.json ignorePatterns, root
ESLint ignores, and the coverage:diff allowlist in
scripts/coverage/diff.mjs (+ unit test). .DS_Store files skipped.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016j8z4VHjedXDTjEDNg7qHK
2026-07-12 14:09:30 +02:00

1.6 KiB

CODING AGENTS: READ THIS FIRST

This is a handoff bundle from Claude Design (claude.ai/design).

A user mocked up designs in HTML/CSS/JS using an AI design tool, then exported this bundle so a coding agent can implement the designs for real.

What you should do — IMPORTANT

Read app-prototype-development/project/Veect.dc.html in full. The user had this file open when they triggered the handoff, so it's almost certainly the primary design they want built. Read it top to bottom — don't skim. Then follow its imports: open every file it pulls in (shared components, CSS, scripts) so you understand how the pieces fit together before you start implementing.

If anything is ambiguous, ask the user to confirm before you start implementing. It's much cheaper to clarify scope up front than to build the wrong thing.

About the design files

The design medium is HTML/CSS/JS — these are prototypes, not production code. Your job is to recreate them pixel-perfectly in whatever technology makes sense for the target codebase (React, Vue, native, whatever fits). Match the visual output; don't copy the prototype's internal structure unless it happens to fit.

Don't render these files in a browser or take screenshots unless the user asks you to. Everything you need — dimensions, colors, layout rules — is spelled out in the source. Read the HTML and CSS directly; a screenshot won't tell you anything they don't.

Bundle contents

  • app-prototype-development/README.md — this file
  • app-prototype-development/project/ — the App prototype development project files (HTML prototypes, assets, components)