findmydoc-design-planner - findmydoc UI Design Planning Package Generator
Creates repository-grounded findmydoc design planning packages with generated image mockups, scenario folders, user journeys, Mermaid flows, data-model notes, component plans, and review-ready requirements.
Tags
Updated: 2026-06-30Capabilities
Typical Inputs
){kind=link}
What this skill does
- create scenario folder structure
- generate mobile tablet desktop mockups
- capture Playwright or Storybook screenshots
- write design plan README
- generate Mermaid flow diagrams
- document visible UI contract
- create data model plan
- create component plan
- run local seed or fixture
- move generated images to folder
- recommend specialist reviewers
Inputs
- findmydoc repository (AGENTS.md, src/app, src/components, src/collections)
- brand logo file (public/fmd-logo-1-dark.png)
- Playwright or Storybook runtime
- local seed or fixture data
- design-plan-contract.md reference
- mockup-prompting.md reference
- imagegen tool ($imagegen)
Outputs
- scenario folder with README.md
- mobile.png mockup image
- tablet.png mockup image
- desktop.png mockup image
- optional state-specific mockup images
- Mermaid flow diagram in README
- design contract documentation
Requirements
- Python runtime for init_design_plan.py script
- Playwright or Storybook for local screenshots
- imagegen tool available in built-in or CLI mode
- access to findmydoc repository structure
- local runtime with authentication for private routes