gyre

Gyre

AI driven React and TypeScript code generation from natural language.

Why

Frontend development typically routes through three roles — product manager, designer, and developer — and the back-and-forth between them is slow and prone to conflict driven by differing perspectives. When that conflict is healthy it lifts quality; when it isn't, it just burns energy.

Gyre replaces that structure with a single director ↔ AI (acting as PM, designer, and developer). The quality lift that used to come from human-to-human dialogue now has to be delivered by human-to-AI dialogue.

What "Done" Looks Like

Given a natural-language request for a UI component or page, Gyre refines the under-specified intent through dialogue and produces one of:

• A custom UI component built on top of Headless UI primitives (Base UI, Radix UI) that conforms to the design guide, or
• A design guide itself (DESIGN.md).

Stable execution of this behavior marks completion. Beyond that point, the goal is to systematically manage and extend the component library while the AI keeps learning and evolving.

How It Works

0. Setup

• Input: Run /setup from the host project.
• Action: Read the stack-skills manifest and install any missing external stack skills via the skills CLI (per skill, not per plugin).
• Output: Stack skills installed into the host project.

1. Specify

• Input: /clarify-component "<natural-language request>" — a short natural-language request from the director.
• Action: Classify → risk read → infer six dimensions (Interaction model / What / Look / How / Data · Content / Non-goals) → Self-check. The director is asked only about the UI branches that pass the gate.
• Output: docs/gyre/specs/components/<kebab-name>.md (spec) — it captures the goal and behavior, not the implementation. The implementation is decided in step 2 (Generate).

2. Generate

• Input: /generate-component <kebab-name> — the spec from step 1.
• Action: Where decision (Reuse / Extend / Compose / New) → host discovery → Plan approval → write files → self-review → typecheck / lint / Storybook build.
• Output: Component + Storybook story.

3. Review — director

• Input: The output of step 2.
• Action: The director reviews. Gyre never merges or deploys automatically, and never pushes without approval.
• Output: Approval or change request.

Decision Principles

1. Separation of Intent and Implementation — the director owns intent, the AI owns implementation.
2. Question Minimization — ask only when (a) the AI cannot infer the answer on its own and (b) a wrong assumption would be hard to undo with a small edit. Ask only when both hold; otherwise proceed without asking.
3. Codebase and Stack Skill First — on conflict, the host codebase's patterns win.
4. Reuse and Extension First — in the order Reuse → Extend → Compose → New; primitives are never modified.
5. Self-Verification Duty — the AI verifies its own output immediately after producing it.

Support Scope

Gyre is a Component-Driven Development (CDD) harness that realizes each Rung of the CDD altitude ladder from the bottom up. Current support by Rung:

Rung	Type	Status
Primitive	—	🟢 Supported
Composed	molecule — Compose from primitives	🟢 Supported
	organism — composed from higher-level components	🔴 Not yet
Pages	—	🔴 Not yet