pattern-documentation

Featured

Document a multi-component pattern (form validation, empty states, error handling): when to use, composition, states, a11y, anti-patterns. Triggers: document this pattern, write the pattern page. One named component: use usage-guidelines. Choosing a component: component-decision-tree.

Data & Documents 196 stars 7 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%
76
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Pattern documentation A skill for writing documentation for design system patterns. Patterns are distinct from components: a component is a discrete, reusable UI element; a pattern is a recurring solution composed from multiple components that addresses a specific user or product problem. Form validation, empty states, error handling, progressive disclosure — these are patterns. ## Before you begin: verify references Before doing anything else, confirm that every file listed in this skill's frontmatter `references:` field exists at its relative path from this SKILL.md. If any are missing, stop — the install is incomplete. This usually means a third-party installer (for example `npx skills install`) flattened the skill into a standalone folder and dropped the repo-root `knowledge-notes/` directory this skill depends on. Tell the user to reinstall using a supported method from `1-INSTALL.md` (git clone, or the `.plugin` bundle in Cowork) and to run `verify-install.sh` from the install root to confirm the fix. Only proceed without the references if the user explicitly says to — and if they do, state clearly in your output that it was produced in degraded mode without the pack's reference material. ## Context Pattern documentation is systematically underdone in most design systems. Teams document components in detail and leave patterns as implicit knowledge — accumulated through convention, absorbed during onboarding, and lost when people leave. The result is parallel loca...

Details

Author
murphytrueman
Repository
murphytrueman/design-system-ops
Created
6 months ago
Last Updated
2 days ago
Language
Python
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

usage-guidelines

Write usage guidelines for one named component: when to use, when not to, edge cases, anti-patterns, a11y, quick-reference card. Triggers: usage guidelines for X, do's and don'ts for X. Choosing between components: component-decision-tree. Multi-component patterns: pattern-documentation.

196 Updated 2 days ago
murphytrueman
Testing & QA Listed

pattern

Design creation: subject-grounded direction with HTML previews, tokens, states, voice → the project DESIGN.md. Triggers: 'pattern', 'design system', 'make it look good'.

0 Updated 1 months ago
dyasnurhakim
Web & Frontend Listed

code-design-patterns

Choose, apply, and critique software design patterns — GoF (Strategy, Factory, Observer, State, Decorator, Adapter, Command), architectural (dependency injection, repository, hexagonal/ports-and-adapters, CQRS, event sourcing), concurrency (worker pool, pipeline, fan-out/fan-in, actor), distributed resilience (circuit breaker, retry/backoff, bulkhead, saga, outbox, idempotency key, rate limiter), and frontend component patterns (compound components, hooks, providers). Use whenever the work involves object-oriented or component design, class modelling, low-level design (LLD) or machine-coding problems, "design a parking lot / elevator / rate limiter"-style tasks, refactoring toward SOLID, reviewing a class design, structuring a new module or service, or any question touching design patterns, code architecture, extensibility, coupling, or code smells — even when the user never says "design pattern". Also use it to grade a design against a rubric before presenting it.

0 Updated 1 months ago
00suryavanshi00