ui-design-pro

Plugin ui-design-pro from marketplace codex-marketplace in Travis-Gilbert/claude-marketplace. Commands read from the repo's manifest — 1 month ago.

Skills (3)

• chat-skill
• design-theory

  Design principles, visual judgment, and layout architecture for web interfaces. Use when Claude Code needs to evaluate WHY a design works or fails, plan visual hierarchy and layout composition before writing code, choose between design approaches based on user behavior and cognitive load, review exi

• ui-engineering

  Source-code-backed UI implementation expertise for React, Next.js, and Tailwind CSS ecosystems. Use when Claude Code needs to build, refactor, or extend UI components using shadcn, Radix, Vaul, Sonner, cmdk, DaisyUI, Motion, or Tailwind CSS. Use when selecting which library to reach for, building co

Slash commands (8)

• /ui-design-pro:a11y-audit

  Audit a component, page, or flow for WCAG 2.2 accessibility conformance. Triggers a11y-auditor agent.

• /ui-design-pro:animate

  Add animation to a component or flow with performance and accessibility awareness. Triggers animation-engineer agent.

• /ui-design-pro:design-rationale

  Generate a structured design rationale for a screen or component, grounded in design-theory references and concrete tradeoffs. Use when you need to document WHY a design works, justify decisions for PR review, or analyze an existing screen before making changes.

• /ui-design-pro:design-review

  Review a UI component or page for design principle violations, accessibility issues, and polymorphic rendering opportunities. Triggers design-critic and a11y-auditor agents.

• /ui-design-pro:design-system

  Plan or extend a design token system with spacing, color, type, and component variant matrices. Triggers visual-architect agent with design-systems reference.

• /ui-design-pro:detect-stack

  Detect the existing UI stack in a project and report framework, component library, icon system, overlays, feedback, tokens, and animation patterns. Triggers stack-detector agent.

• /ui-design-pro:learn

  End-of-session learning. Saves what happened, updates

• /ui-design-pro:ui-build

  Build a UI component or page with the right libraries, full state coverage, and polymorphic rendering for mixed content. Triggers stack-detector, visual-architect, and component-builder agents.

Subagents (6)

• a11y-auditor

  Audits UI components and pages for WCAG 2.2 accessibility compliance. Use after any interactive component is built. Checks keyboard navigation, focus management, ARIA roles and labels, color contrast, screen reader compatibility, and touch target sizes. Produces a prioritized list of violations with

• animation-engineer

  Adds purposeful motion to UI components using Motion spring physics, CSS transitions, and layout animations. Use when motion is explicitly needed — not by default. Invoke when asked to animate a component, add transitions, implement drag gestures, or make motion feel more natural. Always respects pr

• component-builder

  Builds UI components using the correct libraries for the project's existing stack, from headless primitives up. Use when implementing a UI component, page, or feature after the layout has been planned by visual-architect. Greps real library source in refs/ to verify APIs before writing code. Always

• design-critic

  Reviews existing UI for design principle violations, visual hierarchy problems, and polymorphic rendering opportunities. Use when you need to evaluate a component or page against Gestalt principles, Fitts's Law, progressive disclosure, and the design smell catalog. Proactively invoke after component

• stack-detector

  Maps a project's existing UI technology stack before any work begins. Reads package.json, config files, and source directories to identify framework, CSS approach, component libraries, animation, icons, and any existing design system. Prevents building parallel systems. Always invoke at the start of

• visual-architect

  Plans layout and visual hierarchy before code is written. Use when designing new pages, screen layouts, or complex component compositions. Produces a layout architecture document that component-builder uses as a blueprint. Always invoke before component-builder on new layouts. Invoke when asked to p

Similar plugins