[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2113":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":13,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":15,"starSnapshotCount":15,"syncStatus":44,"lastSyncTime":45,"discoverSource":46},2113,"claude-skills","rampstackco\u002Fclaude-skills","rampstackco","Stack-agnostic Claude Skills covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Build, ship, audit, optimize.","https:\u002F\u002Frampstack.co\u002F",null,"Python",321,42,5,0,14,37,162,4.9,"MIT License",false,"main",true,[25,26,27,28,29,30,31,5,32,33,34,35,36,37,38,39,40],"agent-skills","anthropic","awesome-claude-code","awesome-claude-prompts","awesome-claude-skills","claude","claude-code","good-first-issue","mcp","product-management","seo","show-hn","showcase","showdev","web-design","web-development","2026-06-12 02:00:37","\u003Cdiv align=\"center\">\n\n\u003Cimg src=\"docs\u002Frampstack-complete-banner.jpg\" alt=\"Complete Claude Skills for the full web lifecycle. Build, ship, audit, optimize.\" \u002F>\n\n# Brand Build Skills for Claude\n\n**A complete, opinionated library of [Claude Skills](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fagents-and-tools\u002Fagent-skills\u002Foverview) covering the full lifecycle of building, launching, running, and growing a brand and a website.**\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](LICENSE)\n[![PRs Welcome](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-brightgreen.svg)](CONTRIBUTING.md)\n[![Skills](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSkills-102-blue.svg)](#the-102-skill-catalog)\n[![Made for Claude](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FMade%20for-Claude-orange.svg)](https:\u002F\u002Fclaude.ai)\n\n[![Website](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Frampstack.co-FF6B35?style=for-the-badge&logo=googlechrome&logoColor=white)](https:\u002F\u002Frampstack.co)\n[![LinkedIn](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https:\u002F\u002Flinkedin.com\u002Fcompany\u002Frampstack\u002F)\n[![X](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFollow-000000?style=for-the-badge&logo=x&logoColor=white)](https:\u002F\u002Fx.com\u002FRampStackco)\n[![Facebook](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFacebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white)](https:\u002F\u002Ffacebook.com\u002Frampstack)\n\n\u003C\u002Fdiv>\n\n\u003C!-- COUNT_INTRO:START -->\n> 102 stack-agnostic skills covering brand, design, content, SEO, dev, ops, growth, and research. Includes an Ahrefs MCP-powered SEO audit suite. Use them on Next.js, WordPress, Shopify, Webflow, plain HTML, or anything else.\n\u003C!-- COUNT_INTRO:END -->\n\n*Featured in [awesome-claude-skills](https:\u002F\u002Fgithub.com\u002FComposioHQ\u002Fawesome-claude-skills) under Business & Marketing.*\n\n---\n\n## Install in Claude Code\n\nAdd the marketplace, then install the plugin you want:\n\n```\n\u002Fplugin marketplace add rampstackco\u002Fclaude-skills\n\n# full catalog (102 skills)\n\u002Fplugin install rampstack-skills@rampstack\n\n# focused subsets\n\u002Fplugin install rampstack-starter@rampstack\n\u002Fplugin install rampstack-seo@rampstack\n\u002Fplugin install rampstack-pm@rampstack\n```\n\nPrefer a lighter marketplace that lists only the curated subsets (no full catalog)? Add `rampstackco\u002Fplugins` instead and install the same three plugins from there:\n\n```\n\u002Fplugin marketplace add rampstackco\u002Fplugins\n\u002Fplugin install rampstack-starter@rampstack\n```\n\nSkills load on demand: each contributes roughly its name and description until Claude needs it.\n\n---\n\n## Table of contents\n\n- [What are Claude Skills?](#what-are-claude-skills)\n- [What is in this library](#what-is-in-this-library)\n- [Featured skills](#featured-skills)\n- [See it in action](#see-it-in-action)\n- [Logo design in action](#logo-design-in-action)\n- [Reference build in action](#reference-build-in-action)\n- [Getting started](#getting-started)\n- [Quick example](#quick-example)\n- [How they compose](#how-they-compose)\n- [How the catalog connects](#how-the-catalog-connects)\n- [Surfaces](#surfaces)\n\u003C!-- COUNT_TOC:START -->\n- [The 102-skill catalog](#the-102-skill-catalog)\n\u003C!-- COUNT_TOC:END -->\n- [Recommended MCPs](#recommended-mcps)\n- [Authoring conventions](#authoring-conventions)\n- [Repository structure](#repository-structure)\n- [Contributing](#contributing)\n- [Acknowledgments](#acknowledgments)\n- [Resources](#resources)\n- [License](#license)\n\n---\n\n## What are Claude Skills?\n\nClaude Skills are reusable capability packages that teach Claude how to handle a specific kind of task with a consistent framework, vocabulary, and output format. Each skill is a folder containing a `SKILL.md` (instructions plus YAML metadata) and optional reference files (templates, checklists, worked examples). Claude loads a skill automatically when a user request matches the skill's description.\n\nSkills work across [Claude.ai](https:\u002F\u002Fclaude.ai), [Claude Code](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Foverview), and the [Anthropic API](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fapi\u002Fagent-skills). Once you write a skill, it is portable across all three.\n\nFor the official deep dive, see [Anthropic's Agent Skills documentation](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fagents-and-tools\u002Fagent-skills\u002Foverview).\n\n---\n\n## What is in this library\n\nThis is not a curated list of other people's skills. It is a single, opinionated library where every skill follows the same structure and conventions, so the skills compose cleanly across a real project lifecycle.\n\nWhat you get:\n\n\u003C!-- COUNT_WHATYOUGET:START -->\n- **102 skills** across 16 categories, every one with a complete `SKILL.md` and at least one reference file\n- **446 reference files** (templates, checklists, decision matrices, worked examples)\n\u003C!-- COUNT_WHATYOUGET:END -->\n- **Stack-agnostic.** Works on any web stack. The only named-tool exception is the SEO audit suite, which assumes the Ahrefs MCP.\n- **Future-proof.** Principles over tools. Stable concepts over trending techniques. References to durable specs (W3C, WHATWG, Schema.org, MDN, NN\u002Fg, WCAG) over content that ages with each algorithm update.\n- **Uniform structure.** Every skill uses the same section order, the same tone, and the same authoring conventions. Predictable in, predictable out.\n- **Composable.** Skills reference each other. `creative-brief` points to `brand-voice`. `incident-response` points to `monitoring-and-alerting`. Each skill's \"When NOT to use\" tells you which sibling fits your adjacent work.\n\nHighlight categories: brand strategy and identity, design systems, content production with full Tier 1 and Tier 2 coverage, full SEO suite (foundation plus Ahrefs MCP-powered audit suite), product management with experimentation and gap-closing tracks, growth tooling for interactive web tools, paid media discipline, frontend dev and accessibility, performance and QA, launch and incident ops, UX research, plus a meta-skill that teaches you to write your own.\n\n---\n\n## Featured skills\n\n\u003C!-- FEATURED_SKILLS:START -->\nSix entry-point skills, one per audience track. Run any of these standalone, or compose them with the rest of the catalog.\n\n| Skill | What it does |\n|---|---|\n| [`creative-direction`](skills\u002Fcreative-direction\u002FSKILL.md) (Brand and creative) | Four-axis brief (tone, aesthetic, audience, sensory ambition) that gives every downstream skill a coherent direction |\n| [`experiment-design`](skills\u002Fexperiment-design\u002FSKILL.md) (PM, experimentation) | From hypothesis to decision: sample size, duration, segment analysis, and the failure modes that produce wrong shipping calls |\n| [`feature-launch-playbook`](skills\u002Ffeature-launch-playbook\u002FSKILL.md) (PM, gap-closing) | The discipline of launching a feature well: positioning, internal alignment, customer comms, enablement, rollout, monitoring |\n| [`pillar-content-architecture`](skills\u002Fpillar-content-architecture\u002FSKILL.md) (Content) | Hub-and-cluster topical authority: pillar selection, cluster planning, internal linking, refresh discipline |\n| [`landing-page-copy`](skills\u002Flanding-page-copy\u002FSKILL.md) (Marketing) | Landing pages, sales pages, hero-to-CTA flow with copy that converts |\n| [`funnel-flow-architecture`](skills\u002Ffunnel-flow-architecture\u002FSKILL.md) (Growth tooling) | Cross-tool conversion flows architected to match the audience and the funnel stage |\n\u003C!-- FEATURED_SKILLS:END -->\n\n---\n\n## See it in action\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Fcreative-direction\" target=\"_blank\" rel=\"noopener\">The creative-direction skill rendered as a live showcase →\u003C\u002Fa>\u003C\u002Fstrong>\n\nForty-two fictional brands generated from briefs that all use the same skill. Each is a fully styled brand site, not a mockup. The showcase demonstrates what the four-axis framework produces in practice and lets you filter by axis position to see how each combination renders.\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(max-width: 640px)\" srcset=\"assets\u002Fshowcase\u002Fcreative-direction-highlight-mobile.jpg\">\n    \u003Cimg src=\"assets\u002Fshowcase\u002Fcreative-direction-highlight-desktop.jpg\" alt=\"Creative Direction skill highlight diagram. Navy header card reads 'Impactful Creative Direction' with the subtitle 'Direction for art, taste, and style'. Four quadrants below show: Framework Axes 4 (Tone, Aesthetic, Relationship, Sensory), Framework Positions 16 (each axis combines into 16 distinct positions), Example Treatments 42 (Pulse, Bloom, Forge, Observatory, and 38 others), and Possible Compositions infinity (Motion: Static, Light, Medium, High). Caption reads 'No templates, only guided outputs.'\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"assets\u002Fshowcase\u002Fshowcase-grid-hero.png\" alt=\"Showcase grid of brand archetypes including Pulse, Volt, Anode, Drift, and others, with type and motion intensity filter pills above the cards.\" \u002F>\n\u003C\u002Fp>\n\n### Filter by any axis position\n\nThe skill defines four axes: tone, aesthetic, relationship, sensory. The showcase lets you filter by any combination and see which examples match. Pre-filtered URLs deep-link from the [SKILL.md](skills\u002Fcreative-direction\u002FSKILL.md) and [axes-explained reference](skills\u002Fcreative-direction\u002Freferences\u002Faxes-explained.md), so you can read about a position and click straight through to the rendered examples.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"assets\u002Fshowcase\u002Fshowcase-filter-active.png\" alt=\"Showcase grid filtered by Tone equals Provocative and Sensory equals Resonant, showing eight matching brand cards with the axis disclosure auto-expanded.\" \u002F>\n\u003C\u002Fp>\n\n### The empty state is the lesson\n\nThe framework is generative. The showcase is illustrative. Most rare-but-powerful combinations are valid creative choices that simply have not been built yet. Set Provocative + Editorial Restrained + Coach + Resonant and the grid is empty.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"assets\u002Fshowcase\u002Fshowcase-empty-state.png\" alt=\"Showcase grid with all four axis filters set to Provocative, Editorial Restrained, Coach, and Resonant, showing zero matching examples and the empty state copy: No example yet. The framework allows this combination, it just hasn't been built as one of the thirty worked examples.\" \u002F>\n\u003C\u002Fp>\n\n### The framework's range\n\nSame skill, same brief format. Four completely different visual systems. Notice that Pulse and Bloom share identical axis positions yet read as opposite visual languages. The reference brands and aesthetic interpretation do the rest.\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd width=\"50%\">\u003Cimg src=\"assets\u002Fshowcase\u002Farchetype-pulse.png\" alt=\"Pulse music streaming brand. Saturated gradient hero with the headline 'Sound that moves with you' and pink-to-cyan equalizer bars below.\" \u002F>\u003C\u002Ftd>\n    \u003Ctd width=\"50%\">\u003Cimg src=\"assets\u002Fshowcase\u002Farchetype-forge-fitness.png\" alt=\"Forge boutique fitness studio. Dark industrial hero with intense typography and motivational copy.\" \u002F>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Cstrong>Pulse\u003C\u002Fstrong> · music streaming\u003Cbr\u002F>\u003Cem>Sound that moves with you.\u003C\u002Fem>\u003Cbr\u002F>Playful \u002F Expressive Maximalist \u002F Companion \u002F Resonant\u003Cbr\u002F>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Fcreative-direction\u002Fpulse-music\" target=\"_blank\" rel=\"noopener\">See Pulse demo example →\u003C\u002Fa>\u003C\u002Ftd>\n    \u003Ctd>\u003Cstrong>Forge\u003C\u002Fstrong> · boutique fitness\u003Cbr\u002F>\u003Cem>Show up. Get hammered.\u003C\u002Fem>\u003Cbr\u002F>Provocative \u002F Expressive Maximalist \u002F Coach \u002F Resonant\u003Cbr\u002F>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Fcreative-direction\u002Fforge-fitness\" target=\"_blank\" rel=\"noopener\">See Forge demo example →\u003C\u002Fa>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Cimg src=\"assets\u002Fshowcase\u002Farchetype-bloom-soda.png\" alt=\"Bloom adaptogenic soda brand. Peachy gradient hero with tri-color headline 'Soda that loves you back' and a strawberries-around-soda-can product photo.\" \u002F>\u003C\u002Ftd>\n    \u003Ctd>\u003Cimg src=\"assets\u002Fshowcase\u002Farchetype-observatory-editorial.png\" alt=\"Observatory Editorial. Cream paper hero with restrained serif headline 'An observability tool for the engineers who already know what they are doing'.\" \u002F>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Cstrong>Bloom\u003C\u002Fstrong> · adaptogenic soda\u003Cbr\u002F>\u003Cem>Soda that loves you back.\u003C\u002Fem>\u003Cbr\u002F>Playful \u002F Expressive Maximalist \u002F Companion \u002F Resonant\u003Cbr\u002F>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Fcreative-direction\u002Fbloom-soda\" target=\"_blank\" rel=\"noopener\">See Bloom demo example →\u003C\u002Fa>\u003C\u002Ftd>\n    \u003Ctd>\u003Cstrong>Observatory Editorial\u003C\u002Fstrong> · observability tool\u003Cbr\u002F>\u003Cem>An open-source tool that respects engineer time.\u003C\u002Fem>\u003Cbr\u002F>Conversational \u002F Editorial Restrained \u002F Peer \u002F Considered\u003Cbr\u002F>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Fcreative-direction\u002Fobservatory-editorial\" target=\"_blank\" rel=\"noopener\">See Observatory demo example →\u003C\u002Fa>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Cp align=\"center\">\n  \u003Cstrong>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Fcreative-direction\" target=\"_blank\" rel=\"noopener\">See all the brands in the showcase →\u003C\u002Fa>\u003C\u002Fstrong>\n\u003C\u002Fp>\n\n### Run this on your own brand\n\nThe creative-direction skill lives at [`skills\u002Fcreative-direction\u002F`](skills\u002Fcreative-direction\u002F). Install it (see below), give Claude a project name and a few inspiration references, and the skill walks you through producing a brief that downstream skills can consume. The brand sites in the showcase were built from briefs of exactly that shape.\n\n---\n\n## Logo design in action\n\nThe logo-design skill is rendered on rampstack.co as two parallel surfaces. The variant explorer goes deep on one brand at a time: a primary mark, variants across architectures, applied contexts. The taxonomy gallery goes wide across the architecture space: ten fictional marks demonstrating eight mark architectures (wordmark, lockup, monogram, letterform-as-symbol, abstract, pictorial, combination, emblem). Same skill, two different lenses.\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(max-width: 640px)\" srcset=\"assets\u002Fshowcase\u002Flogo-design-highlight-mobile.jpg\">\n    \u003Cimg src=\"assets\u002Fshowcase\u002Flogo-design-highlight-desktop.jpg\" alt=\"Logo Design skill highlight diagram. Navy header card reads 'Bespoke Logo Design' with the subtitle 'Bringing brands to life.' Below the header, a simulated construction guide shows a stylised letterform B rendered against gridlines, with a Golden Ratio overlay, Primary Curve and Secondary Shape callouts, a Kerning marker, and a six-swatch color palette. Three columns at the bottom show: Verticals (Tech, Finance, Healthcare, Retail), Brand Voice (Trustworthy, Innovative, Premium, Approachable), and Architectures (Monogram, Wordmark, Emblem, Abstract).\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n### Per-brand depth\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Flogo-design\" target=\"_blank\" rel=\"noopener\">The variant explorer →\u003C\u002Fa>\u003C\u002Fstrong>\n\nEach brand has a primary mark plus variants across architectures and applied contexts. The logo-design skill walks through the discipline of choosing one architecture and rendering it consistently across the system the brand will actually use.\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(max-width: 640px)\" srcset=\"assets\u002Fshowcase\u002Flogo-design-showcase-mobile.png\">\n    \u003Cimg src=\"assets\u002Fshowcase\u002Flogo-design-showcase-desktop.png\" alt=\"Logo design variant explorer showing six fictional brand cards in a three-by-two grid: Whitfield Carter (legal counsel lockup), Wren and Bough (consumer goods lockup), Highline (hospitality wordmark), Sentinel (tech and AI symbol-only), Lacuna (fashion wordmark), and Roost (restaurant lockup). Each card pairs a primary mark with three classification chips for architecture, typographic register, and category, plus a four-variants and five-application-contexts subtext.\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\nThe brands are filterable by architecture, typographic register, and category. The intent is reference work, not consumable templates.\n\n### Architectural taxonomy\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Frampstack.co\u002Fshowcase\u002Flogos\" target=\"_blank\" rel=\"noopener\">The marks gallery →\u003C\u002Fa>\u003C\u002Fstrong>\n\nTen fictional marks across eight mark architectures: wordmark, lockup, monogram, letterform-as-symbol, abstract, pictorial, combination, emblem. The taxonomy makes the architectural distinctions concrete by showing all eight side-by-side, with three wordmarks at three typographic registers so the architectural label does less work than the execution.\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(max-width: 640px)\" srcset=\"assets\u002Fshowcase\u002Fmarks-showcase-mobile.png\">\n    \u003Cimg src=\"assets\u002Fshowcase\u002Fmarks-showcase-desktop.png\" alt=\"Marks gallery showing six fictional brand cards in a three-by-two grid: knurl (lowercase serif wordmark with knurled texture), TARSUS (uppercase sans lockup with stacked-bar mark), PLINTH (classical serif inside a double-lined emblem frame), Caval (italic horse silhouette plus italic wordmark combination), Ostend (flowing OS monogram resolving to a single connected glyph), and GLINT (high-contrast Didone wordmark with hairline I crossbar). Each card carries the brand name, descriptor, and three classification chips for mark architecture, vertical, and brand voice.\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\nFilter by architecture, vertical, or brand voice; click any mark card to read its design rationale.\n\n---\n\n## Reference build in action\n\nThe full catalog rendered as a 4-phase reference build: blank brief through deployed audited launch site. Threshold is a fictional PLG onboarding analytics product, but the research, brand foundations, build, and audit findings are all real. The reference build is the catalog's single strongest demonstration of how the skills compose end-to-end.\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(max-width: 640px)\" srcset=\"assets\u002Fshowcase\u002Freference-build-highlight-mobile.png\">\n    \u003Cimg src=\"assets\u002Fshowcase\u002Freference-build-highlight-desktop.png\" alt=\"Reference build hero card. Navy header card reads 'Reference Build' with subtitle 'A fictional B2B SaaS launch, end-to-end.' Below, four white phase cards arranged in a 2x2 grid: Phase 01 Strategy and Research with caption 'Real Ahrefs research applied to a fictional brief'; Phase 02 Brand and Design with caption 'Working brand system with live tokens and components'; Phase 03 Build and Ship with caption 'Deployed launch microsite at \u002Fdemo\u002Fthreshold'; Phase 04 Audit and Optimize with caption 'Real audit findings with applied fixes.' Footer caption reads 'Threshold is fictional. The methodology is not.'\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n### The four phases\n\n**[Phase 1: Strategy and research →](https:\u002F\u002Frampstack.co\u002Fwalkthroughs\u002Fsaas-launch-research-and-strategy)**\nReal Ahrefs keyword research, competitor analysis, content gap audit, and backlink opportunity mapping applied to a fictional B2B SaaS brief. Live data tables sourced from the Ahrefs API.\n\n**[Phase 2: Brand and design →](https:\u002F\u002Frampstack.co\u002Fwalkthroughs\u002Fsaas-launch-brand-and-design)**\nLogo system, color and typography tokens, working brand component primitives. The brand system renders live on the walkthrough page in real fonts and tokens, not just described.\n\n**[Phase 3: Build and ship →](https:\u002F\u002Frampstack.co\u002Fwalkthroughs\u002Fsaas-launch-build-and-ship)**\nThe actual launch microsite built with Next.js using Phase 2's brand foundations. Live at [rampstack.co\u002Fdemo\u002Fthreshold](https:\u002F\u002Frampstack.co\u002Fdemo\u002Fthreshold). Persistent demonstration banner; noindex; local-only waitlist form.\n\n**[Phase 4: Audit and optimize →](https:\u002F\u002Frampstack.co\u002Fwalkthroughs\u002Fsaas-launch-audit-and-optimize)**\nReal audit on the deployed site using the catalog's audit suite (axe-core, Lighthouse, manual checks). Real findings with severity, real fixes applied, real before\u002Fafter metrics. The closing chapter where the catalog audits its own output.\n\n### The deployed result\n\nThe four phases compose into a working microsite at [rampstack.co\u002Fdemo\u002Fthreshold](https:\u002F\u002Frampstack.co\u002Fdemo\u002Fthreshold). Real Next.js code, real brand foundations from Phase 2 referenced via cross-route imports, real working multi-step waitlist form (no data stored), persistent demonstration banner, and the inline data visualizations that came out of the post-audit polish pass.\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(max-width: 640px)\" srcset=\"assets\u002Fshowcase\u002Fthreshold-demo-screenshot-mobile.png\">\n    \u003Cimg src=\"assets\u002Fshowcase\u002Fthreshold-demo-screenshot-desktop.png\" alt=\"Full-page screenshot of the deployed Threshold demo at rampstack.co\u002Fdemo\u002Fthreshold. Persistent navy demonstration banner at top reads 'Demonstration · Threshold is a fictional product built to illustrate how the catalog composes from blank brief to deployed launch microsite.' Below, the hero section shows a serif headline 'Know how new users actually get to value' next to a stylized product dashboard mockup with KPI tiles, an activation funnel chart, and recent cohorts comparison. Further down the page: a fictional cohort trust strip, a 'The gap' problem section, a wedge section with inline funnel and time-to-first-value charts, a comparison table against Mixpanel\u002FAmplitude\u002FHeap and Pendo\u002FUserpilot, a 'How it works' section with three connected cards, a multi-step waitlist form, and a FAQ section.\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n### Why a fictional product\n\nReal client work cannot be open-sourced; portfolio claims trigger conflict-of-interest concerns in interviews and consulting conversations. A fictional product with a documented brief plus real research, real brand foundations, real working code, and real audit findings produces a teaching artifact that demonstrates methodology without claiming relationships. Threshold is a measurement tool that does not exist; the methodology that built it is the catalog working end-to-end.\n\n---\n\n## Getting started\n\nSkills install in three different places depending on where you use Claude. Pick the platform that matches your workflow.\n\n### Option 1: Claude.ai (web and desktop)\n\nIf your Claude.ai plan supports custom Skills:\n\n1. Go to **Settings → Capabilities → Skills**.\n2. Upload the skill folder you want as a `.zip` (one zip per skill folder containing `SKILL.md` and the `references\u002F` subfolder).\n3. Enable the skill in the chat interface.\n\nClaude will load the skill automatically when your request matches its description.\n\nFor current plan availability and the exact upload UI, see [Anthropic's Skills user guide](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fagents-and-tools\u002Fagent-skills\u002Foverview).\n\n### Option 2: Claude Code (recommended)\n\nSkills are first-class citizens in Claude Code. Drop them into your skills directory and Claude Code picks them up automatically.\n\n**User-level skills** (available in every project):\n\n```bash\n# macOS \u002F Linux\nmkdir -p ~\u002F.claude\u002Fskills\ncp -r skills\u002F* ~\u002F.claude\u002Fskills\u002F\n\n# Windows (PowerShell)\nNew-Item -ItemType Directory -Force -Path \"$HOME\\.claude\\skills\"\nCopy-Item -Recurse skills\\* \"$HOME\\.claude\\skills\\\"\n```\n\n**Project-level skills** (available only in a specific project):\n\n```bash\nmkdir -p .claude\u002Fskills\ncp -r path\u002Fto\u002Fthis-repo\u002Fskills\u002F* .claude\u002Fskills\u002F\n```\n\nStart (or restart) Claude Code. Skills load automatically.\n\nFor exact current paths and config flags, see the [Claude Code documentation](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Foverview).\n\n### Option 3: Anthropic API\n\nUse Skills programmatically by referencing them in your API calls. Skills must first be uploaded to your workspace (via the Console or API), then referenced by ID when creating messages.\n\nFor the current API surface, request format, and limits, see the [Agent Skills API documentation](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fapi\u002Fagent-skills).\n\n### Want only a few skills?\n\nYou do not have to install all 102. Pick the categories that match your work. The library is modular: each skill stands on its own.\n\n---\n\n## Quick example\n\nOnce installed, skills trigger automatically based on your request. You do not have to name the skill or change how you talk to Claude.\n\n**You ask:**\n\n> \"Our organic traffic dropped 30% last week. Help me figure out why.\"\n\n**What happens:**\n\nClaude recognizes the request matches `seo-traffic-diagnosis`, loads the skill, and walks through its 5-layer root cause framework: confirm the change is real → localize the change → page-level analysis → technical analysis → external analysis. By the end, you have a hypothesis statement, evidence, and an action plan, structured the same way every time.\n\n**Other natural triggers:**\n\n- \"Help me write a creative brief\" → `creative-brief`\n- \"Audit my homepage for SEO\" → `seo-onpage`\n- \"We need a backlink audit\" → `seo-backlink-audit`\n- \"Plan our content roadmap for Q3\" → `seo-content-gap-audit` plus `content-strategy`\n- \"Postmortem template for last night's incident\" → `after-action-report`\n- \"How do I write my own skill?\" → `skill-creation-walkthrough`\n\nYou can also call a skill explicitly: \"Use the `seo-audit-orchestration` skill to run a full audit on example.com.\"\n\n---\n\n## How they compose\n\nThe skills compose into a full project flow:\n\n```\nbrand-discovery → brand-ideation → brand-identity → brand-style-guide → brand-voice\n                                                                        ↓\ncreative-brief → information-architecture → content-strategy → design-system\n                                                              ↓\nseo-keyword → seo-content-audit → content-and-copy → landing-page-copy\n                                                    ↓\nseo-onpage → seo-technical → seo-aeo-geo → seo-offpage → seo-competitor\n                                          ↓\nfrontend-component-build → accessibility-audit → performance-optimization\n                                                ↓\ncode-review-web → qa-testing → security-baseline → launch-runbook\n                                                  ↓\ndomain-strategy → monitoring-and-alerting → backup-and-disaster-recovery\n                                          ↓\nincident-response → after-action-report\n                  ↓\nanalytics-strategy → cro-optimization → ux-research → usability-testing → journey-mapping\n```\n\nThe SEO audit suite (Ahrefs MCP-powered) wraps around the SEO foundation skills:\n\n```\nseo-audit-orchestration\n  ├── seo-site-health-audit\n  ├── seo-backlink-audit\n  ├── seo-keyword-gap-audit\n  ├── seo-content-gap-audit\n  ├── seo-traffic-diagnosis  (also runs standalone for incident-style work)\n  └── seo-rank-tracking      (ongoing, feeds the others)\n```\n\nThe catalog also includes four audience tracks that compose alongside the foundational lifecycle. Each track has its own internal flow:\n\n**Paid media (Marketing track):**\n\n```\npaid-media-strategy → ads-creative-development → ads-performance-analytics\n```\n\nPairs with the paid media platforms in the integrations catalog at rampstack.co (Google Ads, Meta, LinkedIn, TikTok, plus Synter as the multi-platform aggregator).\n\n**Growth tooling (interactive web tools):**\n\n```\nfunnel-flow-architecture (orchestrator)\n  ├── lead-magnet-design          (capture)\n  ├── calculator-design           (capture \u002F activate)\n  ├── quiz-and-assessment-design  (capture \u002F activate)\n  ├── multi-step-form-design      (activate)\n  ├── chatbot-flow-design         (activate)\n  ├── onboarding-wizard-design    (activate)\n  ├── interactive-product-tour    (activate \u002F convert)\n  ├── upgrade-flow-design         (convert)\n  ├── scheduler-and-booking-design (convert)\n  ├── comparison-tool-design      (convert)\n  └── product-configurator-design (convert)\n```\n\n`funnel-flow-architecture` is the orchestrator: it sequences which interactive tool fits each audience and funnel stage, distinguishing matched-funnels from kitchen-sink-funnels.\n\n**Tier 2 content lifecycle:**\n\n```\ncontent-strategy → pillar-content-architecture → content-brief-authoring\n                                                ↓\n              content-and-copy \u002F long-form-content-frameworks \u002F email-sequences\n                                                ↓\n                       editorial-qa → content-distribution → programmatic-seo\n                                                ↓\n              content-refresh-system → content-repurposing → content-migration\n```\n\n`ai-content-collaboration` is a workflow layer that runs across every phase rather than a single step. `documentation-strategy` operates continuously alongside the rest.\n\n**Tier 2 product management (two parallel tracks):**\n\n```\nExperimentation track:\nexperiment-design → feature-flagging → experimentation-platform-orchestrator\n                                     ↓\n                         experimentation-analytics → data-warehouse-experimentation\n\nGap-closing track:\npm-spec-writing → roadmap-planning → feature-launch-playbook\n                                   ↓\n       beta-program-management → product-analytics-setup → integration-orchestrator\n```\n\nThe experimentation track ships changes with statistical discipline; the gap-closing track ships features with operational discipline. Both compose with the foundational lifecycle above.\n\nOperations, cross-cutting, and team skills (`stakeholder-communication`, `documentation-strategy`, `vendor-evaluation`, `team-onboarding-playbook`, `dependency-management`, `cost-optimization`, etc.) cut across every track.\n\nYou can also pull individual skills for one-off work. Need just a backlink audit? Use `seo-backlink-audit`. Need to write a creative brief? Use `creative-brief`. Each skill stands on its own.\n\n---\n\n## How the catalog connects\n\nThe skills compose with the tools your team already uses. 102 skills at the center; 35 integrations across 6 integration categories radiating out via MCPs.\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(max-width: 640px)\" srcset=\"docs\u002Farchitecture-mobile.jpg\">\n    \u003Cimg src=\"docs\u002Farchitecture-wide.jpg\" alt=\"RampStack architecture diagram. A central navy hub card shows the RampStack mark with the subtitle 'Stack-agnostic methodology'. Six category cards radiate out: Workflow with 6 integrations (Jira, Linear, Notion, Figma, GitHub), Experimentation with 11 integrations (Statsig, PostHog, Optimizely, Amplitude), SEO Intelligence with 3 integrations (Ahrefs, Semrush, Similarweb), Paid Media with 5 integrations (Google Ads, Meta Ads, LinkedIn, TikTok, Synter), Content and SEO with 5 integrations (Webflow, Contentful, Frase, Profound, AirOps), and Data and Analytics with 5 integrations (BigQuery, Snowflake, Mixpanel, dbt, Hex).\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n---\n\n## Surfaces\n\n\u003C!-- SURFACES:START -->\nThis catalog is the open-source methodology layer. Commercial surfaces at [rampstack.co](https:\u002F\u002Frampstack.co) extend it:\n\n- **[Skills directory](https:\u002F\u002Frampstack.co\u002Fskills)**. Every skill on a curated landing surface with audience tracks, search, and category navigation.\n- **[Walkthroughs](https:\u002F\u002Frampstack.co\u002Fwalkthroughs)**. Multi-skill recipes that orchestrate skill clusters end-to-end. Use these when one skill is not enough and a packaged sequence is.\n- **[Integrations directory](https:\u002F\u002Frampstack.co\u002Fintegrations)**. Curated MCPs, APIs, and tooling that the skills hook into.\n- **[Showcase](https:\u002F\u002Frampstack.co\u002Fshowcase)**. Real brand sites built from these skills, with the brief that produced each one.\n\nThe skills in this repository remain free, open-source, and stack-agnostic. The surfaces above are how the same methodology is delivered as a product.\n\u003C!-- SURFACES:END -->\n\n---\n\n## Design principles\n\nclaude-skills follows the [Agent Skills Specification](https:\u002F\u002Fagentskills.io), the open standard for portable AI agent skills originally developed by Anthropic and adopted across the AI tooling ecosystem (Claude Code, OpenAI Codex, Gemini CLI, GitHub Copilot, Cursor, VS Code, Goose, Spring AI, and 30+ other platforms as of early 2026).\n\nBeyond the format itself, the catalog is designed around three principles aligned with the guidance Anthropic publishes in [Building effective agents](https:\u002F\u002Fwww.anthropic.com\u002Fengineering\u002Fbuilding-effective-agents):\n\n**Simplicity.** Each skill covers one focused capability rather than trying to be a multi-purpose document. A roadmap-planning skill plans roadmaps. A keyword-research skill researches keywords. Composing them together produces complex workflows; mixing them inside one skill produces unreliable ones.\n\n**Transparency.** Every skill declares its scope, dependencies, and expected behavior in machine-readable YAML frontmatter. The catalog is inspectable by tooling, not just by humans reading prose.\n\n**Quality contracts via tooling.** Structural and content quality is enforced through automated checks (run `python .github\u002Fscripts\u002Flint_skills.py`) rather than convention alone. Every skill is validated against a schema. Every catalog change is validated in CI.\n\nSkills in this catalog are designed to compose into the common agentic workflow patterns Anthropic documents: prompt chaining (sequential steps), routing (classify and direct), parallelization (sectioning or voting), orchestrator-workers (dynamic delegation), and evaluator-optimizer (iterative refinement).\n\nBecause the catalog conforms to the open Agent Skills standard, skills work across any platform supporting the specification without modification.\n\n## Family repos\n\nclaude-skills is the parent catalog. Curated subsets and companion repos focus on specific specialties:\n\n| Repo | Focus | Skills |\n|---|---|---|\n| [claude-skills](https:\u002F\u002Fgithub.com\u002Frampstackco\u002Fclaude-skills) | Full catalog (you are here) | 102 |\n| [claude-skills-starter](https:\u002F\u002Fgithub.com\u002Frampstackco\u002Fclaude-skills-starter) | General-purpose lite | 14 |\n| [claude-skills-seo](https:\u002F\u002Fgithub.com\u002Frampstackco\u002Fclaude-skills-seo) | SEO consulting | 12 |\n| [claude-skills-pm](https:\u002F\u002Fgithub.com\u002Frampstackco\u002Fclaude-skills-pm) | Product management | 12 |\n| [claude-skills-widgets](https:\u002F\u002Fgithub.com\u002Frampstackco\u002Fclaude-skills-widgets) | UI patterns + components | 65 + 32 |\n| [awesome-claude-skills](https:\u002F\u002Fgithub.com\u002Frampstackco\u002Fawesome-claude-skills) | Curated discovery list | n\u002Fa |\n\nEach family repo is MIT-licensed, conforms to the Agent Skills Specification, and is stack-agnostic. Use the full catalog for breadth; use a specialty subset when working in one domain.\n\n---\n\n\u003C!-- COUNT_CATALOG_HEADER:START -->\n## The 102-skill catalog\n\u003C!-- COUNT_CATALOG_HEADER:END -->\n\n\u003C!-- COUNT_CATALOG_INTRO:START -->\nAll 102 skills are shipped. Each has a complete SKILL.md plus at least one reference file (template, checklist, or playbook).\n\u003C!-- COUNT_CATALOG_INTRO:END -->\n\n\u003C!-- AUTO-GENERATED CATALOG: do not edit by hand. Run scripts\u002Fgenerate_readme_catalog.py --write -->\n\u003C!-- CATALOG:START -->\n### Strategy and discovery (5)\n\n| Skill | What it does |\n|---|---|\n| [`brand-discovery`](skills\u002Fbrand-discovery\u002FSKILL.md) | Audience research, competitive scan, positioning territory exploration |\n| [`creative-brief`](skills\u002Fcreative-brief\u002FSKILL.md) | Project briefs that align stakeholders before work starts |\n| [`creative-direction`](skills\u002Fcreative-direction\u002FSKILL.md) | Four-axis aesthetic brief (tone, aesthetic, audience, sensory ambition) for cross-skill coherence |\n| [`information-architecture`](skills\u002Finformation-architecture\u002FSKILL.md) | Sitemap, navigation, URL structure, content types, taxonomy |\n| [`content-strategy`](skills\u002Fcontent-strategy\u002FSKILL.md) | Editorial strategy, content calendar, topical authority planning |\n\n### Brand (7)\n\n| Skill | What it does |\n|---|---|\n| [`brand-ideation`](skills\u002Fbrand-ideation\u002FSKILL.md) | Naming, positioning territories, mood directions, narrative angles |\n| [`brand-identity`](skills\u002Fbrand-identity\u002FSKILL.md) | Logo system, color, typography, imagery, iconography, motion |\n| [`brand-style-guide`](skills\u002Fbrand-style-guide\u002FSKILL.md) | The canonical reference document for the full brand system |\n| [`brand-voice`](skills\u002Fbrand-voice\u002FSKILL.md) | Voice attributes, tone shifts, vocabulary, paired-example library |\n| [`brand-archetype-system`](skills\u002Fbrand-archetype-system\u002FSKILL.md) | 12 archetype defaults across 18 verticals: color, type, voice, imagery starters |\n| [`logo-design`](skills\u002Flogo-design\u002FSKILL.md) | Logo variants across architectures (wordmark, lockup, monogram, letterform-as-symbol), with rationale and application specs |\n| [`creative-brief-selector`](skills\u002Fcreative-brief-selector\u002FSKILL.md) | Live-reference-grounded creative briefs with divergence check against prior builds |\n\n### Design (4)\n\n| Skill | What it does |\n|---|---|\n| [`design-system`](skills\u002Fdesign-system\u002FSKILL.md) | Component library, design tokens, design system documentation |\n| [`design-standards`](skills\u002Fdesign-standards\u002FSKILL.md) | Production-grade page and component design standards |\n| [`art-direction`](skills\u002Fart-direction\u002FSKILL.md) | Photography, illustration, and visual direction for campaigns |\n| [`vertical-site-conventions`](skills\u002Fvertical-site-conventions\u002FSKILL.md) | Vertical page and site composition built to the experience bar |\n\n### Content (12)\n\n| Skill | What it does |\n|---|---|\n| [`pillar-content-architecture`](skills\u002Fpillar-content-architecture\u002FSKILL.md) | Hub-level content architecture: pillar topic selection, cluster planning, internal linking, URL structure, pillar and cluster page anatomy, topical authority signals, refresh discipline |\n| [`content-brief-authoring`](skills\u002Fcontent-brief-authoring\u002FSKILL.md) | Per-piece editorial brief: target keyword, intent, audience, outline, entity coverage, internal linking, success criteria, and the discipline that distinguishes useful briefs from bloat |\n| [`content-and-copy`](skills\u002Fcontent-and-copy\u002FSKILL.md) | Website copy, blog content, content production frameworks |\n| [`landing-page-copy`](skills\u002Flanding-page-copy\u002FSKILL.md) | Landing pages, sales pages, hero-to-CTA flow |\n| [`email-sequences`](skills\u002Femail-sequences\u002FSKILL.md) | Onboarding flows, lifecycle campaigns, transactional copy |\n| [`programmatic-seo`](skills\u002Fprogrammatic-seo\u002FSKILL.md) | Designing pSEO programs that work: data sources, template design, quality control at scale, internal linking, crawl budget, AEO\u002FGEO patterns, refresh discipline, and when pSEO is and is not the right answer |\n| [`editorial-qa`](skills\u002Feditorial-qa\u002FSKILL.md) | Pre-publish QA framework: brief adherence, voice consistency, fact accuracy, AI-content audit, AEO\u002FSEO compliance, sampling at scale, and the workflow that distinguishes catch-problems QA from process theater |\n| [`ai-content-collaboration`](skills\u002Fai-content-collaboration\u002FSKILL.md) | How humans and AI compose in content workflows: participation boundaries, hybrid patterns, voice ownership, the AI slop problem, disclosure and transparency, team calibration, and the ethics of honest AI-assisted production |\n| [`long-form-content-frameworks`](skills\u002Flong-form-content-frameworks\u002FSKILL.md) | Structural patterns for individual long-form pieces (case studies, whitepapers, research reports, definitive guides, manifestos, ebooks, long-form tutorials) that distinguish publication-quality work from bloggy-long padding or academic bloat |\n| [`content-refresh-system`](skills\u002Fcontent-refresh-system\u002FSKILL.md) | Systematic content refresh: quarterly audits, refresh prioritization, refresh-vs-merge-vs-delete decisions, the lifecycle discipline that distinguishes intentional programs from set-and-forget decay |\n| [`content-repurposing`](skills\u002Fcontent-repurposing\u002FSKILL.md) | Cross-format content adaptation: one piece becomes many (blog series, email, social, webinar, podcast, video) with per-format adaptation rather than mass-blast that ignores medium constraints |\n| [`content-distribution`](skills\u002Fcontent-distribution\u002FSKILL.md) | Content distribution discipline: owned, earned, and paid channels matched to audience and content type. Channel-fit decisions, distribution cadence, the strategic alternative to spam-everywhere or hope-and-pray |\n\n### SEO foundation (7)\n\nTool-agnostic SEO skills. These define the conceptual frameworks. The SEO audit suite below adds the Ahrefs MCP-powered execution layer.\n\n| Skill | What it does |\n|---|---|\n| [`seo-onpage`](skills\u002Fseo-onpage\u002FSKILL.md) | Single-page audits and optimization across 8 dimensions |\n| [`seo-technical`](skills\u002Fseo-technical\u002FSKILL.md) | Crawlability, indexability, rendering, schema, page experience |\n| [`seo-keyword`](skills\u002Fseo-keyword\u002FSKILL.md) | Discovery, intent classification, clustering, prioritization |\n| [`seo-competitor`](skills\u002Fseo-competitor\u002FSKILL.md) | SERP overlap, content gaps, backlink gaps, technical comparison |\n| [`seo-offpage`](skills\u002Fseo-offpage\u002FSKILL.md) | Link building, digital PR, citations, linkable assets |\n| [`seo-content-audit`](skills\u002Fseo-content-audit\u002FSKILL.md) | Keep\u002Fupdate\u002Fmerge\u002Fredirect\u002Fdelete decisions across a site |\n| [`seo-aeo-geo`](skills\u002Fseo-aeo-geo\u002FSKILL.md) | AI search optimization, llms.txt, extraction-friendly content |\n\n### SEO audit suite (Ahrefs MCP-powered) (7)\n\nEnd-to-end SEO audit workflows that pull data from the Ahrefs MCP and produce concrete deliverables. These skills assume the Ahrefs MCP is connected.\n\n| Skill | What it does |\n|---|---|\n| [`seo-audit-orchestration`](skills\u002Fseo-audit-orchestration\u002FSKILL.md) | Master orchestrator: sequences the suite, produces a rollup report |\n| [`seo-backlink-audit`](skills\u002Fseo-backlink-audit\u002FSKILL.md) | Profile health, anchor mix, toxic links, reclamation, gap analysis |\n| [`seo-keyword-gap-audit`](skills\u002Fseo-keyword-gap-audit\u002FSKILL.md) | Competitor keyword gaps with opportunity scoring and clustering |\n| [`seo-content-gap-audit`](skills\u002Fseo-content-gap-audit\u002FSKILL.md) | Missing topics, thin coverage, outdated content, decay diagnosis |\n| [`seo-traffic-diagnosis`](skills\u002Fseo-traffic-diagnosis\u002FSKILL.md) | Diagnose drops, stalls, or wins via 5-layer root cause analysis |\n| [`seo-site-health-audit`](skills\u002Fseo-site-health-audit\u002FSKILL.md) | Triage Ahrefs Site Audit findings by SEO impact, not severity |\n| [`seo-rank-tracking`](skills\u002Fseo-rank-tracking\u002FSKILL.md) | Setup, baseline, segmentation, alerting, dashboarding |\n\n### Product (13)\n\n| Skill | What it does |\n|---|---|\n| [`pm-spec-writing`](skills\u002Fpm-spec-writing\u002FSKILL.md) | PRDs, user stories, acceptance criteria, dev briefs |\n| [`roadmap-planning`](skills\u002Froadmap-planning\u002FSKILL.md) | Quarterly planning, prioritization, dependency mapping |\n| [`integration-orchestrator`](skills\u002Fintegration-orchestrator\u002FSKILL.md) | Sequence creative-direction work across phases, gates, handoffs, and QA verification |\n| [`experiment-design`](skills\u002Fexperiment-design\u002FSKILL.md) | Hypothesis to decision: sample size, duration, segment analysis, interpretation, and the failure modes that produce wrong shipping calls |\n| [`feature-flagging`](skills\u002Ffeature-flagging\u002FSKILL.md) | Flags as production infrastructure: types, naming, lifecycle, targeting, rollout, stale flag cleanup, governance |\n| [`experimentation-analytics`](skills\u002Fexperimentation-analytics\u002FSKILL.md) | Read result panels without fooling yourself: confidence intervals, p-values, multiple testing, sequential testing, CUPED, ratio metrics, network effects, dashboard reconciliation |\n| [`experimentation-platform-orchestrator`](skills\u002Fexperimentation-platform-orchestrator\u002FSKILL.md) | Pick the right experimentation platform, migrate when wrong, coordinate when multi-platform: a decision framework for Statsig, PostHog, GrowthBook, Optimizely, Amplitude, Eppo, Kameleoon |\n| [`product-analytics-setup`](skills\u002Fproduct-analytics-setup\u002FSKILL.md) | Instrument product analytics correctly: event taxonomy, properties, naming conventions, schema versioning, funnels, retention cohorts, North Star selection, and the instrumentation debt that compounds without discipline |\n| [`data-warehouse-experimentation`](skills\u002Fdata-warehouse-experimentation\u002FSKILL.md) | Run experiments out of the warehouse: SQL assignment, exposure logs, dbt metric definitions, statistical analysis, variance reduction with CUPED, sequential testing, and the operational tradeoffs vs platforms |\n| [`feature-launch-playbook`](skills\u002Ffeature-launch-playbook\u002FSKILL.md) | The operational discipline of launching a feature well: positioning, internal alignment, customer comms, sales enablement, support readiness, rollout strategy, monitoring, and post-launch measurement |\n| [`jtbd-framing`](skills\u002Fjtbd-framing\u002FSKILL.md) | Jobs-to-be-Done framework. Job statements, struggling moments, hire\u002Ffire criteria, the difference between feature-thinking and job-thinking. Honest about where JTBD earns its keep and where it becomes performative |\n| [`okr-design`](skills\u002Fokr-design\u002FSKILL.md) | OKR design discipline. Outcome statements, key results, scoring, mid-quarter recalibration. Distinguishes sandbagged OKRs (always hit, useless) from aspirational fantasy (impossible, demoralizing) from stretch OKRs (genuine ambition with quarterly accountability) |\n| [`beta-program-management`](skills\u002Fbeta-program-management\u002FSKILL.md) | Running betas that produce real signal. Participant selection, structured feedback, beta-to-GA decisions. Distinguishes soft-launch (no structure) from kitchen-sink (everyone in) from structured-beta (calibrated cohort with intentional feedback loops) |\n\n### Development (4)\n\n| Skill | What it does |\n|---|---|\n| [`code-review-web`](skills\u002Fcode-review-web\u002FSKILL.md) | PR review, build error diagnosis, security and quality checks |\n| [`frontend-component-build`](skills\u002Ffrontend-component-build\u002FSKILL.md) | Component architecture, props design, accessibility from the start |\n| [`accessibility-audit`](skills\u002Faccessibility-audit\u002FSKILL.md) | WCAG compliance audit with remediation plan |\n| [`performance-optimization`](skills\u002Fperformance-optimization\u002FSKILL.md) | Core Web Vitals, asset optimization, render performance |\n\n### Quality assurance (1)\n\n| Skill | What it does |\n|---|---|\n| [`qa-testing`](skills\u002Fqa-testing\u002FSKILL.md) | Pre-launch QA, regression testing, cross-browser checks |\n\n### Operations (9)\n\n| Skill | What it does |\n|---|---|\n| [`launch-runbook`](skills\u002Flaunch-runbook\u002FSKILL.md) | Go-live runbook, DNS cutover, deploy day procedures |\n| [`incident-response`](skills\u002Fincident-response\u002FSKILL.md) | Incident triage, comms, mitigation, escalation |\n| [`after-action-report`](skills\u002Fafter-action-report\u002FSKILL.md) | Post-mortems, retros, learnings documentation |\n| [`domain-strategy`](skills\u002Fdomain-strategy\u002FSKILL.md) | DNS architecture, redirects, registrars, multi-domain portfolios |\n| [`monitoring-and-alerting`](skills\u002Fmonitoring-and-alerting\u002FSKILL.md) | SLO design, uptime checks, alert routing, on-call rotations |\n| [`backup-and-disaster-recovery`](skills\u002Fbackup-and-disaster-recovery\u002FSKILL.md) | RPO\u002FRTO targets, backup strategy, restoration drills |\n| [`security-baseline`](skills\u002Fsecurity-baseline\u002FSKILL.md) | HTTPS, security headers, CSP, secrets management, vulnerability scans |\n| [`email-deliverability`](skills\u002Femail-deliverability\u002FSKILL.md) | DMARC, SPF, DKIM, sender reputation, deliverability monitoring |\n| [`media-asset-management`](skills\u002Fmedia-asset-management\u002FSKILL.md) | Image pipelines, video hosting, asset libraries, format selection |\n\n### Growth (2)\n\n| Skill | What it does |\n|---|---|\n| [`analytics-strategy`](skills\u002Fanalytics-strategy\u002FSKILL.md) | Measurement frameworks, dashboard design, event taxonomy |\n| [`cro-optimization`](skills\u002Fcro-optimization\u002FSKILL.md) | Hypothesis-driven testing, conversion optimization |\n\n### Growth tooling (12)\n\nInteractive web tools that turn visitors into leads. Lead magnets, calculators, quizzes, multi-step forms, chatbots, and the cross-tool funnel architecture that orchestrates them.\n\n| Skill | What it does |\n|---|---|\n| [`lead-magnet-design`](skills\u002Flead-magnet-design\u002FSKILL.md) | Designing gated content that earns the email. Distinguishes thin-bait (overpromises, underdelivers) from kitchen-sink-resource (everything, helps with nothing) from earned-value-magnet (delivers standalone value while qualifying the lead) |\n| [`calculator-design`](skills\u002Fcalculator-design\u002FSKILL.md) | Designing interactive calculators that deliver decision-support value while qualifying leads. Distinguishes vanity-calculator (no real value) from lead-trap (hides answer behind email) from transparent-decision-tool (gives genuine value, captures leads honestly) |\n| [`quiz-and-assessment-design`](skills\u002Fquiz-and-assessment-design\u002FSKILL.md) | Designing quizzes and assessments that produce actionable segmentation. Distinguishes clickbait-quiz (engagement only) from vanity-result (entertaining, not useful) from actionable-segmentation (genuine categorization that drives next-step recommendations) |\n| [`multi-step-form-design`](skills\u002Fmulti-step-form-design\u002FSKILL.md) | Designing multi-step forms that respect cognitive load while maintaining completion intent. Distinguishes kitchen-sink-single-page (overwhelms) from progress-theater (steps without genuine staging) from genuinely-staged (each step earns its own page) |\n| [`chatbot-flow-design`](skills\u002Fchatbot-flow-design\u002FSKILL.md) | Designing conversational flows for chatbots and AI agents on websites. Distinguishes scripted-bot (rigid trees, fail edge cases) from hallucinating-bot (LLM without structure, makes things up) from structured-guided-conversation (LLM-powered with intent architecture and fallback discipline) |\n| [`funnel-flow-architecture`](skills\u002Ffunnel-flow-architecture\u002FSKILL.md) | Architecting cross-tool conversion flows that match audience and stage. Distinguishes silo-funnels (every tool standalone) from kitchen-sink-funnels (every audience squeezed through one path) from matched-funnels (architecture matched to audience-and-stage) |\n| [`onboarding-wizard-design`](skills\u002Fonboarding-wizard-design\u002FSKILL.md) | Designing first-run product onboarding wizards. Distinguishes tutorial-overload (dump everything upfront) from skip-friendly-empty (skipped onboarding leads to abandoned product) from earned-progressive-disclosure (right things at the right moments) |\n| [`interactive-product-tour`](skills\u002Finteractive-product-tour\u002FSKILL.md) | Designing in-product tours and contextual help. Distinguishes tooltip-spam (every button has a tour stop) from one-and-done (tour shows once, never seen again) from contextual-when-needed (surfaces help at the moment friction occurs) |\n| [`upgrade-flow-design`](skills\u002Fupgrade-flow-design\u002FSKILL.md) | Designing free-to-paid conversion flows. Distinguishes paywall-everywhere (gates everything aggressively) from free-forever-trap (no upgrade path surfaces) from value-triggered-upgrade (paywall surfaces at moments of demonstrated value) |\n| [`scheduler-and-booking-design`](skills\u002Fscheduler-and-booking-design\u002FSKILL.md) | Designing schedulers and booking flows. Distinguishes any-time-friction (no qualification, just a booking link) from interrogation-gate (so much qualification it scares users off) from qualified-fast-path (just enough qualification to set up the call well) |\n| [`comparison-tool-design`](skills\u002Fcomparison-tool-design\u002FSKILL.md) | Designing comparison tools that help users decide. Distinguishes feature-list-dump (every feature in a row, no decision support) from hidden-recommendation (biased comparison pretending to be neutral) from honest-comparison-with-guidance (genuine comparison plus opinionated recommendation) |\n| [`product-configurator-design`](skills\u002Fproduct-configurator-design\u002FSKILL.md) | Designing interactive product configurators. Distinguishes infinite-options (decision paralysis from too many options) from canned-bundles-only (no real customization) from guided-configuration (smart defaults plus meaningful constraints plus escape hatches) |\n\n### Marketing (3)\n\nPaid media discipline: strategy, creative, and performance analytics. Pairs with the paid media platforms in the \u002Fintegrations catalog at rampstack.co.\n\n| Skill | What it does |\n|---|---|\n| [`paid-media-strategy`](skills\u002Fpaid-media-strategy\u002FSKILL.md) | Hypothesis to spend: channel selection, budget allocation, audience targeting, bid strategy, attribution reality, and the failure modes that burn agency-scale budgets |\n| [`ads-creative-development`](skills\u002Fads-creative-development\u002FSKILL.md) | Hook patterns, format selection, video pacing, variation systems, testing methodology, fatigue detection, and the platform-specific creative norms that separate ads from clutter |\n| [`ads-performance-analytics`](skills\u002Fads-performance-analytics\u002FSKILL.md) | Read paid media dashboards without fooling yourself: attribution models, platform reporting quirks, ROAS vs LTV, multi-platform reconciliation, incrementality testing, and the interpretation failures that compound into wasted budget |\n\n### Research (6)\n\n| Skill | What it does |\n|---|---|\n| [`ux-research`](skills\u002Fux-research\u002FSKILL.md) | Research planning, user interviews, qualitative synthesis |\n| [`usability-testing`](skills\u002Fusability-testing\u002FSKILL.md) | Test design, moderation, findings reports |\n| [`journey-mapping`](skills\u002Fjourney-mapping\u002FSKILL.md) | Customer journey maps, service blueprints, friction analysis |\n| [`discovery-research-synthesis`](skills\u002Fdiscovery-research-synthesis\u002FSKILL.md) | Synthesizing customer interviews, research notes, and support tickets into actionable PM decisions. Distinguishes data-dump (no synthesis) from insight-theater (overpolished narrative) from actionable synthesis (decision-grade clarity) |\n| [`user-feedback-aggregation`](skills\u002Fuser-feedback-aggregation\u002FSKILL.md) | Collecting and synthesizing user feedback across channels into continuous decision signal. Triage discipline that distinguishes loudest-voice (whoever complains most) from averaged-noise (every signal weighted equally) from triaged-synthesis (weighted by source quality and decision relevance) |\n| [`competitor-experience-audit`](skills\u002Fcompetitor-experience-audit\u002FSKILL.md) | Cross-site experience patterns and gaps across a vertical |\n\n### Cross-cutting workflows (5)\n\n| Skill | What it does |\n|---|---|\n| [`form-strategy`](skills\u002Fform-strategy\u002FSKILL.md) | Form design, validation patterns, spam prevention, conversion tuning |\n| [`content-migration`](skills\u002Fcontent-migration\u002FSKILL.md) | Platform migrations with SEO equity preservation |\n| [`internationalization`](skills\u002Finternationalization\u002FSKILL.md) | Locale strategy, hreflang, translation workflow, RTL design |\n| [`dependency-management`](skills\u002Fdependency-management\u002FSKILL.md) | Package updates, security patches, lockfile hygiene |\n| [`cost-optimization`](skills\u002Fcost-optimization\u002FSKILL.md) | Infrastructure spend audits, rightsizing, contract negotiation |\n\n### Process and team (5)\n\n| Skill | What it does |\n|---|---|\n| [`stakeholder-communication`](skills\u002Fstakeholder-communication\u002FSKILL.md) | Status updates, exec readouts, project communications |\n| [`documentation-strategy`](skills\u002Fdocumentation-strategy\u002FSKILL.md) | Documentation systems, what to document, maintenance cadence |\n| [`vendor-evaluation`](skills\u002Fvendor-evaluation\u002FSKILL.md) | Tool and vendor selection using a structured rubric |\n| [`team-onboarding-playbook`](skills\u002Fteam-onboarding-playbook\u002FSKILL.md) | 30-60-90 onboarding plans for new hires and contractors |\n| [`skill-creation-walkthrough`](skills\u002Fskill-creation-walkthrough\u002FSKILL.md) | The meta-skill: how to write your own custom skills |\n\u003C!-- CATALOG:END -->\n\n---\n\n## Recommended MCPs\n\nSkills compose best when Claude has live access to your data and tools. [Model Context Protocol (MCP)](https:\u002F\u002Fmodelcontextprotocol.io\u002F) servers provide that bridge. The skills in this library work without any MCPs, but pair them with the right ones and they go from \"frameworks Claude follows\" to \"workflows Claude executes against your real systems.\"\n\nBelow is the MCP shortlist by skill area. None of these are required (except the Ahrefs MCP for the SEO audit suite). All are categorical recommendations: where multiple options exist for the same job, pick the one that fits your stack.\n\n### SEO, competitive intelligence, and search data\n\nThe SEO audit suite (skills 23-29) is built around Ahrefs as its primary backend; foundation SEO skills (16-22) work with any equivalent. Competitive intelligence MCPs (Ahrefs, Semrush, Similarweb) cover overlapping but distinct data shapes: backlinks and keywords, traffic estimation, audience behavior. Use them in combination for the strongest signal.\n\n**A note on MCP costs**: many of these MCPs are wrappers around APIs you are already paying for through a subscription, where MCP calls do not add marginal cost. Others (Ahrefs, Semrush, Similarweb, DataForSEO) use paid API credits per call, and long agentic sessions against these platforms can burn meaningful credit volume quickly. The cost model is documented on each integration's landing page at rampstack.co\u002Fintegrations. Free with rate limits is called out where it applies (Google Search Console, PageSpeed Insights). When in doubt, check the platform's API pricing before running multi-hour agent workflows.\n\n**Backlink and keyword data**\n\n- **Ahrefs MCP** - primary backend for the audit suite; backlink profiles, keyword data, content explorer, site audit. Referenced explicitly by `seo-audit-orchestration` and the 6 audit suite skills (backlink, keyword gap, content gap, traffic, site health, rank tracking). Credits-per-call.\n- **Semrush MCP** - alternative or complement to Ahrefs with stronger US keyword data and SEO-PR features (Topic Research, brand monitoring) Ahrefs does not cover. Pairs with `seo-keyword`, `seo-competitor`, `seo-content-gap-audit`. Verify the official MCP endpoint at authoring time; Semrush has shipped first-party MCP tooling. Credits-per-call.\n- **DataForSEO MCP** - programmatic SEO data (SERP, keywords, backlinks) at developer-friendly pricing; useful as a third source for cross-validation when methodology decisions hinge on data agreement. Credits-per-call (free tier available).\n\n**Traffic estimation and competitive intelligence**\n\n- **Similarweb MCP** - competitive traffic estimation, audience demographics, channel mix (organic, paid, direct, referral, social, email), industry benchmarks, audience overlap analysis. Pairs with `seo-competitor`, `seo-traffic-diagnosis` (external-factor layer), `brand-discovery` (competitive scan), `analytics-strategy` (industry benchmarks). Where Ahrefs answers \"how do they rank\" and Semrush answers \"what keywords drive what,\" Similarweb answers \"how much traffic, from where, from whom.\" Credits-per-call.\n\n**Search Console and Core Web Vitals**\n\n- **Google Search Console MCP** - free, official Google data; essential for `seo-traffic-diagnosis` and any audit that needs ground-truth click and impression data. Free with rate limits.\n- **PageSpeed Insights MCP** - free, paired with `performance-optimization` and `seo-site-health-audit` for Core Web Vitals field data. Free with rate limits.\n\n### Development and code\n\n- **GitHub MCP** - paired with `code-review-web`, `pm-spec-writing`, `roadmap-planning`, `incident-response`. Lets Claude read PRs, file issues, search code, and reference real commits.\n- **Filesystem MCP** - local file and code operations; pairs with most dev and content skills\n- **Sentry MCP** - paired with `monitoring-and-alerting` and `incident-response`. Real error data turns generic incident frameworks into specific diagnoses.\n\n### Hosting and infrastructure\n\n- **Cloudflare MCP** - paired with `domain-strategy`, `security-baseline`, `performance-optimization`. DNS records, redirects, page rules, security headers.\n- **Vercel MCP** - paired with `launch-runbook` and `incident-response`. Deployments, env vars, build logs.\n- **Supabase MCP** - paired with `code-review-web`, `pm-spec-writing`, `backup-and-disaster-recovery`. Schema, queries, edge functions.\n\n### Analytics and monitoring\n\n- **PostHog MCP** - paired with `analytics-strategy`, `cro-optimization`, `journey-mapping`. Event taxonomy review and funnel analysis grounded in real data.\n- **Datadog MCP** - paired with `monitoring-and-alerting`, `incident-response`. SLO design and alert routing against actual metrics.\n\n### Communication and project management\n\n- **Slack MCP** - paired with `incident-response`, `stakeholder-communication`, `after-action-report`. Read channel context, draft updates, post incident comms.\n- **Linear MCP** (or Jira MCP) - paired with `pm-spec-writing`, `roadmap-planning`. Spec writing against the actual issue tracker, not a generic template.\n\n### Research and search\n\n- **Web search** (built into Claude in most environments) - paired with `brand-discovery`, `seo-keyword`, `seo-competitor`, `ux-research`\n- **Tavily MCP** or **Brave Search MCP** - alternatives for deeper research workflows\n\n### Where to find them\n\n- [modelcontextprotocol.io\u002Fservers](https:\u002F\u002Fmodelcontextprotocol.io\u002Fservers) - the canonical directory of MCP servers\n- The Connectors directory inside Claude.ai (Settings → Connectors)\n- `claude mcp add` in Claude Code for direct installation\n- Vendor websites for first-party servers (most major SaaS tools now ship official MCPs)\n\n### Building your own MCP\n\nIf a skill in this library would benefit from a tool integration that does not yet exist, the [MCP documentation](https:\u002F\u002Fmodelcontextprotocol.io\u002F) walks through building one. The `seo-audit-orchestration` skill is a worked example of how to design a skill suite around a specific MCP's capabilities.\n\n---\n\n## Authoring conventions\n\nEvery skill follows the same structure. See [SKILL_AUTHORING.md](SKILL_AUTHORING.md) for the full spec.\n\nHighlights:\n\n- **Stack-agnostic.** No specific framework versions in SKILL.md. Stack-specific patterns go in reference files. The Ahrefs-powered audit suite is the single named-tool exception.\n- **Future-proof.** Reference durable specs (W3C, WHATWG, Schema.org, MDN, NN\u002Fg, WCAG). Avoid trend pieces.\n- **Uniform structure.** Every SKILL.md has the same section order: When to use, When NOT to use, Required inputs, The framework, Workflow, Failure patterns, Output format, Reference files.\n- **Tight length.** SKILL.md under 250 lines. References under 400.\n- **Punchy voice.** Short sentences. Concrete examples beat abstract advice.\n\n---\n\n## Repository structure\n\n```\nskills\u002F\n  skill-name\u002F\n    SKILL.md\n    references\u002F\n      template.md\n      checklist.md\n      example.md\nSKILL_AUTHORING.md          (the authoring guide)\nCONTRIBUTING.md             (how to contribute)\nMAPPING.md                  (origin notes for skills ported from existing work)\nREADME.md                   (this file)\nLICENSE                     (MIT)\n```\n\n---\n\n## Contributing\n\nContributions are welcome. Whether you want to fix a typo, add a reference file, or propose an entirely new skill, the bar is the same: follow the uniform structure, keep the voice consistent, and prove the skill earns its place.\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for the full process.\n\nThe fastest path: use the [`skill-creation-walkthrough`](skills\u002Fskill-creation-walkthrough\u002FSKILL.md) skill itself. It teaches the same authoring discipline used across all 102 skills, with worked examples and a blank template.\n\n---\n\n## Acknowledgments\n\nThanks to [@IgnacioChiaravalle](https:\u002F\u002Fgithub.com\u002FIgnacioChiaravalle) for the community feedback that shaped [PR #36](https:\u002F\u002Fgithub.com\u002Frampstackco\u002Fclaude-skills\u002Fpull\u002F36): a CONTRIBUTING.md typo fix, a cross-linking pass between SKILL.md files and their reference files, and the new [ARIA patterns reference](skills\u002Faccessibility-audit\u002Freferences\u002Faria-patterns.md) for the accessibility-audit skill.\n\n---\n\n## Resources\n\n### Official Anthropic documentation\n\n- [Agent Skills overview](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fagents-and-tools\u002Fagent-skills\u002Foverview) - The canonical reference\n- [Anthropic engineering blog on Skills](https:\u002F\u002Fwww.anthropic.com\u002Fengineering) - Background on the design\n- [Claude Code documentation](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Foverview) - Where most of these skills will run\n- [Anthropic API reference](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fapi\u002Fgetting-started) - For programmatic use\n\n### Other skill libraries worth knowing\n\n- [Anthropic's official skills repository](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills) - Examples and primitives published by Anthropic\n- [Awesome Claude Skills (Composio)](https:\u002F\u002Fgithub.com\u002FComposioHQ\u002Fawesome-claude-skills) - A curated index of community skills, where this library is featured under Business & Marketing\n\n### Companion concepts\n\n- [Model Context Protocol (MCP)](https:\u002F\u002Fmodelcontextprotocol.io\u002F) - The protocol behind the Ahrefs MCP and other tool integrations referenced in this library\n- [WCAG quick reference](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002Fquickref\u002F) - Accessibility standard cited by the accessibility audit and design skills\n- [Schema.org](https:\u002F\u002Fschema.org\u002F) - Structured data vocabulary cited across the SEO suite\n\n---\n\n## License\n\n[MIT](LICENSE). Use it. Fork it. Ship things with it.\n","该项目提供了一套全面的Claude技能库，覆盖了从品牌建设到网站运维的整个生命周期。它包含102项与技术栈无关的技能，涉及品牌、设计、内容、SEO、开发、运维、增长和研究等多个方面，并特别集成了Ahrefs MCP支持的SEO审计工具。这些技能可以应用于Next.js、WordPress、Shopify、Webflow或纯HTML等多种平台。项目采用Python编写，适合需要一站式解决方案来构建、部署、审计及优化网站的品牌和个人使用。MIT许可下开源，欢迎贡献代码。",2,"2026-06-11 02:48:14","CREATED_QUERY"]