Turn brief resume achievements into portfolio case studies that explain the problem, your decisions, the solution, and results. Organize your contribution and lessons learned, with technical detail adjusted to the intended reader.
Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.
Review the instructions the agent will receive before you install.
Use this skill when the user:
Why Case Studies Matter:
1. Overview (Project summary)
2. Problem (What needed to be solved)
3. Process (How you approached it)
4. Solution (What you created/delivered)
5. Results (The impact)
6. Learnings (What you'd do differently)
Purpose: Hook the reader, provide context
Include:
Example:
# Redesigning the Checkout Flow
**Company:** E-Commerce Inc.
**Role:** Lead Product Designer
**Timeline:** 6 weeks
**Team:** 2 designers, 3 engineers, 1 PM
**Summary:** Reduced cart abandonment by 35% through a streamlined 3-step checkout process, generating $2M in recovered revenue.
Purpose: Set up why this work mattered
Include:
Example:
## The Problem
E-Commerce Inc. was experiencing 68% cart abandonment—significantly higher than the industry average of 55%. Exit surveys and user research revealed several issues:
- **Too many steps:** Our checkout had 7 screens
- **Forced account creation:** Users had to register before purchasing
- **Hidden costs:** Shipping wasn't shown until step 5
- **Mobile friction:** Forms weren't optimized for mobile
**Goal:** Reduce cart abandonment to below 50% within 3 months.
**Constraints:**
- No changes to existing payment integrations
- Had to maintain PCI compliance
- 6-week timeline before holiday season
Purpose: Show your thinking and methodology
Include:
Example:
## Process
### Research
I started by understanding the problem deeply:
- Analyzed Mixpanel funnel data for drop-off points
- Conducted 10 user interviews with recent abandoners
- Reviewed heatmaps and session recordings
- Benchmarked against 5 competitor checkout flows
**Key Insight:** 73% of drop-offs occurred at the account creation screen. Users wanted to purchase, not commit to a relationship.
### Ideation
I explored several approaches:
1. Guest checkout only (simplest)
2. Social login options (lower friction)
3. Progressive profiling (collect info over time)
4. One-page checkout (Amazon-style)
After weighing feasibility, timeline, and impact, we chose a hybrid approach...
### Decisions Made
- **Guest checkout first:** Made registration optional and post-purchase
- **Transparent pricing:** Showed shipping on the first screen
- **Mobile-first design:** Designed for mobile, then adapted for desktop
- **Progress indicator:** Added clear "Step 1 of 3" indicator
Purpose: Show what you actually created
Include:
Example:
## Solution
### The New Checkout Flow
**Before:** 7 screens with mandatory registration
**After:** 3 screens with optional guest checkout
[IMAGE: Before/After comparison]
### Key Changes
**1. Transparent Pricing Widget**
[IMAGE: Pricing widget mockup]
Showed order total, shipping, and taxes from the start. No surprises.
**2. Guest Checkout Option**
[IMAGE: Guest checkout screen]
Made account creation optional with clear value proposition for why to register.
**3. Smart Form Design**
[IMAGE: Form design]
- Single-column layout on mobile
- Auto-format for phone/card numbers
- Address autocomplete integration
- Clear error messaging
**4. Trust Signals**
Added security badges, money-back guarantee, and customer service contact throughout the flow.
Purpose: Prove impact with data
Include:
Example:
## Results
### Primary Metrics (90 days post-launch)
| Metric | Before | After | Change |
|--------|--------|-------|--------|
| Cart Abandonment | 68% | 44% | -35% |
| Checkout Completion | 32% | 56% | +75% |
| Mobile Conversion | 18% | 41% | +128% |
| Revenue per Visitor | $2.40 | $3.85 | +60% |
### Business Impact
- **$2M additional revenue** in first quarter
- **15% increase in mobile orders**
- **Customer support tickets about checkout** dropped by 45%
### Secondary Effects
- Account creation actually increased 20% (post-purchase)
- Average order value stayed stable
- Return customer rate improved
Purpose: Show growth mindset and self-awareness
Include:
Example:
## Learnings
### What Worked
- **Early user research** prevented us from building the wrong solution
- **Cross-functional alignment** meetings kept everyone on the same page
- **Launching with analytics** let us measure impact immediately
### What I'd Do Differently
- **More A/B testing:** We launched the full redesign at once. Would have preferred to test individual changes to understand what drove results.
- **Earlier mobile focus:** We designed desktop-first then adapted. Starting mobile-first would have been more efficient.
- **Stakeholder education:** Spent too long convincing leadership. Would start stakeholder alignment earlier next time.
### Skills Developed
- Advanced Figma prototyping
- Working with A/B testing frameworks
- Presenting data-driven design decisions to executives
Focus on:
Focus on:
Focus on:
Focus on:
When creating a case study:
# CASE STUDY: [PROJECT NAME]
## Quick Facts
- **Role:** [Your role]
- **Company:** [Company]
- **Timeline:** [Duration]
- **Team:** [Team composition]
- **Impact:** [One-line result]
---
## Overview
[2-3 sentence summary of the project]
## Problem
[Context and challenges - what needed to be solved]
## Process
### Research
[What you learned]
### Approach
[How you tackled it]
### Key Decisions
[Important choices and rationale]
## Solution
[What you built/created - include visual descriptions]
### Feature 1
[Description]
### Feature 2
[Description]
## Results
[Quantified impact]
| Metric | Before | After | Change |
|--------|--------|-------|--------|
## Learnings
[Reflections and growth]
---
## Visual Asset List
[List of images/screenshots needed]
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.
Plan A/B tests that compare page or product changes, with clear hypotheses, sample sizes, success metrics, and traffic allocation. Get a structured test plan and guidance for interpreting results and deciding what to try next.
Prepare an academic CV for faculty, postdoctoral, or research applications. Organize publications, grants, teaching, and research experience, with section order and formatting adapted to the role and academic field.
Audit and improve web accessibility using WCAG 2.1 guidelines. Covers image descriptions, color contrast, keyboard controls, forms, and screen reader support, with code examples and automated and manual checks to guide fixes.
Audit websites for accessibility barriers and improve image descriptions, color contrast, forms, keyboard navigation, and screen reader support. Provides code examples and automated and manual testing guidance for work toward WCAG 2.1 AA or AAA accessibility standards.
Design autonomous agents for Claude Code plugins, including when they should run, what tools they may use, and how they should respond. Provides configuration templates, prompt guidance, and validation steps for creating agent files.