CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

collaborative-design

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

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

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.

Repository

saski/arnesto

Path

.agents/skills/collaborative-design/SKILL.md

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.