skills.rest
Botool-Dev-Team
Botool-Dev-TeamOFFICIAL
Explore all skills by this author →
GitHub

botoolagent-prdfrontend

Translate PRD §5 UI designs into runnable Tailwind CDN HTML prototypes.

Updated Aug 27, 2026
Search Tags:#tailwind#prd#frontend-design#ai-assisted-design#design-preview#viewer-api
One-click install
npx skills add https://github.com/Botool-Dev-Team/BotoolAgent --skill botoolagent-prdfrontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: botoolagent-prdfrontend
Source: https://github.com/Botool-Dev-Team/BotoolAgent/tree/main/skills/BotoolAgent/prdfrontend
Command: npx skills add https://github.com/Botool-Dev-Team/BotoolAgent --skill botoolagent-prdfrontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate PRD §5 UI design into a runnable HTML prototype for frontend review, enabling stakeholders to validate layouts and interactions without writing production code.

Core Features & Use Cases

  • PRD frontend preview: generate a Tailwind CDN HTML prototype from PRD §5 UI design for quick stakeholder review.
  • Viewer integration: deliver the prototype to Viewer's Stage 2 panel for annotation, commenting, and confirmation, then push changes back to prd.md and dev.json.
  • Stage-aware workflow: coordinates A3 parallel steps with upstream A1 tasks to accelerate validation and approvals.

Quick Start

Run the command to start the PRD frontend design preview for your project and begin the design-review workflow.

Frequently Asked Questions about botoolagent-prdfrontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an HTML prototype from a PRD UI design?▼

Generating an HTML prototype from a PRD UI design is done by translating the PRD §5 UI section into a runnable Tailwind CDN HTML file for frontend stakeholder review and validation.

What is a Tailwind prototype for PRD frontend review?▼

A Tailwind prototype for PRD frontend review is an executable HTML preview generated from PRD UI specs, enabling stakeholders to validate layouts and interactions without writing production code.

Do I need a running Viewer to preview PRD UI designs as HTML?▼

Yes, a running Viewer and a prd.md file containing a §5 UI section are required, as the generated Tailwind HTML prototype is delivered to the Viewer's Stage 2 panel for stakeholder annotation and approval.

Can I push design annotations back to prd.md after previewing the HTML prototype?▼

Yes, after stakeholders annotate and confirm the Tailwind HTML prototype within the Viewer's Stage 2 panel, design changes are pushed directly back to update prd.md and dev.json specifications.

Where are the generated Tailwind HTML prototype files stored?▼

Generated Tailwind HTML prototype files are stored under the tasks/{projectId}/design-html directory, organizing executable design outputs by project for subsequent design spec updates.

Related Skills

Explore More Design & Creative Skills→
Emz1998Emz1998

ux-prototyping

Generate interactive single-file HTML prototypes from UX specifications.

Community
Advanced
memorysavermemorysaver
21

workflow-validator

Validate artifact JSON against sandbox criteria with deterministic checks.

Community
Intermediate
ScivorScivor

design-shotgun

Generate AI design variants and consolidate feedback into structured iteration boards for UI exploration.

Community
Advanced
pcatattackspcatattacks
14

design-system

Standardize UI components and styling with DaisyUI and Tailwind CDN.

Community
Intermediate