pattern-library
owl-listener/designer-skills
Document reusable design patterns with problem context, solution, anatomy, and related patterns.
What is pattern-library?
Structure pattern library entries that capture recurring UX solutions in a reusable format. Use this when documenting design patterns that solve recurring problems across multiple contexts, rather than single-component APIs.
- Create pattern entries with problem statement, solution, and key principles
- Document anatomy including components, layout, and required vs optional elements
- Capture variants for different contexts and responsive adaptations
- Describe user flows, state changes, and error handling behavior
- Provide good examples and anti-patterns with explanations
- Include accessibility considerations and assistive tech support
How to install pattern-library
npx skills add https://github.com/owl-listener/designer-skills --skill pattern-libraryHow to use pattern-library
- 1.Define the problem statement and contexts where the pattern applies
- 2.Describe the core solution and key principles
- 3.Document the anatomy with required and optional elements
- 4.Create variants for different contexts and screen sizes
- 5.Detail the behavior including user flows and state changes
- 6.Provide real-world examples and anti-patterns with explanations
- 7.Add accessibility requirements and assistive technology considerations
- 8.Map related patterns and how they combine or build upon each other
Use cases
- Documenting a modal dialog pattern used across multiple products
- Creating a form validation feedback pattern with variants for different input types
- Capturing a progressive disclosure pattern for complex settings interfaces
- Building a pattern for empty states with context-specific messaging
- Documenting a multi-step onboarding flow pattern with branching logic
- Design systems teams
- UX/UI designers building pattern libraries
- Design documentation leads
- Product teams standardizing recurring solutions
pattern-library FAQ
Use pattern-library for recurring solutions to UX problems across contexts. Use component-spec for documenting a single component's API and props.
Navigation, input, display, feedback, and onboarding patterns are the primary categories.
Yes, including anti-patterns with explanations helps designers understand what not to do and why the recommended pattern is better.
Use the Related Patterns section to map similar patterns, commonly combined patterns, and patterns that build upon each other into a knowledge graph.
Document inclusive design considerations, assistive technology support, keyboard navigation, screen reader compatibility, and WCAG compliance relevant to the pattern.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
presentation-deck
Structure design presentations that persuade your specific audience and drive decisions.
prototype-strategy
Choose the right prototype fidelity and method to answer your design question efficiently.
readable-measure
Set optimal line length (45–75 characters) for comfortable reading across devices and type sizes.
research-repository
Organize research findings so teams stop redoing studies and build on accumulated evidence.
responsive-design
Design layouts and interactions that adapt across screen sizes and input methods.
search-ux
Design search experiences that help users find what they need with minimal friction.