Back to Skills

shape

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.

19,254stars871forksUpdated 4/15/2026

Security Assessment

Safe(100/100)
Security Score100/100

About shape

The 'shape' skill is designed to guide the planning of user experience (UX) and user interface (UI) for a feature before any code is written. It addresses a common problem in product development: jumping directly into implementation without fully understanding the user's needs or the feature's purpose. By structuring discovery through guided interviews and context gathering, 'shape' ensures that the resulting design decisions are informed and purposeful, reducing the risk of poorly thought-out interfaces and wasted development effort.

This skill operates in two main phases. The first phase is a discovery interview, where it engages in a structured conversation to extract critical information about the feature's purpose, user context, content, design goals, constraints, and anti-goals. It avoids making any design or coding assumptions during this phase. The second phase synthesizes these insights into a comprehensive design brief, which outlines the feature summary, primary user action, design direction, layout strategy, and key states. The design brief acts as a blueprint for any subsequent implementation, ensuring alignment with the project's broader design context and principles captured in the associated '/impeccable' skill.

'Shape' is particularly useful for product designers, UX researchers, and project managers who are involved in early-stage feature planning. It is ideal for teams aiming to establish clear design direction, constraints, and strategy before coding begins. By formalizing the discovery process and producing structured design documentation, it helps ensure that development efforts are targeted, efficient, and user-centered, making it suitable for digital product teams across web and mobile platforms.

FAQ

How do I start using the 'shape' skill?

Begin by invoking '/impeccable' to follow the Context Gathering Protocol. If no design context exists, run '/impeccable teach' first, then provide the feature you want to shape.

Can 'shape' write code for my feature?

'Shape' does not write code. It focuses on planning and producing a design brief that guides implementation. Code should be written using other implementation tools after the brief is finalized.

Who is this skill intended for?

It is intended for product designers, UX researchers, and project managers who need to establish design direction and strategy before coding a feature.

Does 'shape' handle technical constraints?

Yes, it gathers information about technical constraints such as framework, performance, browser support, as well as content and accessibility considerations, but it does not enforce them in code.

Is this skill compatible with mobile and web design projects?

Yes, 'shape' can be used for both mobile and web features, helping define responsive and accessible design strategies across platforms.

Install shape

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill