pro-design

Plugin pro-design from marketplace pro-dev-skillset in jodybrewster/pro-dev-skillset. Commands read from the repo's manifest — 4 days ago.

Skills (26)

• accessibility-audit

  Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. For a general visual-quality critique rather than a conformance audit use `screen-critique`. For a rule-level lint of UI code against Vercel's

• animate

  Adds or refines animation on an already built site or app. Use when asked to animate something, add motion, or build a transition. Decides what needs movement and what does not, syncs motion with scroll and state, picks tool, properties, curve, duration, interruption and exit in that order, then wri

• animation-vocabulary

  Reverse-lookup glossary that turns a vague description of desired motion (snappy, bouncy, smooth, feels heavy, the iOS rubber-band scroll) into the precise animation terms a model or designer can implement, meaning easing curves, durations, spring parameters, and choreography. Use before implementin

• apple-design

  Apple Human Interface Guidelines principles applied to any product, web included, covering interface design and fluid, physical motion. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials an

• better-interface

  Cross-discipline interface review: the consolidation and verdict layer for the better-* family. Routes a screen, flow, feature, or whole repository to every available domain skill across accessibility, layout, typography, colour, writing, and UI craft, then consolidates one ranked, capped verdict. A

• better-layout

  Layout structure for web interfaces: spacing, positioning, grouping, alignment, and adaptivity of an existing interface, down to exact pixel corrections such as this date needs 8px more room. Use when structuring a page or component, deciding what collapses at small sizes, reviewing frontend code fo

• build-awwwards-quality-sites

  Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and brand websites: the principles, details, and specific techniques Awwwards-winning sites share, including scroll-based storytelling, subtle animated backgrounds, expensive-feeling effects, standout heroes, GSAP cho

• design-token

  Define and organize tokens for color, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer for a product or design system.

• emil-design-eng

  Start here when building a new product UI screen, component, flow, or app from scratch or from a brief - settings screens, dashboards, forms, modals, navigation, empty and loading states - and it should look properly designed rather than default. This is the default skill for new product UI. It asks

• impeccable-bridge

  The comprehensive, end-to-end UI/UX design pass for production-grade frontend craft — use when the work is "make this genuinely excellent / bolder / more delightful / quieter", a full redesign, a deep design critique or audit, or live in-browser visual iteration, rather than one focused facet. This

• interface-review

  Visual and UX quality pass over a UI change - the rendered interface a diff produces, compared against the interface before it. Use only when the ask explicitly names the UI, the design, the visuals, a component, a screen, animation, accessibility, or responsive behaviour. Reads both sides of the ch

• landing-page-design

  Complete system for a landing page rather than a homepage: one offer, one audience, one primary action, with everything on the page structured around that conversion. Asks intake questions first, then designs page structure, layout selection, conversion copywriting, SEO and discoverability, plus a v

• mengto-skills-bridge

  Bridge to MengTo/Skills, a 130-skill technique library for scroll-driven and immersive web design - cinematic scroll storytelling, GSAP ScrollTrigger and Lenis motion systems, Three.js/WebGL scroll worlds, shader and particle backgrounds, cursor trails, dozens of named style recipes, plus workflow s

• motion-system

  Define motion tokens - durations, easing vocabulary, and reduced-motion handling - for consistency product-wide. Use when standardizing motion across a system. For crafting one specific animation use `motion` or `animate`.

• motion

  Framer Motion (motion library) for functional UI — state-driven animation, when to animate vs. when to cut, and implementation rules for product interfaces.

• perception-laws

  Apply the Gestalt perception laws (proximity, similarity, closure, continuity, common region, figure-ground) plus the Von Restorff effect and visual hierarchy to a layout, so grouping, emphasis, and depth read the way the eye actually sees. Use when asked to apply grouping principles or perception l

• react-patterns-bridge

  Bridge to Vercel's React composition and view-transition agent skills in vercel-labs/agent-skills - refactor components away from boolean-prop sprawl, design compound components and render props, scale a component API or add React View Transitions or shared-element animation. Use when the task is on

• screen-critique

  Critique a rendered screen, screenshot, Figma frame, or built page across seven visual-quality dimensions and return a prioritised P1/P2/P3 fix list. Use for "what is wrong with this screen", "why does this look off", "review this design", or a critique of visual hierarchy, composition, typography,

• shadcn-ui-composition

  shadcn/ui component composition, CLI usage, OKLCH theming, cva variants, Field form layout, compound component patterns, and Tailwind v4 integration. For component API design outside shadcn/ui (compound components, boolean-prop sprawl, render props) use `react-patterns-bridge`.

• stitch-skill

  Create or update a DESIGN.MD file — the project's canonical design-system reference capturing tokens, component patterns, typography, color decisions, motion spec, and open questions. Use when starting a new project's design foundation, after a major visual update, or before handing off to another d

• taste-skill

  Run a targeted visual polish pass on an existing UI — spacing rhythm, alignment, color nuance, type hierarchy, interactive states, micro-interactions. Use when the UI is functionally complete but needs to feel more considered and intentional. Scoped to a surface or component tree, not a full redesig

• taste-skills-bridge

  Bridge to the external Leonxlnx taste-skill library - anti-slop generation of landing pages, portfolios, and redesigns from a brief, plus aesthetic-family styles (brutalist, minimalist, soft/high-end), image-to-code, premium image-generation references (web + mobile), and brand kits. Use when the as

• tastemaker-bridge

  Bridge to codeswithroh/tastemaker, a 70-file script-driven engine for grounding UI in real pixels. Use it when the user supplies an actual reference image, screenshot, Pinterest or Dribbble pin, or URL to extract the look from - Python scripts pull palettes, tokens, and contrast from the image itsel

• typography-scale

  Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For judging type on an existing screen use `screen-critique`.

• web-design-engineer-bridge

  Bridge to ConardLi/garden-skills web-design-engineer, a 39-file engine for browser-rendered visual artifacts - pages, dashboards, prototypes, HTML slide decks, data visualizations, animations. Carries 26 named style recipes with concrete palette, type, spacing, radius, shadow, and motion values (app

• web-design-guidelines

  Lint UI code against Vercel's Web Interface Guidelines and report findings as file:line - forms, focus states, hydration, safe areas, animation, i18n and content handling. Use when asked to check, lint or review UI files against the web interface guidelines. For a WCAG conformance audit use `accessi

Slash commands (2)

• /pro-design:critique-screen

  Run all seven visual critiques on a screen and output a prioritised P1/P2/P3 fix list covering hierarchy, brand, composition, typography, colour, affordance, and information density.

• /pro-design:install

  Install or update the engines that pro-design owns, through the pro-core installer. Asks about each optional engine, lists what will install and waits for a yes. Usage: /pro-design:install [update]

Similar plugins