pro-web-design-suite

Plugin pro-web-design-suite from marketplace pro-web-design-suite in Vybecode-LTD/Pro-Web-Designer-Suite-Plug-in. Commands read from the repo's manifest — 8 days ago.

Skills (29)

• a11y-audit-runner

  WCAG 2.2 AA tests with axe, keyboard, focus, contrast, zoom, text spacing, hover and motion checks in Chromium, Firefox or WebKit, plus the manual pass. For audits and VPATs. Not for design critique.

• client-presentation-builder

  Present design work to a client or team as reasoning, not taste, with decks, rationale, before-and-after comparisons and answers to objections. Not for critiquing the design (design-critique-gate).

• component-state-matrix

  Render every component at every state, density and theme on one proof sheet, and screenshot-diff it in CI. Use for visual regression and missing states. Not for API docs (design-system-docs).

• content-model-to-ui

  Turn a Supabase or Postgres schema into an on-system UI spec and React, Vue or Svelte scaffold, with CRUD screens, forms, list and detail pages and admin panels. Not for dashboards or marketing pages.

• design-critique-gate

  Adversarial design review before a client sees the work, with ranked findings that name the mechanism behind each problem. Use for 'does this look professional'. Not for accessibility audits.

• design-system-docs

  Generate a design system's docs from its own source, including a token reference with measured contrast, component API tables and a style guide that fails CI on drift. Not for library docs or READMEs.

• design-system-versioning

  Version a design system without breaking consumers. Classifies each change as major, minor or patch by what renders differently, and writes the changelog, migration guide and codemods. Not for apps.

• design-token-migration

  Migrate an existing codebase onto design tokens, from a census of hardcoded values to tokens.css and a codemod proven by an audit. Use for magic numbers and near-identical greys. Not for new systems.

• email-template-system

  Build HTML email that survives Outlook, Gmail and dark mode, compiling tokens to inlined tables or an MJML or React Email theme. Use for templates and newsletters. Not for copywriting or ESP setup.

• figma-variables-sync

  Keep Figma and code on one token vocabulary. Audits designs, generates tokens.css from a Figma or Tokens Studio export, pushes tokens back as variables, catches drift in CI. Not for building pages.

• landing-page-conversion

  Write landing, pricing and product pages (positioning, sections, copy, offers, countdowns, urgency), audited for conversion. Declines dark patterns. Not for visual critique (design-critique-gate).

• perf-budget-gate

  Set web performance budgets and fail the build when they break, with page-weight checks on every commit and measured Core Web Vitals (LCP, CLS, INP) on each PR. Not for back-end performance.

• web-design-studio

  Build design systems and front-end architecture enforced by an audit, with tokens, a closed type and spacing scale, OKLCH colour, cascade layers and layout primitives. Not for page copy or critique.

• contrast

  Check contrast - every role pair in the project's tokens, in each theme, or one foreground on one background, against WCAG 2.2.

• critique

  Get an adversarial design critique from the design critic, a subagent with no stake in the build, then the ranked report and the tickets.

• deck

  Build the client deck from the evidence - audit, critique, defence sheet and deck in one run, stopping when a finding blocks the presentation.

• docs-check

  Check that the design-system docs still describe the code - extract the system, then diff it and every hand-written claim against the docs' committed snapshot.

• email-build

  Build an HTML email from its template - lint the source, compile it with the tokens, lint the result, and render it light, dark and without styles.

• figma-sync

  Bring a Figma variables export into the project - audit it against the token system, write the designer's questions when it fails, else generate the tokens and show what they would change.

• gate-a11y

  Run the accessibility gate's browser half by hand - axe, accessible names, tab order, visible focus, forced colours, composited contrast, keyboard and reflow on a served page or a built file.

• gate-matrix

  Run the state-matrix gate by hand - render every component in every state, density and theme, screenshot each cell, and compare it with its baseline.

• gate-perf

  Run the performance gate by hand - the static audit of the build, then LCP, CLS, TBT and TTFB measured in a real browser on the served site, against the project's budget.

• gate

  Run the design, accessibility and performance gates on this project in one pass, with one verdict.

• install-gate

  Put the design, accessibility and performance gates into this project and write the CI workflow that runs them on every push.

• migrate

  Take the census for a token migration - every hard-coded design value in the code, clustered into the decisions it was trying to be, with the token mapping proposed. Changes nothing.

• new-system

  Start a design system from a brand colour - the accent and neutral ramps, a type scale and the starter styles, with every role pair's contrast checked.

• release-check

  Check a design-system release - extract the system, diff it against the published snapshot, gate unannounced removals, and write the changelog and the migration guide.

• schema-to-screens

  Turn a database schema into screens - introspect it, ask the questions only a person can answer, scaffold the UI, audit it, and check the security the screens depend on.

• tw-probe

  Check what a Tailwind v4 project's theme generates - every role class it declares, none of Tailwind's stock classes, and any class you name - with the project's own tailwindcss.

Subagents (6)

• a11y-auditor

  A read-only accessibility auditor. Use to audit a project's source, or a served page, against WCAG 2.2 AA with a11y-audit-runner's two gates, in its own context, and get back the findings by criterion and the manual checks no tool can make.

• codemod-batch-reviewer

  A read-only reviewer for one batch of a token migration's codemod. Use after each apply_codemod.py --apply, to check every changed line against the migration's reconciliation.md and its known traps, and get back a verdict per file before the batch is committed.

• design-auditor

  A read-only design-system auditor. Use to check a project's styles against web-design-studio's Nine Laws and its token contract, in its own context - the audit, the role-pair contrast, and the drift a linter cannot see - and get back the findings by Law.

• design-critic

  An adversarial design critic with no stake in the build. Use when a page, screen or component needs an honest critique before it is shown, above all one built in this session. It critiques in a fresh context and returns findings.json for design-critique-gate's report.

• gate-runner

  Runs the suite's browser gates (accessibility at runtime, Core Web Vitals, the state-matrix diff) on a served or built page and returns only the verdicts, the failing findings and the JSON paths, so thousands of lines of output stay out of the main conversation.

• supabase-security-reviewer

  A read-only security reviewer for screens scaffolded from a Supabase schema. Use after content-model-to-ui's scaffold, or /pro-web-design-suite:schema-to-screens, to check row-level security, the write policies, the columns RLS cannot protect and which key the browser holds, before the screens ship.

MCP servers (1)

• gates

  runs: node ${CLAUDE_PLUGIN_ROOT}/mcp/design_gates.mjs

Hooks (3)

• PreToolUse

  node

• PostToolUse

  node

• UserPromptSubmit

  node

Similar plugins