10 Essential Claude Code Skills That Supercharge Developer Productivity

The way developers interact with AI coding assistants has fundamentally shifted. Claude Code, Anthropic's agentic command-line coding tool, already ships with powerful capabilities — but its true potential unlocks through the Skills ecosystem. Skills are modular, composable extensions that constrain and guide Claude's behavior for specific workflows, turning a general-purpose coding assistant into a specialized powerhouse for any task you throw at it.

In this guide, we'll walk through the 10 most practical Claude Code Skills available today — from discovering and creating your own skills, to automating browsers, generating presentations, and shipping full-stack applications. By the end, you'll have a curated toolkit you can install in minutes and immediately put to work.

What Are Claude Code Skills?

At their core, Skills are structured instruction sets — typically Markdown files — that tell Claude Code how to approach a specific category of tasks. Rather than writing long, repetitive prompts every time you need a code review or a Git commit message, a Skill packages that expertise into a reusable, automatically loaded module.

Think of it this way: Claude Code is a brilliant generalist. Skills turn it into a team of specialists.

A Skill can define:

Behavioral constraints — rules Claude follows unconditionally for a task type
Workflow steps — ordered procedures (e.g., a 9-step brainstorming framework)
Domain knowledge — curated reference information (e.g., 67 UI design styles)
Output templates — structured formats for consistent results

Skills live in your `~/.claude/skills/` directory and are loaded contextually when relevant. They compose cleanly — you can run a brainstorming Skill to plan a feature, then hand off to a full-stack development Skill to implement it, and finally use a code-review Skill to validate the result.

Installation Fundamentals

Before diving into individual Skills, let's establish the installation pattern you'll use throughout this guide.

The Standard Install Command

All Skills follow the same installation syntax:

bash

1	`npx skills add <GitHub repository URL> --skill <skill-name> --agent claude-code -g -y`

Parameter breakdown:

--skill <skill-name> — Specifies which skill to install from a multi-skill repository. If omitted, all skills in the repository are installed.
--agent claude-code — Targets Claude Code as the host agent (as opposed to other AI tools)
-g — Global installation, making the skill available across all your projects
-y — Automatic confirmation, skipping interactive prompts

Verifying Installation

After installing a skill, confirm it's loaded:

bash

# List all installed skills
ls ~/.claude/skills/
 
# Or ask Claude Code directly
claude "list my installed skills"

One-Command Bulk Install

If you want to set up everything covered in this article at once, here's the complete script:

bash

#!/bin/bash
 
# Claude Code Skills - Complete Setup
 
# 1. Skill discovery and creation
npx skills add https://github.com/vercel-labs/skills --skill find-skills --agent claude-code -g -y
npx skills add https://github.com/anthropics/skills --skill skill-creator --agent claude-code -g -y
 
# 2. Official Anthropic skills bundle (docx, pdf, xlsx, commit, code-review, etc.)
npx skills add https://github.com/anthropics/skills --agent claude-code -g -y
 
# 3. Browser automation
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser --agent claude-code -g -y
 
# 4. Structured brainstorming (20+ composable skills)
npx skills add https://github.com/obra/superpowers --agent claude-code -g -y
 
# 5. UI/UX design intelligence
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max --agent claude-code -g -y
 
# 6. Natural writing tone
npx skills add https://github.com/op7418/humanizer-zh --skill humanizer-zh --agent claude-code -g -y
 
# 7. Full-stack and frontend development
npx skills add https://github.com/minimax-ai/skills --skill fullstack-dev --agent claude-code -g -y
npx skills add https://github.com/minimax-ai/skills --skill frontend-dev --agent claude-code -g -y
 
# 8. Presentation generation
npx skills add https://github.com/minimax-ai/skills --skill pptx-generator --agent claude-code -g -y
 
# 9. React Native development
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills --agent claude-code -g -y
 
echo "All skills installed successfully!"

Now let's explore each Skill in depth.

Skill 1: find-skills — The Skill Discovery Engine

Repository: vercel-labs/skills

This is the meta-skill — the one that helps you find every other skill. Before you build anything custom, ask find-skills whether someone has already solved your problem.

How It Works

The skill indexes publicly available Claude Code Skills across GitHub and the broader community. You query it in natural language, and it returns ranked recommendations with installation commands.

Installation

bash

1	`npx skills add https://github.com/vercel-labs/skills --skill find-skills --agent claude-code -g -y`

Usage Examples

Once installed, simply ask Claude Code what you need:

code

You: "Is there a skill for generating database migration files?"
 
Claude: [Searching with find-skills]
  Found 3 relevant skills:
  1. db-migrator (community/skills) - Generates and manages DB migrations
     Install: npx skills add community/skills --skill db-migrator --agent claude-code -g -y
  2. prisma-tools (dev-tasks/skills) - Prisma-specific migration workflow
     Install: npx skills add dev-tasks/skills --skill prisma-tools --agent claude-code -g -y
  3. fullstack-dev (minimax-ai/skills) - Includes migration generation as part of full-stack workflow
     Install: npx skills add minimax-ai/skills --skill fullstack-dev --agent claude-code -g -y

Best Practices

Start here first. Before writing a custom skill, check if one exists.
Use specific queries. "Skill for parsing CSV files with streaming" yields better results than "file handling."
Check repository activity. Prefer skills from actively maintained repos with recent commits.

Skill 2: skill-creator — Build Your Own Skills

Repository: anthropics/skills

What happens when find-skills comes up empty? You build your own. skill-creator is Anthropic's official tool for authoring custom Skills, and it dramatically lowers the barrier to creating high-quality, reusable instructions.

Why This Matters

Every team has repetitive workflows that are unique to their context — internal API conventions, deployment checklists, compliance documentation. Rather than pasting the same prompt instructions every time, you package them into a Skill once and reuse them forever.

Installation

bash

1	`npx skills add https://github.com/anthropics/skills --skill skill-creator --agent claude-code -g -y`

Creating a Custom Skill: Step by Step

Here's a practical example — creating a Skill that generates standardized pull request descriptions:

code

You: "Create a skill that generates PR descriptions following our team convention:
      - Title format: [JIRA-Ticket] Brief description
      - Sections: Summary, Changes, Testing, Screenshots (if UI), Checklist
      - Auto-detect ticket number from branch name"
 
Claude: [Using skill-creator]
  I'll create a PR description generator skill for your team...
 
  Step 1: Analyzing requirements...
  Step 2: Designing skill structure...
  Step 3: Writing instruction file...
 
  Skill created at: ~/.claude/skills/pr-generator/skill.md
 
  You can invoke it with: "Use pr-generator to create a description for my current branch"

The generated skill.md might look like this:

markdown

---
name: pr-generator
description: Generates standardized PR descriptions from branch context and diff
---
# PR Description Generator
 
## Rules
1. Extract JIRA ticket number from the current branch name (format: feature/JIRA-123-description)
2. Generate a title in the format: [JIRA-XXX] Brief description
3. Structure the body into these sections:
 
## Template
 
### Summary
[One paragraph explaining what this PR does and why]
 
### Changes
- [Bullet list of key changes, derived from git diff]
 
### Testing
- [How to test these changes]
- [Edge cases covered]
 
### Screenshots
[If the PR includes UI changes, note that screenshots should be attached]
 
