designpowers

Plugin designpowers from marketplace designpowers in Owl-Listener/designpowers. Commands read from the repo's manifest — 1 month ago.

Skills (36)

• accessible-content

  Use 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

• adaptive-interfaces

  Use 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

• cognitive-accessibility

  Use 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-debate

  Use 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-debt-tracker

  Use 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 proj

• design-discovery

  You 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

• design-express

  Use 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 fas

• design-handoff

  Use 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

  Use 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 d

• design-md

  Use when the user provides a DESIGN.md file — the open, Apache-2.0 design-system format from Google Labs (Stitch) that coding agents read to build brand-consistent UI. When a DESIGN.md is present in the project (or the user points you at one), READ IT and build faithfully from its tokens, which prod

• design-memory

  Use 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 directio

• design-retrospective

  Use 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

• design-review

  Use 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, acc

• design-state

  Use 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-strategy

  Use when setting design direction — establishing principles, competitive positioning, experience mapping, or aligning stakeholders on what the design should achieve and why

• design-system-alignment

  Use when working with or building design systems — tokens, components, naming conventions, theming, or pattern libraries — ensures consistency, accessibility compliance, and systematic thinking

• design-taste

  Use 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

• designpowers-critique

  Use 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

• figma-bridge

  Use 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

• heuristic-evaluation

  Use 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 le

• inclusive-personas

  Use 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

• inspiration-scouting

  Use 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

• interaction-design

  Use 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

• motion-choreography

  Use 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

• research-planning

  Use 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

• responsive-patterns

  Use 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

• synthetic-user-testing

  Use 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

• taste-feedback

  Use 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

• taste-report

  Use when the user wants to see how they design — "what's my taste", "show me my taste report", "how do I decide", "what are my patterns", or periodically as the personal profile matures. Generates a longitudinal, reflective report from the PERSONAL taste profile (design-memory) — recurring moves, te

• token-architecture

  Use when building or restructuring design token systems — global tokens, semantic tokens, component tokens, naming conventions, theming, and multi-platform token distribution

• ui-composition

  Use 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

• usability-testing

  Use when planning or conducting usability tests — writing test scripts, defining tasks, selecting participants, analysing findings, and turning observations into design actions

• using-designpowers

  MUST 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

• verification-before-shipping

  Use before declaring any design work complete, fixed, or ready — requires running verification and confirming output before making any success claims. Evidence before assertions, always

• voice-and-tone

  Use when establishing or applying brand voice — defining voice attributes, tone adaptation across contexts, vocabulary lists, writing examples, and ensuring consistent personality across the interface

• writing-design-plans

  Use 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

Subagents (10)

• accessibility-reviewer

  Use this agent to review any design output — code, mockups, specifications, or prototypes — for inclusive design compliance. Evaluates against WCAG, COGA, and inclusive design principles. Dispatch after design work and before handoff.

• content-writer

  Use this agent for UX writing, interface copy, labels, error messages, empty states, onboarding text, help text, tooltips, alt text, link text, form instructions, and any words users read in the interface. Writes in plain language with cognitive accessibility built in. Dispatch when interface text n

• design-builder

  Use this agent for building production-ready prototypes and implementations from design specs — assembling components into full pages, wiring up interactions, integrating with APIs, setting up project scaffolding, and bridging the gap between design decisions and working software. Dispatch after the

• design-critic

  Use this agent to review design work against the original plan, design brief, and design principles. Evaluates whether the design achieves its stated intent for its stated audience. Dispatch at review checkpoints or before handoff.

• design-lead

  Use this agent for visual design execution — layouts, colour systems, typography, component design, responsive behaviour, interaction patterns, and design system work. Dispatch when the design plan is approved and implementation begins. Produces design decisions grounded in the brief, principles, an

• design-scout

  Use this agent for competitive UX analysis, design benchmarking, user insight synthesis, design pattern research, accessibility audits of competitors, trend analysis, and inclusion-aware research that informs design decisions. Dispatch before the team starts designing, or when design decisions need

• design-strategist

  Use this agent for upstream design thinking — user flows, information architecture, journey mapping, persona development, design principles, experience mapping, and setting design direction before visual work begins. Dispatch during discovery and strategy phases. Use this instead of the built-in ux-

• heuristic-evaluator

  Use this agent to evaluate a design against established usability heuristics (Nielsen's 10) and conduct cognitive walkthroughs of key tasks. Dispatch after design-builder completes, alongside design-critic and accessibility-reviewer. Catches usability problems that craft critique and accessibility a

• inspiration-scout

  Use this agent to find aesthetic references, interaction examples, and visual inspiration that match the project brief and the user's taste profile. Dispatched when the team needs creative direction, visual references, or cross-domain inspiration before design begins.

• motion-designer

  Use this agent for animation and motion design — micro-interactions, page transitions, scroll-driven animation, loading states, spring physics, easing curves, and choreography. Ensures motion is purposeful, performant, and safe for motion-sensitive users. Dispatch when a design needs movement that g

Hooks (1)

• SessionStart

  "${CLAUDE_PLUGIN_ROOT}/hooks/run-hook.cmd" session-start

Similar plugins