web-design-builder_skill

Overview

This skill creates and refactors production-ready HTML5/JavaScript web designs from a brief, specification, or existing code. It generates accessible, responsive layouts with modern patterns and optional framework choices (Vanilla, Tailwind, React, Vue, Alpine). The skill can automatically verify accessibility and functionality using Playwright MCP when available. Deliverables include a runnable mockup, separate production files on request, and a verification report when tests run.

How this skill works

I gather scope and technical preferences, then produce a complete mockup: semantic HTML, responsive CSS (mobile-first), and progressive JavaScript. I include accessibility features (WCAG AA baseline, ARIA landmarks, keyboard support) and can save files in a recommended project structure. If Playwright MCP is detected I run automated accessibility, keyboard, visual, functionality, and basic performance checks and generate a verification report. If Playwright MCP is not available I note that verification is skipped and provide setup instructions.

When to use it

• Create a landing page, marketing site, or app mockup from a description
• Refactor or improve existing HTML/CSS/JS for accessibility and responsiveness
• Build component libraries, design systems, or UI prototypes
• Generate accessible forms, modals, navigation, and interactive components
• Verify design automatically with Playwright MCP when available

Best practices

• Start mobile-first and keep layouts flexible with CSS Grid/Flexbox
• Prefer semantic HTML and explicit ARIA landmarks for screen readers
• Use CSS variables for theming and maintainable styles
• Provide clear focus states and keyboard interactions for all controls
• Split mockup (single-file) from production build (separate CSS/JS/assets)
• Run automated accessibility checks and re-verify after fixes

Example use cases

• Turn a product brief into a responsive landing page with CTA and form
• Refactor an existing dashboard to improve accessibility and keyboard navigation
• Produce a React component set with documentation and examples
• Create a single-file prototype (index.html) for stakeholder review and screenshots
• Run Playwright MCP checks and deliver a verification report listing fixes and next steps