Implementation

In the previous sections, we wrote a PRD that defines exactly what our JSON Formatter should do, then turned it into a technical design that specifies how we'll build it — the component architecture, file structure, UI layout, Web Worker protocol, and test plan. Both documents went through multiple rounds of review and revision until no issues remained.

Now it's time to write code. We have two finalized documents guiding us:

• PRD.md — the what: features, requirements, edge cases, and quality goals
• DESIGN.md — the how: components, data flow, file structure, and implementation decisions

This is the payoff of the planning work. Instead of vaguely asking the AI to "build a JSON formatter," we can point it to precise specifications. The AI knows exactly what components to create, where each file goes, how data flows between modules, and what edge cases to handle — because we wrote it all down.

Build Everything in One Shot#

Because this project is relatively simple — a single-page client-side app with a handful of components and one Web Worker — we can ask Claude Code to implement the entire app in a single prompt. This works because the scope is manageable and the hard decisions — what to build, how to structure it, where each file goes — have already been made in the PRD and design. The AI isn't guessing; it's following a blueprint.

For larger projects with multiple pages, server-side logic, database interactions, or complex state management, you'd want to break the implementation into smaller prompts — one feature or module at a time. But for a focused tool like this, one shot is the way to go.

Before prompting, make sure your conversation context is clean. If you've been chatting with Claude Code about the PRD or design, run /clear to start fresh. This forces the AI to work from the finalized documents rather than earlier drafts.

Make sure you have both PRD.md and DESIGN.md in your json-formatter project root. Claude Code needs these files in the project directory so it can read them during implementation.

Since this prompt will generate many files, it's best to set Claude Code's permission mode to "Edit automatically" before running it. This lets the AI create and edit files without asking for confirmation on each one — otherwise you'll be clicking "Allow" dozens of times. You can change this in the Claude Code settings or by typing /permissions in the chat.

Claude Code will read both documents, understand the full scope, and generate all the files — library code, worker, components, hooks, page, and tests. Because the design specifies every file path, component interface, and data flow, the AI can produce a coherent, working app rather than a collection of disconnected pieces.

What to Expect#

Depending on the complexity, Claude Code may take a few minutes to generate everything. You'll see it creating files one by one — typically starting with the core library, then the worker, then the UI components, and finally wiring everything together.

Once it finishes, you should have:

• Core library (lib/) — json-engine.ts (parse, format, minify, validate, stats), syntax-highlight.ts (tokenizer), tree-builder.ts (parsed JSON to tree nodes), and types.ts (shared interfaces)
• Web Worker (workers/json.worker.ts) — Thin shell that calls the engine functions off the main thread
• Hooks (hooks/) — useJsonWorker.ts (worker lifecycle and message passing), useSettings.ts (settings state + localStorage), useFileHandler.ts (upload, download, drag-and-drop)
• Context (contexts/SettingsContext.tsx) — React context and provider for settings
• UI components (components/) — Header, Toolbar, InputPanel, OutputPanel, CodeView, TreeView, TreeNode, StatusBar, SettingsPopover, Toast
• Page (app/page.tsx) — Main page composing all panels
• Tests (__tests__/) — Unit tests for json-engine, syntax-highlight, and tree-builder

With the code generated, it's time to verify everything works. In the next section, we'll test the app, run the test suite, and fix any issues with Claude Code's help.