shape
pbakaus/impeccable
Plan UX and UI for features through structured discovery before writing code.
What is shape?
Shape runs a guided discovery interview to deeply understand a feature's purpose, users, and constraints, then produces a design brief that guides implementation. Use this during the planning phase to establish design direction and strategy before any code is written.
- Conducts a structured discovery interview covering purpose, users, content, design goals, constraints, and anti-goals
- Synthesizes interview findings into a detailed design brief with feature summary, user actions, and design direction
- Documents key states, interaction models, and content requirements to guide implementation
- Identifies relevant design references and unresolved questions for the build phase
- Produces a handoff artifact compatible with other impeccable skills like /impeccable craft
How to install shape
npx skills add https://github.com/pbakaus/impeccable --skill shape- Run /impeccable teach first if no design context exists in the project
- Access to .impeccable.md or similar design context file for the project
How to use shape
- 1.Invoke the skill with the feature name you want to shape
- 2.Engage in the discovery interview, answering questions about purpose, users, content, goals, and constraints
- 3.Review the generated design brief covering feature summary, user actions, layout strategy, states, and interactions
- 4.Confirm or revise the brief with the skill until it accurately reflects your vision
- 5.Hand off the confirmed brief to /impeccable craft or another implementation skill to build the feature
Use cases
- Planning a new dashboard feature by understanding user workflows and data ranges before design
- Establishing design direction for a form by clarifying success criteria and edge cases
- Documenting interaction patterns for a complex feature to ensure consistent implementation
- Creating a design brief for a team member or AI agent to build from
- Validating design assumptions through structured discovery before committing to implementation
- Product managers planning feature scope and design direction
- Designers establishing UX strategy before detailed mockups
- Developers needing clear design thinking before implementation
- Teams using the impeccable design system for consistent feature planning
shape FAQ
No. Shape produces design thinking and a written brief only. It does NOT generate code or visual designs. Use /impeccable craft or other implementation skills to build from the brief.
Use /impeccable craft instead, which runs this skill internally and continues through to implementation.
Yes. The design brief is a standalone artifact that can guide any implementation approach or be handed to any developer or designer.
The skill will ask you directly to clarify. If something remains unresolved, it will be documented as an open question in the brief for the implementer to resolve during build.
The discovery interview asks about existing patterns in your product, and the brief references your project's design context from .impeccable.md to ensure consistency.
Full instructions (SKILL.md)
Source of truth, from pbakaus/impeccable.
name: shape description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. version: 2.1.1 user-invocable: true argument-hint: "[feature to shape]"
MANDATORY PREPARATION
Invoke /impeccable, which contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
Shape the UX and UI for a feature before any code is written. This skill produces a design brief: a structured artifact that guides implementation through discovery, not guesswork.
Scope: Design planning only. This skill does NOT write code. It produces the thinking that makes code good.
Output: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill.
Philosophy
Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise.
Phase 1: Discovery Interview
Do NOT write any code or make any design decisions during this phase. Your only job is to understand the feature deeply enough to make excellent design decisions later.
Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer.
Purpose & Context
- What is this feature for? What problem does it solve?
- Who specifically will use it? (Not "users"; be specific: role, context, frequency)
- What does success look like? How will you know this feature is working?
- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?)
Content & Data
- What content or data does this feature display or collect?
- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items)
- What are the edge cases? (Empty state, error state, first-time use, power user)
- Is any content dynamic? What changes and how often?
Design Goals
- What's the single most important thing a user should do or understand here?
- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?)
- Are there existing patterns in the product this should be consistent with?
- Are there specific examples (inside or outside the product) that capture what you're going for?
Constraints
- Are there technical constraints? (Framework, performance budget, browser support)
- Are there content constraints? (Localization, dynamic text length, user-generated content)
- Mobile/responsive requirements?
- Accessibility requirements beyond WCAG AA?
Anti-Goals
- What should this NOT be? What would be a wrong direction?
- What's the biggest risk of getting this wrong?
Phase 2: Design Brief
After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete.
Brief Structure
1. Feature Summary (2-3 sentences) What this is, who it's for, what it needs to accomplish.
2. Primary User Action The single most important thing a user should do or understand here.
3. Design Direction
How this should feel. What aesthetic approach fits. Reference the project's design context from .impeccable.md and explain how this feature should express it.
4. Layout Strategy High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS.
5. Key States List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel.
6. Interaction Model How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion?
7. Content Requirements What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges.
8. Recommended References Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features).
9. Open Questions Anything unresolved that the implementer should resolve during build.
ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions.
Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.)
Related skills
More from pbakaus/impeccable and the wider catalog.
impeccable
Design and iterate production-grade frontend interfaces with real working code and exceptional craft.
polish
Final quality pass fixing alignment, spacing, consistency, and micro-details before shipping.
critique
Evaluate design from a UX perspective with quantitative scoring, persona testing, and automated anti-pattern detection.
audit
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns with severity ratings.
animate
Review features and add purposeful animations, micro-interactions, and motion effects that improve usability and delight.
adapt
Adapt designs across screen sizes, devices, and platforms with responsive layouts and context-aware patterns.