Professional Web Design Agents

Plugin professional-web-design-agents in prantikmedhi/motioncraft. Commands read from the repo's manifest — 1 month ago.

Skills (25)

• accessibility-agent

  This skill should be used when a website needs an accessibility audit or remediation. Instruct the AI agent to inspect real interaction paths, implement practical fixes, and report verified gaps.

• asset-agent

  This skill should be used when a website needs images, icons, fonts, video, or other visual assets. Instruct the AI agent to confirm provenance, optimize delivery, and preserve accessible fallbacks.

• code-reviewer-agent

  This skill should be used when website changes need an implementation review before handoff or release. Instruct the AI agent to inspect the diff, reproduce risks, rank findings, and verify fixes.

• color-palette-agent

  This skill should be used when a website needs a color palette, theme, or token cleanup. Instruct the AI agent to create semantic tokens, test contrast and states, and document adoption rules.

• component-research-agent

  This skill should be used when a team must choose between building a React component and adopting a library. Instruct the AI agent to research primary sources, compare fit and risk, and make an evidence-backed recommendation.

• content-seo-agent

  This skill should be used when a page needs content structure, metadata, crawlability, or social-preview review. Instruct the AI agent to align content with user intent and implement only supportable claims.

• design-system-agent

  This skill should be used when a product needs design tokens, primitives, or consistent component APIs. Instruct the AI agent to audit existing patterns, define contracts, and migrate incrementally.

• forms-agent

  This skill should be used when a website needs a form, validation flow, or submission-state improvement. Instruct the AI agent to design for completion, preserve data, and verify server and client failures.

• gsap-agent

  This skill should be used when a website needs GSAP timelines, interaction motion, or ScrollTrigger behavior. Instruct the AI agent to scope animations, clean them up, respect reduced motion, and verify runtime cost.

• handoff-agent

  This skill should be used when website work needs a clear engineering or deployment handoff. Instruct the AI agent to summarize decisions, evidence, risks, and next steps without repeating implementation detail.

• lenis-agent

  This skill should be used when a website explicitly needs Lenis smooth scrolling or Lenis-GSAP synchronization. Instruct the AI agent to preserve native navigation, focus, touch behavior, and clean teardown.

• magic-mcp-agent

  This skill should be used when a configured Magic MCP client can accelerate a UI component request. Instruct the AI agent to prompt with project constraints, treat output as untrusted draft code, and review every change.

• performance-agent

  This skill should be used when a website is slow, heavy, unstable, or adding visual effects. Instruct the AI agent to measure first, set budgets, make targeted changes, and compare results.

• plan-execution-agent

  This skill should be used when a website brief needs a scoped implementation plan or progress tracking. Instruct the AI agent to turn outcomes into file-level milestones and verify each completed step.

• qa-browser-agent

  This skill should be used when a website change needs browser-level verification. Instruct the AI agent to exercise important user flows, record evidence, and distinguish passed coverage from untested risk.

• react-bits-agent

  This skill should be used when a React Bits component or animation pattern should be adapted into an existing application. Instruct the AI agent to copy the smallest useful pattern, align it with project conventions, and audit behavior before shipping.

• responsive-agent

  This skill should be used when a layout must work across screens, zoom levels, and input types. Instruct the AI agent to use content-driven constraints and test real failure points.

• security-agent

  This skill should be used when frontend code, dependencies, or third-party integrations need security and privacy review. Instruct the AI agent to trace untrusted data, protect secrets, and rank findings by practical impact.

• skill-authoring-agent

  This skill should be used when creating, splitting, documenting, or validating reusable website-agent skills. Instruct the AI agent to define one repeatable job, scaffold it, add guardrails, and run structural tests.

• threejs-3d-agent

  This skill should be used when a website needs a Three.js scene, interactive canvas, model, or shader. Instruct the AI agent to budget GPU work, preserve an HTML fallback, and dispose all resources.

• tooling-integration-agent

  This skill should be used when a website task requires Vanta, GSAP, Lenis, React Bits, Three.js, Magic MCP, or React component research. Instruct the AI agent to select the smallest fit, integrate it safely, and verify fallbacks and cleanup.

• typography-agent

  This skill should be used when a website needs font selection, type scale, hierarchy, or readability improvement. Instruct the AI agent to define role-based typography tokens and verify loading, contrast, and responsive behavior.

• ui-component-agent

  This skill should be used when a React website needs a new component or a component refactor. Instruct the AI agent to define the contract first, build accessible states, and verify responsive behavior.

• vanta-agent

  This skill should be used when a website needs a Vanta animated background as optional visual enhancement. Instruct the AI agent to initialize it safely, provide a static fallback, and clean up renderer resources.

• web-design-orchestrator

  This skill should be used when a website request needs coordinated planning, design, implementation, and review. Instruct the AI agent to route work to relevant specialists, preserve user constraints, and return verified delivery status.