[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DS490K2S962HNE4WWT2GHC":3,"skill-same:01M6DS490K2S962HNE4WWT2GHC":119},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":48,"install":49,"resources":62},"01M6DS490K2S962HNE4WWT2GHC","gtm-create-html-carousel",null,"Create LinkedIn carousel posts as high-quality PNG images. Design informational multi-slide posts like \"5 AI GTM workflows\" with consistent styling, then automatically screenshot each slide at LinkedIn's optimal 1080x1080px format.","AntifragileTech\u002Fantifragile-claude-code","AntifragileTech","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F174357194?v=4","01M6DQCYMK4CDSQQAN0ZC72NTV","01M6DQCYS9YPW1WKMQ5TJMPQ43",9,"MIT","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36],"create","html","gtm","gtm create html carousel","design","workflows","screenshot","format","png","quality","linkedin","styling","images","as","2026-11-10 10:12:30",false,"---\nname: gtm-create-html-carousel\ndescription: Create LinkedIn carousel posts as high-quality PNG images. Design informational multi-slide posts like \"5 AI GTM workflows\" with consistent styling, then automatically screenshot each slide at LinkedIn's optimal 1080x1080px format.\n---\n\n# LinkedIn Carousel Creator\n\nCreate stunning LinkedIn carousel posts as PNG images. This skill generates styled HTML slides optimized for square format (1080×1080px), then automatically screenshots each slide for direct upload to LinkedIn.\n\n## Core Philosophy\n\n1. **LinkedIn-First Design** — Square format (1080×1080px), optimized for mobile feed viewing\n2. **Informational Content** — Tips, workflows, lists, frameworks (not presentations)\n3. **Consistent Styling** — Reuse proven design systems from frontend-slides\n4. **Automated Export** — Generate HTML → Screenshot → PNG files ready for LinkedIn\n5. **Viewport Perfect** — Every slide must fit exactly in 1080×1080px without scrolling\n\n---\n\n## LinkedIn Carousel Specs\n\n**Format:** Square (1080×1080px)\n\n- **Aspect ratio:** 1:1\n- **File format:** PNG (recommended) or JPG\n- **File size:** Under 10MB per image\n- **Max slides:** 10 images per carousel\n- **Ideal slide count:** 5-8 slides (best engagement)\n\n**Content Structure:**\n\n1. **Cover slide** — Hook + title + your brand\n2. **Content slides** — One key point per slide (3-6 slides)\n3. **Closing slide** — CTA \u002F summary \u002F follow prompt\n\n---\n\n## When to Use This Skill\n\nUse for LinkedIn carousel posts like:\n\n- \"5 AI GTM workflows you should be using\"\n- \"How to build X: A step-by-step guide\"\n- \"7 mistakes founders make with Y\"\n- \"The complete framework for Z\"\n- \"Before & After: How we 10x'd our metrics\"\n\n**NOT for:**\n\n- Long-form presentations (use frontend-slides)\n- Video content\n- Single-image posts\n\n---\n\n## Workflow Overview\n\n```\n1. Content Input → User provides topic\u002Foutline\n2. Style Selection → Choose visual style (or preview options)\n3. HTML Generation → Create 1080×1080px HTML slides\n4. Screenshot → Auto-capture each slide as PNG\n5. Delivery → Folder of PNG files ready for LinkedIn upload\n```\n\n---\n\n## Phase 1: Content Discovery\n\n### Step 1.1: Get Topic & Structure\n\nAsk the user:\n\n**Question 1: What's the topic?**\n\n- Header: \"Topic\"\n- Question: \"What's the main topic of this carousel?\"\n- (Free text input)\n\n**Question 2: Content Type**\n\n- Header: \"Format\"\n- Question: \"What type of post is this?\"\n- Options:\n  - \"Numbered list\" — \"5 ways to...\", \"7 mistakes...\", \"3 steps to...\"\n  - \"How-to guide\" — Step-by-step tutorial or process\n  - \"Framework\" — Concept explanation with structure\n  - \"Before\u002FAfter\" — Transformation or case study\n  - \"Insights\u002FTips\" — Collection of advice or learnings\n\n**Question 3: Slide Count**\n\n- Header: \"Length\"\n- Question: \"How many slides?\"\n- Options:\n  - \"Short (5-6)\" — Quick, punchy (best for mobile scrolling)\n  - \"Medium (7-8)\" — Standard carousel length\n  - \"Long (9-10)\" — Maximum LinkedIn allows\n\n**Question 4: Branding Handle**\n\n- Header: \"Brand\"\n- Question: \"What handle or name should appear on each slide?\"\n- (Free text input — e.g., \"@yourhandle\", \"Acme Inc\", or leave blank for none)\n\n**Question 5: Content Ready?**\n\n- Header: \"Content\"\n- Question: \"Do you have the content written?\"\n- Options:\n  - \"Yes, I have all content\" — Paste it in\n  - \"I have bullet points\" — Need light formatting\n  - \"Just the topic\" — Need help outlining\n\nIf user has content, ask them to share it.\n\n### Content Density Rules for LinkedIn\n\nEach slide should be **scannable in 2-3 seconds** on mobile:\n\n| Slide Type | Max Content                                              |\n| ---------- | -------------------------------------------------------- |\n| Cover      | Title (1 line) + subtitle (1 line) + branding            |\n| List item  | Number\u002Ficon + heading (2 lines max) + body (3 lines max) |\n| Framework  | Diagram\u002Fvisual + 2-4 labels                              |\n| Quote\u002FStat | 1 large stat or quote + context                          |\n| CTA        | 1 action + visual element                                |\n\n**If content exceeds limits:** Break into multiple slides or simplify.\n\n---\n\n## Phase 2: Style Selection\n\nUsers can choose styles two ways:\n\n### Option A: Direct Selection (Faster)\n\nShow preset picker:\n\n**Question: Pick a Style**\n\n- Header: \"Style\"\n- Question: \"Which visual style works best for your content?\"\n- Options:\n  - \"Bold Signal\" — High-contrast card on dark, confident\n  - \"Dark Botanical\" — Elegant dark with soft abstract shapes\n  - \"Notebook Tabs\" — Editorial cream paper with colorful tabs\n  - \"Pastel Geometry\" — Friendly pastels with decorative pills\n  - \"Neon Cyber\" — Futuristic tech aesthetic\n  - \"Split Pastel\" — Playful two-tone split design\n\n(See STYLE_PRESETS.md for full details on each style)\n\n### Option B: Guided Discovery\n\nIf user isn't sure, ask:\n\n**Question: Audience & Tone**\n\n- Header: \"Vibe\"\n- Question: \"Who's your audience and what tone?\"\n- Options:\n  - \"Professional\u002FCorporate\" → Recommend: Bold Signal, Dark Botanical\n  - \"Creative\u002FPlayful\" → Recommend: Split Pastel, Pastel Geometry\n  - \"Technical\u002FDev-focused\" → Recommend: Neon Cyber, Terminal Green\n  - \"Elegant\u002FPremium\" → Recommend: Dark Botanical, Paper & Ink\n\nThen generate 2-3 preview slides and let user pick.\n\n---\n\n## Phase 3: Generate HTML Carousel\n\n### File Structure\n\nAll carousel files (HTML source and PNG exports) are saved to the shared assets directory.\n\n```\n[carousel-name]\u002F\n├── index.html              # Full carousel (all slides)\n├── slides\u002F\n│   ├── slide-01.html       # Individual slide pages\n│   ├── slide-02.html\n│   └── ...\n└── exports\u002F\n    ├── slide-01.png        # Screenshots (generated in Phase 4)\n    ├── slide-02.png\n    └── ...\n```\n\n### HTML Architecture for 1080×1080px\n\n**CRITICAL: LinkedIn carousel slides are SQUARE (1:1 ratio), not widescreen.**\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>Slide 01\u003C\u002Ftitle>\n\n    \u003C!-- Fonts -->\n    \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fapi.fontshare.com\u002Fv2\u002Fcss?f[]=...\" \u002F>\n\n    \u003Cstyle>\n      \u002F* ===========================================\n           LINKEDIN CAROUSEL: SQUARE FORMAT\n           Fixed 1080×1080px for screenshot\n           =========================================== *\u002F\n      :root {\n        \u002F* Fixed size for LinkedIn *\u002F\n        --slide-width: 1080px;\n        --slide-height: 1080px;\n\n        \u002F* Colors (from chosen preset) *\u002F\n        --bg-primary: #0a0f1c;\n        --text-primary: #ffffff;\n        --accent: #00ffcc;\n\n        \u002F* Typography - scaled for square format *\u002F\n        --title-size: 72px;\n        --subtitle-size: 36px;\n        --body-size: 28px;\n        --small-size: 20px;\n\n        \u002F* Spacing *\u002F\n        --slide-padding: 80px;\n        --content-gap: 40px;\n\n        \u002F* Animation *\u002F\n        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\n      }\n\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: var(--slide-width);\n        height: var(--slide-height);\n        overflow: hidden;\n      }\n\n      body {\n        font-family: var(--font-body);\n        background: var(--bg-primary);\n        color: var(--text-primary);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        padding: var(--slide-padding);\n      }\n\n      \u002F* Content container *\u002F\n      .slide-content {\n        width: 100%;\n        max-width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: var(--content-gap);\n      }\n\n      \u002F* Typography hierarchy *\u002F\n      h1 {\n        font-size: var(--title-size);\n        font-weight: 800;\n        line-height: 1.1;\n        margin-bottom: 20px;\n      }\n\n      h2 {\n        font-size: var(--subtitle-size);\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      p,\n      li {\n        font-size: var(--body-size);\n        line-height: 1.4;\n      }\n\n      \u002F* List styling *\u002F\n      ul {\n        list-style: none;\n      }\n\n      li {\n        padding-left: 40px;\n        position: relative;\n        margin-bottom: 20px;\n      }\n\n      li::before {\n        content: \"→\";\n        position: absolute;\n        left: 0;\n        color: var(--accent);\n        font-weight: bold;\n      }\n\n      \u002F* Number badge (for list items) *\u002F\n      .number {\n        font-size: 120px;\n        font-weight: 900;\n        color: var(--accent);\n        opacity: 0.15;\n        position: absolute;\n        top: -40px;\n        left: -20px;\n        z-index: 0;\n      }\n\n      \u002F* Branding footer *\u002F\n      .brand {\n        position: absolute;\n        bottom: var(--slide-padding);\n        right: var(--slide-padding);\n        font-size: var(--small-size);\n        opacity: 0.7;\n      }\n\n      \u002F* ===========================================\n           STYLE-SPECIFIC OVERRIDES\n           Inject preset styles here\n           =========================================== *\u002F\n      \u002F* ... preset-specific CSS ... *\u002F\n    \u003C\u002Fstyle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv class=\"slide-content\">\n      \u003C!-- Slide content goes here -->\n      \u003Ch1>Your Title Here\u003C\u002Fh1>\n      \u003Cp>Your content here\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"brand\">@yourbrand\u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Content Slide Templates\n\n**Cover Slide:**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Ch1>5 AI GTM Workflows\u003Cbr \u002F>You Should Be Using\u003C\u002Fh1>\n  \u003Cp>Scale your outbound without scaling your team\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle\u003C\u002Fdiv>\n```\n\n**Numbered Item (e.g., Slide 2\u002F6):**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Cdiv class=\"number\">01\u003C\u002Fdiv>\n  \u003Ch2>Signal-Based Outbound\u003C\u002Fh2>\n  \u003Cp>\n    Monitor job postings, funding announcements, and tech stack changes to find\n    companies actively solving your problem.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle • 1\u002F5\u003C\u002Fdiv>\n```\n\n**Framework Slide:**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Ch2>The GTM Engineering Stack\u003C\u002Fh2>\n  \u003Cdiv class=\"framework-grid\">\n    \u003Cdiv class=\"box\">Research\u003C\u002Fdiv>\n    \u003Cdiv class=\"box\">Personalization\u003C\u002Fdiv>\n    \u003Cdiv class=\"box\">Outreach\u003C\u002Fdiv>\n    \u003Cdiv class=\"box\">Tracking\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle • 3\u002F5\u003C\u002Fdiv>\n```\n\n**CTA Slide:**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Ch2>Want more like this?\u003C\u002Fh2>\n  \u003Cp>Follow me for more tips and workflows.\u003C\u002Fp>\n  \u003Cdiv class=\"cta\">Hit that follow button →\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle\u003C\u002Fdiv>\n```\n\n---\n\n## Phase 4: Screenshot Generation\n\nAfter generating HTML, automatically capture screenshots.\n\n### Using Playwright (Recommended)\n\nCreate a Node.js script to screenshot each slide:\n\n```javascript\n\u002F\u002F screenshot-slides.js\nconst { chromium } = require(\"playwright\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\n\nasync function screenshotSlides(slidesDir, outputDir) {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n\n  \u002F\u002F Set viewport to LinkedIn carousel size\n  await page.setViewportSize({ width: 1080, height: 1080 });\n\n  \u002F\u002F Ensure output directory exists\n  if (!fs.existsSync(outputDir)) {\n    fs.mkdirSync(outputDir, { recursive: true });\n  }\n\n  \u002F\u002F Find all HTML files in slides directory\n  const slideFiles = fs\n    .readdirSync(slidesDir)\n    .filter((f) => f.endsWith(\".html\"))\n    .sort();\n\n  console.log(`Found ${slideFiles.length} slides to screenshot`);\n\n  for (const slideFile of slideFiles) {\n    const slidePath = path.join(slidesDir, slideFile);\n    const outputName = slideFile.replace(\".html\", \".png\");\n    const outputPath = path.join(outputDir, outputName);\n\n    console.log(`Capturing ${slideFile}...`);\n\n    await page.goto(`file:\u002F\u002F${path.resolve(slidePath)}`);\n\n    \u002F\u002F Wait for fonts and animations\n    await page.waitForTimeout(500);\n\n    \u002F\u002F Take screenshot\n    await page.screenshot({\n      path: outputPath,\n      type: \"png\",\n      fullPage: false,\n    });\n\n    console.log(`✓ Saved ${outputName}`);\n  }\n\n  await browser.close();\n  console.log(\"\\n✨ All slides captured!\");\n}\n\n\u002F\u002F Usage\nconst carouselName = process.argv[2];\nif (!carouselName) {\n  console.error(\"Usage: node screenshot-slides.js \u003Ccarousel-name>\");\n  process.exit(1);\n}\n\nconst slidesDir = path.join(__dirname, carouselName, \"slides\");\nconst outputDir = path.join(__dirname, carouselName, \"exports\");\n\nscreenshotSlides(slidesDir, outputDir);\n```\n\n### Installation\n\nThe skill directory needs these dependencies:\n\n```json\n{\n  \"name\": \"linkedin-carousel-screenshots\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"playwright\": \"^1.40.0\"\n  }\n}\n```\n\nFirst time setup:\n\n```bash\ncd \u002Fpath\u002Fto\u002Fskills\u002Fcreate-html-carousel\nnpm install\n```\n\n### Running Screenshot Script\n\nAfter generating HTML slides:\n\n```bash\nnode screenshot-slides.js carousel-name\n```\n\nThis will:\n\n1. Open each slide HTML in a headless browser\n2. Set viewport to 1080×1080px\n3. Wait for fonts\u002Fanimations to load\n4. Capture PNG screenshot\n5. Save to `[carousel-name]\u002Fexports\u002F`\n\n---\n\n## Phase 5: Delivery\n\nAfter screenshots are generated, present to user:\n\n```\n✨ Your LinkedIn carousel is ready!\n\n? Location: \u002Fassets\u002Fcarousel-name\u002F\n\n**Slides:**\n- 6 HTML slides in slides\u002F folder\n- 6 PNG images in exports\u002F folder (1080×1080px)\n\n**Preview:**\nOpen index.html to see all slides with navigation.\n\n**Upload to LinkedIn:**\n1. Create new post on LinkedIn\n2. Click \"Add media\"\n3. Upload all PNGs from exports\u002F folder in order\n4. Add your post copy\n5. Publish!\n\n**File sizes:**\n- slide-01.png: 234 KB ✓\n- slide-02.png: 198 KB ✓\n- slide-03.png: 256 KB ✓\n(All under 10MB limit)\n\nWant to make any changes to the slides?\n```\n\n---\n\n## Style Adaptation for Square Format\n\nAll styles from frontend-slides work for carousels, but require these adjustments:\n\n### Typography Scaling\n\nSquare format has less horizontal space, so scale fonts:\n\n| Element  | Presentation (16:9)              | Carousel (1:1) |\n| -------- | -------------------------------- | -------------- |\n| Title    | clamp(2rem, 6vw, 5rem)           | 72px (fixed)   |\n| Subtitle | clamp(1.25rem, 3vw, 2.5rem)      | 36px (fixed)   |\n| Body     | clamp(0.875rem, 1.5vw, 1.125rem) | 28px (fixed)   |\n| Small    | clamp(0.75rem, 1vw, 0.875rem)    | 20px (fixed)   |\n\n**Why fixed sizes?** We're targeting a single export size (1080×1080px), not responsive web viewing.\n\n### Layout Adjustments\n\n**Vertical space is precious:**\n\n- Reduce top\u002Fbottom padding (80px instead of 4rem)\n- Tighter line-height (1.2-1.4 instead of 1.5-1.6)\n- Fewer list items per slide (max 3-4)\n- Smaller decorative elements\n\n**Mobile-first mindset:**\n\n- Most LinkedIn users view on phones\n- Text must be readable at thumbnail size\n- High contrast is critical\n- Bold, simple layouts beat intricate designs\n\n---\n\n## Content Best Practices\n\n### Hook Formula (Cover Slide)\n\nStrong hooks for LinkedIn carousels:\n\n- Number + Promise: \"5 workflows that 10x'd our outbound\"\n- Contrarian: \"Stop doing X. Do this instead.\"\n- Before\u002FAfter: \"How we went from X to Y in 30 days\"\n- Question: \"Why are only 3% of founders doing this?\"\n- Curiosity gap: \"The GTM strategy nobody talks about\"\n\n### Body Slides (Items 2-9)\n\nEach slide should:\n\n1. **One clear point** — Don't cram multiple concepts\n2. **Visual hierarchy** — Large number\u002Ficon + heading + body\n3. **Concrete, not abstract** — \"Use job postings to find intent\" not \"Leverage signals\"\n4. **Scannable** — 2-3 second read time max\n\n### Closing Slide\n\nAlways include a CTA:\n\n- \"Follow for more [topic]\"\n- \"Repost if this helped\"\n- \"Comment your biggest takeaway\"\n- \"DM me if you want the full playbook\"\n\nAvoid:\n\n- \"Link in comments\" (often gets buried)\n- \"Check out my website\" (feels salesy)\n- No CTA at all (wasted opportunity)\n\n---\n\n## Troubleshooting\n\n### Fonts Not Loading in Screenshots\n\n**Symptom:** Screenshots show default system fonts\n\n**Solution:**\n\n1. Use web-safe fonts (Arial, Georgia) OR\n2. Add `await page.waitForLoadState('networkidle')` before screenshot\n3. Increase wait timeout: `await page.waitForTimeout(1000)`\n\n### Screenshots Are Blurry\n\n**Symptom:** Text looks fuzzy or low-res\n\n**Solution:**\n\n1. Set device scale factor in Playwright:\n   ```javascript\n   await page.setViewportSize({\n     width: 1080,\n     height: 1080,\n     deviceScaleFactor: 2, \u002F\u002F Retina-quality\n   });\n   ```\n\n### Content Overflows the Slide\n\n**Symptom:** Text or elements cut off in screenshot\n\n**Solution:**\n\n1. Reduce font sizes\n2. Decrease padding\n3. Split into multiple slides\n4. Simplify content (fewer bullets, shorter text)\n\n### Colors Look Different in Export\n\n**Symptom:** PNG colors don't match HTML preview\n\n**Solution:**\n\n- Ensure browser color profile matches sRGB\n- Use hex colors, avoid CSS filters that may render differently\n- Test screenshot script before generating all slides\n\n---\n\n## Preset Quick Reference\n\n| Preset          | Best For               | Vibe                  |\n| --------------- | ---------------------- | --------------------- |\n| Bold Signal     | Confident, high-impact | Professional          |\n| Dark Botanical  | Elegant, premium       | Sophisticated         |\n| Notebook Tabs   | Editorial, organized   | Friendly-professional |\n| Pastel Geometry | Friendly, approachable | Playful               |\n| Neon Cyber      | Tech, innovation       | Futuristic            |\n| Split Pastel    | Creative, fun          | Energetic             |\n\nSee STYLE_PRESETS.md for complete styling details.\n\n---\n\n## Related Skills\n\n- **frontend-slides** — For full presentations (not carousels)\n- **personalized-email** — For outreach content to pair with LinkedIn posts\n- **deep-web-research** — For researching topics\u002Fstats for carousel content\n\n---\n\n## Example Session Flow\n\n1. User: \"Create a LinkedIn carousel about 5 AI GTM workflows\"\n2. Skill asks: content type, slide count, have content ready?\n3. User provides bullet points of the 5 workflows\n4. Skill asks: style preference\n5. User picks \"Bold Signal\"\n6. Skill generates 7 HTML slides (cover + 5 workflows + CTA)\n7. Skill runs screenshot script automatically\n8. Skill delivers folder with HTML + PNG exports\n9. User uploads PNGs to LinkedIn and publishes\n\nTotal time: 5-10 minutes from idea to ready-to-publish carousel.\n","# LinkedIn Carousel Creator\n\nCreate stunning LinkedIn carousel posts as PNG images. This skill generates styled HTML slides optimized for square format (1080×1080px), then automatically screenshots each slide for direct upload to LinkedIn.\n\n## Core Philosophy\n\n1. **LinkedIn-First Design** — Square format (1080×1080px), optimized for mobile feed viewing\n2. **Informational Content** — Tips, workflows, lists, frameworks (not presentations)\n3. **Consistent Styling** — Reuse proven design systems from frontend-slides\n4. **Automated Export** — Generate HTML → Screenshot → PNG files ready for LinkedIn\n5. **Viewport Perfect** — Every slide must fit exactly in 1080×1080px without scrolling\n\n---\n\n## LinkedIn Carousel Specs\n\n**Format:** Square (1080×1080px)\n\n- **Aspect ratio:** 1:1\n- **File format:** PNG (recommended) or JPG\n- **File size:** Under 10MB per image\n- **Max slides:** 10 images per carousel\n- **Ideal slide count:** 5-8 slides (best engagement)\n\n**Content Structure:**\n\n1. **Cover slide** — Hook + title + your brand\n2. **Content slides** — One key point per slide (3-6 slides)\n3. **Closing slide** — CTA \u002F summary \u002F follow prompt\n\n---\n\n## When to Use This Skill\n\nUse for LinkedIn carousel posts like:\n\n- \"5 AI GTM workflows you should be using\"\n- \"How to build X: A step-by-step guide\"\n- \"7 mistakes founders make with Y\"\n- \"The complete framework for Z\"\n- \"Before & After: How we 10x'd our metrics\"\n\n**NOT for:**\n\n- Long-form presentations (use frontend-slides)\n- Video content\n- Single-image posts\n\n---\n\n## Workflow Overview\n\n```\n1. Content Input → User provides topic\u002Foutline\n2. Style Selection → Choose visual style (or preview options)\n3. HTML Generation → Create 1080×1080px HTML slides\n4. Screenshot → Auto-capture each slide as PNG\n5. Delivery → Folder of PNG files ready for LinkedIn upload\n```\n\n---\n\n## Phase 1: Content Discovery\n\n### Step 1.1: Get Topic & Structure\n\nAsk the user:\n\n**Question 1: What's the topic?**\n\n- Header: \"Topic\"\n- Question: \"What's the main topic of this carousel?\"\n- (Free text input)\n\n**Question 2: Content Type**\n\n- Header: \"Format\"\n- Question: \"What type of post is this?\"\n- Options:\n  - \"Numbered list\" — \"5 ways to...\", \"7 mistakes...\", \"3 steps to...\"\n  - \"How-to guide\" — Step-by-step tutorial or process\n  - \"Framework\" — Concept explanation with structure\n  - \"Before\u002FAfter\" — Transformation or case study\n  - \"Insights\u002FTips\" — Collection of advice or learnings\n\n**Question 3: Slide Count**\n\n- Header: \"Length\"\n- Question: \"How many slides?\"\n- Options:\n  - \"Short (5-6)\" — Quick, punchy (best for mobile scrolling)\n  - \"Medium (7-8)\" — Standard carousel length\n  - \"Long (9-10)\" — Maximum LinkedIn allows\n\n**Question 4: Branding Handle**\n\n- Header: \"Brand\"\n- Question: \"What handle or name should appear on each slide?\"\n- (Free text input — e.g., \"@yourhandle\", \"Acme Inc\", or leave blank for none)\n\n**Question 5: Content Ready?**\n\n- Header: \"Content\"\n- Question: \"Do you have the content written?\"\n- Options:\n  - \"Yes, I have all content\" — Paste it in\n  - \"I have bullet points\" — Need light formatting\n  - \"Just the topic\" — Need help outlining\n\nIf user has content, ask them to share it.\n\n### Content Density Rules for LinkedIn\n\nEach slide should be **scannable in 2-3 seconds** on mobile:\n\n| Slide Type | Max Content                                              |\n| ---------- | -------------------------------------------------------- |\n| Cover      | Title (1 line) + subtitle (1 line) + branding            |\n| List item  | Number\u002Ficon + heading (2 lines max) + body (3 lines max) |\n| Framework  | Diagram\u002Fvisual + 2-4 labels                              |\n| Quote\u002FStat | 1 large stat or quote + context                          |\n| CTA        | 1 action + visual element                                |\n\n**If content exceeds limits:** Break into multiple slides or simplify.\n\n---\n\n## Phase 2: Style Selection\n\nUsers can choose styles two ways:\n\n### Option A: Direct Selection (Faster)\n\nShow preset picker:\n\n**Question: Pick a Style**\n\n- Header: \"Style\"\n- Question: \"Which visual style works best for your content?\"\n- Options:\n  - \"Bold Signal\" — High-contrast card on dark, confident\n  - \"Dark Botanical\" — Elegant dark with soft abstract shapes\n  - \"Notebook Tabs\" — Editorial cream paper with colorful tabs\n  - \"Pastel Geometry\" — Friendly pastels with decorative pills\n  - \"Neon Cyber\" — Futuristic tech aesthetic\n  - \"Split Pastel\" — Playful two-tone split design\n\n(See STYLE_PRESETS.md for full details on each style)\n\n### Option B: Guided Discovery\n\nIf user isn't sure, ask:\n\n**Question: Audience & Tone**\n\n- Header: \"Vibe\"\n- Question: \"Who's your audience and what tone?\"\n- Options:\n  - \"Professional\u002FCorporate\" → Recommend: Bold Signal, Dark Botanical\n  - \"Creative\u002FPlayful\" → Recommend: Split Pastel, Pastel Geometry\n  - \"Technical\u002FDev-focused\" → Recommend: Neon Cyber, Terminal Green\n  - \"Elegant\u002FPremium\" → Recommend: Dark Botanical, Paper & Ink\n\nThen generate 2-3 preview slides and let user pick.\n\n---\n\n## Phase 3: Generate HTML Carousel\n\n### File Structure\n\nAll carousel files (HTML source and PNG exports) are saved to the shared assets directory.\n\n```\n[carousel-name]\u002F\n├── index.html              # Full carousel (all slides)\n├── slides\u002F\n│   ├── slide-01.html       # Individual slide pages\n│   ├── slide-02.html\n│   └── ...\n└── exports\u002F\n    ├── slide-01.png        # Screenshots (generated in Phase 4)\n    ├── slide-02.png\n    └── ...\n```\n\n### HTML Architecture for 1080×1080px\n\n**CRITICAL: LinkedIn carousel slides are SQUARE (1:1 ratio), not widescreen.**\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>Slide 01\u003C\u002Ftitle>\n\n    \u003C!-- Fonts -->\n    \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fapi.fontshare.com\u002Fv2\u002Fcss?f[]=...\" \u002F>\n\n    \u003Cstyle>\n      \u002F* ===========================================\n           LINKEDIN CAROUSEL: SQUARE FORMAT\n           Fixed 1080×1080px for screenshot\n           =========================================== *\u002F\n      :root {\n        \u002F* Fixed size for LinkedIn *\u002F\n        --slide-width: 1080px;\n        --slide-height: 1080px;\n\n        \u002F* Colors (from chosen preset) *\u002F\n        --bg-primary: #0a0f1c;\n        --text-primary: #ffffff;\n        --accent: #00ffcc;\n\n        \u002F* Typography - scaled for square format *\u002F\n        --title-size: 72px;\n        --subtitle-size: 36px;\n        --body-size: 28px;\n        --small-size: 20px;\n\n        \u002F* Spacing *\u002F\n        --slide-padding: 80px;\n        --content-gap: 40px;\n\n        \u002F* Animation *\u002F\n        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\n      }\n\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: var(--slide-width);\n        height: var(--slide-height);\n        overflow: hidden;\n      }\n\n      body {\n        font-family: var(--font-body);\n        background: var(--bg-primary);\n        color: var(--text-primary);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        padding: var(--slide-padding);\n      }\n\n      \u002F* Content container *\u002F\n      .slide-content {\n        width: 100%;\n        max-width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: var(--content-gap);\n      }\n\n      \u002F* Typography hierarchy *\u002F\n      h1 {\n        font-size: var(--title-size);\n        font-weight: 800;\n        line-height: 1.1;\n        margin-bottom: 20px;\n      }\n\n      h2 {\n        font-size: var(--subtitle-size);\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      p,\n      li {\n        font-size: var(--body-size);\n        line-height: 1.4;\n      }\n\n      \u002F* List styling *\u002F\n      ul {\n        list-style: none;\n      }\n\n      li {\n        padding-left: 40px;\n        position: relative;\n        margin-bottom: 20px;\n      }\n\n      li::before {\n        content: \"→\";\n        position: absolute;\n        left: 0;\n        color: var(--accent);\n        font-weight: bold;\n      }\n\n      \u002F* Number badge (for list items) *\u002F\n      .number {\n        font-size: 120px;\n        font-weight: 900;\n        color: var(--accent);\n        opacity: 0.15;\n        position: absolute;\n        top: -40px;\n        left: -20px;\n        z-index: 0;\n      }\n\n      \u002F* Branding footer *\u002F\n      .brand {\n        position: absolute;\n        bottom: var(--slide-padding);\n        right: var(--slide-padding);\n        font-size: var(--small-size);\n        opacity: 0.7;\n      }\n\n      \u002F* ===========================================\n           STYLE-SPECIFIC OVERRIDES\n           Inject preset styles here\n           =========================================== *\u002F\n      \u002F* ... preset-specific CSS ... *\u002F\n    \u003C\u002Fstyle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv class=\"slide-content\">\n      \u003C!-- Slide content goes here -->\n      \u003Ch1>Your Title Here\u003C\u002Fh1>\n      \u003Cp>Your content here\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"brand\">@yourbrand\u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Content Slide Templates\n\n**Cover Slide:**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Ch1>5 AI GTM Workflows\u003Cbr \u002F>You Should Be Using\u003C\u002Fh1>\n  \u003Cp>Scale your outbound without scaling your team\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle\u003C\u002Fdiv>\n```\n\n**Numbered Item (e.g., Slide 2\u002F6):**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Cdiv class=\"number\">01\u003C\u002Fdiv>\n  \u003Ch2>Signal-Based Outbound\u003C\u002Fh2>\n  \u003Cp>\n    Monitor job postings, funding announcements, and tech stack changes to find\n    companies actively solving your problem.\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle • 1\u002F5\u003C\u002Fdiv>\n```\n\n**Framework Slide:**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Ch2>The GTM Engineering Stack\u003C\u002Fh2>\n  \u003Cdiv class=\"framework-grid\">\n    \u003Cdiv class=\"box\">Research\u003C\u002Fdiv>\n    \u003Cdiv class=\"box\">Personalization\u003C\u002Fdiv>\n    \u003Cdiv class=\"box\">Outreach\u003C\u002Fdiv>\n    \u003Cdiv class=\"box\">Tracking\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle • 3\u002F5\u003C\u002Fdiv>\n```\n\n**CTA Slide:**\n\n```html\n\u003Cdiv class=\"slide-content\">\n  \u003Ch2>Want more like this?\u003C\u002Fh2>\n  \u003Cp>Follow me for more tips and workflows.\u003C\u002Fp>\n  \u003Cdiv class=\"cta\">Hit that follow button →\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"brand\">@yourhandle\u003C\u002Fdiv>\n```\n\n---\n\n## Phase 4: Screenshot Generation\n\nAfter generating HTML, automatically capture screenshots.\n\n### Using Playwright (Recommended)\n\nCreate a Node.js script to screenshot each slide:\n\n```javascript\n\u002F\u002F screenshot-slides.js\nconst { chromium } = require(\"playwright\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\n\nasync function screenshotSlides(slidesDir, outputDir) {\n  const browser = await chromium.launch();\n  const page = await browser.newPage();\n\n  \u002F\u002F Set viewport to LinkedIn carousel size\n  await page.setViewportSize({ width: 1080, height: 1080 });\n\n  \u002F\u002F Ensure output directory exists\n  if (!fs.existsSync(outputDir)) {\n    fs.mkdirSync(outputDir, { recursive: true });\n  }\n\n  \u002F\u002F Find all HTML files in slides directory\n  const slideFiles = fs\n    .readdirSync(slidesDir)\n    .filter((f) => f.endsWith(\".html\"))\n    .sort();\n\n  console.log(`Found ${slideFiles.length} slides to screenshot`);\n\n  for (const slideFile of slideFiles) {\n    const slidePath = path.join(slidesDir, slideFile);\n    const outputName = slideFile.replace(\".html\", \".png\");\n    const outputPath = path.join(outputDir, outputName);\n\n    console.log(`Capturing ${slideFile}...`);\n\n    await page.goto(`file:\u002F\u002F${path.resolve(slidePath)}`);\n\n    \u002F\u002F Wait for fonts and animations\n    await page.waitForTimeout(500);\n\n    \u002F\u002F Take screenshot\n    await page.screenshot({\n      path: outputPath,\n      type: \"png\",\n      fullPage: false,\n    });\n\n    console.log(`✓ Saved ${outputName}`);\n  }\n\n  await browser.close();\n  console.log(\"\\n✨ All slides captured!\");\n}\n\n\u002F\u002F Usage\nconst carouselName = process.argv[2];\nif (!carouselName) {\n  console.error(\"Usage: node screenshot-slides.js \u003Ccarousel-name>\");\n  process.exit(1);\n}\n\nconst slidesDir = path.join(__dirname, carouselName, \"slides\");\nconst outputDir = path.join(__dirname, carouselName, \"exports\");\n\nscreenshotSlides(slidesDir, outputDir);\n```\n\n### Installation\n\nThe skill directory needs these dependencies:\n\n```json\n{\n  \"name\": \"linkedin-carousel-screenshots\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"playwright\": \"^1.40.0\"\n  }\n}\n```\n\nFirst time setup:\n\n```bash\ncd \u002Fpath\u002Fto\u002Fskills\u002Fcreate-html-carousel\nnpm install\n```\n\n### Running Screenshot Script\n\nAfter generating HTML slides:\n\n```bash\nnode screenshot-slides.js carousel-name\n```\n\nThis will:\n\n1. Open each slide HTML in a headless browser\n2. Set viewport to 1080×1080px\n3. Wait for fonts\u002Fanimations to load\n4. Capture PNG screenshot\n5. Save to `[carousel-name]\u002Fexports\u002F`\n\n---\n\n## Phase 5: Delivery\n\nAfter screenshots are generated, present to user:\n\n```\n✨ Your LinkedIn carousel is ready!\n\n? Location: \u002Fassets\u002Fcarousel-name\u002F\n\n**Slides:**\n- 6 HTML slides in slides\u002F folder\n- 6 PNG images in exports\u002F folder (1080×1080px)\n\n**Preview:**\nOpen index.html to see all slides with navigation.\n\n**Upload to LinkedIn:**\n1. Create new post on LinkedIn\n2. Click \"Add media\"\n3. Upload all PNGs from exports\u002F folder in order\n4. Add your post copy\n5. Publish!\n\n**File sizes:**\n- slide-01.png: 234 KB ✓\n- slide-02.png: 198 KB ✓\n- slide-03.png: 256 KB ✓\n(All under 10MB limit)\n\nWant to make any changes to the slides?\n```\n\n---\n\n## Style Adaptation for Square Format\n\nAll styles from frontend-slides work for carousels, but require these adjustments:\n\n### Typography Scaling\n\nSquare format has less horizontal space, so scale fonts:\n\n| Element  | Presentation (16:9)              | Carousel (1:1) |\n| -------- | -------------------------------- | -------------- |\n| Title    | clamp(2rem, 6vw, 5rem)           | 72px (fixed)   |\n| Subtitle | clamp(1.25rem, 3vw, 2.5rem)      | 36px (fixed)   |\n| Body     | clamp(0.875rem, 1.5vw, 1.125rem) | 28px (fixed)   |\n| Small    | clamp(0.75rem, 1vw, 0.875rem)    | 20px (fixed)   |\n\n**Why fixed sizes?** We're targeting a single export size (1080×1080px), not responsive web viewing.\n\n### Layout Adjustments\n\n**Vertical space is precious:**\n\n- Reduce top\u002Fbottom padding (80px instead of 4rem)\n- Tighter line-height (1.2-1.4 instead of 1.5-1.6)\n- Fewer list items per slide (max 3-4)\n- Smaller decorative elements\n\n**Mobile-first mindset:**\n\n- Most LinkedIn users view on phones\n- Text must be readable at thumbnail size\n- High contrast is critical\n- Bold, simple layouts beat intricate designs\n\n---\n\n## Content Best Practices\n\n### Hook Formula (Cover Slide)\n\nStrong hooks for LinkedIn carousels:\n\n- Number + Promise: \"5 workflows that 10x'd our outbound\"\n- Contrarian: \"Stop doing X. Do this instead.\"\n- Before\u002FAfter: \"How we went from X to Y in 30 days\"\n- Question: \"Why are only 3% of founders doing this?\"\n- Curiosity gap: \"The GTM strategy nobody talks about\"\n\n### Body Slides (Items 2-9)\n\nEach slide should:\n\n1. **One clear point** — Don't cram multiple concepts\n2. **Visual hierarchy** — Large number\u002Ficon + heading + body\n3. **Concrete, not abstract** — \"Use job postings to find intent\" not \"Leverage signals\"\n4. **Scannable** — 2-3 second read time max\n\n### Closing Slide\n\nAlways include a CTA:\n\n- \"Follow for more [topic]\"\n- \"Repost if this helped\"\n- \"Comment your biggest takeaway\"\n- \"DM me if you want the full playbook\"\n\nAvoid:\n\n- \"Link in comments\" (often gets buried)\n- \"Check out my website\" (feels salesy)\n- No CTA at all (wasted opportunity)\n\n---\n\n## Troubleshooting\n\n### Fonts Not Loading in Screenshots\n\n**Symptom:** Screenshots show default system fonts\n\n**Solution:**\n\n1. Use web-safe fonts (Arial, Georgia) OR\n2. Add `await page.waitForLoadState('networkidle')` before screenshot\n3. Increase wait timeout: `await page.waitForTimeout(1000)`\n\n### Screenshots Are Blurry\n\n**Symptom:** Text looks fuzzy or low-res\n\n**Solution:**\n\n1. Set device scale factor in Playwright:\n   ```javascript\n   await page.setViewportSize({\n     width: 1080,\n     height: 1080,\n     deviceScaleFactor: 2, \u002F\u002F Retina-quality\n   });\n   ```\n\n### Content Overflows the Slide\n\n**Symptom:** Text or elements cut off in screenshot\n\n**Solution:**\n\n1. Reduce font sizes\n2. Decrease padding\n3. Split into multiple slides\n4. Simplify content (fewer bullets, shorter text)\n\n### Colors Look Different in Export\n\n**Symptom:** PNG colors don't match HTML preview\n\n**Solution:**\n\n- Ensure browser color profile matches sRGB\n- Use hex colors, avoid CSS filters that may render differently\n- Test screenshot script before generating all slides\n\n---\n\n## Preset Quick Reference\n\n| Preset          | Best For               | Vibe                  |\n| --------------- | ---------------------- | --------------------- |\n| Bold Signal     | Confident, high-impact | Professional          |\n| Dark Botanical  | Elegant, premium       | Sophisticated         |\n| Notebook Tabs   | Editorial, organized   | Friendly-professional |\n| Pastel Geometry | Friendly, approachable | Playful               |\n| Neon Cyber      | Tech, innovation       | Futuristic            |\n| Split Pastel    | Creative, fun          | Energetic             |\n\nSee STYLE_PRESETS.md for complete styling details.\n\n---\n\n## Related Skills\n\n- **frontend-slides** — For full presentations (not carousels)\n- **personalized-email** — For outreach content to pair with LinkedIn posts\n- **deep-web-research** — For researching topics\u002Fstats for carousel content\n\n---\n\n## Example Session Flow\n\n1. User: \"Create a LinkedIn carousel about 5 AI GTM workflows\"\n2. Skill asks: content type, slide count, have content ready?\n3. User provides bullet points of the 5 workflows\n4. Skill asks: style preference\n5. User picks \"Bold Signal\"\n6. Skill generates 7 HTML slides (cover + 5 workflows + CTA)\n7. Skill runs screenshot script automatically\n8. Skill delivers folder with HTML + PNG exports\n9. User uploads PNGs to LinkedIn and publishes\n\nTotal time: 5-10 minutes from idea to ready-to-publish carousel.\n",{"name":5,"description":7},"master","c73386b305dec167db7654e0e6feacb462d4f9dc","assets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel",1,"https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code","https:\u002F\u002Fgithub.com\u002FAntifragileTech","2026-10-02 14:22:14",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add AntifragileTech\u002Fantifragile-claude-code --skill gtm-create-html-carousel",{"tool":55,"command":56},"bunx","bunx skills add AntifragileTech\u002Fantifragile-claude-code --skill gtm-create-html-carousel",{"tool":58,"command":59},"pnpm","pnpm dlx skills add AntifragileTech\u002Fantifragile-claude-code --skill gtm-create-html-carousel","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel\u002FSKILL.md",true,[63,69,73,77,81,85,89,93,97,101,107,111,115],{"path":64,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":67,"sourceHtmlUrl":68},"algorithms.md","REFERENCE","参考文档",97,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Falgorithms.md",{"path":70,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":71,"sourceHtmlUrl":72},"failure_modes.md",100,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Ffailure_modes.md",{"path":74,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":75,"sourceHtmlUrl":76},"formulas.md",95,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Fformulas.md",{"path":78,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":79,"sourceHtmlUrl":80},"implementation_notes.md",107,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Fimplementation_notes.md",{"path":82,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":83,"sourceHtmlUrl":84},"integration_arbitragex.md",109,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Fintegration_arbitragex.md",{"path":86,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":87,"sourceHtmlUrl":88},"manifest.json",878,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Fmanifest.json",{"path":90,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":91,"sourceHtmlUrl":92},"package.json",367,"https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel\u002Fpackage.json",{"path":94,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":95,"sourceHtmlUrl":96},"README.md",4109,"https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel\u002FREADME.md",{"path":98,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":99,"sourceHtmlUrl":100},"references.json",287,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Freferences.json",{"path":102,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":105,"sourceHtmlUrl":106},"screenshot-slides.js","SCRIPT","脚本",4193,"https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel\u002Fscreenshot-slides.js",{"path":108,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":109,"sourceHtmlUrl":110},"skill.meta.json",265,"https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel\u002Fskill.meta.json",{"path":112,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":113,"sourceHtmlUrl":114},"STYLE_PRESETS.md",14950,"https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fgtm\u002Fgtm-create-html-carousel\u002FSTYLE_PRESETS.md",{"path":116,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":117,"sourceHtmlUrl":118},"validation_tests.md",103,"https:\u002F\u002Fgithub.com\u002Fhefarica\u002Farbitragex-v2\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpending-transaction-impact-classifier\u002Fvalidation_tests.md",[120,144,159,174,187,200],{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":137,"publishedAt":37},"01M6DT9Q6VYA615SCXR757TZZ7","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwriting-skills\u002FSKILL.md",[126,129,132],{"categoryNo":127,"categoryName":128,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":130,"categoryName":131,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":133,"categoryName":134,"taxonomyType":135,"taxonomyTypeDesc":136},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[138,139,140,141,142,143],"writing skills","writing","use","editing","work","deployment",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":152,"publishedAt":37},"01M6DT9GFHDNY90P41WGAE1TV0","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwriting-plans\u002FSKILL.md",[150,151],{"categoryNo":130,"categoryName":131,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":133,"categoryName":134,"taxonomyType":135,"taxonomyTypeDesc":136},[153,154,139,155,156,140,157,158],"plans","writing plans","requirements","task","code","spec",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":167,"publishedAt":37},"01M6DT9C6PFGD86WS3HY7YE3XG","docs:write-concisely","Apply writing rules to any documentation that humans will read. Makes your writing clearer, stronger, and more professional.","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwrite-concisely\u002FSKILL.md",[165,166],{"categoryNo":130,"categoryName":131,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":133,"categoryName":134,"taxonomyType":135,"taxonomyTypeDesc":136},[168,169,170,171,172,173,139],"docs:write concisely","write","docs","read","Rules","documentation",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":180,"publishedAt":37},"01M6DT98AWQ27P0N1CG97WAG66","kaizen:why","Iterative Five Whys root cause analysis drilling from symptoms to fundamentals","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwhy\u002FSKILL.md",[],[176,181,182,183,184,185,186],"why","kaizen","issue","five whys","analysis","root cause analysis",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":191,"categories":192,"keywords":193,"publishedAt":37},"01M6DT93EH25NAX19R3WGE1P53","verification-loop","A comprehensive verification system for Claude Code sessions.","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fverification-loop\u002FSKILL.md",[],[194,195,196,197,157,198,199],"verification loop","verification","loop","sessions","claude code sessions","system",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":206,"publishedAt":37},"01M6DT90GW7Z7VCN98P9DVYSNC","verification-before-completion","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fverification-before-completion\u002FSKILL.md",[],[207,195,208,142,140,209,210,211],"verification before completion","commands","evidence","claim","complete"]