Skip to content

docs: Add PRD Creator tool with document management and export#68

Open
Ziinc wants to merge 4 commits into
mainfrom
claude/prd-creation-tool-jtz4a0
Open

docs: Add PRD Creator tool with document management and export#68
Ziinc wants to merge 4 commits into
mainfrom
claude/prd-creation-tool-jtz4a0

Conversation

@Ziinc

@Ziinc Ziinc commented Jul 12, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Collaborator

Summary

Introduces a new PRD (Product Requirements Document) Creator tool that enables users to create, manage, and export structured product requirement documents with comprehensive features for competitor analysis, user stories, implementation planning, and more.

Key Changes

  • New PRD Creator Component (_PRDCreatorContent.tsx): A full-featured document editor with:
    • Document management (create, list, delete PRDs with localStorage persistence)
    • 8 main sections: Overview, Competitor Analysis, User Stories, Options, Implementation Plan, Completion Criteria, Follow-up Tasks, and Notes
    • Auto-saving with visual feedback (idle/saving/saved states)
    • Collapsible sections for better UX
    • Real-time textarea auto-resizing
  • Export Capabilities:
    • Markdown export with proper formatting and tables
    • Canvas-based image export (PNG/JPEG) with professional layout including typography, colors, and structured sections
    • Copy-to-clipboard functionality for markdown
  • Data Structures: Defined TypeScript interfaces for PRD, Competitor, UserStory, PRDOption, Phase, and CheckItem
  • Styling (prd-creator.module.css): Comprehensive CSS module with:
    • Responsive two-pane layout (sidebar + main content)
    • Dark mode support via CSS variables
    • Styled form inputs, cards, tables, and interactive elements
    • Toast notifications and dropdown menus
    • Mobile-responsive grid layouts
  • Storage: localStorage-based persistence with versioning (prd-studio-v1)
  • Page Integration (prd-creator.tsx): New page component with BrowserOnly wrapper for client-side rendering
  • Tools Index Update: Added PRD Creator to the tools listing with description and tags

Notable Implementation Details

  • Uses immutable state updates for all data mutations
  • Debounced auto-save (900ms) to avoid excessive localStorage writes
  • Canvas rendering for image export includes custom color scheme, typography, and layout calculations
  • Markdown export intelligently filters empty items and formats tables
  • Unique ID generation using timestamp + random suffix for document identification
  • Relative date formatting (e.g., "2h ago", "just now") for modified timestamps
    https://claude.ai/code/session_01DNRpYxLFUmHvwZS5BqgFqA

@github-actions github-actions Bot changed the title Add PRD Creator tool with document management and export docs: Add PRD Creator tool with document management and export Jul 12, 2026
@Ziinc
Ziinc force-pushed the claude/prd-creation-tool-jtz4a0 branch from 39abdbd to 98c7a8f Compare July 12, 2026 09:39
@Ziinc
Ziinc force-pushed the claude/prd-creation-tool-jtz4a0 branch from 2249862 to 017b4b8 Compare July 17, 2026 02:37
@Ziinc
Ziinc force-pushed the claude/prd-creation-tool-jtz4a0 branch from 017b4b8 to 1fca967 Compare July 21, 2026 06:06
claude added 3 commits July 24, 2026 20:00
@claude
feat(web): add PRD Creator tool to /tools
753e0d8 
Adds a full-featured PRD creation tool at /tools/prd-creator with:
- Guided template sections: overview, competitor analysis, user stories,
  options (with pros/cons), implementation plan, completion criteria,
  and follow-up tasks & notes
- Local storage persistence with autosave (debounced 900ms)
- PRD library sidebar: browse, switch, and delete saved PRDs
- Collapsible sections with state persisted per-document
- Copy as Markdown (full structured export)
- Export as PNG or JPEG via canvas renderer (no external deps)
- Registers on the /tools index page
@claude
feat(web): rename PRDCreatorContent, add data-testids, add e2e tests
a87b516 
- Rename _PRDCreatorContent.tsx -> PRDCreatorContent.tsx (no underscore prefix)
- Update require() import path in prd-creator.tsx accordingly
- Add data-testid attributes: prd-app, prd-section, prd-sidebar-item, prd-empty-state
- Add data-section-title attribute on Section wrapper for test filtering
- Add e2e tests in tools.spec.ts covering: tools index card, empty state,
  New PRD creates 7 sections, title input, section collapse/expand, add
  competitor/story/option/phase, checkbox, export dropdown, copy markdown,
  persistence after reload, multiple PRDs with sidebar switching
@claude
fix(web): move PRDCreatorContent out of pages/ to avoid phantom Docus…
583aec6 
…aurus route

Files in src/pages/ are treated as page routes by Docusaurus. Without the
underscore prefix, PRDCreatorContent.tsx generated a /tools/PRDCreatorContent
route with no default export, crashing the build. Moving it to src/components/
keeps it as an internal module and updates the require() import path accordingly.
@Ziinc
Ziinc force-pushed the claude/prd-creation-tool-jtz4a0 branch from 1fca967 to 583aec6 Compare July 24, 2026 20:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Ziinc @claude