skills.rest
Waterball-Software-Academy
Waterball-Software-AcademyOFFICIAL
Explore all skills by this author →
GitHub

aibdd-uiux-discovery

Generate component inventories and state matrices from AIBDD discovery artifacts.

77|15|Updated May 12, 2026
Search Tags:#accessibility#component inventory#frame composition#state matrix#uiux discovery#pencil design brief#clarify loop
One-click install
npx skills add https://github.com/Waterball-Software-Academy/aixbdd --skill aibdd-uiux-discovery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aibdd-uiux-discovery
Source: https://github.com/Waterball-Software-Academy/aixbdd/tree/main/.agents/skills/aibdd-uiux-discovery
Command: npx skills add https://github.com/Waterball-Software-Academy/aixbdd --skill aibdd-uiux-discovery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It turns raw acceptance/spec discovery into a boundary-aware, component-first visual exploration plan so design output stays traceable to requirements instead of drifting from an ambiguous prompt.

Core Features & Use Cases

  • Component-first visual inventory: derives a component inventory with base/domain state matrix and which frames use each component.
  • Frame composition mapping: builds a frame-to-components composition plan with canonical state combos for each frame.
  • Clarify-loop for visual ambiguity: runs a 9-axis clarification loop (style direction, tokens, component inventory adjustments, interactions, copy decisions, frame layout hints, breakpoints, a11y/motion, brand refs).
  • Pencil-ready deliverables: renders a Pencil design brief (uiux-prompt.md) and style profile (style-profile.yml), ready for automatic drawing or manual sketching and then planning/story generation.
  • Frontend boundary guardrails: stops early if the target leaf boundary is not frontend or required discovery artifacts are missing.

Quick Start

Run aibdd-uiux-discovery when you are ready to start visual exploration for your discovery package and then proceed to drawing or planning as prompted.

Frequently Asked Questions about aibdd-uiux-discovery

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

FAQPage Schema
How do I generate a component-first UX discovery package from raw acceptance criteria?▼

To generate a component-first UX discovery package, you process acceptance criteria through a clarify-loop that derives a component inventory with per-component state matrices and frame composition mappings, resulting in traceable design briefs.

What is a component state matrix and how does it map to frame composition in UX planning?▼

A component state matrix defines base and domain states for UI components, while frame composition mapping identifies which frames use each component and establishes canonical state combos for frontend UX planning workflows.

How do I create a Pencil-ready design brief with accessibility and motion targets from discovery artifacts?▼

Creating a Pencil-ready design brief involves validating discovery artifacts and frontend boundaries, delegating a 9-axis clarify-loop covering accessibility and motion targets, then rendering uiux-prompt.md and style-profile.yml outputs.

Can I use this UX discovery workflow if my target boundary is not frontend or missing discovery artifacts?▼

You cannot use this workflow if the target leaf boundary is not frontend or required discovery artifacts are missing, because the process applies frontend boundary guardrails that halt execution early when these prerequisites are absent.

What is the best way to resolve visual ambiguity when deriving a UX structure from specifications?▼

The best way to resolve visual ambiguity is running a 9-axis clarification loop covering style direction, tokens, interactions, copy decisions, frame layout hints, breakpoints, and accessibility targets before rendering final design deliverables.

Does aibdd-uiux-discovery work with downstream drawing and planning tools?▼

Yes, aibdd-uiux-discovery works with downstream tools by writing uiux-prompt.md and style-profile.yml files specifically formatted as inputs for subsequent /aibdd-uiux-draw and /aibdd-plan execution phases.

Related Skills

Explore More Design & Creative Skills→
Waterball-Software-AcademyWaterball-Software-Academy
77

aibdd-plan

Transform AIBDD discovery truth into operation contracts, state schemas, and design diagrams.

Official
Advanced
Waterball-Software-AcademyWaterball-Software-Academy
77

aibdd-uiux-draw

Transform UI/UX discovery outputs into token-initialized Pencil component and frame drawings.

Official
Advanced
PiercingXXPiercingXX
1

lingo

Generate implementation-ready design-system guidelines with WCAG 2.2 AA acceptance criteria.

Community
Intermediate
ShauryaUdayMisraShauryaUdayMisra

brainstorming

Facilitate collaborative brainstorming through structured dialogue and visual aids.

Community
Advanced