Pattern Library
Document recurring UX solutions as reusable pattern entries your agent can draft for design systems and product wikis.
Overview
Pattern Library is an agent skill most often used in Build (also Ship review, Launch content) that structures reusable UX pattern entries with problem context, solution anatomy, examples, and related patterns.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill pattern-libraryWhat is this skill?
- Nine-section entry template: problem, solution, anatomy, variants, behavior, examples, accessibility, related patterns
- Categories aligned to navigation, input, display, feedback, and onboarding
- Explicit good examples and anti-patterns with explanations
- Accessibility and assistive-tech considerations built into every entry
- Related-patterns graph to connect reusable UX knowledge
- Nine-section pattern entry structure
- Five pattern categories: navigation, input, display, feedback, onboarding
Adoption & trust: 565 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You keep solving the same UX problems ad hoc without a reusable, citable format for your design system or docs.
Who is it for?
Solo builders maintaining a lightweight design system or documenting UI decisions while shipping a web or mobile product.
Skip if: Teams that only need pixel-perfect mockups with no written pattern catalog, or when no recurring UX problem has been identified yet.
When should I use this skill?
You need a reusable design pattern entry with problem context, solution, anatomy, variants, behavior, examples, accessibility, and related patterns.
What do I get? / Deliverables
You get a complete pattern-library entry draft ready to paste into Notion, a wiki, or component docs—with anti-patterns and accessibility called out.
- Structured pattern-library markdown entry
- Anti-pattern callouts with explanations
- Related-patterns linkage section
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Pattern libraries live where product and UX knowledge is captured during build—before ship review and launch polish. Docs is the canonical shelf because the skill outputs structured documentation artifacts, not Figma frames or code.
Where it fits
Capture how filter chips should behave across breakpoints before implementation merges.
Draft a full pattern entry for empty states in the analytics dashboard wiki.
Document shipped modal behavior and error handling as the canonical pattern after QA.
Record prototype onboarding steps as a pattern skeleton before committing to the full build.
How it compares
Use for structured UX knowledge capture instead of unstructured design chat threads.
Common Questions / FAQ
Who is pattern-library for?
Indie and solo builders (and small product teams) who document UI patterns for SaaS, mobile, or content products and want agent-drafted entries that match a design-system style.
When should I use pattern-library?
During Build docs when formalizing components; in Ship review when capturing what shipped; at Launch when publishing help or marketing UX explanations; whenever a recurring navigation, input, display, feedback, or onboarding problem needs a standard write-up.
Is pattern-library safe to install?
Review the Security Audits panel on this Prism page for install source and file integrity before adding the skill to your agent; the skill itself is documentation guidance with no required API keys in the SKILL.md excerpt.
SKILL.md
READMESKILL.md - Pattern Library
# 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