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

ui-pattern

Converts a one-paragraph app idea into PRD.md and GUIDELINE.md files through a structured brainstorm conversation.

Updated Jun 3, 2026
Search Tags:#requirements#prd#brainstorm#ui patterns#product spec#app idea#ux guideline
One-click install
npx skills add https://github.com/MathematicGuy/team-006-vin20k --skill ui-pattern-mathematicguy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-pattern
Source: https://github.com/MathematicGuy/team-006-vin20k/tree/main/ai20k-ux-workshop/.agents/skills/ui-pattern
Command: npx skills add https://github.com/MathematicGuy/team-006-vin20k --skill ui-pattern-mathematicguy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Teams with a new AI app idea often face blank-page paralysis and ship confused demos because they skip product specification. This Skill turns a rough idea into two concrete planning documents — a PRD and a UX guideline — before any code is written. ## Core Features & Use Cases - Guided brainstorm: Asks 2-3 adaptive clarifying questions (via multi-choice prompts) about input/output shape, roles, reversibility, constraints, and tech stack, matching the user's language. - Pattern selection: Picks exactly one of 7 UI patterns (chat+panel, upload→dashboard, query→result, wizard, draft→approve, queue, streaming) using explicit priority rules, with a one-line justification. - Document generation: Writes PRD.md (problem, users, stories, data model, tech stack recorded verbatim, constraints, API surface, success criteria) and GUIDELINE.md (chosen pattern, visual style, user flows, T·C·R checklist, hinge rule) to the repo root. - Use Case: A student team says "help me spec my AI tutor app idea" — the skill clarifies roles and trust signals, selects the Chat + context panel pattern, and produces both files ready for a baseline build. ## Quick Start Describe your app idea in one paragraph and ask the assistant to turn it into a PRD and UI guideline using this skill.

Frequently Asked Questions about ui-pattern

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

FAQPage Schema
How do I turn an app idea into a PRD before writing code?▼

Describe your idea in one paragraph covering what the app does, who uses it, and your intended stack. The skill asks 2-3 clarifying questions, picks one of 7 UI patterns, then writes PRD.md and GUIDELINE.md to your repo root.

What UI patterns does this skill choose between?▼

It selects from 7 patterns: chat + context panel, upload → dashboard, query → structured result, wizard + inline audit, draft → approve → send, queue + approval, and real-time streaming. Priority rules map idea characteristics to exactly one pattern.

Does the skill decide the tech stack for my app?▼

No. The stack is treated as a product decision, not a UX decision. If you brief a stack, it is recorded verbatim into the PRD; if you did not specify one, the skill asks once before writing rather than inventing a stack.

Can I use this skill if my app already has working UI code?▼

No, this skill targets the blank-page stage before code exists. If your team already has working UI, the documentation routes you to the /tcr-apply skill instead, which retrofits T·C·R features onto existing code.

Why does the skill stop after writing PRD and GUIDELINE files?▼

The skill's scope ends once both specification files are on disk. It deliberately does not plan the build, list files, or write code — the baseline build is handled separately by reading the two files, keeping specification and implementation as distinct phases.

Related Skills

Explore More Product & Management Skills→
HigorAlvesHigorAlves
4

prd-writing

Generates markdown PRDs from structured interviews about problem, target users, success metrics, scope, and open questions.

Community
Intermediate
adobeadobe
1.5k

migration-setup

Scaffold SWC directory structure and stub files for export wiring.

Official
Intermediate
dpaola2dpaola2
3

backfill-timing

Retrofit YAML frontmatter with pipeline timing metadata from Git commit timestamps.

Community
Advanced
mappa-aimappa-ai
1

write-a-prd

Create detailed PRDs from problem descriptions, codebase exploration, and structured interviews.

Official
Advanced