frontend-design

Claude Code Skills Collection

156 production-ready skills for Claude Code CLI

Version 3.4.0 | Last Updated: 2026-06-21

**For all other Platforms like opencode, codex and others, you can use https://github.com/enulus/OpenPackage **

---

A curated collection of battle-tested skills for building modern web applications with Cloudflare, AI integrations, React, Tailwind, and more.

PS: if skills.sh warns about any skill: Their scan process is a outdated LLM which flags newest versions pins (like in ZOD) as non existent and by that potentially malicous.

---

Quick Start

Marketplace Installation (Recommended)

# Add the marketplace
/plugin marketplace add https://github.com/secondsky/claude-skills

# Install individual skills as needed
/plugin install cloudflare-d1@claude-skills
/plugin install tailwind-v4-shadcn@claude-skills
/plugin install ai-sdk-core@claude-skills

See MARKETPLACE.md for complete catalog of all 156 skills.

Bulk Installation (Contributors)

# Clone the repository
git clone https://github.com/secondsky/claude-skills.git
cd claude-skills

# Install all 156 skills at once
./scripts/install-all.sh

# Or install individual skills
./scripts/install-skill.sh cloudflare-d1

---

Repository Structure

This repository contains 156 production-tested skills for Claude Code, each focused on a specific technology or capability.

Individual Skills: Each skill is a standalone unit with:

• SKILL.md - Core knowledge and guidance
• Templates - Working code examples
• References - Extended documentation
• Scripts - Helper utilities

Installation Options:

1. Individual - Install only the skills you need via marketplace
2. Bulk - Install all 156 skills using ./scripts/install-all.sh

---

Available Skills (156 Individual Skills)

Each skill is individually installable. Install only the skills you need.

Full Catalog: See MARKETPLACE.md for detailed listings.

Categories

Category	Skills	Examples
tooling	28	turborepo, plan-interview, code-review
frontend	26	nuxt-v4, nuxt-v5, tailwind-v4-shadcn, tanstack-query, nuxt-studio, maz-ui, threejs
cloudflare	21	cloudflare-d1, cloudflare-workers-ai, cloudflare-agents
api	16	api-design-principles, graphql-implementation
ai	13	claude-api, ai-sdk-core, gemini-cli
web	10	hono-routing, firecrawl-scraper, web-performance
security	6	csrf-protection, access-control-rbac
mobile	5	react-native-app, react-native-skills
woocommerce	4	woocommerce-backend-dev
testing	4	vitest-testing, playwright-testing
design	4	design-review, design-system-creation
auth	4	better-auth
database	3	drizzle-orm-d1, database-schema-design, database-sharding
data	3	sql-query-optimization, recommendation-engine
cms	3	hugo, wordpress-plugin-core, content-collections
architecture	3	microservices-patterns, architecture-patterns
seo	2	seo-optimizer, seo-keyword-cluster-builder
documentation	1	technical-specification

---

How It Works

Auto-Discovery

Claude Code automatically checks ~/.claude/skills/ for relevant skills before planning tasks:

User: "Set up a Cloudflare Worker with D1 database"
           ↓
Claude: [Checks skills automatically]
           ↓
Claude: "Found cloudflare-d1 skills.
         These prevent 12 documented errors. Use them?"
           ↓
User: "Yes"
           ↓
Result: Production-ready setup, zero errors, ~65% token savings

Note: Due to token limits, not all skills may be visible at once. See ⚠️ Important: Token Limits below.

Skill Structure

Each skill includes:

skills/[skill-name]/
├── SKILL.md              # Complete documentation
├── .claude-plugin/
│   └── plugin.json       # Plugin metadata
├── templates/            # Ready-to-copy templates
├── scripts/              # Automation scripts
└── references/           # Extended documentation

---

Recent Additions

May 2026