### Checklist
- [ ] Code follows team style guide
- [ ] Unit tests added/updated
- [ ] No console.log or debug statements
- [ ] Documentation updated (if applicable)
 
## Behavior
- Always run `git diff main` to understand changes
- Parse branch name with regex pattern: `(feature|fix|refactor)/([A-Z]+-\d+)`
- If no JIRA ticket found in branch name, prompt the user

Advanced Tip: Composing Skills

You can create Skills that reference other Skills. For instance, a "release-workflow" Skill might invoke both your custom "pr-generator" and the built-in "commit" Skill to produce a complete release package.

Skill 3: anthropics/skills — The Official Collection

Repository: anthropics/skills

This is Anthropic's officially maintained skill bundle — a curated set covering fundamental development tasks. Installing the entire repository gives you immediate access to a broad range of capabilities.

Installation

bash

1	`npx skills add https://github.com/anthropics/skills --agent claude-code -g -y`

Included Skills Overview

The bundle contains skills for common development operations:

docx — Read, create, and manipulate Microsoft Word documents
pdf — Extract text, generate PDFs, and process existing PDF files
xlsx — Work with Excel spreadsheets (data extraction, formatting, chart generation)
frontend-design — Apply design principles and generate UI component code
tech-article-writer — Structure and draft technical blog posts or documentation
commit — Analyze staged changes and generate semantically meaningful Git commit messages
code-review — Perform structured code reviews with categorized feedback

Practical Example: Automated Code Reviews

Without the skill, you'd prompt: "Review my staged changes for bugs, style issues, and performance problems."

With the skill loaded, Claude automatically applies a structured review framework:

code

You: "Review the changes in my current branch against main"
 
Claude: [Using code-review skill]
  ## Code Review: feature/user-authentication
 
  ### Summary
  8 files changed, 342 insertions(+), 28 deletions(-)
 
  ### Critical Issues (2)
  1. **Security**: Password comparison uses `==` instead of constant-time comparison
     - File: src/auth/service.ts, line 47
     - Recommendation: Use `crypto.timingSafeEqual()` to prevent timing attacks
 
  2. **Bug**: Session token not invalidated on password change
     - File: src/auth/handler.ts, line 112
     - Recommendation: Add token revocation to password update flow
 
  ### Suggestions (4)
  1. Consider extracting validation logic into a shared middleware
  2. The error messages could leak information about existing users
  3. ...
 
  ### Positive Notes
  - Clean separation of concerns between auth service and handler
  - Good test coverage for the happy path

Why Use the Official Bundle

These skills are battle-tested and regularly updated by Anthropic's own team. They represent best practices for each domain and serve as excellent reference implementations if you're learning to write your own skills.

Skill 4: agent-browser — Browser Automation

Repository: vercel-labs/agent-browser

This skill transforms Claude Code into a browser automation agent capable of navigating web pages, filling forms, extracting data, and running scripted interactions — all from the terminal.

Installation

bash

1	`npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser --agent claude-code -g -y`

Core Capabilities

The skill leverages browser automation (typically Playwright under the hood) to provide:

Web scraping — Extract structured data from any public web page
Form automation — Fill and submit forms programmatically
Monitoring — Watch pages for changes and alert on conditions
Testing — Run automated UI test flows against your web applications
Screenshot capture — Take snapshots of pages at specific states

Real-World Use Case: Competitive Price Monitoring

code

You: "Monitor https://store.example.com/product/123 for price drops below $100.
      Check every 2 hours and notify me in the terminal."
 
Claude: [Using agent-browser]
  Price monitoring configured successfully.
 
  Target URL: https://store.example.com/product/123
  Threshold: $100.00
  Check interval: Every 2 hours
  Notification: Terminal alert + system notification
 
  Current price detected: $129.99
  Status: Above threshold — monitoring continues...
 
  [2 hours later]
  Price change detected: $94.99
  ⚠️ BELOW THRESHOLD — Current price is $94.99

Real-World Use Case: End-to-End Test Automation

code

You: "Run a smoke test on localhost:3000: load the homepage,
      navigate to login, sign in with test@example.com/Test1234,
      verify the dashboard loads, and take a screenshot of each step."
 
Claude: [Using agent-browser]
  Running smoke test suite...
 
  Step 1: Navigate to http://localhost:3000 ✅
  Step 2: Click 'Sign In' button ✅
  Step 3: Fill email: test@example.com ✅
  Step 4: Fill password: •••••••• ✅
  Step 5: Submit login form ✅
  Step 6: Verify dashboard URL matches /dashboard ✅
  Step 7: Verify 'Welcome back' text is visible ✅
 
  Screenshots saved to: ./test-screenshots/smoke-test/
  All steps passed. ✅

Performance Considerations

Browser automation is resource-intensive. For CI/CD pipelines, consider:

Running in headless mode to reduce memory usage
Setting explicit timeouts to prevent hung sessions
Reusing browser contexts when running multiple sequential tests

Skill 5: superpowers — Structured Brainstorming and Development Workflows

Repository: obra/superpowers

This is one of the most ambitious skill collections available. Superpowers packages over 20 composable skills that span the entire software development lifecycle — from initial ideation through test-driven development to code review and Git commits.

Installation

bash

1	`npx skills add https://github.com/obra/superpowers --agent claude-code -g -y`

The Brainstorming Skill: A Nine-Step Framework

The standout feature is the structured brainstorming workflow. Instead of diving straight into code, it forces a disciplined exploration of the problem space:

code

You: "I want to build an AI-powered meal planning app"
 
Claude: [Using brainstorming skill]
  Let's work through this systematically.
 
  **Step 1: Core Problem**
  What specific problem are you solving? Who finds meal planning difficult
  and why? Let's define the pain point precisely before thinking about solutions.
 
  **Step 2: Target Users**
  Who exactly will use this? Busy professionals? Parents? Athletes with
  specific nutritional requirements? This shapes everything that follows.
 
  **Step 3: Competitive Analysis**
  Existing solutions include: Paprika, Mealime, Yummly, Eat This Much.
  What do they do well? Where do they fall short?
 
  **Step 4: Differentiation**
  What makes your approach unique? AI-generated recipes? Dietary restriction
  awareness? Integration with grocery delivery? Budget optimization?
 
  **Step 5: MVP Scope**
  What's the smallest version that delivers value? Suggested MVP:
  - Weekly meal plan generation based on dietary preferences
  - Automatic grocery list creation
  - Recipe scaling for household size
 
  **Step 6: Technology Choices**
  Frontend: React Native (cross-platform mobile)
  Backend: Node.js + PostgreSQL
  AI: Recipe generation via Claude API
  Infrastructure: Vercel + Supabase
 
  **Step 7: Risk Assessment**
  - AI hallucinating unsafe food combinations (mitigation: validation layer)
  - API costs scaling with users (mitigation: caching popular plans)
  - Complex allergy cross-contamination rules (mitigation: curated database)
 
  **Step 8: Success Metrics**
  - Week-1 retention > 40%
  - Average session generates at least 1 complete meal plan
  - NPS score > 30 after first month
 
  **Step 9: Action Plan**
  Week 1: Backend API + database schema
  Week 2: AI recipe generation pipeline
  Week 3: Mobile frontend
  Week 4: Testing, polish, beta launch

