--- name: website-creation-automation description: Automate end-to-end website creation with AI-powered optimization, design, and testing. Trigger this skill whenever the user wants to create a new website, build a landing page, design a web application, or automatically generate a complete website from a description. This skill takes a user's website idea or prompt, optimizes it for clarity, designs a modern responsive website, and automatically tests it for quality issues. Use this skill for any "create a website" or "build a web application" request, including landing pages, portfolio sites, e-commerce pages, dashboards, or any web-based project. compatibility: models: - claude-sonnet-4-20250514 (design and testing) - claude-haiku-4.5-20251001 (bug fixes) required_skills: - prompt-optimizer - frontend-atomic-design - ui-ux-testing --- # Website Creation Automation Skill An intelligent, end-to-end automation workflow for creating complete, tested websites from simple prompts. ## What This Skill Does This skill orchestrates a complete website creation pipeline: 1. **Prompt Optimization** — Takes your website description and optimizes it into a detailed, structured prompt 2. **Website Design** — Uses the optimized prompt to design and build a modern, responsive website 3. **Automated Testing** — Tests the generated website for visual, interactive, and responsive issues 4. **Auto-Fix** — Detects and fixes any issues found during testing The entire workflow is automated, so you just provide a simple description of what you want, and the skill handles the rest. ## Core Workflow ### Step 1: Optimize Your Website Prompt Your initial description (e.g., "Create a portfolio website for a freelance designer") is passed to the **prompt-optimizer** skill, which: - Adds specific details about layout, features, and target audience - Clarifies design preferences and functionality requirements - Structures the request to guide high-quality website generation - Returns a detailed, optimized prompt ready for design **Example transformation:** ``` Input: "Create a portfolio website for a freelance designer" ↓ Output: "Create a modern portfolio website for a freelance graphic designer. Include: hero section with featured work, project showcase grid (6-8 projects), about section, services list, client testimonials, contact form, and footer. Target audience: potential clients and collaborators. Design should be minimalist with emphasis on visual work. Mobile-responsive. Use modern sans-serif typography and white space. Include smooth scroll animations." ``` ### Step 2: Design the Website The **frontend-atomic-design** skill uses the optimized prompt to: - Break down the website into atomic components (atoms, molecules, organisms) - Create a responsive layout that works on desktop, tablet, and mobile - Apply modern design patterns using Tailwind CSS - Build interactive elements and proper semantic HTML - Generate a complete, production-ready HTML file (or React component) **Outputs:** - Full HTML file with embedded CSS and JavaScript - All assets (icons, fonts) are self-contained - Responsive design with mobile-first approach - Accessible markup with semantic HTML5 ### Step 3: Test the Website The **ui-ux-testing** skill performs comprehensive testing: - Visual regression testing (captures baseline screenshots) - Responsive layout validation (mobile, tablet, desktop) - Interactive element testing (buttons, forms, links) - Accessibility checking (color contrast, keyboard navigation) - Cross-browser compatibility assessment - User flow validation **Testing output includes:** - Screenshots from multiple viewport sizes - Detailed findings and issues detected - Visual regression comparison - Recommendations for improvements ### Step 4: Auto-Fix Detected Issues Any issues detected in testing are automatically fixed: - **Using Haiku 4.5** — A faster model optimized for targeted fixes - **HTML-only fixes** — Modifications to structure, styling, or interactivity - **Preserves design intent** — Fixes maintain the original design aesthetic - **Re-validates** — Quick verification that fixes resolved the issues **Common fixes include:** - Correcting responsive behavior issues - Fixing accessibility problems - Adjusting spacing, alignment, or colors - Improving interactive element behavior - Ensuring all content is properly visible --- ## When to Use This Skill Use this skill whenever you want to: - **Create a new website** from scratch based on a description - **Build a landing page** for a product, service, or event - **Design a portfolio site** to showcase your work - **Create an e-commerce page** with product displays - **Build a dashboard or web app** UI - **Generate a multi-page website** (returns first page, can iterate) - **Prototype a website concept** quickly ## How to Trigger This Skill Simply provide: 1. **Website description** — What kind of website you want (e.g., "e-commerce store for handmade jewelry", "SaaS landing page", "restaurant menu website") 2. **Optional details** — Any specific requirements (colors, features, tone, audience) The skill handles everything else automatically. ## Example Usage **User prompt:** "Create a landing page for a sustainable fashion startup called EcoStitch. Include a hero section, features of our eco-friendly materials, pricing plans, customer testimonials, and a newsletter signup." **Skill processes:** 1. Optimizes prompt with specific design details and layout structure 2. Designs a modern, responsive landing page with all requested sections 3. Tests layout across mobile/tablet/desktop, forms, links, and visual design 4. Fixes any responsive or interactive issues found 5. Returns production-ready HTML file **Final output:** A complete, tested, bug-free website ready to deploy or customize further. --- ## Technical Details ### Model Usage - **Sonnet 4.6** — Used for optimization, design, and testing (high-quality complex tasks) - **Haiku 4.5** — Used for bug fixes only (fast, targeted improvements) ### Skill Integration This skill coordinates three core skills in sequence: ``` User Prompt ↓ [prompt-optimizer] → Optimized Prompt ↓ [frontend-atomic-design] → HTML/React Website ↓ [ui-ux-testing] → Test Results + Screenshots ↓ [Bug Fix Loop] → Fixed HTML/React Website ↓ Final Website (Ready to Use) ``` ### Output Format The final website is delivered as: - **HTML file** — Self-contained with CSS and JavaScript embedded - **Screenshots** — Before/after testing comparison - **Test report** — Issues found and fixes applied - **Deployment ready** — Can be hosted on any static hosting service --- ## Limitations & Notes - **Single-page output** — Generates one complete page (though can be expanded to multi-page) - **Static by default** — Returns HTML; can generate React components if needed - **Database-free** — Forms are functional but don't store data without backend integration - **Rapid iteration** — If you want to modify the result, you can iterate by running the skill again with updated requirements --- ## Tips for Best Results 1. **Be descriptive** — More detail in your initial prompt leads to better results 2. **Specify audience** — Who is this website for? (target customers, users, etc.) 3. **Include features** — What should the website do? (e.g., showcase products, collect emails, etc.) 4. **Mention style** — Any aesthetic preferences? (minimalist, colorful, corporate, playful, etc.) 5. **Test thoroughly** — Review the testing results to ensure the site meets your needs --- ## Workflow Diagram ``` START ↓ Input: Website Description ↓ [Call: prompt-optimizer skill] ↓ Receive: Optimized Detailed Prompt ↓ [Call: frontend-atomic-design skill] ↓ Receive: HTML/React Website Code ↓ [Call: ui-ux-testing skill] ↓ Receive: Test Results + Issues Found ↓ Are there critical issues? ├─ YES → [Use Haiku 4.5 to fix] → Re-test ├─ NO → Proceed ↓ COMPLETE: Return Website + Test Report ``` --- ## Future Enhancements Potential expansions to this skill: - Multi-page website generation (homepage, about, services, contact, etc.) - CMS integration (connect to content management systems) - Backend API scaffolding (Node.js/Express templates) - SEO optimization (meta tags, structured data, open graph) - Analytics integration (Google Analytics, Mixpanel) - E-commerce integration (payment processing, inventory)