본문으로 건너뛰기
cccskills
무료GitHub에 공개

portfolio-case-study-writer

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.

설치 방법 보기

이럴 때 유용합니다

  • Expanding resume bullets into detailed project stories
  • Preparing project write-ups for a portfolio website
  • Explaining your role and decisions before an interview
  • Presenting project results and lessons learned

포함된 파일(1)

  • SKILL.md8.9 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Portfolio Case Study Writer

When to Use This Skill

Use this skill when the user:

  • Wants to create portfolio case studies
  • Needs to expand resume bullets into detailed writeups
  • Is building a portfolio website
  • Wants to showcase project work in depth
  • Mentions: "case study", "portfolio", "project writeup", "work samples", "portfolio piece"

Core Capabilities

  • Transform resume bullets into detailed case studies
  • Structure case studies for maximum impact
  • Create compelling project narratives
  • Balance technical detail with business context
  • Format for portfolio websites
  • Tailor depth to audience

Case Study Purpose

Why Case Studies Matter:

  • Resumes show WHAT you did; case studies show HOW and WHY
  • Demonstrate thinking process, not just outcomes
  • Allow deeper showcase of skills
  • Differentiate you from other candidates
  • Required for many PM, UX, and creative roles

The Case Study Structure

Standard Structure

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)

Time to Read

  • Quick Read: 3-5 minutes (essential for portfolio)
  • Deep Dive: 10-15 minutes (for interested readers)

Section-by-Section Guide

1. Overview Section

Purpose: Hook the reader, provide context

Include:

  • Project name and company
  • Your role
  • Timeline
  • Team size
  • One-sentence summary of impact

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.

2. Problem Section

Purpose: Set up why this work mattered

Include:

  • Business context
  • User pain points
  • Key metrics or goals
  • Constraints

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

3. Process Section

Purpose: Show your thinking and methodology

Include:

  • Research conducted
  • Stakeholders involved
  • Hypotheses formed
  • Options considered
  • Decisions made (and why)

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

4. Solution Section

Purpose: Show what you actually created

Include:

  • Visual artifacts (mockups, screenshots, diagrams)
  • Key features/changes
  • Technical implementation (if relevant)
  • How it addressed the problems

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.

5. Results Section

Purpose: Prove impact with data

Include:

  • Quantitative results (with timeframe)
  • Comparison to goals
  • Secondary metrics affected
  • Business impact

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

6. Learnings Section

Purpose: Show growth mindset and self-awareness

Include:

  • What worked well
  • What you'd do differently
  • Unexpected challenges
  • Skills developed

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

Case Study Types by Role

Product Manager Case Study

Focus on:

  • Strategy and prioritization
  • Stakeholder management
  • Metrics and outcomes
  • Technical trade-offs

UX/Product Designer Case Study

Focus on:

  • User research
  • Design process
  • Visual artifacts
  • Usability improvements

Software Engineer Case Study

Focus on:

  • Technical architecture
  • Problem-solving approach
  • System design
  • Code quality/performance

Marketing Case Study

Focus on:

  • Strategy and targeting
  • Creative execution
  • Channel performance
  • ROI and attribution

Visual Elements

Must-Have Visuals

  • Before/after comparisons
  • Key screens or deliverables
  • Process diagrams
  • Results charts

Nice-to-Have Visuals

  • User journey maps
  • Wireframes evolution
  • Research artifacts
  • Team photos

Visual Tips

  • Use consistent image sizing
  • Add captions explaining each image
  • Blur sensitive data if needed
  • Ensure mobile-friendly image sizes

Output Format

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]

Case Study Quality Checklist

  • ✅ Clear problem statement
  • ✅ Evidence of user/customer focus
  • ✅ Process clearly explained
  • ✅ Your specific contributions are clear
  • ✅ Quantified results
  • ✅ Visual artifacts included
  • ✅ Honest about challenges/learnings
  • ✅ Appropriate length (3-10 min read)
  • ✅ Proofread and polished
  • ✅ Can discuss in detail in interview

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building an interactive 3D product configurator
  • Adding 3D scenes to a portfolio
  • Animating models and cameras as visitors scroll
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Comparing signup button copy
  • Planning a pricing page experiment
  • Estimating sample size and test duration
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Preparing a CV for faculty applications
  • Updating a CV for postdoctoral applications
  • Organizing publications and research funding
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing accessibility before a website launch
  • Improving keyboard navigation
  • Fixing form labels and error announcements
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing a website for accessibility issues
  • Fixing form labels and error announcements
  • Checking keyboard navigation and dialog focus
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create a code review agent
  • Refine examples that trigger an agent
  • Limit the tools an agent can use
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

davila7의 스킬 모두 보기

이 스킬의 문제 신고