Other Skills in the Superpowers Collection

The repository includes additional composable skills for:

TDD (Test-Driven Development) — Write tests first, then implement
Code Review — Structured review with severity-categorized feedback
Commit Message Generation — Conventional commit format with context analysis
Refactoring — Safe, incremental code improvement patterns

Why This Skill Stands Out

Most AI tools rush to code. Superpowers enforces disciplined thinking first. The brainstorming alone can save days of wasted effort on ill-conceived features.

Skill 6: ui-ux-pro-max — Design Intelligence

Repository: nextlevelbuilder/ui-ux-pro-max-skill

This skill embeds comprehensive UI/UX design knowledge directly into Claude Code, including 67 design styles, 96 color palettes, 57 font pairings, and support for 13 frontend technology stacks.

Installation

bash

1	`npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max --agent claude-code -g -y`

Key Features

67 design styles — Glassmorphism, Neumorphism, Brutalism, Minimalism, Cyberpunk, and more
96 curated color palettes — Professionally designed combinations for different moods and industries
57 font pairings — Tested typography combinations (heading + body)
13 tech stack templates — React, Vue, Svelte, Next.js, Tailwind CSS, and others
Responsive by default — All generated layouts adapt to mobile, tablet, and desktop

Practical Example: SaaS Landing Page

code

You: "Design a modern login page for a fintech SaaS product.
      It should feel trustworthy and tech-forward."
 
