Pattern Library
Structure a pattern entry, problem context, solution, usage examples, and related...
Install
npx skills add Owl-Listener/designer-skills --skill pattern-library -g -a claude-code -y- Repository
- Owl-Listener/designer-skills3.2k
- Category
- Engineering
- Updated
- 2mo ago
- License
- MIT
- Context cost
- Lightabout 264 tokens
- Runs scripts
- No, instructions only
What it does
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
