uiux-design-team

Plugin uiux-design-team from marketplace rse-plugins in uw-ssec/rse-plugins. Commands read from the repo's manifest — 12 days ago.

Skills (22)

• ab-testing-strategy

  Designs A/B tests, writes structured hypotheses, computes required sample sizes and test duration, performs significance analysis (chi-squared, confidence intervals), produces ship/no-ship/inconclusive recommendations, and advises on frequentist vs Bayesian approach selection. Use when designing or

• accessibility-audit

  Runs axe-core/pa11y/Lighthouse scans, identifies WCAG 2.2 violations by success criterion, generates structured findings reports, fixes ARIA misuse and missing labels, checks keyboard navigation and color contrast ratios, and produces VPAT-ready accessibility documentation. Use when auditing a web i

• color-systems

  Generates comprehensive color systems including brand palette shade scales (50–950), semantic CSS custom property token mappings, dark mode variants, and WCAG contrast validation — delivered as ready-to-use CSS and design tokens. Use when defining a brand color palette, generating accessible shade s

• component-library

  Use when implementing or extending a shared component library — scaffolding new components with CVA variants, writing Storybook stories, wiring visual regression, or auditing existing components for state and a11y coverage.

• css-architecture

  Recommends CSS architecture approaches, compares methodologies, generates migration plans, and produces stylelint configs and cascade layer structures. Use when starting a new frontend project and choosing a CSS approach, refactoring inconsistent CSS, hitting specificity wars, integrating a componen

• design-case-studies

  Produces structured teardown documents, principle-to-application comparison matrices, and pattern libraries by applying a five-layer analysis framework to real products. Use when analyzing a product's UI/UX to extract transferable patterns, benchmarking your own design against a category leader, loo

• design-handoff

  Bridges design and development by generating component spec sheets, running five-gate visual QA checks, producing asset export packages, and writing redline annotations. Use when packaging a design for developer implementation, writing component specifications, running design QA against a built UI,

• design-philosophies

  Conducts structured design evaluations against Gestalt, Nielsen, and Rams principles, produces heuristic evaluation reports with severity-rated findings, and recommends design improvements. Use when running a heuristic evaluation, structuring a design critique, selecting which design framework to ap

• design-system-creation

  Scaffolds design system infrastructure, generates Style Dictionary token configs, produces component templates and Storybook setups, and creates UI audit reports. Use when bootstrapping a new design system from scratch, auditing an existing UI for systemization, setting up Storybook + Style Dictiona

• design-tokens

  Guides design token architecture and Style Dictionary configuration, generates token files for web CSS variables, iOS, and Android, and audits token naming and reference integrity. Use when implementing or refactoring design tokens, setting up Style Dictionary, defining a three-tier token architectu

• frontend-components

  Generates and scaffolds reusable UI components with proper state management, props interfaces, lifecycle hooks, and styling encapsulation across React, Vue, Svelte, and Web Components. Use when implementing or scaffolding a reusable UI component in React, Vue, Svelte, or Web Components/Lit; when por

• grid-layout-systems

  Provides CSS layout code and recommendations using Grid and Flexbox, creates responsive column systems, and selects the right layout approach for pages and components. Use when laying out a page or component, choosing between CSS Grid and Flexbox, setting up a column grid, aligning nested components

• information-architecture

  Designs information architecture by generating sitemaps, navigation hierarchies, and content taxonomies, running card sort and tree test analyses, and auditing navigation labels against findability criteria. Use when structuring a new site/app's content, when users report "I can't find anything," wh

• motion-design

  Recommends easing functions and durations, generates CSS and Framer Motion animation code, and audits motion for performance and prefers-reduced-motion compliance. Use when adding or fixing UI animation, choosing duration/easing for a transition, debugging janky motion, implementing micro-interactio

• responsive-design

  Generates responsive layouts with media queries, fluid grids, and container queries, creates breakpoint configurations, optimizes images for multiple resolutions, and validates layouts across viewports. Use when building or refactoring an interface that must work across phone, tablet, and desktop; s

• typography-systems

  Guides creation and refinement of web typography systems including fluid type scales, font selection and pairing, readability optimization, and design token encoding. Use when building a new type scale, converting fixed sizes to fluid clamp() values, choosing or pairing fonts, fixing readability iss

• usability-evaluation

  Audits interfaces against usability heuristics, conducts cognitive walkthroughs, calculates and interprets SUS scores, and produces severity-ranked usability findings reports. Use when auditing an existing interface for usability issues, when running a heuristic evaluation or cognitive walkthrough,

• user-journey-mapping

  Creates customer journey maps and service blueprints that visualize touchpoints, user emotions, pain points, and opportunities across an end-to-end experience. Use when creating a journey map, customer journey, or CX map; visualizing a user's end-to-end experience for a specific scenario; identifyin