Claude: [Using ui-ux-pro-max]
  Generating design system...
 
  **Selected Design Parameters:**
  - Style: Glassmorphism with subtle gradients
  - Color Palette: "Midnight Trust" — deep navy (#0A1628),
    electric blue (#2563EB), silver (#E2E8F0)
  - Typography: Inter (headings) + JetBrains Mono (data/code elements)
  - Framework: React + Tailwind CSS
  - Layout: Split-screen — illustration left, form right
 
  Generating component code...

tsx

// LoginCard.tsx — Generated with ui-ux-pro-max
import { useState } from "react";
import { motion } from "framer-motion";
 
export default function LoginCard() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    // Authentication logic here
  };
 
  return (
    <div className="min-h-screen bg-[#0A1628] flex items-center justify-center p-4">
      {/* Left panel — branding */}
      <div className="hidden lg:flex lg:w-1/2 items-center justify-center
                      bg-gradient-to-br from-[#0A1628] to-[#1E3A5F]">
        <div className="text-center">
          <h1 className="text-5xl font-bold text-white mb-4">
            FinVault
          </h1>
          <p className="text-[#94A3B8] text-lg">
            Secure financial management, reimagined.
          </p>
        </div>
      </div>
 
      {/* Right panel — glassmorphism login card */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="w-full max-w-md p-8 rounded-2xl
                   bg-white/5 backdrop-blur-xl border border-white/10
                   shadow-2xl"
      >
        <h2 className="text-2xl font-semibold text-white mb-6">
          Welcome back
        </h2>
        <form onSubmit={handleSubmit} className="space-y-5">
          {/* Form fields with glass effect */}
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@company.com"
            className="w-full px-4 py-3 rounded-lg
                       bg-white/5 border border-white/10
                       text-white placeholder-[#64748B]
                       focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB]
                       transition-all outline-none"
          />
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Password"
            className="w-full px-4 py-3 rounded-lg
                       bg-white/5 border border-white/10
                       text-white placeholder-[#64748B]
                       focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB]
                       transition-all outline-none"
          />
          <button
            type="submit"
            disabled={isLoading}
            className="w-full py-3 rounded-lg bg-[#2563EB] text-white
                       font-medium hover:bg-[#1D4ED8]
                       disabled:opacity-50 transition-all"
          >
            {isLoading ? "Signing in..." : "Sign in"}
          </button>
        </form>
      </motion.div>
    </div>
  );
}

Design Workflow Tip

Use this Skill iteratively. Start with a broad request, then refine: "Make it more minimal," "Switch to warm colors," "Add a dark mode variant." The skill remembers your design context within the session.

Skill 7: humanizer-zh — Natural Writing Enhancement

Repository: op7418/humanizer-zh

While originally designed for Chinese content optimization, this skill addresses a universal problem: AI-generated text often sounds robotic, overly formal, and structurally monotonous. The principles apply across languages and use cases.

Installation

bash

1	`npx skills add https://github.com/op7418/humanizer-zh --skill humanizer-zh --agent claude-code -g -y`

The Problem It Solves

AI writing tends to exhibit several telltale patterns:

Excessively parallel structure — Every paragraph follows the same template
Hedge-heavy language — "It is worth noting that," "One could argue that"
Emotional flatness — No personality, no voice, no conviction
Formulaic transitions — "Furthermore," "In conclusion," "Moreover"
Overly broad statements — Vague claims without specificity

Before and After Comparison

code

You: "Rewrite this product description to sound more natural:
 
      'In today's rapidly evolving digital landscape, enterprises must
      leverage innovative solutions to maintain competitive advantage and
      drive sustainable growth. Our platform delivers cutting-edge
      capabilities that empower organizations to transform their
      operations.'"

code

Claude: [Using humanizer-zh]
 
  **Rewritten version:**
 
  Running a business without the right tools is a grind.
  We built this platform because we got tired of watching teams
  juggle spreadsheets, Slack threads, and five different apps
  just to ship a single feature. One dashboard, fewer meetings,
  actual progress.
 
  Companies using it report 30% faster delivery cycles —
  not because of some AI magic, but because we removed
  the friction that slows people down.

When to Use This Skill

Writing README files and documentation that developers will actually read
Drafting blog posts or newsletters
Preparing internal communications and announcements
Any situation where you need persuasive, engaging prose rather than corporate-speak

Skill 8: pptx-generator — Presentation Generation

Repository: minimax-ai/skills

This skill generates complete PowerPoint presentations from a natural language description — including slide layouts, charts, data visualization, and themed styling.

Installation

bash

1	`npx skills add https://github.com/minimax-ai/skills --skill pptx-generator --agent claude-code -g -y`

Core Features

Intelligent page layout — Automatically determines optimal slide arrangements
Chart generation — Bar, line, pie, and funnel charts from your data
Multiple themes — Professional templates with consistent branding
Animation support — Transition effects and element animations
Data visualization — Converts raw numbers into meaningful graphics

Practical Example: Quarterly Business Review

code

You: "Generate a quarterly report presentation with:
      - Q3 2025 results
      - Revenue: $2.4M (up 18% YoY)
      - 15,000 new users (total: 82,000)
      - Top 3 products: Analytics Suite ($800K),
        Dashboard Pro ($620K), API Gateway ($480K)
      - Next quarter priorities: Mobile app launch,
        Enterprise tier, EU market expansion"

code

Claude: [Using pptx-generator]
  Presentation generated successfully.
 
  File: quarterly_report_q3_2025.pptx
  Slides: 14
 
  Structure:
  - Slide 1: Title — "Q3 2025 Business Review"
  - Slide 2: Executive Summary — Key metrics at a glance
  - Slide 3: Revenue Overview — $2.4M total (+18% YoY) [bar chart]
  - Slide 4: Revenue Trend — 6-quarter trajectory [line chart]
  - Slide 5-7: Product Breakdown — Per-product revenue with pie chart
  - Slide 8: User Growth — 15K new users, 82K total [funnel visualization]
  - Slide 9: User Engagement Metrics
  - Slide 10-11: Operational Highlights
  - Slide 12: Challenges and Learnings
  - Slide 13: Q4 Priorities — Mobile launch, Enterprise, EU expansion
  - Slide 14: Appendix — Detailed data tables
 
  Theme: Modern corporate (dark blue + white)
  Charts: 4 embedded visualizations

Pro Tip

For best results, provide specific data points rather than vague descriptions. The skill generates much better charts when you give it actual numbers, percentages, and dates.

Skill 9: fullstack-dev — End-to-End Development

Repository: minimax-ai/skills

This is a comprehensive full-stack development skill that guides Claude through architecture decisions, API design, database modeling, authentication, and deployment — producing production-ready project scaffolding.

Installation

bash

1	`npx skills add https://github.com/minimax-ai/skills --skill fullstack-dev --agent claude-code -g -y`

What It Covers

Architecture design — Technology selection, system design, microservice decomposition
RESTful API design — Route planning, request/response schemas, error handling
Database modeling — Schema design, migration planning, ORM configuration
Authentication and authorization — JWT, session management, role-based access
Deployment configuration — Docker, CI/CD pipelines, environment management
Performance optimization — Caching strategies, query optimization, load balancing

Practical Example: Blog Platform Backend

code

1	`You: "Set up a blog platform backend with user authentication,`
2	`post management, comments, and tags."`

code

Claude: [Using fullstack-dev]
  Analyzing requirements and selecting technology stack...
 
  **Recommended Stack:**
  - Runtime: Node.js 20+
  - Framework: Express.js with TypeScript
  - Database: PostgreSQL 16
  - ORM: Prisma
  - Authentication: JWT + bcrypt
  - Validation: Zod
  - Testing: Vitest + Supertest
  - Containerization: Docker
 
  Generating project structure...
 
  blog-api/
  ├── src/
  │   ├── routes/
  │   │   ├── auth.routes.ts
  │   │   ├── posts.routes.ts
  │   │   ├── comments.routes.ts
  │   │   └── tags.routes.ts
  │   ├── middleware/
  │   │   ├── auth.middleware.ts
  │   │   ├── error.middleware.ts
  │   │   └── validate.middleware.ts
  │   ├── services/
  │   ├── models/
  │   └── utils/
  ├── prisma/
  │   └── schema.prisma
  ├── docker-compose.yml
  └── tsconfig.json

The generated Prisma schema might look like:

prisma

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  username  String   @unique
  password  String
  bio       String?
  avatarUrl String?
  posts     Post[]
  comments  Comment[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
 
model Post {
  id        String    @id @default(cuid())
  title     String
  slug      String    @unique
  content   String
  published Boolean   @default(false)
  author    User      @relation(fields: [authorId], references: [id])
  authorId  String
  tags      Tag[]
  comments  Comment[]
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
 
  @@index([published, createdAt])
}
 
model Comment {
  id        String   @id @default(cuid())
  content   String
  post      Post     @relation(fields: [postId], references: [id])
  postId    String
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
 
  @@index([postId])
}
 
model Tag {
  id    String @id @default(cuid())
  name  String @unique
  posts Post[]
}

Skill 10: frontend-dev — Frontend Specialization

Repository: minimax-ai/skills

Where fullstack-dev covers breadth, frontend-dev goes deep into frontend-specific concerns: component architecture, state management, performance optimization, accessibility, and responsive design.

Installation

bash

1	`npx skills add https://github.com/minimax-ai/skills --skill frontend-dev --agent claude-code -g -y`

Core Competencies

Component design — Atomic design principles, compound components, render delegation
State management — Redux, Zustand, Pinia, Jotai — with selection guidance based on project scale
Performance — Code splitting, lazy loading, virtual scrolling, memoization strategies
Responsive design — Mobile-first CSS, container queries, fluid typography
Accessibility — ARIA patterns, keyboard navigation, screen reader compatibility
Browser compatibility — Polyfill strategies, progressive enhancement, feature detection

Practical Example: Shopping Cart Component

code

You: "Build a shopping cart component in React with:
      - Add/remove items
      - Quantity adjustment
      - Real-time total calculation
      - LocalStorage persistence
      - Responsive layout"

The skill would generate a complete implementation using Zustand for state management, Tailwind CSS for styling, and localStorage persistence:

tsx

// store/cart-store.ts
import { create } from "zustand";
import { persist } from "zustand/middleware";
 
interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  imageUrl: string;
}
 
interface CartState {
  items: CartItem[];
  addItem: (item: Omit<CartItem, "quantity">) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clearCart: () => void;
  total: () => number;
  itemCount: () => number;
}
 
export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],
 
      addItem: (item) =>
        set((state) => {
          const existing = state.items.find((i) => i.id === item.id);
          if (existing) {
            return {
              items: state.items.map((i) =>
                i.id === item.id
                  ? { ...i, quantity: i.quantity + 1 }
                  : i
              ),
            };
          }
          return { items: [...state.items, { ...item, quantity: 1 }] };
        }),
 
      removeItem: (id) =>
        set((state) => ({
          items: state.items.filter((i) => i.id !== id),
        })),
 
      updateQuantity: (id, quantity) =>
        set((state) => ({
          items: quantity <= 0
            ? state.items.filter((i) => i.id !== id)
            : state.items.map((i) =>
                i.id === id ? { ...i, quantity } : i
              ),
        })),
 
      clearCart: () => set({ items: [] }),
 
      total: () =>
        get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
 
      itemCount: () =>
        get().items.reduce((sum, i) => sum + i.quantity, 0),
    }),
    { name: "shopping-cart" } // localStorage key
  )
);

tsx

// components/ShoppingCart.tsx
import { useCartStore } from "../store/cart-store";
 
export function ShoppingCart() {
  const { items, removeItem, updateQuantity, total, itemCount } =
    useCartStore();
 
  return (
    <div className="max-w-2xl mx-auto p-4">
      <h2 className="text-2xl font-bold mb-4">
        Cart ({itemCount()} items)
      </h2>
 
      {items.length === 0 ? (
        <p className="text-gray-500 text-center py-8">
          Your cart is empty
        </p>
      ) : (
        <>
          <ul className="space-y-3">
            {items.map((item) => (
              <li
                key={item.id}
                className="flex items-center gap-4 p-3 rounded-lg border"
              >
                <img
                  src={item.imageUrl}
                  alt={item.name}
                  className="w-16 h-16 object-cover rounded"
                />
                <div className="flex-1">
                  <h3 className="font-medium">{item.name}</h3>
                  <p className="text-gray-600">
                    ${item.price.toFixed(2)}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() =>
                      updateQuantity(item.id, item.quantity - 1)
                    }
                    className="w-8 h-8 rounded-full border
                               flex items-center justify-center
                               hover:bg-gray-100 transition-colors"
                  >
                    −
                  </button>
                  <span className="w-8 text-center">
                    {item.quantity}
                  </span>
                  <button
                    onClick={() =>
                      updateQuantity(item.id, item.quantity + 1)
                    }
                    className="w-8 h-8 rounded-full border
                               flex items-center justify-center
                               hover:bg-gray-100 transition-colors"
                  >
                    +
                  </button>
                </div>
                <button
                  onClick={() => removeItem(item.id)}
                  className="text-red-500 hover:text-red-700
                             transition-colors text-sm"
                >
                  Remove
                </button>
              </li>
            ))}
          </ul>
 
          <div className="mt-6 pt-4 border-t flex justify-between
                          items-center text-lg font-semibold">
            <span>Total</span>
            <span>${total().toFixed(2)}</span>
          </div>
 
          <button
            className="mt-4 w-full py-3 bg-blue-600 text-white
                       rounded-lg font-medium hover:bg-blue-700
                       transition-colors"
          >
            Proceed to Checkout
          </button>
        </>
      )}
    </div>
  );
}

