web-design-plugin

Plugin web-design-plugin from marketplace claude-my-marketplace in lukaskellerstein/claude-my-marketplace. Commands read from the repo's manifest — 5 days ago.

Skills (4)

• animation-system

  CSS and GSAP animation patterns for websites — ScrollTrigger, timelines, stagger effects, page transitions, micro-interactions, and performance optimization. Use when implementing animations for web design projects, when the user wants scroll-triggered animations, page load reveals, GSAP integration

• css-architecture

  Project-level CSS architecture for React/Vite websites — Tailwind CSS configuration with design tokens, shadcn/ui theming, CSS custom properties, and responsive strategy. Tailwind-first approach. Use when setting up CSS for a new React/Vite project, mapping a styleguide to Tailwind config, configuri

• page-architecture

  Information architecture and content planning for websites — page structure, section definitions, content hierarchy, text content, and mock data strategy. Use when planning what pages a website needs, what sections go on each page, what content fills them, when the user asks "what pages/sections sho

• variation

  Generate alternative design variations from an existing web design — systematically vary colors, typography, animation intensity, and spacing density while preserving page structure and content. Use when the user wants multiple visual options from a base design, says "generate variations" or "try di

Slash commands (1)

• /web-design-plugin:web-design

  Design and build a complete website or webapp from a project brief — end-to-end workflow from design to working React/Vite code

Subagents (11)

• assembler

  Wires together individually-built pages into a complete website — React Router setup, shared navigation state, cross-page consistency, page transitions, and final integration. Runs after all page-builder agents complete. <example> Context: All pages are built, need to wire them together user: "Assem

• design-doc-animation

  Produces the animation-plan.md file — global animation intensity, GSAP setup instructions, page transition strategy, and prefers-reduced-motion fallback. Runs in parallel with other design-doc agents during Wave 1. <example> Context: Orchestrator needs animation planning for a multi-page site user:

• design-doc-data

  Produces the mock-data.md file — JSON structures for all dynamic content across the site. Runs in parallel with other design-doc agents during Wave 1. <example> Context: Orchestrator needs mock data for a SaaS site with pricing tiers and testimonials user: "Create mock data. Plan: [pages/sections wi

• design-doc-foundation

  Produces the foundational design files — design-document.md (index), styleguide.md (aesthetic profile, fonts, colors, spacing), and css-architecture.md (Tailwind config, CSS tokens, global styles). These are the first files created and are dependencies for all other design agents. <example> Context:

• design-doc-media

  Produces the media-plan.md file — style prefix for visual consistency, shared media assets (logo, product images, OG image), and icon master list. Runs in Wave 2 after styleguide.md is available. <example> Context: Orchestrator needs media planning after styleguide is ready user: "Create media plan.

• design-doc-pages

  Produces all per-page specification files (pages/home.md, pages/about.md, etc.) — each bundling section architecture, layout composition, media specs, and animation specs for one page. Runs in Wave 2 after styleguide.md is available. <example> Context: Orchestrator needs all page specs after stylegu

• page-builder

  Builds ONE page or major section of a website end-to-end — React components, text content, mock data, media generation/sourcing (images, video, icons), Tailwind styling, and GSAP/CSS animations. Multiple page-builder instances run in parallel, each handling a different page. Receives its page spec f

• scaffold-builder

  Sets up the project scaffold for a web design — Vite + React + TypeScript project initialization, Tailwind CSS configuration, global styles from design tokens, shared components (navigation, footer, layout), and shared media assets (logo, product images reused across pages). Runs before page-builder

• variation-generator

  Generates N alternative design documents from an existing base design — varies colors, typography, animation intensity, and spacing density while preserving page structure and content. Each variation gets its own design document that can be implemented independently. <example> Context: User wants 3

• visual-fixer-app

  Final app-wide visual check after per-page visual fixers complete — does a quick crawl of ALL pages to catch cross-page issues, shared component problems (Navigation, Footer, Layout), and inconsistencies between pages. Fixes shared file issues that per-page fixers could not touch. <example> Context:

• visual-fixer-page

  Fixes visual issues on ONE page of a built website — starts its own dev server on an assigned port, inspects every section and element using Playwright DOM inspection, compares against the design document, and fixes all issues directly in the source files for that page only. Multiple instances run i

MCP servers (1)

• webdesign-playwright

  runs: npx @playwright/mcp@latest --headless

Similar plugins