Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
owl-listener avatar

Case Study

  • 972 installs
  • 1.9k repo stars
  • Updated June 14, 2026
  • owl-listener/designer-skills

case-study is a Claude Code skill that structures completed design projects into portfolio-ready narratives for developers and designers who need to communicate process, decisions, and measurable outcomes.

About

case-study is a Claude Code skill from owl-listener/designer-skills that turns finished design work into structured, portfolio-ready project narratives. It guides creation of sections covering overview, challenge, user needs, research methods, process steps, constraints, and key outcome metrics so readers understand both thinking and impact. Developers and design engineers reach for case-study when documenting UX redesigns, feature launches, or research-driven interface changes for portfolios, conference submissions, or stakeholder decks. The skill emphasizes clear hooks, role and timeline context, and evidence-backed results rather than screenshot dumps alone.

  • 6-section case study framework covering Overview through Reflection
  • Structures narrative around challenge, process, solution, impact and reflection
  • Emphasizes visual storytelling with sketches, wireframes, before/afters and annotated decisions
  • Translates raw project artifacts into compelling portfolio content
  • Produces both written narrative and guidance for supporting visuals

Case Study by the numbers

  • 972 all-time installs (skills.sh)
  • +50 installs in the week ending Jul 29, 2026 (Skillselion tracking)
  • Ranked #261 of 1,881 Documentation skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill case-study

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs972
repo stars1.9k
Security audit3 / 3 scanners passed
Last updatedJune 14, 2026
Repositoryowl-listener/designer-skills

How do you write a design portfolio case study?

Turn completed design work into structured, portfolio-ready narratives that clearly communicate process, decisions, and results.

Who is it for?

Developers and designers documenting UX or product design projects for portfolios, interviews, or stakeholder presentations.

Skip if: Teams needing live UI implementation, code review, or quantitative analytics dashboards instead of written design narratives.

When should I use this skill?

User asks to write, structure, or polish a design portfolio case study from a completed project.

What you get

Structured case study narrative with overview, challenge, process, constraints, and outcome metrics ready for portfolio or presentation.

  • Portfolio-ready case study document
  • Structured challenge and process narrative

Files

SKILL.mdMarkdownGitHub ↗

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

Related skills

FAQ

What sections does case-study include?

case-study organizes narratives into overview, challenge, process, and results sections. Each section prompts for role, timeline, research methods, constraints, user pain points, and a measurable outcome hook suitable for portfolios.

When should developers use case-study?

case-study fits after design work is complete and needs a structured write-up for portfolios, presentations, or hiring materials. The skill focuses on communicating process and impact, not generating UI code or deployment artifacts.

Is Case Study safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Documentationuiuxbranding

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.