design-screen
You are helping the user create a screen design for a section of their product. The screen design will be a props-based React component that can be exported…
You are helping the user create or update the general shape of their product's data — the core entities ("nouns") and how they relate to each other. This creates a shared vocabulary that ensures consistency across sections when generating sample data and screen designs. This is
How it fires
How this command gets triggered: by you, by Claude, or both.
/data-shapeContext preview
What this command does when you run it.
You are helping the user create or update the general shape of their product's data — the core entities ("nouns") and how they relate to each other. This creates a shared vocabulary that ensures consistency across sections when generating sample data and screen designs. This is
You are helping the user create or update the general shape of their product's data — the core entities ("nouns") and how they relate to each other. This creates a shared vocabulary that ensures consistency across sections when generating sample data and screen designs. This is not the final data model — it's a starting point that the implementation agent will extend and refine.
First, check if `/product/data-shape/data-shape.md` exists.
---
Read:
Present the current state and ask what to change:
"Your data shape currently defines these entities:
**Relationships:**
What would you like to change about the entities or relationships?"
Wait for the user's response describing what they want changed. Once you receive their notes, **immediately proceed** to update `product/data-shape/data-shape.md` based on their requested changes — do not present a draft for approval.
After updating, inform the user:
"I've updated the data shape based on your feedback. Review the changes and let me know if you'd like further adjustments."
Stop here — the remaining steps below are for generating a new data shape from scratch.
---
Read: 1. `/product/product-overview.md` to understand what the product does 2. `/product/product-roadmap.md` to understand the planned sections
If either file is missing, let the user know:
"Before defining your data shape, you'll need to establish your product vision. Please run `/product-vision` first."
Stop here if prerequisites are missing.
Review the product overview and roadmap, then **immediately proceed** to create the data shape file — do not present a draft for approval.
Identify:
Create `/product/data-shape/data-shape.md` with this format:
# Data Shape ## Entities ### [EntityName] [Plain-language description of what this entity represents and its purpose in the system.] ### [AnotherEntity] [Plain-language description.] [Add more entities as needed] ## Relationships - [Entity1] has many [Entity2] - [Entity2] belongs to [Entity1] - [Entity3] belongs to both [Entity1] and [Entity2] [Add more relationships as needed]
"I've created your data shape at `/product/data-shape/data-shape.md`.
**Entities defined:**
**Relationships:**
This provides a shared vocabulary for your screen designs. When you run `/sample-data`, it will reference these entities to ensure consistent naming across sections.
Review and let me know if you'd like to adjust anything. When you're ready, run `/design-tokens` to choose your color palette and typography."
---
The missing design process between your product idea and your codebase.
Repo: buildermethods/design-os
You are helping the user create a screen design for a section of their product. The screen design will be a props-based React component that can be exported…
You are helping the user design the application shell — the persistent navigation and layout that wraps all sections. This is a screen design, not…
You are helping the user choose colors and typography for their product. These design tokens will be used consistently across all screen designs and the…
You are helping the user export their complete product design as a handoff package for implementation. This generates all files needed to integrate the UI…
You are helping the user create or update their product roadmap for Design OS.
You are helping the user define their product vision for Design OS. This is a conversational process that results in three files: the product overview, product…