skills.rest
MathematicGuy
MathematicGuyCOMMUNITY
Explore all skills by this author →
GitHub

prd-to-screens

Convert a PRD into a prioritized UI pattern selection and GUIDELINE.md build specification.

Updated Jun 3, 2026
Search Tags:#prototyping#user stories#prd#ui patterns#guideline generation#product scoping#ai app design
One-click install
npx skills add https://github.com/MathematicGuy/team-006-vin20k --skill prd-to-screens-mathematicguy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prd-to-screens
Source: https://github.com/MathematicGuy/team-006-vin20k/tree/main/ai20k-ux-workshop/.agents/skills/prd-to-screens
Command: npx skills add https://github.com/MathematicGuy/team-006-vin20k --skill prd-to-screens-mathematicguy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Teams with a finished PRD often struggle to decide which screen to build first and how to structure its UI. This Skill reads the PRD, filters user stories down to the single highest-value one, maps it to one of seven proven AI-app UI patterns, and writes a GUIDELINE.md that an AI coding agent can build from directly. ## Core Features & Use Cases - Valuable-story filtering: Applies three gates (core loop, visible AI hand-off, meaningful failure mode) to cut admin CRUD and low-value stories out of the PRD. - Pattern mapping: Maps the surviving story to one of 7 UI patterns (chat + panel, upload dashboard, query-to-chart, wizard, draft-approve-send, queue, real-time streaming) using a decision table. - GUIDELINE.md generation: Writes a single repo-root file containing the pattern choice, visual style, 3-step user flow, T·C·R (Transparency, Control, Recovery) checklist, and an LLM hinge rule. - Use Case: A hackathon team pastes their PRD for an AI syllabus builder; the Skill picks the wizard + inline audit pattern and writes GUIDELINE.md so Claude Code can plan and build the baseline screen. ## Quick Start Paste your PRD or give its file path and ask which screen to build first.

Frequently Asked Questions about prd-to-screens

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

FAQPage Schema
How do I turn a PRD into a UI plan for an AI app?▼

Provide the PRD as a file path, pasted text, or URL. The skill extracts user stories, filters them through three value gates, maps the surviving story to one of seven UI patterns, and writes a GUIDELINE.md at the repo root for an AI coding agent to build from.

What UI patterns does prd-to-screens support?▼

It supports seven patterns: chat with context panel, upload-to-dashboard, query-to-structured-result, wizard with inline audit, draft-approve-send, queue with approval, and real-time streaming. A decision table maps the story's core UX moment to exactly one pattern.

Can I use this skill without a written PRD?▼

No, it requires a PRD as input in some form. If you only have a vague idea with no specification, the skill directs you to the complementary /ui-pattern skill, which starts from an idea rather than a document.

What happens if no user story passes the value filter?▼

The skill asks how to proceed: loosen the recovery-requirement gate to surface one or two stories, send the PRD back to its author as not ready, or choose another option. It never invents a story or picks multiple patterns.

Does the skill generate code or build prompts?▼

No. Its output ends at GUIDELINE.md, which contains the pattern choice, style rules, user flow, and T·C·R checklist. The AI coding agent plans and writes code from that file plus the original PRD; the skill explicitly avoids writing prompts.md or build scripts.

Related Skills

Explore More Product & Management Skills→
rungchan2rungchan2
2

prd-generator

Generate structured product requirements documents with prioritized features and success metrics.

Community
Intermediate
arbisoftarbisoft
4

continuous-agent-loop

Coordinate autonomous agent loops with quality gates and recovery controls.

Official
Advanced
VikaskanturiVikaskanturi

llm-client

Route LLM calls through a single client across multiple providers.

Community
Advanced
amplitudeamplitude
142

craft-spec

Convert unstructured notes into a structured product requirements document.

Official
Intermediate