Building Overview
Feel Your Protocol explorations are built with an agent, reviewed by a human. You decide what the widget should teach; the agent scaffolds code; you judge pedagogy, copy, and UX.
Typical workflow
- Clone and run locally
git clone https://github.com/feelyourprotocol/website.git
cd website
npm install
npm run devUnderstand the model — read Architecture (taxonomies, folder-per-exploration, E-Components).
Trigger the agent — for a new EIP, “round-trip for EIP-xxxx” (round-trip skill). You GO after the briefing and again after the exploration (optional MCP hints). After MCP the agent asks whether to generate a Bro & Bruh comic (bro-bruh-comic) — skippable. Widget-only: AGENTS.md + add-exploration. Constraints the briefing should settle:
- Pick topic/timeline/tags from the architecture tables (do not invent IDs)
- Prefer an existing E-Component over custom UI
Review the result — tests passing is the quality bar, not the pedagogy bar. Check intro/usage text against the spec, example quality, play loop, form factors (mobile / tablet / desktop), and the browser UI. See Adding an Exploration § Human review.
Cover art ships in the same exploration phase — Images; cover-image skill.
What you are building
| Piece | Role |
|---|---|
| Exploration | One folder = one interactive widget for a protocol change |
| E-Component | Reusable Ethereum pattern (precompile UI, bytecode stepper, …) |
| Taxonomies | Topic (theme), timeline (maturity/fork), tags (technical concepts) |
Details: Adding an Exploration, E-Components.
File map
| What | Where |
|---|---|
| New exploration | src/explorations/<id>/ |
| Shared metadata (website + MCP) | canonical.ts — schema in canonicalTypes.ts |
| Website chrome (path, HTML, images, SEO) | info.ts |
| Widget | MyC.vue |
| Registry (required) | src/explorations/REGISTRY.ts |
| E-Components | src/eComponents/<name>EC/ |
| Shared UI | src/eComponents/ui/ |
| Tests | tests.spec.ts in the exploration folder |
Quality gates
Before landing work, CI expects npm run lf:ci, npm run type-check, and exploration unit tests. Your agent should run these; you spot-check in the browser.
Structural-base changes (E-Components, building workflow): bump patch in package.json and Changelog.
Further reading
- Architecture — content model
- Adding an Exploration — checklist and canonical contract
- Third-Party Libraries — when new runtime deps need approval