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.
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:
```javascript
// Check if mcp__playwright tools are available
// Look for tools like: mcp__playwright__navigate, mcp__playwright__screenshot, etc.
```
**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. Design will be automatically verified."
- Include verification in the workflow
### Phase 2: Design Generation
#### Step 1: Create Design Mockup
Generate a complete HTML/CSS/JS mockup including:
**HTML Structure:**
- Semantic HTML5 elements
- Proper heading hierarchy (h1 → h6)
- ARIA landmarks (header, nav, main, aside, footer)
- Accessible form labels and inputs
- Alt text for images
- Unique page title
**CSS Styling:**
- Responsive design (mobile-first)
- CSS Grid or Flexbox for layouts
- Custom properties (CSS variables) for theming
- Smooth transitions and animations
- Print styles (if applicable)
- Dark mode support (optional)
**JavaScript Functionality:**
- Progressive enhancement
- Accessible interactions (keyboard support)
- Form validation
- Dynamic content loading
- Event handling
- Error handling
**Accessibility Features:**
- WCAG 2.1 Level AA compliance minimum
- Keyboard navigation support
- Focus indicators
- Screen reader friendly
- Color contrast compliance (4.5:1 minimum)
- Skip links
- ARIA attributes where needed
**Example Output Structure:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<style>
/* Modern CSS with custom properties */
:root {
--primary-color: #0066cc;
--text-color: #1a1a1a;
--bg-color: #ffffff;
--spacing: 1rem;
}
/* Reset and base styles */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--text-color);
background: var(--bg-color);
}
/* Responsive layout */
@media (max-width: 768px) {
/* Mobile styles */
}
</style>
</head>
<body>
<!-- Accessible skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Semantic structure -->
<header role="banner">
<nav aria-label="Main navigation">
<!-- Navigation -->
</nav>
</header>
<main id="main-content" role="main">
<!-- Main content -->
</main>
<footer role="contentinfo">
<!-- Footer -->
</footer>
<script>
// Progressive enhancement JavaScript
(function() {
'use strict';
// Feature detection
if (!('querySelector' in document)) return;
// Your JavaScript here
})();
</script>
</body>
</html>
```
#### Step 2: Save Design to File
Save the generated design to a file:
```javascript
// Recommended file structure
project-name/
index.html // Main HTML file
styles.css // Separate CSS (if needed)
script.js // Separate JS (if needed)
assets/
images/ // Image assets
fonts/ // Custom fonts
```
Use the Write tool to create the file:
- Save to user's current directory or ask for preferred location
- Use descriptive filename (e.g., `landing-page.html`, `dashboard.html`)
- Create single-file HTML for mockups (CSS/JS inline)
- Create separate files for production builds
### Phase 3: Design Verification (ONLY if Playwright MCP is available)
**IMPORTANT**: Only execute this phase if Playwright MCP was detected in Phase 1.
#### Step 1: Launch Browser and Load Design
Use Playwright MCP to open the design:
```javascript
// Navigate to the local HTML file
await mcp__playwright__navigate({
url: 'file:///path/to/design.html'
});
```
#### Step 2: Accessibility Testing
Run comprehensive accessibility checks:
1. **Automated Accessibility Scan**
- Check for WCAG violations
- Verify color contrast ratios
- Check heading hierarchy
- Verify ARIA attributes
- Check form labels
- Verify alt text on images
2. **Keyboard Navigation Test**
- Tab through all interactive elements
- Verify focus indicators are visible
- Check tab order is logical
- Test Escape key behavior (modals, dropdowns)
- Verify no keyboard traps
3. **Screen Reader Compatibility**
- Check ARIA landmarks
- Verify semantic HTML usage
- Check dynamic content announcements
- Verify form error messages
#### Step 3: Visual Testing
Capture screenshots and verify layout:
```javascript
// Take full-page screenshot
await mcp__playwright__screenshot({
fullPage: true,
path: 'design-screenshot.png'
});
// Test responsive breakpoints
const breakpoints = [
{ width: 375, height: 667, name: 'mobile' },
{ width: 768, height: 1024, name: 'tablet' },
{ width: 1440, height: 900, name: 'desktop' }
];
for (const bp of breakpoints) {
await mcp__playwright__setViewportSize({
width: bp.width,
height: bp.height
});
await mcp__playwright__screenshot({
path: `design-${bp.name}.png`
});
}
```
#### Step 4: Functionality Testing
Test interactive elements:
1. **Form Validation**
- Test required fields
- Test input validation
- Test error messages
- Test success states
2. **Interactive Components**
- Test buttons and links
- Test modals and dialogs
- Test dropdowns and menus
- Test tabs and accordions
- Test carousels and sliders
3. **JavaScript Functionality**
- Verify event handlers work
- Test dynamic content loading
- Check console for errors
- Verify progressive enhancement
#### Step 5: Performance Check
Evaluate performance metrics:
1. **Load Time**
- Measure page load time
- Check resource loading
- Identify bottlenecks
2. **Resource Optimization**
- Check CSS file size
- Check JavaScript file size
- Verify image optimization
- Check for unused CSS/JS
### Phase 4: Verification Report
Generate a comprehensive report:
```markdown
# Design Verification Report
## Overview
- **Design Type**: [Landing Page / Dashboard /Related in Ads & Marketing
ads
IncludedMulti-platform paid advertising audit and optimization skill. Analyzes Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, and Apple Ads. 250+ checks with scoring, parallel agents, industry templates, and AI creative generation.
banana
IncludedAI image generation Creative Director powered by Google Gemini Nano Banana models. Use this skill for ANY request involving image creation, editing, visual asset production, or creative direction. Triggers on: generate an image, create a photo, edit this picture, design a logo, make a banner, visual for my anything, and all /banana commands. Handles text-to-image, image editing, multi-turn creative sessions, batch workflows, and brand presets.
rpg-migration-analyzer
IncludedAnalyzes legacy RPG (Report Program Generator) programs from AS/400 and IBM i systems for migration to modern Java applications. Extracts business logic from RPG III/IV/ILE source code, identifies data structures (D-specs), file operations (F-specs), program dependencies (CALLB/CALLP), and converts RPG constructs to Java equivalents. Generates migration reports, complexity estimates, and Java implementation strategies with POJO classes, JPA entities, and service methods. Use when modernizing AS/400 or IBM i legacy systems, analyzing RPG source files (.rpg, .rpgle, .RPGLE), converting RPG to Java, mapping data specifications to Java classes, planning legacy system migration, or when user mentions RPG analysis, Report Program Generator, RPG III/IV/ILE, AS/400 modernization, IBM i migration, packed decimal conversion, or mainframe application rewrite.
brand-library-architect
IncludedBuild a complete brand library for a product — visual asset render pipeline, brand documentation set (BRAND, COPY, MANIFESTO, BIOS, FAQ, GLOSSARY, TONE, PRICING), open-source convention files (README, CONTRIBUTING, SECURITY, CODE_OF_CONDUCT), and a self-contained press kit. This skill should be used when the user asks to "build a brand library / brand kit / press kit / brand assets" for a product, "set up a brand library workflow," "create a positioning manifesto plus visual identity," or any combination of brand documentation + visual asset pipeline. Apply phase-by-phase or run end-to-end. Templates are product-agnostic and use {{TOKEN}} placeholders the skill prompts the user to fill.
writing-tech-post
IncludedAuthors engineering blog posts end-to-end: launch deep-dives, incident postmortems, architecture migrations, performance case studies, tutorials, AI/agent system writeups, security disclosures, and research-to-product translations. Picks the correct archetype, plans the abstraction ladder, enforces an evidence cadence (diagrams, benchmarks, profiles, traces, code, ablations), tunes voice against publisher house styles (Datadog, Vercel, GitHub, AWS, Meta, Cloudflare, Jane Street), and runs a pre-publish gate for narrative momentum and disclosure ethics. Use when drafting a new engineering post, restructuring a draft that feels flat, deciding which evidence form belongs where, validating that depth and product context are balanced, or preparing a postmortem, migration, or performance narrative for external publication. Do not use for API reference documentation, README authoring, marketing copy, release notes, generic SEO content, ghost-written executive thought leadership, or non-engineering long-form essays.
blog-google
IncludedGoogle API integration for blog performance: PageSpeed Insights, CrUX Core Web Vitals with 25-week history, Search Console performance, URL Inspection, Indexing API, GA4 organic traffic, NLP entity analysis for E-E-A-T, YouTube video search for embedding, and Google Ads Keyword Planner. Progressive feature availability based on credential tier (API key, OAuth/service account, GA4, Ads). Shares config with claude-seo at ~/.config/claude-seo/google-api.json. Use when user says "google data", "page speed", "core web vitals", "search console", "indexation", "GA4", "keyword research", "nlp entities", "blog performance", "youtube search", "google api setup".