Skill Selection by Role

Not every developer needs every skill. Here's a quick guide based on your role and workflow:

Backend Developers

anthropics/skills — Essential code review and Git commit skills
fullstack-dev — Architecture and API design guidance
skill-creator — Build custom skills for your team's internal APIs

Frontend Developers

frontend-dev — Deep frontend expertise on demand
ui-ux-pro-max — Design intelligence without a designer
anthropics/skills — The frontend-design skill for rapid prototyping

Product Managers and Tech Leads

superpowers — Structured brainstorming for feature planning
pptx-generator — Rapid presentation creation
humanizer-zh — Natural-sounding documentation and communication
find-skills — Discover new capabilities as needs arise

Full-Stack / Solo Developers

find-skills — Always discover what's possible
superpowers — Think before you code
fullstack-dev + frontend-dev — Complete development coverage
agent-browser — Testing and automation
skill-creator — Customize everything to your workflow

Best Practices and Common Pitfalls

Do: Compose Skills Sequentially

Skills work best when chained. A productive session might look like:

Use superpowers/brainstorming to define the feature
Switch to fullstack-dev to scaffold the backend
Apply frontend-dev for the UI layer
Run anthropics/code-review to validate everything
Use anthropics/commit for a clean commit message

Do: Create Project-Specific Skills

Use skill-creator to encode your team's conventions:

Naming conventions for branches, files, and variables
Internal API design patterns
Testing requirements and coverage thresholds
Deployment checklists

Don't: Install Everything Blindly

More skills means more context loaded into each Claude session. Install only what you actively use. You can always add more later with npx skills add.

Don't: Treat Skills as Black Boxes

Read the actual skill files in ~/.claude/skills/. Understanding how a skill instructs Claude helps you:

Debug unexpected behavior
Customize instructions for your specific needs
Learn the patterns for writing better custom skills

Don't: Forget to Update

Skills are evolving rapidly. Periodically check for updates:

bash

1	`# Re-run the install command to update`
2	`npx skills add https://github.com/anthropics/skills --agent claude-code -g -y`

Conclusion

Claude Code's Skills ecosystem transforms the tool from a capable coding assistant into a modular, extensible development platform. The ten skills covered here — from the foundational find-skills and skill-creator, through specialized tools like agent-browser and pptx-generator, to the deep domain expertise of fullstack-dev and frontend-dev — represent a cross-section of what's possible today.

The key insight: Skills are not just prompts. They're behavioral contracts. A well-crafted skill constrains Claude's behavior in productive ways, ensuring consistent, high-quality output across sessions and team members. The best workflows come from combining multiple skills — using structured thinking skills before implementation skills, and validation skills after.

Start with the official Anthropic bundle and find-skills. Add domain-specific skills as real needs emerge. And when you can't find what you need, use skill-creator to build it yourself — then consider open-sourcing it for the community.

The ecosystem is growing fast. The awesome-claude-skills repository on GitHub tracks new additions, and the community is actively contributing skills for everything from D3 chart generation to MCP server construction. The best time to start building your skill toolkit is now.

1	`# List all installed skills`
2	`ls ~/.claude/skills/`
3
4	`# Or ask Claude Code directly`
5	`claude "list my installed skills"`

1	`You: "Is there a skill for generating database migration files?"`
2
3	`Claude: [Searching with find-skills]`
4	`Found 3 relevant skills:`
5	`1. db-migrator (community/skills) - Generates and manages DB migrations`
6	`Install: npx skills add community/skills --skill db-migrator --agent claude-code -g -y`
7	`2. prisma-tools (dev-tasks/skills) - Prisma-specific migration workflow`
8	`Install: npx skills add dev-tasks/skills --skill prisma-tools --agent claude-code -g -y`
9	`3. fullstack-dev (minimax-ai/skills) - Includes migration generation as part of full-stack workflow`
10	`Install: npx skills add minimax-ai/skills --skill fullstack-dev --agent claude-code -g -y`

1	`You: "Create a skill that generates PR descriptions following our team convention:`
2	`- Title format: [JIRA-Ticket] Brief description`
3	`- Sections: Summary, Changes, Testing, Screenshots (if UI), Checklist`
4	`- Auto-detect ticket number from branch name"`
5
6	`Claude: [Using skill-creator]`
7	`I'll create a PR description generator skill for your team...`
8
9	`Step 1: Analyzing requirements...`
10	`Step 2: Designing skill structure...`
11	`Step 3: Writing instruction file...`
12
13	`Skill created at: ~/.claude/skills/pr-generator/skill.md`
14
15	`You can invoke it with: "Use pr-generator to create a description for my current branch"`

1	`---`
2	`name: pr-generator`
3	`description: Generates standardized PR descriptions from branch context and diff`
4	`---`
5	`# PR Description Generator`
6
7	`## Rules`
8	`1. Extract JIRA ticket number from the current branch name (format: feature/JIRA-123-description)`
9	`2. Generate a title in the format: [JIRA-XXX] Brief description`
10	`3. Structure the body into these sections:`
11
12	`## Template`
13
14	`### Summary`
15	`[One paragraph explaining what this PR does and why]`
16
17	`### Changes`
18	`- [Bullet list of key changes, derived from git diff]`
19
20	`### Testing`
21	`- [How to test these changes]`
22	`- [Edge cases covered]`
23
24	`### Screenshots`
25	`[If the PR includes UI changes, note that screenshots should be attached]`
26
27	`### Checklist`
28	`- [ ] Code follows team style guide`
29	`- [ ] Unit tests added/updated`
30	`- [ ] No console.log or debug statements`
31	`- [ ] Documentation updated (if applicable)`
32
33	`## Behavior`
34	- Always run `git diff main` to understand changes
35	- Parse branch name with regex pattern: `(feature\|fix\|refactor)/([A-Z]+-\d+)`
36	`- If no JIRA ticket found in branch name, prompt the user`

1	`You: "Review the changes in my current branch against main"`
2
3	`Claude: [Using code-review skill]`
4	`## Code Review: feature/user-authentication`
5
6	`### Summary`
7	`8 files changed, 342 insertions(+), 28 deletions(-)`
8
9	`### Critical Issues (2)`
10	1. Security: Password comparison uses `==` instead of constant-time comparison
11	`- File: src/auth/service.ts, line 47`
12	- Recommendation: Use `crypto.timingSafeEqual()` to prevent timing attacks
13
14	`2. Bug: Session token not invalidated on password change`
15	`- File: src/auth/handler.ts, line 112`
16	`- Recommendation: Add token revocation to password update flow`
17
18	`### Suggestions (4)`
19	`1. Consider extracting validation logic into a shared middleware`
20	`2. The error messages could leak information about existing users`
21	`3. ...`
22
23	`### Positive Notes`
24	`- Clean separation of concerns between auth service and handler`
25	`- Good test coverage for the happy path`

1	`#!/bin/bash`
2
3	`# Claude Code Skills - Complete Setup`
4
5	`# 1. Skill discovery and creation`
6	`npx skills add https://github.com/vercel-labs/skills --skill find-skills --agent claude-code -g -y`
7	`npx skills add https://github.com/anthropics/skills --skill skill-creator --agent claude-code -g -y`
8
9	`# 2. Official Anthropic skills bundle (docx, pdf, xlsx, commit, code-review, etc.)`
10	`npx skills add https://github.com/anthropics/skills --agent claude-code -g -y`
11
12	`# 3. Browser automation`
13	`npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser --agent claude-code -g -y`
14
15	`# 4. Structured brainstorming (20+ composable skills)`
16	`npx skills add https://github.com/obra/superpowers --agent claude-code -g -y`
17
18	`# 5. UI/UX design intelligence`
19	`npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max --agent claude-code -g -y`
20
21	`# 6. Natural writing tone`
22	`npx skills add https://github.com/op7418/humanizer-zh --skill humanizer-zh --agent claude-code -g -y`
23
24	`# 7. Full-stack and frontend development`
25	`npx skills add https://github.com/minimax-ai/skills --skill fullstack-dev --agent claude-code -g -y`
26	`npx skills add https://github.com/minimax-ai/skills --skill frontend-dev --agent claude-code -g -y`
27
28	`# 8. Presentation generation`
29	`npx skills add https://github.com/minimax-ai/skills --skill pptx-generator --agent claude-code -g -y`
30
31	`# 9. React Native development`
32	`npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills --agent claude-code -g -y`
33
34	`echo "All skills installed successfully!"`

1	`You: "Monitor https://store.example.com/product/123 for price drops below $100.`
2	`Check every 2 hours and notify me in the terminal."`
3
4	`Claude: [Using agent-browser]`
5	`Price monitoring configured successfully.`
6
7	`Target URL: https://store.example.com/product/123`
8	`Threshold: $100.00`
9	`Check interval: Every 2 hours`
10	`Notification: Terminal alert + system notification`
11
12	`Current price detected: $129.99`
13	`Status: Above threshold — monitoring continues...`
14
15	`[2 hours later]`
16	`Price change detected: $94.99`
17	`⚠️ BELOW THRESHOLD — Current price is $94.99`

1	`You: "Run a smoke test on localhost:3000: load the homepage,`
2	`navigate to login, sign in with test@example.com/Test1234,`
3	`verify the dashboard loads, and take a screenshot of each step."`
4
5	`Claude: [Using agent-browser]`
6	`Running smoke test suite...`
7
8	`Step 1: Navigate to http://localhost:3000 ✅`
9	`Step 2: Click 'Sign In' button ✅`
10	`Step 3: Fill email: test@example.com ✅`
11	`Step 4: Fill password: •••••••• ✅`
12	`Step 5: Submit login form ✅`
13	`Step 6: Verify dashboard URL matches /dashboard ✅`
14	`Step 7: Verify 'Welcome back' text is visible ✅`
15
16	`Screenshots saved to: ./test-screenshots/smoke-test/`
17	`All steps passed. ✅`

1	`You: "I want to build an AI-powered meal planning app"`
2
3	`Claude: [Using brainstorming skill]`
4	`Let's work through this systematically.`
5
6	`Step 1: Core Problem`
7	`What specific problem are you solving? Who finds meal planning difficult`
8	`and why? Let's define the pain point precisely before thinking about solutions.`
9
10	`Step 2: Target Users`
11	`Who exactly will use this? Busy professionals? Parents? Athletes with`
12	`specific nutritional requirements? This shapes everything that follows.`
13
14	`Step 3: Competitive Analysis`
15	`Existing solutions include: Paprika, Mealime, Yummly, Eat This Much.`
16	`What do they do well? Where do they fall short?`
17
18	`Step 4: Differentiation`
19	`What makes your approach unique? AI-generated recipes? Dietary restriction`
20	`awareness? Integration with grocery delivery? Budget optimization?`
21
22	`Step 5: MVP Scope`
23	`What's the smallest version that delivers value? Suggested MVP:`
24	`- Weekly meal plan generation based on dietary preferences`
25	`- Automatic grocery list creation`
26	`- Recipe scaling for household size`
27
28	`Step 6: Technology Choices`
29	`Frontend: React Native (cross-platform mobile)`
30	`Backend: Node.js + PostgreSQL`
31	`AI: Recipe generation via Claude API`
32	`Infrastructure: Vercel + Supabase`
33
34	`Step 7: Risk Assessment`
35	`- AI hallucinating unsafe food combinations (mitigation: validation layer)`
36	`- API costs scaling with users (mitigation: caching popular plans)`
37	`- Complex allergy cross-contamination rules (mitigation: curated database)`
38
39	`Step 8: Success Metrics`
40	`- Week-1 retention > 40%`
41	`- Average session generates at least 1 complete meal plan`
42	`- NPS score > 30 after first month`
43
44	`Step 9: Action Plan`
45	`Week 1: Backend API + database schema`
46	`Week 2: AI recipe generation pipeline`
47	`Week 3: Mobile frontend`
48	`Week 4: Testing, polish, beta launch`

1	`You: "Design a modern login page for a fintech SaaS product.`
2	`It should feel trustworthy and tech-forward."`
3
4	`Claude: [Using ui-ux-pro-max]`
5	`Generating design system...`
6
7	`Selected Design Parameters:`
8	`- Style: Glassmorphism with subtle gradients`
9	`- Color Palette: "Midnight Trust" — deep navy (#0A1628),`
10	`electric blue (#2563EB), silver (#E2E8F0)`
11	`- Typography: Inter (headings) + JetBrains Mono (data/code elements)`
12	`- Framework: React + Tailwind CSS`
13	`- Layout: Split-screen — illustration left, form right`
14
15	`Generating component code...`

