Skill 詳細
web design builder
Creates and refactors responsive, accessible web designs.
使用前に確認
自動レビューは関連性のみを確認し、安全性や推奨を保証しません。使用前に出典の説明を読んでください。
SKILL.md
これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。
---
name: "Web Design Builder"
description: "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."
---
# 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-coloGitHub で全文を読む （外部ページ）