# Caption to Resource Page — Claude Code Skill

> Turn any Instagram caption into a polished, standalone resource page with downloadable files, embedded media, and interactive widgets.

## How to Install

1. Create the folder `.claude/skills/caption-to-resource/` in your project (or home directory for global use)
2. Save this file as `SKILL.md` inside that folder
3. In Claude Code, run `/caption-to-resource` followed by your caption text

---

## Overview

You provide a caption (and optionally describe what's in the video). Claude parses it, identifies every referenced resource, generates the appropriate deliverables, and builds a single HTML page that bundles everything together.

## Step 1: Parse the Caption

Read the caption carefully and extract:

1. **Topic / Title** — What is the post about? This becomes the page headline.
2. **Referenced resources** — Anything the viewer is told to "grab", "download", "check out", "use", or "follow". Classify each as one of the resource types below.
3. **Key takeaways** — Bullet-point-worthy insights or steps mentioned in the caption or video.
4. **External links** — YouTube URLs, GitHub repos, tool links, articles.
5. **Call to action** — What does the creator want the viewer to do next?

If the caption is ambiguous, ask the user one round of clarifying questions — don't guess on resource content.

## Step 2: Classify & Generate Resources

For each referenced item, pick the best format:

| Resource type | When to use | What to generate |
|---|---|---|
| **Code file** | `.md`, `.swift`, `.py`, `.json`, config files, `CLAUDE.md`, `.cursorrules`, etc. | Create the actual file with realistic, useful content based on context. |
| **PDF guide** | Cheat sheets, step-by-step guides, reference cards | Generate a styled PDF. |
| **Template** | Starter projects, prompt libraries, swipe files, frameworks | Create the file(s) in the appropriate format. If multiple files, zip them. |
| **YouTube embed** | Any YouTube URL mentioned | Extract the video ID and embed with `<iframe>` using privacy-enhanced mode (`youtube-nocookie.com`). |
| **Interactive widget** | Calculators, checklists, quizzes, estimators, timers | Build a self-contained widget in the HTML page using vanilla JS. |
| **External link** | Tools, apps, articles, repos | Render as a styled card with title, description, and outbound link. |

**Important generation principles:**
- Code files should contain real, useful, production-quality content — not placeholder text.
- Widgets should actually work. A macro calculator should compute real macros. A checklist should be interactive.
- When in doubt about what content to put in a file, ask the user.

## Step 3: Build the Resource Page

The page is a single self-contained HTML file. Structure:

```
+-------------------------------------------+
|  Hero Section                             |
|  - Title (from caption topic)             |
|  - Subtitle / one-line description        |
|  - Optional: creator attribution line     |
+-------------------------------------------+
|  Key Takeaways (if extracted)             |
|  - Styled bullet points or cards          |
+-------------------------------------------+
|  Resources Section                        |
|  - Download cards for each file           |
|  - Embedded YouTube players               |
|  - Interactive widgets inline             |
|  - External link cards                    |
+-------------------------------------------+
|  Optional: Email Capture Section          |
|  - "Get the full package" opt-in          |
|  - Form with name + email fields          |
+-------------------------------------------+
|  Footer                                   |
|  - Credit line, social links              |
+-------------------------------------------+
```

### Design Requirements

- **Brand-neutral by default.** Use CSS variables at the top so the user can easily re-skin it.
- **Dark mode and light mode.** Default to system preference via `prefers-color-scheme`, with a toggle button.
- **Mobile-first responsive.** The page must look great on phone screens since viewers are coming from Instagram.
- **Download buttons.** Use relative path download links.
- **Smooth animations.** Subtle fade-in on scroll for resource cards.
- **Accessible.** Proper heading hierarchy, alt text, focus states, semantic HTML.

### CSS Variable Block (customize these for your brand)

```css
/* --- BRAND CUSTOMIZATION --- */
:root {
  --color-bg: #0a0a0a;
  --color-surface: #141414;
  --color-surface-hover: #1e1e1e;
  --color-text: #f0f0f0;
  --color-text-muted: #888;
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-soft: rgba(59, 130, 246, 0.1);
  --color-border: #222;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 12px;
  --max-width: 720px;
}
/* --- END BRAND CUSTOMIZATION --- */
```

### Email Capture (Optional)

Include only if the user wants it. The form is purely front-end HTML/CSS — include a `data-form-action` attribute where the user can plug in their own endpoint (ConvertKit, Mailchimp, custom API).

## Step 4: Assemble & Deliver

1. Generate all resource files
2. Build the HTML page
3. Give the user a brief summary: what was generated, how to customize branding, how to hook up email capture

---

## Caption Parsing Cheat Sheet

### Hashtag Signals
- `#SwiftUI` → Swift/iOS context
- `#VibeCoding` → AI-assisted development
- `#MacroTracking` → fitness/nutrition

### Call-to-Action Patterns
- "Save this for later" → the content itself is the resource
- "Comment X for the link" → there's a resource to deliver
- "Full tutorial on YouTube" → YouTube embed
- "Free template in bio" → downloadable template
- "DM me for..." → potential email capture opportunity

### Resource Detection Keywords

| Signal | File Type |
|---|---|
| "CLAUDE.md", "project instructions" | `.md` config file |
| "prompt", "system prompt" | `.md` or `.txt` |
| "SwiftUI view", "Swift code" | `.swift` |
| "config", "settings" | `.json` / `.yaml` |
| "Python script", "automation" | `.py` |
| "step-by-step", "cheat sheet" | PDF guide |
| "calculator", "ROI", "macros" | Interactive widget |

---

## Widget Quick-Start

Every widget follows this pattern:

```html
<div class="widget" id="widget-name">
  <div class="widget-header">
    <h3>Widget Title</h3>
    <p>Brief explanation</p>
  </div>
  <div class="widget-body">
    <!-- Input controls -->
    <!-- Output display -->
  </div>
</div>
```

Use `input` event (not `change`) for real-time updates. Debounce text inputs at 300ms. Use CSS variables from the page theme — don't hardcode colors.

---

*Install this skill in Claude Code and run `/caption-to-resource` with any Instagram caption to generate a full resource page automatically.*