1	`// LoginCard.tsx — Generated with ui-ux-pro-max`
2	`import { useState } from "react";`
3	`import { motion } from "framer-motion";`
4
5	`export default function LoginCard() {`
6	`const [email, setEmail] = useState("");`
7	`const [password, setPassword] = useState("");`
8	`const [isLoading, setIsLoading] = useState(false);`
9
10	`const handleSubmit = async (e: React.FormEvent) => {`
11	`e.preventDefault();`
12	`setIsLoading(true);`
13	`// Authentication logic here`
14	`};`
15
16	`return (`
17	`<div className="min-h-screen bg-[#0A1628] flex items-center justify-center p-4">`
18	`{/* Left panel — branding */}`
19	`<div className="hidden lg:flex lg:w-1/2 items-center justify-center`
20	`bg-gradient-to-br from-[#0A1628] to-[#1E3A5F]">`
21	`<div className="text-center">`
22	`<h1 className="text-5xl font-bold text-white mb-4">`
23	`FinVault`
24	`</h1>`
25	`<p className="text-[#94A3B8] text-lg">`
26	`Secure financial management, reimagined.`
27	`</p>`
28	`</div>`
29	`</div>`
30
31	`{/* Right panel — glassmorphism login card */}`
32	`<motion.div`
33	`initial={{ opacity: 0, y: 20 }}`
34	`animate={{ opacity: 1, y: 0 }}`
35	`className="w-full max-w-md p-8 rounded-2xl`
36	`bg-white/5 backdrop-blur-xl border border-white/10`
37	`shadow-2xl"`
38	`>`
39	`<h2 className="text-2xl font-semibold text-white mb-6">`
40	`Welcome back`
41	`</h2>`
42	`<form onSubmit={handleSubmit} className="space-y-5">`
43	`{/* Form fields with glass effect */}`
44	`<input`
45	`type="email"`
46	`value={email}`
47	`onChange={(e) => setEmail(e.target.value)}`
48	`placeholder="you@company.com"`
49	`className="w-full px-4 py-3 rounded-lg`
50	`bg-white/5 border border-white/10`
51	`text-white placeholder-[#64748B]`
52	`focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB]`
53	`transition-all outline-none"`
54	`/>`
55	`<input`
56	`type="password"`
57	`value={password}`
58	`onChange={(e) => setPassword(e.target.value)}`
59	`placeholder="Password"`
60	`className="w-full px-4 py-3 rounded-lg`
61	`bg-white/5 border border-white/10`
62	`text-white placeholder-[#64748B]`
63	`focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB]`
64	`transition-all outline-none"`
65	`/>`
66	`<button`
67	`type="submit"`
68	`disabled={isLoading}`
69	`className="w-full py-3 rounded-lg bg-[#2563EB] text-white`
70	`font-medium hover:bg-[#1D4ED8]`
71	`disabled:opacity-50 transition-all"`
72	`>`
73	`{isLoading ? "Signing in..." : "Sign in"}`
74	`</button>`
75	`</form>`
76	`</motion.div>`
77	`</div>`
78	`);`
79	`}`

1	`You: "Rewrite this product description to sound more natural:`
2
3	`'In today's rapidly evolving digital landscape, enterprises must`
4	`leverage innovative solutions to maintain competitive advantage and`
5	`drive sustainable growth. Our platform delivers cutting-edge`
6	`capabilities that empower organizations to transform their`
7	`operations.'"`

1	`Claude: [Using humanizer-zh]`
2
3	`Rewritten version:`
4
5	`Running a business without the right tools is a grind.`
6	`We built this platform because we got tired of watching teams`
7	`juggle spreadsheets, Slack threads, and five different apps`
8	`just to ship a single feature. One dashboard, fewer meetings,`
9	`actual progress.`
10
11	`Companies using it report 30% faster delivery cycles —`
12	`not because of some AI magic, but because we removed`
13	`the friction that slows people down.`

1	`You: "Generate a quarterly report presentation with:`
2	`- Q3 2025 results`
3	`- Revenue: $2.4M (up 18% YoY)`
4	`- 15,000 new users (total: 82,000)`
5	`- Top 3 products: Analytics Suite ($800K),`
6	`Dashboard Pro ($620K), API Gateway ($480K)`
7	`- Next quarter priorities: Mobile app launch,`
8	`Enterprise tier, EU market expansion"`

1	`Claude: [Using pptx-generator]`
2	`Presentation generated successfully.`
3
4	`File: quarterly_report_q3_2025.pptx`
5	`Slides: 14`
6
7	`Structure:`
8	`- Slide 1: Title — "Q3 2025 Business Review"`
9	`- Slide 2: Executive Summary — Key metrics at a glance`
10	`- Slide 3: Revenue Overview — $2.4M total (+18% YoY) [bar chart]`
11	`- Slide 4: Revenue Trend — 6-quarter trajectory [line chart]`
12	`- Slide 5-7: Product Breakdown — Per-product revenue with pie chart`
13	`- Slide 8: User Growth — 15K new users, 82K total [funnel visualization]`
14	`- Slide 9: User Engagement Metrics`
15	`- Slide 10-11: Operational Highlights`
16	`- Slide 12: Challenges and Learnings`
17	`- Slide 13: Q4 Priorities — Mobile launch, Enterprise, EU expansion`
18	`- Slide 14: Appendix — Detailed data tables`
19
20	`Theme: Modern corporate (dark blue + white)`
21	`Charts: 4 embedded visualizations`

1	`Claude: [Using fullstack-dev]`
2	`Analyzing requirements and selecting technology stack...`
3
4	`Recommended Stack:`
5	`- Runtime: Node.js 20+`
6	`- Framework: Express.js with TypeScript`
7	`- Database: PostgreSQL 16`
8	`- ORM: Prisma`
9	`- Authentication: JWT + bcrypt`
10	`- Validation: Zod`
11	`- Testing: Vitest + Supertest`
12	`- Containerization: Docker`
13
14	`Generating project structure...`
15
16	`blog-api/`
17	`├── src/`
18	`│ ├── routes/`
19	`│ │ ├── auth.routes.ts`
20	`│ │ ├── posts.routes.ts`
21	`│ │ ├── comments.routes.ts`
22	`│ │ └── tags.routes.ts`
23	`│ ├── middleware/`
24	`│ │ ├── auth.middleware.ts`
25	`│ │ ├── error.middleware.ts`
26	`│ │ └── validate.middleware.ts`
27	`│ ├── services/`
28	`│ ├── models/`
29	`│ └── utils/`
30	`├── prisma/`
31	`│ └── schema.prisma`
32	`├── docker-compose.yml`
33	`└── tsconfig.json`

1	`// prisma/schema.prisma`
2	`generator client {`
3	`provider = "prisma-client-js"`
4	`}`
5
6	`datasource db {`
7	`provider = "postgresql"`
8	`url = env("DATABASE_URL")`
9	`}`
10
11	`model User {`
12	`id String @id @default(cuid())`
13	`email String @unique`
14	`username String @unique`
15	`password String`
16	`bio String?`
17	`avatarUrl String?`
18	`posts Post[]`
19	`comments Comment[]`
20	`createdAt DateTime @default(now())`
21	`updatedAt DateTime @updatedAt`
22	`}`
23
24	`model Post {`
25	`id String @id @default(cuid())`
26	`title String`
27	`slug String @unique`
28	`content String`
29	`published Boolean @default(false)`
30	`author User @relation(fields: [authorId], references: [id])`
31	`authorId String`
32	`tags Tag[]`
33	`comments Comment[]`
34	`createdAt DateTime @default(now())`
35	`updatedAt DateTime @updatedAt`
36
37	`@@index([published, createdAt])`
38	`}`
39
40	`model Comment {`

