case-study — Claude Code skill: what it does, how to install
Structures design portfolio case studies around process evidence, personal contribution, and business metrics. Built for presenting projects to external audiences.
npx skills add Owl-Listener/designer-skills --skill case-study -a claude-codeWhat case-study does
The skill organizes a design project narrative into six sections: overview, challenge, process, solution, impact, and reflection. It pushes the agent to document research findings and decision pivots rather than jumping straight to polished mockups.
Writing guidance is direct. It demands first-person framing for individual contributions, clear separation of team roles, and concrete quantitative proof where possible. If you need a slide deck for internal stakeholders, this skill will not fit; the author notes that presentation-deck should be used instead.
What it helps with
- structure a design story for an external portfolio
- highlight design trade-offs, sketches, and iterative pivots
- separate personal contributions from team deliverables
- document quantitative and qualitative project impact
Example prompts for the agent
- Draft a portfolio case study for my mobile checkout redesign project
- Organize these raw notes about the B2B dashboard into the case-study structure
- Help me write the impact and reflection sections with measurable metrics
How to install case-study
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a claude-code2Manually: put the files in place
~/.claude/skills/case-study/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/case-study/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a codex2Manually: put the files in place
.agents/skills/case-study/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a cursor2Manually: put the files in place
.cursor/skills/case-study/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills case-study2Manually: put the files in place
.github/skills/case-study/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path designer-toolkit/skills/case-studyManually: put the files in place
.devin/skills/case-study/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill case-study -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about case-study
How to install case-study in Claude Code?
Run npx skills add Owl-Listener/designer-skills --skill case-study -a claude-code in your terminal.
What does the case-study skill do?
It guides the agent through a six-stage structure covering context, user problems, research, solutions, impact, and reflections. It focuses on the designer's thinking and process rather than final mockups alone.
When should I use presentation-deck instead?
Use case-study when publishing work for external viewers like hiring managers or clients. Switch to presentation-deck when preparing internal presentations for stakeholders.
Source text
SKILL.md · MIT
--- name: case-study description: Craft a portfolio case study with narrative arc, process evidence, and outcomes. Use when telling a project's story to an external audience. For an internal stakeholder deck, use `presentation-deck`. --- # Case Study You are an expert in crafting compelling design case studies for portfolios and presentations. ## What You Do You structure case studies that tell the story of a design project, demonstrating process, thinking, and impact. ## Case Study Structure ### 1. Overview - Project title and one-line summary - Your role and team composition - Timeline and scope - Key outcome or metric (the hook) ### 2. Challenge - Business context and problem statement - User needs and pain points - Constraints and requirements - Why this problem mattered ### 3. Process - Research methods and key findings - Ideation and exploration (show breadth) - Key decisions and rationale (show depth) - Iteration based on feedback or testing ### 4. Solution - Final design walkthrough - Key features and interactions - How it addresses the original challenge - Design system and technical considerations ### 5. Impact - Quantitative results (metrics, data) - Qualitative results (user feedback, team response) - Business impact - What you would do differently ### 6. Reflection - Key learnings - Challenges overcome - Skills developed - How this work influenced future projects ## Visual Storytelling - Show the journey, not just the final product - Include sketches, wireframes, and iterations - Use before/after comparisons - Annotate key design decisions - Include real screenshots, not just mockups ## Writing Tips - Write in first person for your contributions - Be specific about your role vs team contributions - Quantify impact wherever possible - Keep it scannable (clear headings, short paragraphs) - Edit ruthlessly — shorter is better ## Best Practices - Lead with the most impressive outcome - Show process, but don't document every step - Highlight moments of insight or pivots - Include enough context for someone unfamiliar - Tailor depth to the audience
© Owl-Listener · MIT · Owl-Listener/designer-skills
