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

1. Clone and run locally

git clone https://github.com/feelyourprotocol/website.git
cd website
npm install
npm run dev

2. Understand the model — read Architecture (taxonomies, folder-per-exploration, E-Components).

3. Brief your agent — give the EIP/spec link, a one-sentence pedagogical goal (“let users compare gas before/after”), and constraints:

   • Pick topic/timeline/tags from the architecture tables (do not invent IDs)
   • Prefer an existing E-Component over custom UI
   • Point the agent at AGENTS.md and the add-exploration skill

4. Review the result — even when tests pass, check intro/usage text against the spec, example quality, and the browser UI. See Adding an Exploration § Human review.

5. Optional cover art — Images for rules; cover-image skill for AI generation.

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>/
Metadata	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 metadata
• Third-Party Libraries — when new runtime deps need approval