Owl Listener
- 272 skills
- 0 followers
- 1.7k repo stars
- 2 weeks ago last updated
- ▌ Heuristic Evaluation 2 · owl-listenerUse after a build to evaluate usability against Nielsen's 10 heuristics and run cognitive walkthroughs of every key task. Dispatches the heuristic-evaluator agent in parallel with design-critic and accessibility-reviewer, then feeds findings into the reconciliation protocol. This is the usability lens — "will people actually be able to use this?" — distinct from craft critique and accessibility audit
- ▌ Jakobs Law · owl-listenerApply Jakob's Law — users expect your product to work like the others they already use. Use when deciding whether to innovate on a familiar pattern. For OS-mandated conventions specifically, use `platform-conventions` (ui-design).
- ▌ Teslers Law · owl-listenerApply Tesler's Law — every process has irreducible complexity that someone must absorb. Use when deciding whether the product or the user carries it. For reducing apparent choice, use `hicks-law`.
- ▌ Law Of Figure Ground · owl-listenerApply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use `von-restorff-effect`.
- ▌ Platform Conventions · owl-listenerDesign to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use `responsive-design`; for matching competitor patterns use `jakobs-law` (interaction-design).
- ▌ Peak End Rule · owl-listenerApply the Peak-End Rule — a flow is remembered by its most intense moment and its last. Use when designing completion, celebration, or cancellation moments. For sustaining engagement mid-flow, use `zeigarnik-effect`.
- ▌ Zeigarnik Effect · owl-listenerApply the Zeigarnik Effect — incomplete tasks stay mentally active. Use when designing progress indicators, saved drafts, and return hooks. For the emotional shape of the ending, use `peak-end-rule`.
- ▌ Conversational UX · owl-listenerDesign voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use `form-design`.
- ▌ Behavioural Analytics · owl-listener bundleRead funnels, retention curves, and event data as a designer — separating a design problem from a tracking artefact. Use when handed product data you did not design and asked why people drop off. For choosing what to measure, use `metrics-definition` (ux-strategy); for running a controlled test, use `a-b-test-design` (prototyping-testing).
- ▌ Concept Selection · owl-listenerChoose between competing concepts against criteria fixed in advance, and record what each rejected concept was testing. Use when several directions are alive and one has to win. For picking which problem to work on, use `opportunity-framework` (ux-strategy); for deciding by production traffic, use `a-b-test-design`.
- ▌ Parallel Concepts · owl-listenerBuild several genuinely different solutions to the same problem at once, spread across what the user does rather than how it looks. Use when one direction is on the table and the team is about to refine it by default. For choosing between the concepts afterwards, use `concept-selection`.
- ▌ Qual Quant Triangulation · owl-listener bundleReconcile what the numbers say with what users say, and design the study that settles it rather than restates it. Use when behavioural data and research findings point different ways. For reading the data on its own, use `behavioural-analytics`; for synthesising interviews on their own, use `affinity-diagram`.
- ▌ Serial Position Effect · owl-listenerApply the Serial Position Effect — first and last items in a sequence are recalled best. Use when ordering menus, lists, and steps. For emphasising one item regardless of its position, use `von-restorff-effect` (ui-design).
- ▌ Law Of Closure · owl-listenerApply the Law of Closure — the eye completes implied shapes from partial forms. Use when reducing visual weight by dropping borders or letting negative space suggest structure. For explicit containers, use `law-of-common-region`.
- ▌ Law Of Continuity · owl-listenerApply the Law of Continuity — the eye follows alignment and unbroken paths. Use when sequencing steps, aligning content, or designing carousels and timelines. For grouping rather than sequencing, use `law-of-proximity`.
- ▌ Law Of Similarity · owl-listenerApply the Law of Similarity — shared colour, shape, or size signals that elements belong to one category. Use when signalling relationships across distance. For grouping by position, use `law-of-proximity`.
- ▌ Contextual Help Design 2 · owl-listenerDesign help systems and support patterns that work for people with cognitive disabilities. Use when designing help content, tooltips, onboarding, FAQs, support flows, documentation, or any context where users need guidance. Triggers on: help, support, FAQ, tooltip, onboarding, tutorial, guidance, stuck, confused, documentation, instructions.
- ▌ Review 2 · owl-listenerReview and surface undocumented accessibility assumptions in an existing feature or product. Chains: decision-documentation, tradeoff-analysis, compliance-mapping, accessibility-debt-tracking. Use when inheriting a product, joining a team, or auditing a feature where accessibility decisions were never formally captured.
- ▌ Review 3 · owl-listenerRun a full cognitive accessibility review of a flow, screen, or interface. Chains: cognitive-load-assessment, plain-language-design, wayfinding-navigation, error-prevention-recovery, focus-attention-design, memory-load-reduction.
- ▌
- ▌ Context Engineering · owl-listenerDesigning what information goes into the context window and in what order.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Dependency Map · owl-listenerMap cross-team dependencies and the critical path for a design program.
- ▌ Status Report · owl-listenerWrite a clear program status report with RAG status, progress, risks, and asks.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Program Roadmap · owl-listenerBuild a UX program roadmap with outcomes, phases, milestones, and dependencies.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Scoping Framework · owl-listenerScope a program into phases with explicit in-scope and out-of-scope boundaries.
- ▌
- ▌
- ▌
- ▌ Alignment Workshop · owl-listenerDesign a workshop to align stakeholders on goals, scope, or direction.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Prioritisation Framework · owl-listenerPrioritise competing program requests with a transparent, repeatable model.
- ▌
- ▌ Responsive Patterns · owl-listenerUse when designing complex responsive layouts — breakpoint strategy, layout shifts, content reflow, responsive typography, container queries, and ensuring the experience works across the full device spectrum
- ▌ Design Retrospective · owl-listenerUse after shipping or completing a design project — structured reflection on what worked, what didn't, and what taste decisions landed. Adds observations to the design record (design-memory) about how the user designs — a descriptive journal, not preferences applied to future projects
- ▌ Inspiration Scouting · owl-listenerUse when the team needs aesthetic references, interaction examples, or visual inspiration beyond competitive research — finds design patterns, UI references, and creative approaches that match the brief and taste profile
- ▌ Writing Design Plans · owl-listenerUse when you have a design brief or strategy and need to break implementation into reviewable chunks — creates step-by-step plans with verification criteria for each task
- ▌ Designpowers Critique · owl-listenerUse when reviewing design work against a plan, design principles, or quality standards — provides structured critique covering design intent, accessibility, consistency, and user impact. This is the Designpowers critique skill — use this instead of the Superpowers design-critique when working within a Designpowers workflow
- ▌ Synthetic User Testing · owl-listenerUse after the fix round to validate the design by walking through key tasks as each persona — simulating how Jordan (low-vision), Priya (non-native speaker), Marcus (motor impairment), or any project persona would actually experience the interface. Catches the issues that code review misses because they only surface in the act of using
- ▌ Cognitive Accessibility · owl-listenerUse when evaluating mental load, wayfinding, focus management, memory demands, or decision complexity in any interface — ensures designs work for people with cognitive differences, under stress, or managing divided attention
- ▌ Design System Alignment · owl-listenerUse when working with or building design systems — tokens, components, naming conventions, theming, or pattern libraries — ensures consistency, accessibility compliance, and systematic thinking
- ▌ Verification Before Shipping · owl-listenerUse before declaring any design work complete, fixed, or ready — requires running verification and confirming output before making any success claims. Evidence before assertions, always
- ▌
- ▌ Design State · owl-listenerUse when any Designpowers agent starts work or completes work — maintains the shared design state file that all agents read from and write to. Invoke to initialise, read, or update the living design state document
- ▌ Design Taste · owl-listenerUse when calibrating aesthetic direction — capturing design references, quality benchmarks, and the subjective qualities that make a design feel elevated. Invoked between strategy and design to give agents a shared sense of what "good" looks and feels like for this project
- ▌ Figma Bridge · owl-listenerUse to turn Designpowers' markdown specs into something a designer can actually SEE and manipulate, and to pull existing Figma work back in. Bridges in both directions — push design-lead's visual decisions or built code into real Figma frames (code-to-design), and pull a Figma file in for review or as a design-system source (design-to-code). Falls back to a clickable HTML prototype when Figma isn't available. Invoke at the screenshot checkpoint, at handoff, when reviewing a Figma link, or whenever the user says "show me", "put this in Figma", or "make it real"
- ▌
- ▌ Design Debate · owl-listenerUse when a design direction is uncertain, when the team could go multiple ways, or when the user wants to see competing approaches argued before committing — orchestrates structured debate between agents who advocate for different directions
- ▌ Design Memory · owl-listenerUse at project start and completion to OBSERVE and record how the user designs — the decisions they make, the styles they reach for, their habits and inclinations across projects. This is a descriptive record (a mirror), NOT a controller — it is never fed back to steer the work. Per-project direction comes from design-taste and a DESIGN.md; design-memory only watches and reflects, surfaced to the user as a report out of curiosity
- ▌ Design Review · owl-listenerUse when the user wants to evaluate something that ALREADY EXISTS rather than build something new — "review this", "audit this screen", "what's wrong with this page", "is this accessible?", or when they share a screenshot, URL, or existing code/markup. Runs the existing reviewers (design-critic, accessibility-reviewer, heuristic-evaluator) in parallel against the artefact and reconciles their findings into one prioritised report — WITHOUT running discovery, strategy, or the full build pipeline
- ▌ Design Express · owl-listenerUse as a lightweight on-ramp for first-time or hesitant users who want a quick win before committing to the full pipeline — "can you just take a quick look", "make me a quick X", or a designer new to the terminal who freezes at the full process. Two tiny loops — express critique (one screen, one fast read) and express build (one component, shown immediately) — in plain language, finishing in about two minutes. Always a GATEWAY into the full workflow, never a replacement for it. Offered to first-time users only; returning users go straight to the Build and Review lanes
- ▌ Design Handoff · owl-listenerUse when design work is complete and needs to be communicated to engineering — creates specifications, documents rationale, accessibility requirements, and interaction details in a format engineers can implement directly
- ▌ Design Library · owl-listener bundleUse when the user wants to start from a known brand's design language — "use the same design language as Stripe", "make it feel like Linear", "start from Notion's DESIGN.md", "what brands can I borrow from?". Pulls a ready-made DESIGN.md from the open VoltAgent/awesome-design-md library (73+ brand design systems in the standard format), loads it as a STARTING POINT for the project's design layer, then adapts it to the real client. Inspired references, not official brand assets — adapt, don't impersonate
- ▌ Taste Feedback · owl-listenerUse during the build phase to show the user intermediate visual output and ask for taste direction before the full build completes — enables mid-flight course correction so taste mismatches are caught early, not in review
- ▌ UI Composition · owl-listenerUse when building layouts, choosing colours, setting typography, establishing visual hierarchy, designing responsive behaviour, or making any visual design decision — ensures every visual choice serves both aesthetics and accessibility
- ▌ Voice And Tone · owl-listenerUse when establishing or applying brand voice — defining voice attributes, tone adaptation across contexts, vocabulary lists, writing examples, and ensuring consistent personality across the interface
- ▌ Design Strategy · owl-listenerUse when setting design direction — establishing principles, competitive positioning, experience mapping, or aligning stakeholders on what the design should achieve and why
- ▌ Design Discovery · owl-listenerYou MUST use this before any creative or design work — building features, creating components, designing interfaces, modifying user-facing behaviour. Explores intent, constraints, users, and context before any design decisions are made
- ▌ Research Planning · owl-listenerUse when user needs are unclear, assumptions need validation, or the design brief identifies gaps in understanding — plans what to learn, which methods to use, and from whom
- ▌ Usability Testing · owl-listenerUse when planning or conducting usability tests — writing test scripts, defining tasks, selecting participants, analysing findings, and turning observations into design actions
- ▌ Accessible Content · owl-listenerUse when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text, or form instructions — ensures content is readable, navigable, and meaningful for everyone
- ▌ Inclusive Personas · owl-listenerUse when defining who a design serves — creating personas, user stories, or scenarios — ensures the full ability spectrum and situational contexts are represented from the start, not retrofitted
- ▌ Interaction Design · owl-listenerUse when designing states, transitions, animations, error handling, loading patterns, feedback, or any behaviour that responds to user action — ensures interactions are perceivable, operable, and inclusive
- ▌ Token Architecture · owl-listenerUse when building or restructuring design token systems — global tokens, semantic tokens, component tokens, naming conventions, theming, and multi-platform token distribution
- ▌ Using Designpowers · owl-listenerMUST run before any other Designpowers skill — shows welcome, checks taste profile, and routes to the correct first skill. Triggers on ANY design-related message. No other Designpowers skill may run until the welcome sequence has completed
- ▌ Adaptive Interfaces · owl-listenerUse when designing for user preferences — motion sensitivity, contrast needs, colour schemes, text sizing, information density, or any interface behaviour that should adapt to individual needs
- ▌ Design Debt Tracker · owl-listenerUse when critique or review produces deferred findings, when checking accumulated design compromises, or when deciding what to address in the next iteration. Maintains a living register of design debt — the minor issues, future-iteration notes, and conscious compromises that accumulate across a project
- ▌ Motion Choreography · owl-listenerUse when designing animation sequences, page transitions, micro-interactions, loading states, or any motion that communicates meaning — ensures motion is purposeful, performant, and safe for motion-sensitive users
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ One On One · owl-listenerRun effective, recurring 1:1s that build trust and surface problems early.
- ▌
- ▌
- ▌
- ▌
- ▌