pwdev-claude-marketplace

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

Design precise, production-grade enterprise UI — dashboards, admin panels, SaaS interfaces, and data-heavy applications. Use this skill for professional software interfaces that need Jony Ive-level craft: clean, minimal, functional, with intentional personality. Do NOT use for creative landing pages, marketing sites, or experimental/artistic frontends.