58 skills · Browse catalog

Build with patterns, ship with confidence

Install Patterns.dev skills into Cursor, Claude Code, and Codex. Design, rendering, and performance guidance stays close while you build.

Get Started

Works with

Claude Claude Code
Cursor Cursor
OpenAI Codex CLI
Gemini Gemini CLI
Antigravity Antigravity
OpenCode OpenCode

Patterns as skills

Patterns embedded in your workflow

Structured skill packs grounded in Patterns.dev. Better architectural calls, smarter rendering strategies, and performance-minded code from the first draft.

Design
Composable patterns like Singleton, Observer, Hooks, and Compound for clean architecture and easier long-term maintenance.
Performance
Practical tactics for loading, splitting, prefetching, and bundle control to keep interfaces fast and responsive.
Rendering
Playbooks for SSR, SSG, streaming, islands, and selective hydration based on route and UX goals.
Three frameworks
Focused skill tracks for JavaScript, React, and Vue so teams install only what the stack needs.

Install

One command, any harness

Install by skill name and let the CLI wire the right destination for the environment.

  • Install by name. Use skill IDs like ai-ui-patterns without directory paths.
  • Auto-detection. Cursor, Claude Code, and Codex locations are detected and configured automatically.
  • Manual option. Clone PatternsDev/skills on GitHub and copy skill folders directly for explicit control over installation.

Works with .agents/skills/, .claude/skills/, and .codex/skills/.

install

JavaScript

$ npx skills add PatternsDev/skills/javascript

React

$ npx skills add PatternsDev/skills/react

Vue

$ npx skills add PatternsDev/skills/vue

Specific skill

$ npx skills add PatternsDev/skills --skill ai-ui-patterns

See all available skills in the skills catalog.

Download

Prefer a download instead?

Same skills, delivered as a ZIP to your inbox.