Stack-agnostic Claude Skills covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Build, ship, audit, optimize.
A complete, opinionated library of Claude Skills covering the full lifecycle of building, launching, running, and growing a brand and a website.
98 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.
Claude 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.
This 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.
What you get:
98 skills across 16 categories, every one with a complete SKILL.md and at least one reference file
423 reference files (templates, checklists, decision matrices, worked examples)
Stack-agnostic. Works on any web stack. The only named-tool exception is the SEO audit suite, which assumes the Ahrefs MCP.
Future-proof. Principles over tools. Stable concepts over trending techniques. References to durable specs (W3C, WHATWG, Schema.org, MDN, NN/g, WCAG) over content that ages with each algorithm update.
Uniform structure. Every skill uses the same section order, the same tone, and the same authoring conventions. Predictable in, predictable out.
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.
Highlight categories: brand strategy, design systems, content production, full SEO suite, frontend dev, accessibility, performance, QA, launch and incident ops, growth and CRO, UX research, plus a meta-skill that teaches you to write your own.
Thirty 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.
Filter by any axis position
The 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 and axes-explained reference, so you can read about a position and click straight through to the rendered examples.
The empty state is the lesson
The 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.
The framework's range
Same 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.
Run this on your own brand
The creative-direction skill lives at skills/creative-direction/. 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.
Getting started
Skills install in three different places depending on where you use Claude. Pick the platform that matches your workflow.
Option 1: Claude.ai (web and desktop)
If your Claude.ai plan supports custom Skills:
Go to Settings → Capabilities → Skills.
Upload the skill folder you want as a .zip (one zip per skill folder containing SKILL.md and the references/ subfolder).
Enable the skill in the chat interface.
Claude will load the skill automatically when your request matches its description.
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.
