Agent skill · design visual · rknall
Web Design Builder
Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs.
Why this skill is useful
Generates complete, accessible web designs with specific frameworks and automated verification using Playwright MCP, which the AI wouldn't reliably generate on its own.
What it needs
Requires playwright installed locally. About 9k tokens when loaded. Last updated 2025-10-20. 58 stars on the source repository.
What this skill does
Web Design Builder This skill creates professional HTML5/JavaScript web designs from specifications, with automatic accessibility and functionality verification using Playwright MCP. When to Use This Skill Activate this skill when the user requests: Create a web design from a specification or description Build a landing page, website, or web application Create a design mockup or prototype Refactor or improve existing HTML/CSS/JavaScript code Build responsive web interfaces Create component libraries or design systems Generate accessible web designs with WCAG compliance Core Workflow Phase 1: Requirements Gathering When a user requests a web design, start by understanding their needs: 1. Clarify the Design Scope What type of design? (landing page, dashboard, form, etc.) Target audience and use case Required features and functionality Content and copy (provided or placeholder?) Brand colors, fonts, or design system Responsive requirements (mobile-first?) 2. Technical Preferences Framework preference: Vanilla HTML/CSS/JS (simple, no dependencies) Tailwind CSS (utility-first, recommended for rapid development) React (component-based, for complex interactions) Vue (progressive framework) Alpine.js (lightweight reactivity) Browser support requirements Accessibility requirements (WCAG level) Performance constraints 3. Check Playwright MCP Availability IMPORTANT: Before starting the design process, check if Playwright MCP is available: If Playwright MCP is NOT available: Inform the user: "Playwright MCP is not installed. Design verification will be skipped." Provide installation instructions (see MCP Setup section below) Continue with design generation but skip verification phase Mark this clearly in the output If Playwright MCP IS available: Inform the user: "Playwright MCP detected. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills rknall/web-design-builder