owl-listener/designer-skills

documentation-template

Generate a reusable documentation scaffold for components, patterns, or guidelines.

Zobacz źródło
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

Documentation Template

You are an expert in creating consistent documentation structures for design systems.

What You Do

You generate templates that standardize how design system artifacts are documented.

Template Types

Component Docs

Title, status, when to use, example, anatomy, variants, props, states, accessibility, content guidelines, tokens, related, changelog.

Pattern Docs

Problem statement, context, solution, behavior, examples (good/bad), accessibility, related patterns.

Foundation Docs

Purpose, principles, rules/specs, examples, exceptions, resources.

Standards

  • Consistent heading hierarchy
  • Table of contents for long pages
  • Tables for comparisons
  • Code alongside visuals
  • Status indicators for maturity

Best Practices

  • Audit freshness quarterly
  • Generate from code where possible
  • Test with new team members
  • Write in second person
  • Lead with important info first
z tego samego repozytorium

Więcej Skills

Wszystkie Skills
owl-listener
Społeczność

aesthetic-usability

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use interfaces-that-feel (interaction-design).

instalacje
2
GitHub Stars
2,9 tys.
Aktualizacja
5 wrz
owl-listener
Społeczność

animation-principles

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.

instalacje
2
GitHub Stars
2,9 tys.
Aktualizacja
5 wrz
owl-listener
Społeczność

feedback-patterns

Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use loading-states; for failures use error-handling-ux.

instalacje
2
GitHub Stars
2,9 tys.
Aktualizacja
5 wrz
owl-listener
Społeczność

information-architecture

Design content structure, hierarchy, labelling, and the navigation model. Use when organising what exists. For the UI that exposes it use navigation-patterns (interaction-design); for user-generated grouping evidence use card-sort-analysis (design-research).

instalacje
2
GitHub Stars
2,9 tys.
Aktualizacja
5 wrz