Creation of a webtool for storing GenAI prompts

You are a product-minded full-stack engineer.

Goal:
Design and scaffold a small webtool that delivers immediate customer value.

Tool idea:
{{tool_idea}} (default: “Policy Diff Viewer”)
- Users paste two JSON objects (e.g., configuration snapshots) and the tool shows a human-friendly diff.
- Must support: added/removed/changed keys, nested objects, arrays, and type changes.
- Must export a clean “change report” as Markdown and PDF-friendly HTML.

Constraints:
- Tech stack: {{stack}} (default: “React + TypeScript + Vite”)
- No backend required (client-only), but structure it so a backend could be added later.
- Must be accessible (keyboard navigation + ARIA where needed).
- Must be secure-by-design (no unsafe HTML injection; explain how you prevent it).

Deliverables:
1) A short product spec:
   - Problem statement, target users, and benefits
   - Core features vs nice-to-haves
   - Success metrics (measurable)
2) UX plan:
   - Wireframe description (screens + key components)
   - Error states and empty states
3) Implementation plan:
   - Folder structure
   - Key functions (diff algorithm approach)
   - Data model and types
   - Test strategy (unit tests for diff + basic UI tests)
4) Provide starter code:
   - Minimal React app structure
   - Diff engine (TypeScript) with example input/output
   - A simple UI: two editors + results pane + export buttons
   - Sample test cases

Output the starter code in clearly separated file blocks with filenames, ready to copy into a repo.
Keep it clean, maintainable, and realistic for a small customer-facing tool.

You are a product-minded full-stack engineer.

Goal:
Design and scaffold a small webtool that delivers immediate customer value.

Tool idea:
{{tool_idea}} (default: “Policy Diff Viewer”)
- Users paste two JSON objects (e.g., configuration snapshots) and the tool shows a human-friendly diff.
- Must support: added/removed/changed keys, nested objects, arrays, and type changes.
- Must export a clean “change report” as Markdown and PDF-friendly HTML.

Constraints:
- Tech stack: {{stack}} (default: “React + TypeScript + Vite”)
- No backend required (client-only), but structure it so a backend could be added later.
- Must be accessible (keyboard navigation + ARIA where needed).
- Must be secure-by-design (no unsafe HTML injection; explain how you prevent it).

Deliverables:
1) A short product spec:
   - Problem statement, target users, and benefits
   - Core features vs nice-to-haves
   - Success metrics (measurable)
2) UX plan:
   - Wireframe description (screens + key components)
   - Error states and empty states
3) Implementation plan:
   - Folder structure
   - Key functions (diff algorithm approach)
   - Data model and types
   - Test strategy (unit tests for diff + basic UI tests)
4) Provide starter code:
   - Minimal React app structure
   - Diff engine (TypeScript) with example input/output
   - A simple UI: two editors + results pane + export buttons
   - Sample test cases

Output the starter code in clearly separated file blocks with filenames, ready to copy into a repo.
Keep it clean, maintainable, and realistic for a small customer-facing tool.

You are a product-minded full-stack engineer.

Goal:
Design and scaffold a small webtool that delivers immediate customer value.

Tool idea:
{{tool_idea}} (default: “Policy Diff Viewer”)
- Users paste two JSON objects (e.g., configuration snapshots) and the tool shows a human-friendly diff.
- Must support: added/removed/changed keys, nested objects, arrays, and type changes.
- Must export a clean “change report” as Markdown and PDF-friendly HTML.

Constraints:
- Tech stack: {{stack}} (default: “React + TypeScript + Vite”)
- No backend required (client-only), but structure it so a backend could be added later.
- Must be accessible (keyboard navigation + ARIA where needed).
- Must be secure-by-design (no unsafe HTML injection; explain how you prevent it).

Deliverables:
1) A short product spec:
   - Problem statement, target users, and benefits
   - Core features vs nice-to-haves
   - Success metrics (measurable)
2) UX plan:
   - Wireframe description (screens + key components)
   - Error states and empty states
3) Implementation plan:
   - Folder structure
   - Key functions (diff algorithm approach)
   - Data model and types
   - Test strategy (unit tests for diff + basic UI tests)
4) Provide starter code:
   - Minimal React app structure
   - Diff engine (TypeScript) with example input/output
   - A simple UI: two editors + results pane + export buttons
   - Sample test cases

Output the starter code in clearly separated file blocks with filenames, ready to copy into a repo.
Keep it clean, maintainable, and realistic for a small customer-facing tool.