Skip to content
Apr 2026Hackathon build

Respec

A visual review tool that turns Kiro-style spec files (requirements, design, tasks) into an interactive canvas for reviewing, annotating, and approving specs, with a VS Code extension and a web demo.

Stack
  • TypeScript
  • Next.js
  • React
  • VS Code Extension API
  • Vercel
01

What it does

Respec converts Kiro-style spec files (requirements.md, design.md, tasks.md) into a three-column interactive canvas where reviewers can annotate, request changes, and approve specs, then feed structured feedback back into Kiro or other agents.

02

How it works

  • Three-column canvas showing requirements, design, and tasks side-by-side with cross-links from each requirement to its implementation tasks
  • Four annotation types — comment, split, remove, clarify — that capture intent rather than just freeform notes
  • Deterministic demo agents (DriftDetector and GapFinder) flag issues across the spec without depending on a live model
  • FeedbackCompiler produces structured output that can be replayed into Kiro or another spec-driven agent
  • VS Code extension reads from .kiro/specs/ and writes review artifacts back to .kiro/respec/, plus a Next.js web demo for the canvas
03

Key decisions

  • Kept the demo agents deterministic so reviews are reproducible during the hackathon, with the architecture leaving room for Bedrock/Claude-powered agents later
  • Split the repo into a Next.js web demo and a VS Code extension with shared webview, so the same canvas works inside the editor and on the web
  • Modeled annotations as typed actions (split, remove, clarify) rather than freeform comments so feedback can be compiled and replayed
  • Built for the Kiro Spark Challenge at ASU as a three-person team, MIT licensed