Web Design Builder

概要

Web Design Builder streamlines the creation of production-ready web interfaces, from simple landing pages to complex web applications. It leverages modern frameworks like Tailwind CSS and React while prioritizing semantic HTML and WCAG 2.1 Level AA accessibility standards. The skill's standout feature is its integrated verification loop, which uses Playwright MCP to perform automated accessibility scans, responsive breakpoint checks, and functional testing, ensuring the resulting code is high-quality, mobile-friendly, and inclusive.

主な機能

• Mobile-first responsive design implementation with cross-device testing
• Comprehensive accessibility auditing for WCAG 2.1 Level AA compliance
• Support for multiple frameworks including Tailwind CSS, React, and Vue
• 5 GitHub stars
• Automated accessibility and functionality verification via Playwright MCP
• Detailed design verification reporting with visual screenshots and performance metrics

ユースケース

• Refactoring legacy HTML/CSS code into modern, responsive components
• Building accessible landing pages and prototypes from project specifications
• Generating and verifying design systems with integrated functional testing