Claude Code Skills

A collection of Claude Code skills for modern web development with Convex, Vercel AI SDK, and TypeScript.

Note: Next.js skills have been removed since Vercel now publishes official agent skills at https://github.com/vercel-labs/agent-skills. Convex skills here remain ours and custom.

Installation

npm

npx add-skill fluid-tools/claude-skills

bun

bunx add-skill fluid-tools/claude-skills

pnpm

pnpm dlx add-skill fluid-tools/claude-skills

Interactive installer supports Cursor, VS Code, Claude Code, etc.

Directory Structure

skills/
├── convex-actions-scheduling/     # Crons, background jobs, orchestration
├── convex-anti-patterns/          # Critical mistakes to avoid
├── convex-components/             # Reusable backend modules
├── convex-fundamentals/           # Core mental model, function types
├── convex-helpers-patterns/       # RLS, triggers, rate limiting
├── convex-performance-patterns/   # Indexes, denormalization, OCC
├── convex-schema-validators/      # Schema design, validators
├── planning-with-files/           # Manus-style persistent planning
├── react-useeffect/               # useEffect best practices
├── typescript-strict-mode/        # No-any rule, type safety
├── vercel-ai-sdk/                 # useChat, streamText, tool calling
├── vercel-react-best-practices/   # 40+ React/Next.js perf rules
├── web-design-guidelines/         # UI/UX accessibility audit

Skill Categories

Convex Skills (7 skills)

Fundamentals: Core mental model, function types, layered architecture
Schema & Types: Schema design, validators, TypeScript integration
Components: Creating reusable backend modules
Helpers: convex-helpers patterns (RLS, triggers, rate limiting)
Actions & Scheduling: Crons, background jobs, orchestration
Performance: Indexes, denormalization, OCC patterns
Anti-patterns: Critical mistakes to avoid

TypeScript Skills (1 skill)

Strict Mode: No-any rule, type alternatives, utility types

AI SDK Skills (1 skill)

Vercel AI SDK v5: useChat, streamText, tool calling, embeddings, MCP

About Composability

Composability is treated as an architectural principle embedded within framework-specific skills rather than a standalone skill:

Convex: "Layered Architecture" pattern (public surface → internal primitives → orchestration) and "Model Layer" pattern in convex-fundamentals
Components: Reusable backend modules in convex-components

These patterns are framework-specific and belong in their respective skills.

Development

.claude/skills/ is the source of truth for skill development
skills/ is the distribution surface for npx add-skill
Sync: cp -r .claude/skills/* skills/ before publishing

Origin: Next.js Eval Results

This project originated as a POC to improve Next.js eval scores published by Vercel at https://nextjs.org/evals.

Baseline (before skills)

Model	Success Rate
Claude Haiku 4.5	32%
Claude Sonnet 4.5	32%

Skilled Runs (after skills)

Model	Success Rate	Expected Leaderboard Slot
Claude Haiku 4.5 "Skilled"	78% (39/50)	1
Claude Sonnet 4.5 "Skilled"	76% (38/50)	2

Result Snapshot

Claude Haiku 4.5:

📊 Results: ════════════════════════════════════════════════════════════════════════════════

Eval	Claude Code
000-app-router-migration-simple	✅✅✅ (204.8s)
001-server-component	✅✅✅ (94.4s)
002-client-component	✅✅✅ (94.7s)
003-cookies	✅✅✅ (136.7s)
004-search-params	✅✅✅ (219.1s)
005-react-use-api	✅✅✅ (138.0s)
006-server-metadata	✅✅✅ (91.4s)
007-client-metadata	✅✅❌ (86.0s)
008-generate-static-params	❌✅❌ (83.0s)
009-og-images	✅✅✅ (108.0s)
010-route-handlers	✅✅✅ (69.1s)
011-client-server-form	✅✅✅ (167.9s)
012-parallel-routes	✅✅✅ (157.7s)
013-pathname-server	❌❌❌ (70.8s)
014-server-routing	✅✅❌ (94.0s)
015-server-actions-exports	✅✅❌ (69.6s)
016-client-cookies	❌✅❌ (65.9s)
017-use-search-params	✅✅❌ (59.7s)
018-use-router	✅✅✅ (72.6s)

...

fluid-tools/claude-skills

README