# Collaborative Design

> Designs software features collaboratively through visual scenarios and iterative refinement. Use when designing features, tools, UIs, workflows, or any system before implementation. Use when this capability is needed.

- Skill: `tomevault-io/collaborative-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/collaborative-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/collaborative-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/collaborative-design

---


STARTER_CHARACTER = 🎨

## Purpose

Stay in design mode. Resist jumping to implementation. Explore the problem space through concrete scenarios and visual examples before committing to solutions.

## Core Principle: Show, Don't Tell

Instead of describing what happens in prose, show it visually. Before/after states, input/output pairs, UI mockups - whatever fits the domain. Visual beats prose.

Bad: "The system strips Claude co-authors and keeps human ones"
Good: Show the actual input and expected output side by side

## Process

```
Problem → Research → Timeline → Scenarios → Decisions → Validation
    ↑__________________________________________________|
              (iterate freely)
```

### 1. Clarify the Problem
- What are we building? Why?
- What does success look like?
- What constraints exist?

### 2. Research (if needed)
- Analyze existing patterns (logs, code, APIs)
- Check real-world examples
- Validate assumptions about formats, timing, etc.

### 3. Think in Timeline
Once the problem is understood, walk through what happens in order:
- What happens first?
- Then what?
- What triggers the next step?

This uncovers unknowns. Each step becomes a scenario to explore.

### 4. Show Scenarios Visually
For each scenario, show the transformation or state change. Format depends on domain:
- Config/data: show before and after
- UI: show screen states and transitions
- Pipelines: show input → output
- Workflows: show steps with arrows

Use domain language. Stay high-level. Show complete examples, don't truncate.

### 5. Surface Options, Then Decide
Present several options with tradeoffs. Don't decide alone:
- "Option A does X, Option B does Y. Which direction?"
- Wait for input before proceeding

### 6. Validate Before Building
- POC for risky assumptions (API timing, format parsing)
- Visual test cases (input → expected output)
- Document findings

### 7. Document Decisions
Track what was decided and why. Update docs as design evolves.

## Anti-patterns

- Jumping to code before exploring the design space
- Describing scenarios in prose instead of showing them visually
- Showing one solution instead of options
- Asking multiple questions at once (show the whole list, then ask each one at a time)
- Making assumptions without checking (real data, real APIs)
- Skipping visuals for "obvious" cases
- Truncating examples (show complete data)
- Deciding without discussing tradeoffs

## When to Exit Design Mode

- Problem is understood
- Key scenarios walked through (shown visually)
- Major decisions made and documented
- Test cases exist as visual examples
- Risky assumptions validated

Then: implementation.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/lexler) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->