UX Blueprint Skill

bmad-ux-design

Designs UX and creates wireframes.

mattnigh/skills_collection·0installs24stars

SKILL.md

Full skill instructions

UX Blueprint Skill

When to Invoke

Automatically activate when user:

Says "What should the UI look like?", "Design the UX"
Asks "How should users interact?", "User flow?"
Mentions "wireframes", "user experience", "interface design"
Has PRD with UI-heavy features (Level 2-4)
Uses words like: UX, UI, design, wireframe, interface, usability

Specific trigger phrases:

"What should the UI look like?"
"Design the UX for [feature]"
"Create wireframes"
"User experience for [feature]"
"Interface design"
"User flow for [scenario]"

Do NOT invoke when:

No UI/interface in project (backend-only)
PRD not ready (use bmad-product-planning first)
Already have UX specs (skip to architecture or stories)

Mission

Design user experiences that align with BMAD requirements, documenting flows, interaction states, and validation plans that unblock architecture, delivery, and development.

Inputs Required

prd_sections: user journeys, functional requirements, constraints
architecture_notes: technical or platform limits impacting UX
brand_guidelines: accessibility, tone, device targets, or visual standards

Outputs

User flows (from assets/user-flows-template.md.template)
Wireframes (from assets/wireframes-template.md.template)
Design system (from assets/design-system-template.md.template)
UX requirements checklist linked to PRD and stories
Validation plan (usability or experimentation) for quality-assurance alignment

Template locations: .claude/skills/bmad-ux-design/assets/*.template

Process

Confirm prerequisites via CHECKLIST.md.
Clarify personas, scenarios, and surfaces requiring design.
Produce information architecture, flows, and state diagrams.
Document component specifications and content rules tied to requirements.
Define validation approach (tests, instrumentation, success signals) and share with delivery-planning and quality-assurance skills.

Note on automation: This skill currently operates through collaborative design conversation using templates. No automation scripts are required—wireframes and design artifacts are created manually using templates from assets/. See scripts/README.md for future automation roadmap.

Quality Gates

Ensure every UX decision traces back to requirements or constraints. Run CHECKLIST.md prior to handoff.

Error Handling

If requirements conflict or are missing, request clarification before designing.
Flag technical limitations that impact user experience and loop architecture-design.
Provide alternate recommendations when constraints prevent ideal UX outcomes.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/mattnigh/skills_collection --skill bacoco__BMad-Skills__claude__skills__bmad-ux-design__SKILL.md

View on GitHub

collection/bacoco__BMad-Skills__claude__skills__bmad-ux-design__SKILL.md

frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guide...
1 installs
animation-motion
CSS animations, transitions, and scroll-driven effects with accessibility (prefers-reduced-motion). Use when adding motion, hover effects, loading states, or scroll-based animations.
1 installs
laravel
Laravel v12 - The PHP Framework For Web Artisans
1 installs
gemini-document-processing
Guide for implementing Google Gemini API document processing - analyze PDFs with native vision to extract text, images, diagrams, charts, and tables. Use when processing documents, extracting structured data, summarizing PDFs, answering questions about document content, or converting documents to...
0 installs

More skills from mattnigh

mattnigh/skills_collection

spring-framework-patterns

Comprehensive Spring Framework and Spring Boot best practices including dependency injection patterns, bean lifecycle and scopes, REST API development, Spring Data JPA, service layer design, Spring Security, testing strategies, caching, AOP, async processing, error handling, and common anti-patte...

24 0

View

mattnigh/skills_collection

When Stuck - Problem-Solving Dispatch

Dispatch to the right problem-solving technique based on how you're stuck

24 0

View

mattnigh/skills_collection

.claude/skills/type-safety-patterns/SKILL.md

TypeScript厳格モードによる型安全性設計を専門とするスキル。 📖 参照書籍: - 『Effective TypeScript』（Dan Vanderkam）: 型設計 📚 リソース参照: - `resources/Level1_basics.md`: レベル1の基礎ガイド - `resources/Level2_intermediate.md`: レベル2の実務ガイド - `resources/Level3_advanced.md`: レベル3の応用ガイド - `resources/Level4_expert.md`: レベル4の専門ガイド - `resources/di...

24 0

View

mattnigh/skills_collection

deploying-cloud-k8s

Deploys applications to cloud Kubernetes (AKS/GKE/DOKS) with CI/CD pipelines. Use when deploying to production, setting up GitHub Actions, troubleshooting deployments. Covers build-time vs runtime vars, architecture matching, and battle-tested debugging.

24 0

View

mattnigh/skills_collection

moai-alfred-agent-guide

19-agent team structure, decision trees for agent selection, Haiku vs Sonnet model selection, and agent collaboration principles. Use when deciding which sub-agent to invoke, understanding team responsibilities, or learning multi-agent orchestration.

24 0

View

mattnigh/skills_collection

mermaid-diagram-generator

Converts architecture descriptions, module specs, or workflow docs into Mermaid diagrams. Use when visualizing brick module relationships, workflows (DDD, investigation), or system architecture. Supports: flowcharts, sequence diagrams, class diagrams, state machines, entity relationship diagrams,...

24 0

View

mattnigh/skills_collection

pre-flight-check

INVOKE FIRST before any code work. Validates git workflow (branch, issue, worklog) and checks approach. Use at START of every task and END before completing. Prevents skipped steps.

24 0

View

mattnigh/skills_collection

browser-dev-tools

This skill should be used when working with browser-rendered artifacts (i.e. Bun, React/React Native) to proactively validate that development work on localhost is being built appropriately and to support debugging browser-rendered content. Use this skill after making frontend changes to verify t...

24 0

View

mattnigh/skills_collection

lead-dev

Lead Développeur - Coordination technique opérationnelle, code review, mentoring et livraison. Pair de web-dev-process au niveau OPÉRATIONS.

24 0

View

mattnigh/skills_collection

worker-monitor

Monitor Docker workers, RQ queue health, and auto-scale workers (max 4). Use when: checking job progress, monitoring queue depth, scaling workers up/down, diagnosing slow processing, or waiting for jobs to complete. Referenced by data-quality skill during reprocessing.

24 0

View

mattnigh/skills_collection

quality-advisor

Proactive quality guidance system that monitors artifact creation and provides real-time feedback on documentation quality

24 0

View

mattnigh/skills_collection

bump-version

This skill should be used when the user wants to bump the version number in the workspace. It updates versions across all pyproject.toml files (root, tde, and tda packages) and the CHANGELOG.md to keep them synchronized.

24 0

View