← LeaderboardThe Skill Leaderboard

pattern-library

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`.

Published by Owl-Listener ↗Owl-Listener/designer-skills

Try your first task

pattern-library

Start a fresh conversation. Replace the highlighted placeholders.

Use pattern-library to create a reusable pattern-library entry for [recurring UX problem], covering the problem, solution, anatomy, variants, behavior, accessibility, examples and anti-patterns, and related patterns.

Required inputs

  • [recurring UX problem]

User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗

SKILL.md

name: pattern-librarydescription: 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