Web Design Builder

This one generates complete HTML5/JavaScript designs from specs and automatically tests them with Playwright MCP. It handles everything from landing pages to full web apps, with built-in accessibility checks, responsive breakpoint testing, and keyboard navigation verification. The workflow is smart about checking if Playwright is installed first and skips verification gracefully if it's not available. What's useful here is that it doesn't just spit out code and call it done. It actually loads your design in a browser, screenshots it at mobile/tablet/desktop sizes, tests tab order, checks WCAG compliance, and validates interactive components. Good for when you want working, accessible markup without the manual QA grind.

GitHub stars: 58
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add rknall/claude-skills --skill 'Web Design Builder' --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

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?)