Skip to main content
affpapa.org
RU EN
skill CX Codex

pattern-library — Claude Code skill: what it does, how to install

This skill turns recurring UX solutions into pattern entries with problem context, behavior, examples, accessibility notes, and related patterns.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code
Open on GitHub

What pattern-library does

pattern-library structures documentation for recurring UX problems. Each pattern entry can capture the problem statement, solution, anatomy, required and optional elements, context-specific variants, and responsive adaptations.

It also covers user flow, state changes, error handling, good implementations, anti-patterns, accessibility, assistive technology support, and related patterns. Entries can be organized under navigation, input, display, feedback, and onboarding. The format is meant to preserve design knowledge for reuse.

This skill is for patterns rather than a single component API. That distinction matters: the source assigns component-level API documentation to component-spec.

What it helps with

  • document a recurring UX problem
  • structure a reusable pattern entry
  • describe variants and interface behavior
  • record good implementations and anti-patterns
  • connect a pattern with related solutions

Example prompts for the agent

  • Create a pattern entry for an empty state with the problem, solution, variants, behavior, and accessibility sections.
  • Document a navigation pattern with good implementation examples, anti-patterns, and related patterns.
  • Review this pattern entry and add error handling, responsive adaptations, and assistive technology support.

How to install pattern-library

1Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code

2Manually: put the files in place

~/.claude/skills/pattern-library/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/pattern-library/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about pattern-library

How do I install pattern-library in Claude Code?

Run npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code, then run npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code again. The skill file is at ~/.claude/skills/pattern-library/SKILL.md.

What does pattern-library do?

It creates structured entries for recurring UX solutions. The entry can cover the problem, solution, anatomy, variants, behavior, examples, accessibility, and related patterns.

How is pattern-library different from component-spec?

pattern-library documents recurring solutions and their context. component-spec is used for the API of a single component.

Source text

SKILL.md · MIT 
---
name: pattern-library
description: Structure a pattern entry — problem context, solution, usage examples, and related patterns. Use when documenting a recurring solution rather than a component. For a single component's API, use `component-spec`.
---
# Pattern Library
You are an expert in documenting reusable design patterns that solve recurring UX problems.
## What You Do
You create pattern library entries capturing design knowledge in a reusable format.
## Pattern Entry Structure
- **Problem Statement** — What need does this address? What contexts?
- **Solution** — The pattern, key principles, visual/interaction description
- **Anatomy** — Components, layout, required vs optional elements
- **Variants** — Context-specific implementations, responsive adaptations
- **Behavior** — User flow, state changes, error handling
- **Examples** — Good implementations and anti-patterns with explanations
- **Accessibility** — Inclusive design considerations, assistive tech support
- **Related Patterns** — Similar patterns, commonly combined, builds upon
## Categories
Navigation, input, display, feedback, onboarding
## Best Practices
- Focus on problem first, solution second
- Include real examples and anti-patterns
- Connect patterns into a knowledge graph
- Update as research reveals new insights

© Owl-Listener · MIT · Owl-Listener/designer-skills

Similar skills

Everything for Design →
dotnet-design-pattern-review official github Reviews selected C#/.NET code for design patterns and suggests improvements without editing files. Use it when you need an architecture-focused code review. 11,609installs command-pattern patterns.dev Teaches AI agents how to implement the Command pattern in JavaScript and TypeScript. Useful for queuing tasks, scheduling actions, and building undo/redo flows. CX Codex +1 645installs factory-pattern patterns.dev Teaches the agent to build objects with factory functions. Useful when creation logic depends on config or environment. CX Codex +1 634installs ux-design Donchitos Authors section-by-section game UX specifications, HUD layouts, and accessibility rules. Helps game developers draft UI flows. CX Codex +1 443installs impeccable pbakaus A skill for your coding agent that designs and reworks interfaces: landing pages, dashboards, forms, iOS and Android screens. Useful when the UI needs real design decisions, not guesswork. CX Codex +1 361,300installs uizze-ui UIZZE Guides the agent through layout fixes, typography adjustments, and UI state handling. Helpful when improving component hierarchy using existing project tokens. CX Codex +1 144,000installs

From the same set109

accessibility-test-plan Plans accessibility testing sessions with assistive technology and real users. Useful when preparing user flows for WCAG compliance. CX Codex +1 2,100installs interview-script Creates a structured user interview guide with open questions and facilitator notes. Use it before qualitative research interviews. CX Codex +1 2,100installs design-rationale Writes a design rationale that ties a decision to user needs, business goals and principles. Useful before a review or a handoff. CX Codex +1 2,100installs card-sort-analysis Processes open and closed card sorting data to generate similarity matrices and propose user-centered navigation categories. CX Codex +1 2,100installs affinity-diagram This skill groups observations and quotes from interviews into themed clusters and writes insight statements. Useful when you have many sources to synthesise. CX Codex +1 2,100installs documentation-template Generates reusable documentation scaffolds for design system components, patterns, and foundations. Use it when setting a shared documentation standard across your team. CX Codex +1 2,100installs naming-convention Sets one naming scheme for components, tokens and layers so names stop drifting between files. CX Codex +1 2,100installs empathy-map Builds an empathy map for one user or segment across four quadrants, so the team shares the same picture of the user. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor