All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Product & Design/pattern-library

pattern-library

Original：🇺🇸 English

Translated

Structure a pattern library entry with problem context, solution pattern, usage examples, and related patterns.

3installs

Sourceowl-listener/designer-skills

Added on2026-03-15

NPX Install

npx skill4agent add owl-listener/designer-skills pattern-library

Tags

Translated version includes tags in frontmatter

pattern-library design-system ux-design accessible-design documentation-patterns

SKILL.md Content

View Translation Comparison →

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

Download

Download TranslatedIncludes original Skill.md

(1.7 KB)Download Original(781 B)

Related Skills

onboard

Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.

logo-design-guide

Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons, logo concepts. Triggers: logo design, create logo, brand logo, logo generation, ai logo, logo maker, icon design, brand mark, logo concept, startup logo, app icon logo

competitor-teardown

Structured competitive analysis with feature matrices, SWOT, positioning maps, and UX review. Covers research frameworks, pricing comparison, review mining, and visual deliverables. Use for: market research, competitive intelligence, investor decks, product strategy, sales enablement. Triggers: competitor analysis, competitive analysis, competitor teardown, market research, competitive intelligence, swot analysis, competitor comparison, market landscape, competitor review, competitive landscape, feature comparison, market positioning

teach-impeccable

One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.