PWDEV UI/UX — Stack-Agnostic UI Engineering

Plugin pwdev-uiux from marketplace pwdev-claude-marketplace in pwdev-solucoes/pwdev-claude-marketplace. Commands read from the repo's manifest — 1 month ago.

Skills (10)

• accessibility

  Accessibility auditing and remediation skill for Vue 3 + Reka UI. Use when reviewing components, verifying WCAG 2.1 AA, fixing ARIA issues, or validating keyboard navigation in Reka UI components.

• component-audit

  Audit of existing Vue components in the project. Use when reviewing Vue design system consistency, identifying duplicate patterns, evaluating legacy components (Options API), or before implementing something new.

• design-system

  Documentation, standardization, and governance of the Vue + shadcn-vue design system. Use when creating component documentation, auditing consistency, defining naming conventions, or generating usage guides for the team.

• figma

  Bidirectional Figma skill — read designs and write back to Figma. READ: extract tokens, map Vue/Reka UI components, translate Auto Layout to Tailwind. WRITE: push components, screens, and design tokens from code to Figma. Requires /figma:figma-use skill before every use_figma call.

• reka-ui

  Skill for direct usage of Reka UI v2 headless primitives (the foundation of shadcn-vue). Use when you need to compose custom components beyond those available in shadcn-vue, understand asChild/as, controlled state, portals, or migrate from Radix Vue.

• shadcn-vue

  Skill for scaffolding, installation, and composition of shadcn-vue components (based on Reka UI v2). Use when you need to install components, understand Vue variants, compose patterns with vee-validate/Zod, or adapt existing components. Stack: Vue 3 + Reka UI v2 + Tailwind CSS.

• ui-best-practices

  Canonical UI/UX best practices ruleset with 14 sections and 70+ rules prioritized P0–P3. Use when implementing, reviewing, or auditing UI components. P0 rules are mandatory — violations are bugs. All rules reference tokens from ui-theme-reference.

• ui-scanner

  Skill for analyzing a project's existing UI in Vue. Activates when the user uses /pwdev-uiux:scan or asks to "analyze the project UI", "map existing components", "understand project patterns", or "create project skill". Generates .planning/ui/project-ui-skill.md with project-specific patterns and to

• ui-theme-reference

  Canonical design token registry — colors, typography, spacing, sizing, border radius, shadows, z-index, breakpoints, motion, and focus tokens. Used by ui-best-practices rules and all agents that implement or review UI components. Includes CSS variable template for quick project setup.

• ux-tokens

  Definition, documentation, and application of design tokens for Vue 3 + shadcn-vue. Use when configuring a new project, extracting tokens from Figma, or ensuring token consistency across Vue components.

Slash commands (13)

• /pwdev-uiux:analyze

  Quick UX + Figma analysis without starting a full flow. Activates ux-analyst and optionally design-bridge. Useful for exploration before committing to an implementation.

• /pwdev-uiux:audit

  Query the audit trail database for events, decisions, artifacts, and statistics. Export full PDF report.

• /pwdev-uiux:build

  Implements UI components based on the validated spec and configured stack (.planning/ui/stack.json). Checks gates before starting. Uses project-ui-skill when available.

• /pwdev-uiux:handoff

  Generates complete handoff documentation for the implemented and approved UI components. Consolidates specs, findings and acceptance criteria.

• /pwdev-uiux:init

  Initialize the pwdev-uiux framework — detects project stack, creates .planning/ui/ workspace, checks Figma MCP.

• /pwdev-uiux:push-to-figma

  Push implemented UI components to Figma — creates screens, component library, or design system from code (Code → Figma).

• /pwdev-uiux:review

  Runs a full UX + accessibility + best practices compliance review in parallel. Activates a11y-reviewer (WCAG 2.1 AA + best practices P0 a11y rules) and ux-critic (7 Playbook axes + 14-section best practices ruleset) simultaneously. Generates a unified compliance report with pass/fail counts by prior

• /pwdev-uiux:scan

  Scans the existing UI of the project and generates a contextual skill in .planning/ui/project-ui-skill.md. Use before starting development on an existing project to ensure new components are consistent.

• /pwdev-uiux:setup-figma

  Verify, install, and configure the Figma MCP server for Claude Code. Guides the user through connecting their Figma account step-by-step.

• /pwdev-uiux:stack

  Configure the UI stack for the project. Sets which component library, framework, and patterns the agents will follow.

• /pwdev-uiux:start

  Starts a new UI/UX development flow using the configured stack. Activates the orchestrator and begins with UX analysis. Use with task description as argument.

• /pwdev-uiux:status

  Displays the current state of the pwdev-uiux flow — gates, agents, pending items and recommended next action.

• /pwdev-uiux:theme

  Create or update a semantic color theme with CSS custom properties + Tailwind config. Supports light/dark modes with WCAG AA contrast validation.

Subagents (6)

• a11y-reviewer

  Audits WCAG 2.1 AA accessibility in UI components based on the configured stack. Also validates compliance with accessibility-related P0 rules from ui-best-practices skill (dark mode, font sizes, focus, motion, touch targets). Dispatched by /pwdev-uiux:start (Phase 4) and /pwdev-uiux:review, in para

• design-bridge

  Bidirectional bridge between Figma and the configured UI stack. READ: translates Figma designs into implementation specs (Phase 2). WRITE: pushes implemented components back to Figma. Dispatched by /pwdev-uiux:start (Phase 2) and /pwdev-uiux:push-to-figma. Never implements component code. Requires t

• ui-builder

  Specialist in implementing UI components. Reads the configured UI stack from .planning/ui/stack.json, follows ui-best-practices rules during implementation, and uses ui-theme-reference as the canonical token source. Dispatched by /pwdev-uiux:start (Phase 3) and /pwdev-uiux:build. Never implements wi

• ui-scanner

  Analyzes the project's existing UI — by code and visually via browser — and generates a contextual skill (.planning/ui/project-ui-skill.md) with the project's patterns, tokens, and conventions. Also runs a best-practices compliance check against ui-best-practices skill rules. Dispatched by /pwdev-ui

• ux-analyst

  UX analysis specialist. Creates structured specs before implementation. Stack-agnostic — maps components to the library configured in stack.json. Dispatched by /pwdev-uiux:start (Phases 1-2) and /pwdev-uiux:analyze. Writes to .planning/ui/ux-spec.md.

• ux-critic

  Reviews implemented components against the 7 Playbook axes AND the ui-best-practices skill ruleset (14 sections, 60+ rules with P0–P3 priority). Dispatched by /pwdev-uiux:start (Phase 4) and /pwdev-uiux:review, in parallel with a11y-reviewer. Appends findings to .planning/ui/review-findings.md with

Hooks (6)

• SessionStart

  "${CLAUDE_PLUGIN_ROOT}/scripts/audit-hook.sh" session_start

• SubagentStart

  "${CLAUDE_PLUGIN_ROOT}/scripts/audit-hook.sh" subagent_start

• SubagentStop

  "${CLAUDE_PLUGIN_ROOT}/scripts/audit-hook.sh" subagent_stop

• PostToolUse

  "${CLAUDE_PLUGIN_ROOT}/scripts/audit-hook.sh" artifact

• Stop

  "${CLAUDE_PLUGIN_ROOT}/scripts/audit-hook.sh" stop

• PreToolUse

  "${CLAUDE_PLUGIN_ROOT}/scripts/guard-secrets.sh"

Similar plugins