• user-research

  Guides UX research and discovery workflows including interview planning, persona development, JTBD job stories, competitive audits, and insight synthesis. Use when planning or running user interviews, building personas or JTBD job stories, designing a competitive audit, synthesizing research data, o

• ux-writing

  Writes, reviews, and refines UI microcopy for digital products including button labels, error messages, empty states, and voice and tone documentation. Use when writing or auditing UI copy — button labels, error messages, empty states, onboarding flows, confirmation dialogs, tooltips, success toasts

• visual-design

  Defines aesthetic direction, color palettes, typography pairings, spacing systems, and component visual styles for UI interfaces. Use when designing or coding a new interface that needs a distinctive look and feel, theme, or aesthetic direction; when reviewing visuals for hierarchy or brand alignmen

• wireframing

  Creates wireframe layouts and structural diagrams for UI screens, defining content hierarchy, component placement, responsive behavior, and grid structure. Use when sketching or producing a wireframe, mockup, or lo-fi page layout for a new screen; when restructuring an existing page's content priori

Slash commands (10)

• /uiux-design-team:audit-accessibility

  WCAG 2.2 compliance audit covering automated checks, keyboard testing, screen reader testing, color contrast verification, and ARIA review with a prioritized remediation plan.

• /uiux-design-team:create-design-system

  Design system initialization workflow covering pattern audit, design principles, token architecture, color palette, type scale, spacing scale, and foundational component creation.

• /uiux-design-team:create-persona

  Guided persona creation workflow that builds research-backed user persona cards with demographics, goals, frustrations, jobs-to-be-done, and usage scenarios.

• /uiux-design-team:create-type-scale

  Guided command to create a fluid typographic scale with CSS custom properties using modular scale ratios and clamp() values

• /uiux-design-team:design-handoff

  Prepares comprehensive design-to-development handoff documentation with component specs, tokens, and annotation guides

• /uiux-design-team:design-review

  Run a multi-specialist design review with severity-rated findings from accessibility, visual, interaction, and content experts orchestrated by the UX design lead.

• /uiux-design-team:evaluate-usability

  Guided usability evaluation using heuristic analysis, cognitive walkthrough, or expert review with severity-scored findings

• /uiux-design-team:frontend-design

  Creates a complete frontend design from a description with bold aesthetic direction, design tokens, and production-grade code

• /uiux-design-team:generate-palette

  Accessible color palette generation with brand-tinted scales, semantic colors, WCAG AA contrast verification, and CSS custom property output.

• /uiux-design-team:map-journey

  User journey mapping workflow that documents stages, touchpoints, actions, thoughts, feelings, pain points, and opportunities with an emotion curve visualization.

Subagents (10)

• accessibility-specialist

  Accessibility specialist for WCAG 2.2 AA/AAA compliance, ARIA patterns, keyboard navigation, screen reader testing, contrast ratios, cognitive accessibility, and inclusive design methodology based on Microsoft's inclusive design principles.

• design-ops

  Design operations specialist for design process optimization, developer handoff workflows, design QA checklists, tooling recommendations, sprint planning for design, asset management, and design-development collaboration.

• design-systems-engineer

  Design systems engineering specialist for token architecture, component API design, Atomic Design methodology, variant systems, theming, multi-brand support, CSS architecture, and frontend component implementation in React, Vue, and Svelte.

• information-architect

  Information architecture specialist for content organization, sitemaps, navigation patterns, taxonomy design, card sorting, wayfinding systems, and content hierarchy. Routes from ux-design-lead for all structural design needs.

• interaction-designer

  Interaction design specialist for user flows, wireframes, prototyping, micro-interactions, state management, error handling flows, and multi-step workflows. Routes from ux-design-lead for all interaction and behavior design needs.

• motion-designer

  Motion design specialist for animation principles, transition choreography, micro-interactions, scroll-based effects, loading states, and performance-optimized motion. Routes from ux-design-lead for all animation and motion needs.

• ux-design-lead

  Comprehensive UX design lead and coordinator agent that facilitates design thinking, conducts design critiques, orchestrates multi-specialist reviews, and routes to 9 specialist agents covering user research, information architecture, interaction design, visual design, motion design, design systems

• ux-researcher

  UX research specialist for user interviews, persona creation, Jobs-to-Be-Done analysis, competitive audits, usability testing, and research synthesis. Routes from ux-design-lead for all user research needs.

• ux-writer

  UX writing specialist for microcopy, error messages, onboarding flows, voice and tone documentation, CTAs, empty states, help text, localization readiness, and content strategy for user interfaces.

• visual-designer

  Visual and UI design specialist for typography, color theory, visual hierarchy, brand alignment, spatial composition, iconography, and distinctive aesthetic direction. Incorporates Claude's frontend-design guidance with systematic visual design methodology.

Similar plugins