owl-listener/designer-skills

documentation-template

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

Ver código fuente
Documento original del Skill

Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.

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
del mismo repositorio

Más Skills

Todos los Skills
owl-listener
Comunidad

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

instalaciones
2
GitHub Stars
2,9 mil
Actualizado
5 sept
owl-listener
Comunidad

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.

instalaciones
2
GitHub Stars
2,9 mil
Actualizado
5 sept
owl-listener
Comunidad

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.

instalaciones
2
GitHub Stars
2,9 mil
Actualizado
5 sept
owl-listener
Comunidad

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

instalaciones
2
GitHub Stars
2,9 mil
Actualizado
5 sept