New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Collaborative Design

by lexler in lexler/skill-factory

Designs software features collaboratively through visual scenarios and iterative refinement.

Apache-2.0Auto-check passed

Install Collaborative Design

skills CLI
$ npx skills add lexler/skill-factory --skill collaborative-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install lexler/skill-factory collaborative-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/lexler/skill-factory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/output_skills/design/collaborative-design .claude/skills/collaborative-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
collaborative-design
GitHub stars
239
Token cost
~721 tokens
SKILL.md length
346 words
Files
2
Skills in repo
25
Repo updated
First seen
Licence
Apache-2.0

At a glance

Designs software features collaboratively through visual scenarios and iterative refinement.

  • Works in 7 steps: Clarify the Problem → Research (if needed) → Think in Timeline → …
  • Designing features
  • SKILL.md covers Purpose, Core Principle: Show, Don't Tell, Process and Anti-patterns, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Collaborative Design is an agent skill from lexler/skill-factory. Designs software features collaboratively through visual scenarios and iterative refinement. Use when designing features, tools, UIs, workflows, or any system before implementation.

Its SKILL.md is about 720 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `disclaimer.md`).

The licence is Apache-2.0.

When your agent uses it

  • Designing features
  • Any system before implementation

Example prompts

  • “Use the collaborative-design skill to design software features collaboratively through visual scenarios and iterative refinement”
  • “/collaborative-design”

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Clarify the Problem
  2. Research (if needed)
  3. Think in Timeline
  4. Show Scenarios Visually
  5. Surface Options, Then Decide
  6. Validate Before Building
  7. Document Decisions

What it can do on your machine

Read from SKILL.md and the folder at commit 8017333. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Collaborative Design loads about 721 tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 346 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~51
When it runs · the whole SKILL.md, loaded when a task matches
~721

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from lexler/skill-factory at commit 8017333, republished under its Apache-2.0 licence (© lexler). 346 words, ~721 tokens.

Download SKILL.mdSave it as .claude/skills/collaborative-design/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
collaborative-design
description
Designs software features collaboratively through visual scenarios and iterative refinement. Use when designing features, tools, UIs, workflows, or any system before implementation.

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.

© lexler, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in output_skills/design/collaborative-design of lexler/skill-factory.

  • SKILL.md
  • disclaimer.md

Open the folder on GitHubat commit 8017333

Compare with similar skills

Collaborative Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Collaborative Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Collaborative Design this skilllexler/skill-factory239—~721Automated safety check: PassApache-2.0
Design Systemaffaan-m/ECC274k—~698Automated safety check: PassMIT
Design Guidepaperclipai/paperclip98k1 repos~3.1kAutomated safety check: PassMIT
Design Audit Against Rams' Principlesthedotmack/claude-mem97k—~4.6kAutomated safety check: PassApache-2.0
Figma Design to Codewarpdotdev/warp65k4 repos~2.9kAutomated safety check: PassAGPL-3.0
Design Consultationgarrytan/gstack136k—~15kAutomated safety check: NotesMIT

Similar skills

  • Design System

    affaan-m/ECC

    Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…

    274k GitHub stars~698 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    98k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • Design Audit Against Rams' Principles

    thedotmack/claude-mem

    Audits a design against Dieter Rams' ten principles of good design, scores each with evidence, and hands off a make-plan prompt for a new, refined or redesigned outcome.

    97k GitHub stars~4.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Design Consultation

    garrytan/gstack

    Learns about your product, studies the landscape and writes a DESIGN.md with a full design system covering type, color, layout, spacing and motion.

    136k GitHub stars~15k tokensUpdated today
    Frontend & DesignAuto-check: notes

  • Product Design Workflow Bundle

    XiaomiMiMo/MiMo-Code

    Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.

    14k GitHub stars~721 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from lexler/skill-factory

All 25 skills in this repo

  • C4 Architecture Diagrams

    lexler/skill-factory

    Creates C4 model diagrams at every zoom level, from system landscape to code, in ASCII, Mermaid or Structurizr, for designing or documenting software architecture.

    239 GitHub stars~2.3k tokensUpdated 1 mo ago
    Auto-check passed

  • Launching Agent Teams

    lexler/skill-factory

    Plans and launches Claude Code agent teams with distinct roles, right-sized tasks and detailed spawn prompts, and says when subagents or worktrees fit better.

    239 GitHub stars~1.3k tokensUpdated 1 mo ago
    Auto-check passed

  • Claude Code Statusline Writer

    lexler/skill-factory

    Guides writing and debugging Claude Code status line scripts that read session JSON from stdin and print one line of text.

    239 GitHub stars~872 tokensUpdated 1 mo ago
    Auto-check passed

  • Augmented Coding Patterns Reference

    lexler/skill-factory

    Catalog of obstacles, anti-patterns and patterns for working with AI coding agents, covering context management and reliability, from a published patterns collection.

    239 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Approval Testing Toolkit

    lexler/skill-factory

    Writes snapshot-style approval tests in Python, JavaScript, TypeScript or Java, comparing output against an approved file instead of writing individual assertions.

    239 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Hotspots

    lexler/skill-factory

    Find where a codebase actually costs time by mining its git history (Tornhill hotspot analysis).

    239 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Collaborative Design

What does Collaborative Design do?

Designs software features collaboratively through visual scenarios and iterative refinement. Collaborative Design is an agent skill from lexler/skill-factory. Designs software features collaboratively through visual scenarios and iterative refinement.

When should I use Collaborative Design?

Collaborative Design fits situations like: designing features; any system before implementation.

How do I install Collaborative Design in Claude Code?

Run `npx skills add lexler/skill-factory --skill collaborative-design -a claude-code`. Or copy the skill folder (output_skills/design/collaborative-design in lexler/skill-factory) into .claude/skills/collaborative-design in your project. Claude Code loads it when a task matches its description.

How do I install Collaborative Design in Codex?

Run `npx skills add lexler/skill-factory --skill collaborative-design -a codex`. Or copy the skill folder (output_skills/design/collaborative-design in lexler/skill-factory) into .agents/skills/collaborative-design in your project. Codex loads it when a task matches its description.

Can I use Collaborative Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lexler/skill-factory --skill collaborative-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/collaborative-design, .gemini/skills/collaborative-design, .github/skills/collaborative-design and .opencode/skills/collaborative-design in your project.

What does Collaborative Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Collaborative Design is instructions for the agent only.

Does Collaborative Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Collaborative Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Collaborative Design use?

Collaborative Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Collaborative Design use?

About 721 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Collaborative Design?

Skills that share tags, products or a category with Collaborative Design: Design System (affaan-m/ECC, 274k stars), Design Guide (paperclipai/paperclip, 98k stars), Design Audit Against Rams' Principles (thedotmack/claude-mem, 97k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Collaborative Design?

lexler (a GitHub user) maintains it in lexler/skill-factory, which has 239 GitHub stars. The repository holds 25 skills in this directory. The repository was last updated on August 26, 2026.

Source: lexler/skill-factory on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.