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

2,059
installs: 0 up / 0 down, score 0.00
votes: 3,024
repo stars
Updated: 2 months ago
In the catalog since: 1 Oct 2026
From: owl-listener/designer-skills

Get it through your agent npx skills add owl-listener/designer-skills@pattern-library

Skill instructions

Rendered from the published SKILL.md, 21 lines.

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

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

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "pattern-library"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository owl-listener/designer-skills
Listing on skills.sh

From owl-listener/designer-skills via skills.sh

Related skills

component-spec
Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use `pattern-library`.
2,132 installs
web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
13,195 installs
documentation-template
Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use `component-spec`.
2,068 installs
design-system-patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
15,998 installs
iii-architecture-patterns
Use when composing iii primitives into backend architectures: durable workflows, reactive backends, observer side effects, agentic pipelines, event-driven CQRS, effect pipelines, and trigger-transform-action automation.
3,979 installs

More from owl-listener/designer-skills

presentation-deck
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.
3,072 installs
typography-scale
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).
2,560 installs
visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
2,506 installs
illustration-style
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
2,505 installs
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
2,466 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.

Skill instructions

Pattern Library

What You Do

Pattern Entry Structure

Categories

Best Practices