1	`// store/cart-store.ts`
2	`import { create } from "zustand";`
3	`import { persist } from "zustand/middleware";`
4
5	`interface CartItem {`
6	`id: string;`
7	`name: string;`
8	`price: number;`
9	`quantity: number;`
10	`imageUrl: string;`
11	`}`
12
13	`interface CartState {`
14	`items: CartItem[];`
15	`addItem: (item: Omit<CartItem, "quantity">) => void;`
16	`removeItem: (id: string) => void;`
17	`updateQuantity: (id: string, quantity: number) => void;`
18	`clearCart: () => void;`
19	`total: () => number;`
20	`itemCount: () => number;`
21	`}`
22
23	`export const useCartStore = create<CartState>()(`
24	`persist(`
25	`(set, get) => ({`
26	`items: [],`
27
28	`addItem: (item) =>`
29	`set((state) => {`
30	`const existing = state.items.find((i) => i.id === item.id);`
31	`if (existing) {`
32	`return {`
33	`items: state.items.map((i) =>`
34	`i.id === item.id`
35	`? { ...i, quantity: i.quantity + 1 }`
36	`: i`
37	`),`
38	`};`
39	`}`
40	`return { items: [...state.items, { ...item, quantity: 1 }] };`

1	`You: "Build a shopping cart component in React with:`
2	`- Add/remove items`
3	`- Quantity adjustment`
4	`- Real-time total calculation`
5	`- LocalStorage persistence`
6	`- Responsive layout"`

1	`// components/ShoppingCart.tsx`
2	`import { useCartStore } from "../store/cart-store";`
3
4	`export function ShoppingCart() {`
5	`const { items, removeItem, updateQuantity, total, itemCount } =`
6	`useCartStore();`
7
8	`return (`
9	`<div className="max-w-2xl mx-auto p-4">`
10	`<h2 className="text-2xl font-bold mb-4">`
11	`Cart ({itemCount()} items)`
12	`</h2>`
13
14	`{items.length === 0 ? (`
15	`<p className="text-gray-500 text-center py-8">`
16	`Your cart is empty`
17	`</p>`
18	`) : (`
19	`<>`
20	`<ul className="space-y-3">`
21	`{items.map((item) => (`
22	`<li`
23	`key={item.id}`
24	`className="flex items-center gap-4 p-3 rounded-lg border"`
25	`>`
26	`<img`
27	`src={item.imageUrl}`
28	`alt={item.name}`
29	`className="w-16 h-16 object-cover rounded"`
30	`/>`
31	`<div className="flex-1">`
32	`<h3 className="font-medium">{item.name}</h3>`
33	`<p className="text-gray-600">`
34	`${item.price.toFixed(2)}`
35	`</p>`
36	`</div>`
37	`<div className="flex items-center gap-2">`
38	`<button`
39	`onClick={() =>`
40	`updateQuantity(item.id, item.quantity - 1)`
41	`}`
42	`className="w-8 h-8 rounded-full border`
43	`flex items-center justify-center`
44	`hover:bg-gray-100 transition-colors"`
45	`>`
46	`−`
47	`</button>`
48	`<span className="w-8 text-center">`
49	`{item.quantity}`
50	`</span>`
51	`<button`
52	`onClick={() =>`
53	`updateQuantity(item.id, item.quantity + 1)`
54	`}`
55	`className="w-8 h-8 rounded-full border`
56	`flex items-center justify-center`
57	`hover:bg-gray-100 transition-colors"`
58	`>`
59	`+`
60	`</button>`
61	`</div>`
62	`<button`
63	`onClick={() => removeItem(item.id)}`
64	`className="text-red-500 hover:text-red-700`
65	`transition-colors text-sm"`
66	`>`
67	`Remove`
68	`</button>`
69	`</li>`
70	`))}`
71	`</ul>`
72
73	`<div className="mt-6 pt-4 border-t flex justify-between`
74	`items-center text-lg font-semibold">`
75	`<span>Total</span>`
76	`<span>${total().toFixed(2)}</span>`
77	`</div>`
78
79	`<button`
80	`className="mt-4 w-full py-3 bg-blue-600 text-white`
81	`rounded-lg font-medium hover:bg-blue-700`
82	`transition-colors"`
83	`>`
84	`Proceed to Checkout`
85	`</button>`
86	`</>`
87	`)}`
88	`</div>`
89	`);`
90	`}`

10 Essential Claude Code Skills That Supercharge Developer Productivity

What Are Claude Code Skills?

Skills live in your ~/.claude/skills/ directory and are loaded contextually when relevant. They compose cleanly — you can run a brainstorming Skill to plan a feature, then hand off to a full-stack development Skill to implement it, and finally use a code-review Skill to validate the result.

Installation Fundamentals

The Standard Install Command

Verifying Installation

One-Command Bulk Install

Now let's explore each Skill in depth.

Skill 1: find-skills — The Skill Discovery Engine

How It Works

Installation

Usage Examples

Best Practices

Skill 2: skill-creator — Build Your Own Skills

Why This Matters

Installation

Creating a Custom Skill: Step by Step

Advanced Tip: Composing Skills

You can create Skills that reference other Skills. For instance, a "release-workflow" Skill might invoke both your custom "pr-generator" and the built-in "commit" Skill to produce a complete release package.

Skill 3: anthropics/skills — The Official Collection

Installation

Included Skills Overview

Practical Example: Automated Code Reviews

Why Use the Official Bundle

These skills are battle-tested and regularly updated by Anthropic's own team. They represent best practices for each domain and serve as excellent reference implementations if you're learning to write your own skills.

Skill 4: agent-browser — Browser Automation

Installation

Core Capabilities

Real-World Use Case: Competitive Price Monitoring

Real-World Use Case: End-to-End Test Automation

Performance Considerations

Skill 5: superpowers — Structured Brainstorming and Development Workflows

Installation

The Brainstorming Skill: A Nine-Step Framework

Other Skills in the Superpowers Collection

Why This Skill Stands Out

Most AI tools rush to code. Superpowers enforces disciplined thinking first. The brainstorming alone can save days of wasted effort on ill-conceived features.

Skill 6: ui-ux-pro-max — Design Intelligence

Installation

Key Features

Practical Example: SaaS Landing Page

Design Workflow Tip

Use this Skill iteratively. Start with a broad request, then refine: "Make it more minimal," "Switch to warm colors," "Add a dark mode variant." The skill remembers your design context within the session.

Skill 7: humanizer-zh — Natural Writing Enhancement

Installation

The Problem It Solves

Before and After Comparison

When to Use This Skill

Skill 8: pptx-generator — Presentation Generation

Installation

Core Features

Practical Example: Quarterly Business Review

Pro Tip

For best results, provide specific data points rather than vague descriptions. The skill generates much better charts when you give it actual numbers, percentages, and dates.

Skill 9: fullstack-dev — End-to-End Development

Installation

What It Covers

Practical Example: Blog Platform Backend

Skill 10: frontend-dev — Frontend Specialization

Installation

Core Competencies

Practical Example: Shopping Cart Component

Skill Selection by Role

Backend Developers

Frontend Developers

Product Managers and Tech Leads

Full-Stack / Solo Developers

Best Practices and Common Pitfalls

Do: Compose Skills Sequentially

Do: Create Project-Specific Skills

Don't: Install Everything Blindly

Don't: Treat Skills as Black Boxes

Don't: Forget to Update

Conclusion

Skills live in your `~/.claude/skills/` directory and are loaded contextually when relevant. They compose cleanly — you can run a brainstorming Skill to plan a feature, then hand off to a full-stack development Skill to implement it, and finally use a code-review Skill to validate the result.