Pattern Library
- 943 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
pattern-library is a Claude Code skill that creates reusable, well-documented UI design pattern entries with problem context, solution anatomy, variants, usage examples, and related patterns for developers who need consi
About
pattern-library is a design documentation skill from owl-listener/designer-skills that structures recurring UX solutions into reusable pattern library entries. Each entry includes a problem statement, solution description, component anatomy with required versus optional elements, context-specific variants, responsive adaptations, and behavioral notes. Developers and designers reach for pattern-library when a product team needs a shared catalog of proven interface patterns instead of one-off screen specs. The skill standardizes how patterns are written so engineers and agents can reference consistent guidance across features and repos.
- Creates standardized pattern library entries with problem context, solution, anatomy, variants, behavior, examples and a
- Structures every entry with 8 consistent sections including Related Patterns to build a connected knowledge graph
- Focuses on problem-first documentation with real examples, anti-patterns and inclusive design considerations
- Covers Navigation, Input, Display, Feedback and Onboarding pattern categories
- Connects patterns into reusable design system knowledge that improves over time with new research
Pattern Library by the numbers
- 943 all-time installs (skills.sh)
- +42 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #442 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill pattern-libraryAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 943 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you document reusable UI design patterns?
Create reusable, well-documented UI design pattern entries that capture recurring UX solutions for consistent interfaces.
Who is it for?
Design-system maintainers and frontend teams cataloging recurring UX patterns like navigation, forms, or empty states.
Skip if: One-off screen implementations with no intent to reuse or standardize the solution across the product.
When should I use this skill?
User wants to document a recurring UX pattern with problem context, anatomy, variants, and cross-references to related patterns.
What you get
Pattern library entry with problem statement, solution, anatomy, variants, behavior, and related patterns
- pattern library entry document
Files
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What sections does pattern-library include in each entry?
pattern-library entries contain a problem statement, solution description, component anatomy, variants for different contexts, behavioral notes, usage examples, and links to related patterns for a complete reusable record.
How is pattern-library different from handoff-spec?
pattern-library documents reusable UX solutions and their anatomy for a catalog, while handoff-spec translates one approved screen into engineer-ready measurements, states, and assets for immediate implementation.
Is Pattern Library safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.