owl-listener
112 skills with substantive source documentation and an official publisher or observed installation demand. Read each skill’s original documentation through its card.
owl-listenercritique-composition
Critique a rendered screen's composition — balance, whitespace, rhythm, and gestalt grouping. Use when a layout feels off but hierarchy is fine. For emphasis and eye flow specifically, use critique-visual-hierarchy.
- installations
- 3
- GitHub Stars
- 3 k
- Mis à jour
- 5 sept.
owl-listeneraccessibility-audit
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use accessibility-test-plan (prototyping-testing).
- installations
- 2
- GitHub Stars
- 3 k
- Mis à jour
- 5 sept.
owl-listeneraesthetic-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).
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listeneranimation-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.
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenercritique-information-density
Critique a rendered screen's density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure. Use when a screen feels overwhelming. For the underlying choice-count principle, use hicks-law (interaction-design).
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenerdata-visualization
Select chart types and design data encodings — marks, axes, labels, and accessible chart styling. Use when presenting data graphically. Owns chart selection and encoding only; the categorical colour ramp itself belongs to color-system.
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenerdocumentation-template
Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use component-spec.
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenerdoherty-threshold
Apply the Doherty Threshold — keep system response under 400ms to preserve user flow. Use when diagnosing perceived slowness or setting a performance budget. For what to show during unavoidable waits, use loading-states.
- installations
- 2
- GitHub Stars
- 3 k
- Mis à jour
- 5 sept.
owl-listenerfeedback-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.
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenerform-design
Design a form end to end — field order, grouping, validation, and completion. Use when the artifact is a form. For product-wide error strategy use error-handling-ux; for first-run signup use onboarding-design.
- installations
- 2
- GitHub Stars
- 3 k
- Mis à jour
- 5 sept.
owl-listenerinformation-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).
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenerinterfaces-that-feel
Apply an emotional resonance lens to a UI that is technically correct but flat, prescribing changes at the copy, motion, and interaction layer. Use when a design tests fine but lands cold. For the polish-perception argument, use aesthetic-usability (ui-design).
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenerjobs-to-be-done
Map functional, emotional, and social jobs with outcome expectations. Use when reframing decisions around motivation rather than features. For who the user is, use user-persona.
- installations
- 2
- GitHub Stars
- 3 k
- Mis à jour
- 5 sept.
owl-listenerlocalization-design
Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use ux-writing (designer-toolkit).
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenermetrics-definition
Define UX metrics and KPIs that connect design decisions to measurable outcomes. Use when choosing what to measure. For presenting the results afterwards, use design-impact-reporting (design-ops).
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenermicro-interaction-spec
Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use animation-principles; for multi-state components use state-machine.
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenermotion-system
Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use animation-principles (interaction-design).
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenernaming-convention
Establish naming rules for components, tokens, and layers with patterns and worked examples. Use when names are inconsistent or being set. For what the tokens actually contain, use design-token.
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenersearch-ux
Design search — query input, zero results, refinement, and result presentation. Use when users retrieve rather than browse. For browse structure, use navigation-patterns.
- installations
- 2
- GitHub Stars
- 3 k
- Mis à jour
- 5 sept.
owl-listenerservice-blueprint
Map service delivery across frontstage actions, backstage processes, and supporting systems. Use when staff and operations are part of the experience. For the customer-visible layer only, use experience-map.
- installations
- 2
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listenersurvey-design
Design unbiased survey instruments — question wording, scales, and sampling — to measure attitudes at scale. Use when you need quantitative breadth. For behavioural experiments, use a-b-test-design (prototyping-testing).
- installations
- 2
- GitHub Stars
- 3 k
- Mis à jour
- 5 sept.
owl-listeneragent-ready
Assess a Figma file's agent readiness before generating code or modifying designs. Use when reading design context from Figma via MCP, generating code from Figma components, creating or updating components in a Figma file, or when code output quality seems poor and the cause may be file quality. Triggers on: Figma file, design context, generate from Figma, implement this design, messy file, bad output, component code.
- installations
- 1
- GitHub Stars
- 13
- Mis à jour
- 13 mai
owl-listenera-b-test-design
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use test-scenario.
- installations
- 1
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.
owl-listeneraccessibility-test-plan
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use accessibility-audit (design-systems).
- installations
- 1
- GitHub Stars
- 2,9 k
- Mis à jour
- 5 sept.