Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add saski/arnesto --skill collaborative-designgit clone --depth 1 https://github.com/saski/arnestoWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/saski/arnesto/collaborative-design)<a href="https://agentmods.dev/skills/saski/arnesto/collaborative-design"><img src="https://agentmods.dev/badge/skills/saski/arnesto/collaborative-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/saski/arnesto/collaborative-design"><img src="https://agentmods.dev/badge/skills/saski/arnesto/collaborative-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00035 | $0.00608 |
| Opus 5.5 | $0.00014 | $0.00243 |
| Sonnet 5.5 | $0.00007 | $0.00122 |
| Haiku 4.5 | $0.00003 | $0.00061 |
Grade A, and why
collaborative-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
100% identical to collaborative-design — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 87 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 87 lines · 35 tokens per session scan A 0fa5c84d8989
collaborative-design is a skill published in the GitHub repository saski/arnesto (6 stars, last pushed 5d ago), licensed Unlicense. It adds 35 tokens to every session and 608 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to collaborative-design, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
webgl-liquid-iridescence
A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.
visual-asset-design
A guide for turning character, scene, and prop ideas into prompts for generating consistent reference images. It covers layouts, camera views, visual identity, and continuity across image variations.
oma-design
Define or review a visual system, DESIGN.md, or redesign direction. Use for typography, layout, color, motion, and interaction design decisions.
conversion-review
Review a landing page or form to find why visitors do not sign up or buy: unclear message, friction, missing proof, weak call to action. Looks at the real page on desktop and phone and ranks the fixes.
frontend-design
Give a web page or app its own look instead of a generic AI-made one: choose colors, type and layout on purpose before building, then critique the result. Use when building a new interface or reshaping an existing one.