Convert markdown research reports into interactive React presentation websites for GitHub Pages.

• Reusable generator — works with any structured markdown research report
• Tailwind CSS v4 + shadcn/ui — modern utility-first styling with swappable component registries
• Theme presets — 8 built-in dark color themes + community registry support
• Interactive elements — calculators, scenario sliders, comparison tables, timelines
• Knowledge vault — searchable full-text report content
• Dark professional theme — refined typography (DM Serif Display + IBM Plex Sans), amber accent system
• GitHub Pages ready — Vite build with included deploy workflow
• Vercel agent skills — integrates react-best-practices, web-design-guidelines, and composition-patterns

/report-to-web:generate path/to/your-report.md

The command will:

1. Ask where to create the output project
2. Ask your preferred interactivity level (presentation, full-interactive, or both)
3. Ask your preferred visual style (Dark Professional, shadcn color presets, or community registry)
4. Parse the report structure and generate a complete React site

• /report-to-web:generate — Main entry point

• site-generation — Markdown parsing strategy, component mapping, project scaffolding
• design-system — Dark professional theme tokens, typography, animation patterns

• site-builder — Autonomous agent that parses reports and generates React projects

• TabbedLayout — Tab navigation shell with animated transitions
• Calculator — Interactive formula calculator with live results
• ComparisonTable — Filterable side-by-side comparison
• TimelineView — Vertical timeline with expandable events
• CitationCard — Expandable reference cards with external links
• KnowledgeVault — Searchable full-text content browser
• ScenarioSlider — What-if scenario explorer with sliders
• SectionRenderer — Markdown renderer with scroll-triggered animations

The site-builder agent auto-detects interactive opportunities:

You can also add explicit markers in your report:

<!-- interactive: calculator -->
<!-- interactive: timeline -->
<!-- interactive: scenario -->
<!-- interactive: comparison -->

output-dir/
├── package.json
├── vite.config.js
├── postcss.config.js
├── jsconfig.json
├── components.json
├── index.html
├── .github/workflows/deploy.yml
├── src/
│   ├── main.jsx
│   ├── app.css
│   ├── App.jsx
│   ├── data/
│   │   ├── reportData.js
│   │   └── interactiveConfig.js
│   ├── themes/           (selected theme preset)
│   ├── theme/
│   │   └── motion.js     (framer-motion tokens)
│   ├── lib/
│   │   └── utils.js      (cn() utility)
│   ├── components/
│   │   ├── ui/           (installed by npx shadcn add)
│   │   └── *.jsx         (bundled custom components)
│   └── pages/            (generated per report)

• Node.js 18+
• npm

MIT