owl-listener/designer-skills

documentation-template

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

Ver código-fonte
Documento original do Skill

Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.

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
do mesmo repositório

Mais Skills

Todos os Skills
owl-listener
Comunidade

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

instalações
2
GitHub Stars
2,9 mil
Atualizado
5 de set.
owl-listener
Comunidade

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.

instalações
2
GitHub Stars
2,9 mil
Atualizado
5 de set.
owl-listener
Comunidade

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.

instalações
2
GitHub Stars
2,9 mil
Atualizado
5 de set.
owl-listener
Comunidade

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

instalações
2
GitHub Stars
2,9 mil
Atualizado
5 de set.