From 303423706d2e0a22315f25aef23015888033af75 Mon Sep 17 00:00:00 2001
From: jhauga <johnhaugabook@gmail.com>
Date: Sun, 8 Mar 2026 03:42:21 -0400
Subject: [PATCH 1/6] new skill html-coder

---
 docs/README.skills.md                         |   1 +
 skills/html-coder/SKILL.md                    | 337 +++++++
 skills/html-coder/assets/blog-personal.html   | 348 +++++++
 skills/html-coder/assets/blog-tech.html       | 398 ++++++++
 skills/html-coder/assets/blog-travel.html     | 388 ++++++++
 skills/html-coder/assets/business-agency.html | 411 +++++++++
 .../html-coder/assets/business-company.html   | 347 +++++++
 .../assets/business-consulting.html           | 380 ++++++++
 .../html-coder/assets/business-services.html  | 385 ++++++++
 .../assets/creative-artist-portfolio.html     | 435 +++++++++
 .../assets/creative-designer-portfolio.html   | 448 +++++++++
 .../creative-photographer-portfolio.html      | 509 +++++++++++
 skills/html-coder/assets/food-bakery.html     | 520 +++++++++++
 skills/html-coder/assets/food-cafe.html       | 509 +++++++++++
 skills/html-coder/assets/food-foodtruck.html  | 624 +++++++++++++
 skills/html-coder/assets/food-restaurant.html | 392 ++++++++
 .../html-coder/assets/tech-app-landing.html   | 551 +++++++++++
 .../html-coder/assets/tech-saas-landing.html  | 439 +++++++++
 .../assets/tech-startup-homepage.html         | 625 +++++++++++++
 .../assets/travel-destination-guide.html      | 746 +++++++++++++++
 skills/html-coder/assets/travel-hotel.html    | 681 ++++++++++++++
 .../html-coder/assets/travel-tour-agency.html | 781 ++++++++++++++++
 skills/html-coder/assets/util-404.html        |  61 ++
 skills/html-coder/assets/util-500.html        |  60 ++
 skills/html-coder/assets/util-about.html      | 313 +++++++
 skills/html-coder/assets/util-contact.html    | 307 +++++++
 skills/html-coder/assets/util-faq.html        | 402 ++++++++
 skills/html-coder/assets/util-login.html      |  97 ++
 skills/html-coder/assets/util-pricing.html    | 346 +++++++
 skills/html-coder/assets/util-privacy.html    | 448 +++++++++
 skills/html-coder/assets/util-signup.html     | 143 +++
 skills/html-coder/assets/util-terms.html      | 331 +++++++
 skills/html-coder/references/add-css-style.md | 591 ++++++++++++
 .../html-coder/references/add-javascript.md   | 792 ++++++++++++++++
 skills/html-coder/references/attributes.md    | 368 ++++++++
 skills/html-coder/references/essentials.md    | 414 +++++++++
 .../html-coder/references/getting-started.md  | 157 ++++
 .../references/glossary-attributes.md         | 527 +++++++++++
 .../html-coder/references/glossary-events.md  | 495 ++++++++++
 .../references/glossary-global-attributes.md  | 701 ++++++++++++++
 skills/html-coder/references/glossary-tags.md | 383 ++++++++
 .../html-coder/references/glossary-ui-ux.md   | 461 ++++++++++
 skills/html-coder/references/how-to.md        | 652 +++++++++++++
 skills/html-coder/references/quickstart.md    | 273 ++++++
 skills/html-coder/references/reference.md     | 290 ++++++
 skills/html-coder/references/standards.md     | 506 +++++++++++
 skills/html-coder/references/ui-ux.md         | 856 ++++++++++++++++++
 47 files changed, 20229 insertions(+)
 create mode 100644 skills/html-coder/SKILL.md
 create mode 100644 skills/html-coder/assets/blog-personal.html
 create mode 100644 skills/html-coder/assets/blog-tech.html
 create mode 100644 skills/html-coder/assets/blog-travel.html
 create mode 100644 skills/html-coder/assets/business-agency.html
 create mode 100644 skills/html-coder/assets/business-company.html
 create mode 100644 skills/html-coder/assets/business-consulting.html
 create mode 100644 skills/html-coder/assets/business-services.html
 create mode 100644 skills/html-coder/assets/creative-artist-portfolio.html
 create mode 100644 skills/html-coder/assets/creative-designer-portfolio.html
 create mode 100644 skills/html-coder/assets/creative-photographer-portfolio.html
 create mode 100644 skills/html-coder/assets/food-bakery.html
 create mode 100644 skills/html-coder/assets/food-cafe.html
 create mode 100644 skills/html-coder/assets/food-foodtruck.html
 create mode 100644 skills/html-coder/assets/food-restaurant.html
 create mode 100644 skills/html-coder/assets/tech-app-landing.html
 create mode 100644 skills/html-coder/assets/tech-saas-landing.html
 create mode 100644 skills/html-coder/assets/tech-startup-homepage.html
 create mode 100644 skills/html-coder/assets/travel-destination-guide.html
 create mode 100644 skills/html-coder/assets/travel-hotel.html
 create mode 100644 skills/html-coder/assets/travel-tour-agency.html
 create mode 100644 skills/html-coder/assets/util-404.html
 create mode 100644 skills/html-coder/assets/util-500.html
 create mode 100644 skills/html-coder/assets/util-about.html
 create mode 100644 skills/html-coder/assets/util-contact.html
 create mode 100644 skills/html-coder/assets/util-faq.html
 create mode 100644 skills/html-coder/assets/util-login.html
 create mode 100644 skills/html-coder/assets/util-pricing.html
 create mode 100644 skills/html-coder/assets/util-privacy.html
 create mode 100644 skills/html-coder/assets/util-signup.html
 create mode 100644 skills/html-coder/assets/util-terms.html
 create mode 100644 skills/html-coder/references/add-css-style.md
 create mode 100644 skills/html-coder/references/add-javascript.md
 create mode 100644 skills/html-coder/references/attributes.md
 create mode 100644 skills/html-coder/references/essentials.md
 create mode 100644 skills/html-coder/references/getting-started.md
 create mode 100644 skills/html-coder/references/glossary-attributes.md
 create mode 100644 skills/html-coder/references/glossary-events.md
 create mode 100644 skills/html-coder/references/glossary-global-attributes.md
 create mode 100644 skills/html-coder/references/glossary-tags.md
 create mode 100644 skills/html-coder/references/glossary-ui-ux.md
 create mode 100644 skills/html-coder/references/how-to.md
 create mode 100644 skills/html-coder/references/quickstart.md
 create mode 100644 skills/html-coder/references/reference.md
 create mode 100644 skills/html-coder/references/standards.md
 create mode 100644 skills/html-coder/references/ui-ux.md

diff --git a/docs/README.skills.md b/docs/README.skills.md
index ca513c5fb..c091580d6 100644
--- a/docs/README.skills.md
+++ b/docs/README.skills.md
@@ -124,6 +124,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 | [github-copilot-starter](../skills/github-copilot-starter/SKILL.md) | Set up complete GitHub Copilot configuration for a new project based on technology stack | None |
 | [github-issues](../skills/github-issues/SKILL.md) | Create, update, and manage GitHub issues using MCP tools. Use this skill when users want to create bug reports, feature requests, or task issues, update existing issues, add labels/assignees/milestones, set issue fields (dates, priority, custom fields), set issue types, or manage issue workflows. Triggers on requests like "create an issue", "file a bug", "request a feature", "update issue X", "set the priority", "set the start date", or any GitHub issue management task. | `references/dependencies.md`<br />`references/images.md`<br />`references/issue-fields.md`<br />`references/issue-types.md`<br />`references/projects.md`<br />`references/search.md`<br />`references/sub-issues.md`<br />`references/templates.md` |
 | [go-mcp-server-generator](../skills/go-mcp-server-generator/SKILL.md) | Generate a complete Go MCP server project with proper structure, dependencies, and implementation using the official github.com/modelcontextprotocol/go-sdk. | None |
+| [html-coder](../skills/html-coder/SKILL.md) | Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns. | `assets/blog-personal.html`<br />`assets/blog-tech.html`<br />`assets/blog-travel.html`<br />`assets/business-agency.html`<br />`assets/business-company.html`<br />`assets/business-consulting.html`<br />`assets/business-services.html`<br />`assets/creative-artist-portfolio.html`<br />`assets/creative-designer-portfolio.html`<br />`assets/creative-photographer-portfolio.html`<br />`assets/food-bakery.html`<br />`assets/food-cafe.html`<br />`assets/food-foodtruck.html`<br />`assets/food-restaurant.html`<br />`assets/tech-app-landing.html`<br />`assets/tech-saas-landing.html`<br />`assets/tech-startup-homepage.html`<br />`assets/travel-destination-guide.html`<br />`assets/travel-hotel.html`<br />`assets/travel-tour-agency.html`<br />`assets/util-404.html`<br />`assets/util-500.html`<br />`assets/util-about.html`<br />`assets/util-contact.html`<br />`assets/util-faq.html`<br />`assets/util-login.html`<br />`assets/util-pricing.html`<br />`assets/util-privacy.html`<br />`assets/util-signup.html`<br />`assets/util-terms.html`<br />`references/add-css-style.md`<br />`references/add-javascript.md`<br />`references/attributes.md`<br />`references/essentials.md`<br />`references/getting-started.md`<br />`references/glossary-attributes.md`<br />`references/glossary-events.md`<br />`references/glossary-global-attributes.md`<br />`references/glossary-tags.md`<br />`references/glossary-ui-ux.md`<br />`references/how-to.md`<br />`references/quickstart.md`<br />`references/reference.md`<br />`references/standards.md`<br />`references/ui-ux.md` |
 | [image-manipulation-image-magick](../skills/image-manipulation-image-magick/SKILL.md) | Process and manipulate images using ImageMagick. Supports resizing, format conversion, batch processing, and retrieving image metadata. Use when working with images, creating thumbnails, resizing wallpapers, or performing batch image operations. | None |
 | [import-infrastructure-as-code](../skills/import-infrastructure-as-code/SKILL.md) | Import existing Azure resources into Terraform using Azure CLI discovery and Azure Verified Modules (AVM). Use when asked to reverse-engineer live Azure infrastructure, generate Infrastructure as Code from existing subscriptions/resource groups/resource IDs, map dependencies, derive exact import addresses from downloaded module source, prevent configuration drift, and produce AVM-based Terraform files ready for validation and planning across any Azure resource type. | None |
 | [java-add-graalvm-native-image-support](../skills/java-add-graalvm-native-image-support/SKILL.md) | GraalVM Native Image expert that adds native image support to Java applications, builds the project, analyzes build errors, applies fixes, and iterates until successful compilation using Oracle best practices. | None |
diff --git a/skills/html-coder/SKILL.md b/skills/html-coder/SKILL.md
new file mode 100644
index 000000000..9ab5bdc1e
--- /dev/null
+++ b/skills/html-coder/SKILL.md
@@ -0,0 +1,337 @@
+---
+name: html-coder
+description: 'Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns.'
+---
+
+# HTML Coder Skill
+
+Expert skill for professional HTML development, covering everything from basic page structure to advanced HTML5 features, semantic markup, forms, multimedia, and web APIs. This skill provides comprehensive guidance, code templates, and best practices for building modern, accessible, and standards-compliant web content.
+
+## When to Use This Skill
+
+- Creating new HTML documents or web pages
+- Structuring content with semantic HTML elements
+- Building HTML forms with validation and accessibility
+- Adding multimedia content (images, audio, video)
+- Implementing responsive and accessible markup
+- Using HTML5 APIs (Canvas, SVG, Geolocation, Web Storage, etc.)
+- Applying HTML templates for common website types
+- Learning HTML syntax, attributes, and best practices
+- Troubleshooting HTML validation or accessibility issues
+- Understanding HTML standards and specifications
+
+## Core Capabilities
+
+### HTML Fundamentals
+- Document structure and DOCTYPE declarations
+- Semantic elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`)
+- Text formatting and content organization
+- Links, navigation, and page relationships
+- Lists (ordered, unordered, description)
+- Tables with proper structure and accessibility
+
+### Forms and Input
+- Form elements and structure
+- Input types (text, email, number, date, file, etc.)
+- Form validation (client-side and HTML5 validation)
+- Form attributes (required, pattern, min, max, etc.)
+- Labels, fieldsets, and accessibility
+- Form submission and methods
+
+### Media and Graphics
+- Images with responsive techniques
+- Image maps and hotspots
+- Audio and video elements
+- Canvas for drawing and graphics
+- SVG for vector graphics
+- Picture element and responsive images
+- Background images and optimization
+
+### Advanced Features
+- HTML5 APIs (Geolocation, Web Storage, Web Workers, SSE)
+- Drag and drop functionality
+- Custom data attributes
+- Microdata and structured data
+- CORS for cross-origin resources
+- Iframes and embedded content
+
+### Accessibility and Standards
+- ARIA attributes and roles
+- Semantic markup for screen readers
+- Keyboard navigation support
+- Color contrast and text sizing
+- Alt text and descriptive content
+- WCAG compliance guidelines
+
+## Quick Reference
+
+### Getting Started
+For beginners and quick starts, see:
+- `references/getting-started.md` - First website and basic HTML structure
+- `references/quickstart.md` - HTML cheatsheet for common tasks
+
+### Essential Topics
+For core HTML concepts:
+- `references/essentials.md` - Comments, validation, content categories, responsive images, media formats
+- `references/how-to.md` - Practical guides for specific tasks
+- `references/reference.md` - Complete HTML element and attribute reference
+
+### HTML Attributes
+For working with attributes:
+- `references/attributes.md` - Input types, script types, meta names, rel keywords
+- `references/glossary-attributes.md` - Complete attribute reference
+- `references/glossary-global-attributes.md` - Global attributes available on all elements
+
+### Integration with CSS and JavaScript
+- `references/add-css-style.md` - Applying styles and colors to HTML
+- `references/add-javascript.md` - Adding interactivity with JavaScript
+
+### UI/UX Considerations
+- `references/ui-ux.md` - User interface and user experience best practices
+- `references/glossary-ui-ux.md` - UX terminology and concepts
+
+### Complete References
+- `references/glossary-tags.md` - All HTML tags organized by category
+- `references/glossary-events.md` - HTML and DOM event attributes
+- `references/standards.md` - HTML specifications and standards
+
+## HTML Templates
+
+Pre-built templates for common website types (located in `assets/`):
+
+### Business and Professional
+- `group-template.md` - Team or organization website
+- `construction-company-template.md` - Construction or contractor site
+- `retail-store-template.md` - E-commerce or retail storefront
+- `furniture-design-template.md` - Interior design or furniture showcase
+
+### Food and Hospitality
+- `food-service-template.md` - Food service or catering site
+- `restaurant-template.md` - Restaurant website with menu
+- `restaurant-blog-template.md` - Restaurant with blog integration
+- `hotel-template.md` - Hotel or accommodation booking site
+
+### Creative and Portfolio
+- `portfolio-template.md` - Professional portfolio site
+- `graphic-design-portfolio-template.md` - Design portfolio showcase
+- `art-template.md` - Artist or gallery website
+- `gallery-template.md` - Photo or image gallery
+
+### Blog and Content
+- `blog-template.md` - Standard blog layout
+- `style-blog-template.md` - Fashion or lifestyle blog
+- `social-media-template.md` - Social media style layout
+
+### Technology and Startup
+- `startup-template.md` - Startup landing page
+- `app-splashpage-template.md` - App splash or launch page
+- `app-template.md` - Application showcase site
+- `marketing-template.md` - Marketing or promotional page
+- `analytics-template.md` - Analytics dashboard layout
+
+### Travel and Lifestyle
+- `travel-template.md` - Travel blog or guide
+- `travel-agency-template.md` - Travel booking or agency site
+- `rental-template.md` - Rental property or vacation site
+- `home-design-template.md` - Home design or real estate
+
+### Utility and Special Purpose
+- `resume-template.md` - Professional resume or CV
+- `under-construction-template.md` - Coming soon or maintenance page
+- `start-page-template.md` - Personal start page or dashboard
+- `parallax-template.md` - Parallax scrolling design
+- `responsive-template.md` - Responsive layout example
+- `email-template.md` - HTML email template
+- `documentation-template.md` - Documentation site layout
+
+## Best Practices
+
+### Semantic HTML
+Always use semantic elements that convey meaning:
+```html
+<!-- Good: Semantic structure -->
+<article>
+  <header>
+    <h1>Article Title</h1>
+    <time datetime="2026-03-08">March 8, 2026</time>
+  </header>
+  <p>Article content...</p>
+  <footer>
+    <p>Author information</p>
+  </footer>
+</article>
+
+<!-- Avoid: Non-semantic divs everywhere -->
+<div class="article">
+  <div class="header">
+    <div class="title">Article Title</div>
+  </div>
+</div>
+```
+
+### Accessibility First
+- Use proper heading hierarchy (h1 → h2 → h3)
+- Include alt text for all images
+- Use labels with form inputs
+- Ensure keyboard navigation works
+- Provide ARIA attributes when needed
+- Test with screen readers
+
+### Form Validation
+Leverage HTML5 validation before JavaScript:
+```html
+<form>
+  <label for="email">Email:</label>
+  <input 
+    type="email" 
+    id="email" 
+    name="email" 
+    required 
+    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+    aria-describedby="email-help"
+  >
+  <span id="email-help">Enter a valid email address</span>
+</form>
+```
+
+### Responsive Images
+Use modern responsive image techniques:
+```html
+<picture>
+  <source media="(min-width: 1200px)" srcset="large.jpg">
+  <source media="(min-width: 768px)" srcset="medium.jpg">
+  <img src="small.jpg" alt="Description" loading="lazy">
+</picture>
+```
+
+### Performance Optimization
+- Use `loading="lazy"` for images below the fold
+- Minimize DOM depth and complexity
+- Use semantic elements to reduce div soup
+- Optimize images before adding to HTML
+- Defer non-critical scripts
+- Use modern formats (WebP for images, etc.)
+
+## Common Patterns
+
+### Page Structure Template
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Page description for SEO">
+  <title>Page Title</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header>
+    <nav><!-- Navigation --></nav>
+  </header>
+  
+  <main>
+    <article><!-- Main content --></article>
+  </main>
+  
+  <aside><!-- Sidebar content --></aside>
+  
+  <footer><!-- Footer content --></footer>
+  
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+### Accessible Form Pattern
+```html
+<form method="post" action="/submit">
+  <fieldset>
+    <legend>Contact Information</legend>
+    
+    <div class="form-group">
+      <label for="name">Name:</label>
+      <input type="text" id="name" name="name" required>
+    </div>
+    
+    <div class="form-group">
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" required>
+    </div>
+    
+    <div class="form-group">
+      <label for="message">Message:</label>
+      <textarea id="message" name="message" rows="5" required></textarea>
+    </div>
+    
+    <button type="submit">Send</button>
+  </fieldset>
+</form>
+```
+
+## Troubleshooting
+
+### Validation Errors
+- Use W3C Validator: https://validator.w3.org/
+- Check for unclosed tags
+- Verify attribute syntax
+- Ensure proper nesting of elements
+- Check DOCTYPE declaration
+
+### Accessibility Issues
+- Run Lighthouse audit in Chrome DevTools
+- Test with screen readers (NVDA, JAWS, VoiceOver)
+- Verify keyboard navigation
+- Check color contrast ratios
+- Validate ARIA usage
+
+### Browser Compatibility
+- Check Can I Use: https://caniuse.com/
+- Use feature detection, not browser detection
+- Provide fallbacks for older browsers
+- Test in multiple browsers and devices
+- Use polyfills when necessary
+
+## References
+
+All detailed reference materials are located in the `references/` directory:
+
+- **getting-started.md** - HTML fundamentals and first steps
+- **quickstart.md** - Quick reference cheatsheet
+- **essentials.md** - Core concepts and techniques
+- **how-to.md** - Task-specific guides
+- **reference.md** - Complete element reference
+- **attributes.md** - Attribute types and values
+- **standards.md** - Official HTML specifications
+- **add-css-style.md** - CSS integration guide
+- **add-javascript.md** - JavaScript integration guide
+- **ui-ux.md** - UI/UX best practices
+- **glossary-tags.md** - HTML elements reference
+- **glossary-attributes.md** - HTML attributes reference
+- **glossary-global-attributes.md** - Global attributes reference
+- **glossary-events.md** - Event attributes reference
+- **glossary-ui-ux.md** - UX terminology
+
+## External Resources
+
+### Official Standards
+- WHATWG HTML Living Standard: https://html.spec.whatwg.org/
+- W3C HTML Specifications: https://www.w3.org/TR/html/
+- MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML
+
+### Learning Resources
+- W3Schools HTML Tutorial: https://www.w3schools.com/html/
+- MDN Learning HTML: https://developer.mozilla.org/en-US/docs/Learn/HTML
+
+### Tools
+- W3C Markup Validator: https://validator.w3.org/
+- HTML5 Outliner: https://gsnedders.html5.org/outliner/
+- Can I Use: https://caniuse.com/
+
+### Accessibility
+- WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
+- WAI-ARIA Practices: https://www.w3.org/WAI/ARIA/apg/
+
+---
+
+**Note**: Reference files and templates will be populated in subsequent setup steps. This skill is designed to grow and evolve with additional templates and examples as needed.
diff --git a/skills/html-coder/assets/blog-personal.html b/skills/html-coder/assets/blog-personal.html
new file mode 100644
index 000000000..01ce3859c
--- /dev/null
+++ b/skills/html-coder/assets/blog-personal.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Life & Style by Emma - Personal blog about lifestyle, wellness, home, and creativity. Join me on my journey.">
+  <title>Life & Style by Emma - Personal Lifestyle Blog</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Life & Style by Emma</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/wellness">Wellness</a></li>
+          <li><a href="/home">Home & Design</a></li>
+          <li><a href="/lifestyle">Lifestyle</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+        
+        <button class="search-toggle" aria-label="Toggle search">🔍</button>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <div class="container">
+      <div class="blog-layout">
+        <div class="blog-main">
+          <section class="featured-post">
+            <article class="post-card featured">
+              <a href="/posts/morning-routine-guide" class="post-image-link">
+                <img src="morning-routine.jpg" alt="Serene morning scene with coffee and journal" width="1200" height="600" loading="eager">
+              </a>
+              
+              <div class="post-content">
+                <div class="post-meta">
+                  <a href="/category/wellness" class="post-category">Wellness</a>
+                  <time datetime="2026-03-05">March 5, 2026</time>
+                  <span class="reading-time">8 min read</span>
+                </div>
+                
+                <h1><a href="/posts/morning-routine-guide">My Mindful Morning Routine That Changed Everything</a></h1>
+                
+                <p class="post-excerpt">After years of rushing through chaotic mornings, I finally created a routine that sets the tone for my entire day. Here's what works for me and how you can build your own...</p>
+                
+                <a href="/posts/morning-routine-guide" class="read-more">Continue Reading →</a>
+              </div>
+            </article>
+          </section>
+          
+          <section class="recent-posts">
+            <h2 class="section-title">Recent Posts</h2>
+            
+            <article class="post-card">
+              <a href="/posts/spring-home-refresh" class="post-image-link">
+                <img src="spring-home.jpg" alt="Bright living room with spring decor" width="600" height="400" loading="lazy">
+              </a>
+              
+              <div class="post-content">
+                <div class="post-meta">
+                  <a href="/category/home" class="post-category">Home & Design</a>
+                  <time datetime="2026-03-02">March 2, 2026</time>
+                  <span class="reading-time">6 min read</span>
+                </div>
+                
+                <h3><a href="/posts/spring-home-refresh">5 Easy Ways to Refresh Your Home for Spring</a></h3>
+                
+                <p class="post-excerpt">Spring is the perfect time to breathe new life into your living space. These simple, budget-friendly updates will have your home feeling fresh and renewed.</p>
+                
+                <a href="/posts/spring-home-refresh" class="read-more">Read More →</a>
+              </div>
+            </article>
+            
+            <article class="post-card">
+              <a href="/posts/self-care-Sunday" class="post-image-link">
+                <img src="self-care.jpg" alt="Relaxing bath setup with candles" width="600" height="400" loading="lazy">
+              </a>
+              
+              <div class="post-content">
+                <div class="post-meta">
+                  <a href="/category/wellness" class="post-category">Wellness</a>
+                  <time datetime="2026-02-28">February 28, 2026</time>
+                  <span class="reading-time">5 min read</span>
+                </div>
+                
+                <h3><a href="/posts/self-care-sunday">Self-Care Sunday Rituals I Actually Stick To</a></h3>
+                
+                <p class="post-excerpt">Self-care doesn't have to be elaborate or time-consuming. Here are my favorite Sunday rituals that help me reset and recharge for the week ahead.</p>
+                
+                <a href="/posts/self-care-sunday" class="read-more">Read More →</a>
+              </div>
+            </article>
+            
+            <article class="post-card">
+              <a href="/posts/capsule-wardrobe" class="post-image-link">
+                <img src="wardrobe.jpg" alt="Minimalist closet organization" width="600" height="400" loading="lazy">
+              </a>
+              
+              <div class="post-content">
+                <div class="post-meta">
+                  <a href="/category/lifestyle" class="post-category">Lifestyle</a>
+                  <time datetime="2026-02-25">February 25, 2026</time>
+                  <span class="reading-time">10 min read</span>
+                </div>
+                
+                <h3><a href="/posts/capsule-wardrobe">Building a Capsule Wardrobe: My Complete Guide</a></h3>
+                
+                <p class="post-excerpt">Simplifying my wardrobe was one of the best decisions I've made. Here's how I built a versatile capsule wardrobe with 30 pieces that work for every season.</p>
+                
+                <a href="/posts/capsule-wardrobe" class="read-more">Read More →</a>
+              </div>
+            </article>
+            
+            <article class="post-card">
+              <a href="/posts/journaling-practice" class="post-image-link">
+                <img src="journaling.jpg" alt="Journal and pen on desk" width="600" height="400" loading="lazy">
+              </a>
+              
+              <div class="post-content">
+                <div class="post-meta">
+                  <a href="/category/wellness" class="post-category">Wellness</a>
+                  <time datetime="2026-02-20">February 20, 2026</time>
+                  <span class="reading-time">7 min read</span>
+                </div>
+                
+                <h3><a href="/posts/journaling-practice">How Journaling Transformed My Mental Health</a></h3>
+                
+                <p class="post-excerpt">I was skeptical about journaling until I committed to 30 days. The results surprised me. Here's what I learned and my favorite prompts to get started.</p>
+                
+                <a href="/posts/journaling-practice" class="read-more">Read More →</a>
+              </div>
+            </article>
+            
+            <article class="post-card">
+              <a href="/posts/kitchen-organization" class="post-image-link">
+                <img src="kitchen.jpg" alt="Organized kitchen pantry" width="600" height="400" loading="lazy">
+              </a>
+              
+              <div class="post-content">
+                <div class="post-meta">
+                  <a href="/category/home" class="post-category">Home & Design</a>
+                  <time datetime="2026-02-15">February 15, 2026</time>
+                  <span class="reading-time">9 min read</span>
+                </div>
+                
+                <h3><a href="/posts/kitchen-organization">Kitchen Organization Tips That Actually Work</a></h3>
+                
+                <p class="post-excerpt">After years of kitchen chaos, I finally found organization systems that stick. These practical tips will help you create a functional, beautiful kitchen.</p>
+                
+                <a href="/posts/kitchen-organization" class="read-more">Read More →</a>
+              </div>
+            </article>
+            
+            <article class="post-card">
+              <a href="/posts/slow-living" class="post-image-link">
+                <img src="slow-living.jpg" alt="Peaceful outdoor scene" width="600" height="400" loading="lazy">
+              </a>
+              
+              <div class="post-content">
+                <div class="post-meta">
+                  <a href="/category/lifestyle" class="post-category">Lifestyle</a>
+                  <time datetime="2026-02-10">February 10, 2026</time>
+                  <span class="reading-time">6 min read</span>
+                </div>
+                
+                <h3><a href="/posts/slow-living">Embracing Slow Living in a Fast-Paced World</a></h3>
+                
+                <p class="post-excerpt">Slowing down changed my perspective on everything. Here's how I'm practicing slow living and finding more joy in everyday moments.</p>
+                
+                <a href="/posts/slow-living" class="read-more">Read More →</a>
+              </div>
+            </article>
+          </section>
+          
+          <nav class="pagination" aria-label="Pagination">
+            <span class="page-info">Page 1 of 5</span>
+            <a href="/page/2" class="btn btn-outline">Next Page →</a>
+          </nav>
+        </div>
+        
+        <aside class="sidebar">
+          <section class="widget about-widget">
+            <img src="emma-profile.jpg" alt="Emma smiling outdoors" width="150" height="150" loading="lazy" class="author-photo">
+            <h2>Hi, I'm Emma!</h2>
+            <p>Welcome to my corner of the internet where I share thoughts on wellness, creating a beautiful home, and living intentionally. I'm so glad you're here!</p>
+            <a href="/about" class="btn btn-outline btn-small">More About Me</a>
+          </section>
+          
+          <section class="widget search-widget">
+            <h2>Search</h2>
+            <form action="/search" method="GET" role="search">
+              <label for="search-input" class="visually-hidden">Search the blog</label>
+              <div class="search-box">
+                <input type="search" id="search-input" name="q" placeholder="Search posts..." required>
+                <button type="submit" aria-label="Search">🔍</button>
+              </div>
+            </form>
+          </section>
+          
+          <section class="widget newsletter-widget">
+            <h2>Join the Community</h2>
+            <p>Get weekly posts delivered to your inbox plus exclusive content just for subscribers.</p>
+            
+            <form action="/subscribe" method="POST" class="newsletter-form">
+              <label for="newsletter-email" class="visually-hidden">Email address</label>
+              <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
+              <button type="submit" class="btn btn-primary btn-small">Subscribe</button>
+            </form>
+            
+            <p class="privacy-note"><small>No spam, ever. Unsubscribe anytime.</small></p>
+          </section>
+          
+          <section class="widget categories-widget">
+            <h2>Categories</h2>
+            <ul>
+              <li><a href="/category/wellness">Wellness <span class="count">(24)</span></a></li>
+              <li><a href="/category/home">Home & Design <span class="count">(18)</span></a></li>
+              <li><a href="/category/lifestyle">Lifestyle <span class="count">(31)</span></a></li>
+              <li><a href="/category/recipes">Recipes <span class="count">(15)</span></a></li>
+              <li><a href="/category/travel">Travel <span class="count">(12)</span></a></li>
+              <li><a href="/category/creativity">Creativity <span class="count">(9)</span></a></li>
+            </ul>
+          </section>
+          
+          <section class="widget popular-posts-widget">
+            <h2>Popular Posts</h2>
+            <ul class="popular-posts-list">
+              <li>
+                <a href="/posts/morning-routine-guide">
+                  <img src="morning-routine-thumb.jpg" alt="" width="80" height="80" loading="lazy">
+                  <span>My Mindful Morning Routine That Changed Everything</span>
+                </a>
+              </li>
+              <li>
+                <a href="/posts/capsule-wardrobe">
+                  <img src="wardrobe-thumb.jpg" alt="" width="80" height="80" loading="lazy">
+                  <span>Building a Capsule Wardrobe: My Complete Guide</span>
+                </a>
+              </li>
+              <li>
+                <a href="/posts/slow-living">
+                  <img src="slow-living-thumb.jpg" alt="" width="80" height="80" loading="lazy">
+                  <span>Embracing Slow Living in a Fast-Paced World</span>
+                </a>
+              </li>
+            </ul>
+          </section>
+          
+          <section class="widget instagram-widget">
+            <h2>Follow on Instagram</h2>
+            <p class="instagram-handle">@lifeandstylebyemma</p>
+            
+            <div class="instagram-grid">
+              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
+                <img src="insta-1.jpg" alt="" width="100" height="100" loading="lazy">
+              </a>
+              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
+                <img src="insta-2.jpg" alt="" width="100" height="100" loading="lazy">
+              </a>
+              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
+                <img src="insta-3.jpg" alt="" width="100" height="100" loading="lazy">
+              </a>
+              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
+                <img src="insta-4.jpg" alt="" width="100" height="100" loading="lazy">
+              </a>
+              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
+                <img src="insta-5.jpg" alt="" width="100" height="100" loading="lazy">
+              </a>
+              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
+                <img src="insta-6.jpg" alt="" width="100" height="100" loading="lazy">
+              </a>
+            </div>
+          </section>
+          
+          <section class="widget tags-widget">
+            <h2>Popular Tags</h2>
+            <div class="tag-cloud">
+              <a href="/tag/minimalism" class="tag">minimalism</a>
+              <a href="/tag/self-care" class="tag">self-care</a>
+              <a href="/tag/organization" class="tag">organization</a>
+              <a href="/tag/mindfulness" class="tag">mindfulness</a>
+              <a href="/tag/home-decor" class="tag">home decor</a>
+              <a href="/tag/wellness" class="tag">wellness</a>
+              <a href="/tag/intentional-living" class="tag">intentional living</a>
+              <a href="/tag/productivity" class="tag">productivity</a>
+            </div>
+          </section>
+        </aside>
+      </div>
+    </div>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Life & Style by Emma</h3>
+          <p>A personal blog about wellness, home, and living with intention.</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram">Instagram</a>
+            <a href="https://pinterest.com/lifeandstylebyemma" aria-label="Pinterest">Pinterest</a>
+            <a href="https://facebook.com/lifeandstylebyemma" aria-label="Facebook">Facebook</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Categories</h3>
+          <ul>
+            <li><a href="/category/wellness">Wellness</a></li>
+            <li><a href="/category/home">Home & Design</a></li>
+            <li><a href="/category/lifestyle">Lifestyle</a></li>
+            <li><a href="/category/recipes">Recipes</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>More</h3>
+          <ul>
+            <li><a href="/about">About Me</a></li>
+            <li><a href="/contact">Contact</a></li>
+            <li><a href="/shop">Shop My Favorites</a></li>
+            <li><a href="/resources">Free Resources</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Life & Style by Emma. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/disclosure">Disclosure</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/blog-tech.html b/skills/html-coder/assets/blog-tech.html
new file mode 100644
index 000000000..bb8189547
--- /dev/null
+++ b/skills/html-coder/assets/blog-tech.html
@@ -0,0 +1,398 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="DevBytes - Web development tutorials, programming tips, and tech insights. Learn modern JavaScript, React, Node.js, and more.">
+  <title>DevBytes - Web Development Blog & Tutorials</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="prism.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">&lt;DevBytes /&gt;</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/">Blog</a></li>
+          <li><a href="/tutorials">Tutorials</a></li>
+          <li><a href="/javascript">JavaScript</a></li>
+          <li><a href="/react">React</a></li>
+          <li><a href="/nodejs">Node.js</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+        
+        <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <div class="container">
+      <div class="blog-layout">
+        <div class="blog-main">
+          <article class="featured-post">
+            <div class="post-header">
+              <div class="post-meta">
+                <a href="/category/javascript" class="post-category">JavaScript</a>
+                <time datetime="2026-03-07">March 7, 2026</time>
+                <span class="reading-time">12 min read</span>
+              </div>
+              
+              <h1>Understanding JavaScript Closures: A Complete Guide</h1>
+              
+              <div class="author-info">
+                <img src="author-avatar.jpg" alt="" width="48" height="48" loading="eager">
+                <div class="author-details">
+                  <p class="author-name">By <a href="/author/alex">Alex Johnson</a></p>
+                  <p class="author-title">Senior Developer & Educator</p>
+                </div>
+              </div>
+            </div>
+            
+            <img src="closures-hero.jpg" alt="JavaScript code illustration" width="1200" height="600" loading="eager" class="post-featured-image">
+            
+            <div class="post-content">
+              <p class="lead">Closures are one of JavaScript's most powerful features, yet they often confuse developers. In this comprehensive guide, we'll demystify closures and show you practical ways to use them in your code.</p>
+              
+              <h2>What is a Closure?</h2>
+              
+              <p>A closure is the combination of a function bundled together with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function.</p>
+              
+              <p>Here's a simple example:</p>
+              
+              <pre><code class="language-javascript">function outer() {
+  const message = 'Hello';
+  
+  function inner() {
+    console.log(message); // Accesses 'message' from outer scope
+  }
+  
+  return inner;
+}
+
+const myFunction = outer();
+myFunction(); // Logs: "Hello"</code></pre>
+              
+              <p>Even though <code>outer()</code> has finished executing, <code>inner()</code> still has access to <code>message</code> because of closure.</p>
+              
+              <h2>Why Are Closures Useful?</h2>
+              
+              <p>Closures enable several important patterns in JavaScript:</p>
+              
+              <ol>
+                <li><strong>Data Privacy:</strong> Create private variables that can't be accessed from outside</li>
+                <li><strong>Function Factories:</strong> Generate specialized functions based on parameters</li>
+                <li><strong>Event Handlers:</strong> Maintain state across asynchronous operations</li>
+                <li><strong>Module Pattern:</strong> Organize code into reusable modules</li>
+              </ol>
+              
+              <h3>Practical Example: Counter</h3>
+              
+              <pre><code class="language-javascript">function createCounter() {
+  let count = 0;
+  
+  return {
+    increment() {
+      count++;
+      return count;
+    },
+    decrement() {
+      count--;
+      return count;
+    },
+    getCount() {
+      return count;
+    }
+  };
+}
+
+const counter = createCounter();
+console.log(counter.increment()); // 1
+console.log(counter.increment()); // 2
+console.log(counter.getCount());  // 2
+console.log(counter.count);       // undefined - private!</code></pre>
+              
+              <p>The <code>count</code> variable is private—it can only be modified through the provided methods.</p>
+              
+              <h2>Common Pitfalls</h2>
+              
+              <p>Closures can cause memory leaks if not used carefully. Always be mindful of what references you're maintaining:</p>
+              
+              <pre><code class="language-javascript">// ❌ Potential memory leak
+function attachEventListeners() {
+  const hugeData = new Array(1000000).fill('data');
+  
+  document.getElementById('button').addEventListener('click', () => {
+    console.log(hugeData[0]); // Keeps entire array in memory!
+  });
+}
+
+// ✅ Better approach
+function attachEventListeners() {
+  const hugeData = new Array(1000000).fill('data');
+  const firstItem = hugeData[0]; // Only keep what you need
+  
+  document.getElementById('button').addEventListener('click', () => {
+    console.log(firstItem);
+  });
+}</code></pre>
+              
+              <h2>Conclusion</h2>
+              
+              <p>Closures are fundamental to JavaScript and enable powerful programming patterns. Understanding how they work will make you a better developer and help you write more elegant, maintainable code.</p>
+              
+              <p>Want to practice? Try building a simple module system or implementing your own debounce function using closures!</p>
+            </div>
+            
+            <footer class="post-footer">
+              <div class="post-tags">
+                <strong>Tags:</strong>
+                <a href="/tag/javascript" class="tag">JavaScript</a>
+                <a href="/tag/closures" class="tag">Closures</a>
+                <a href="/tag/fundamentals" class="tag">Fundamentals</a>
+                <a href="/tag/tutorial" class="tag">Tutorial</a>
+              </div>
+              
+              <div class="post-share">
+                <strong>Share:</strong>
+                <a href="https://twitter.com/intent/tweet?url=..." class="share-link" aria-label="Share on Twitter">Twitter</a>
+                <a href="https://www.linkedin.com/sharing/share-offsite/?url=..." class="share-link" aria-label="Share on LinkedIn">LinkedIn</a>
+                <a href="https://news.ycombinator.com/submitlink?u=..." class="share-link" aria-label="Share on Hacker News">HN</a>
+              </div>
+            </footer>
+          </article>
+          
+          <section class="recent-posts">
+            <h2>More from DevBytes</h2>
+            
+            <article class="post-card">
+              <div class="post-card-content">
+                <div class="post-meta">
+                  <a href="/category/react" class="post-category">React</a>
+                  <time datetime="2026-03-05">March 5, 2026</time>
+                </div>
+                
+                <h3><a href="/posts/react-hooks-patterns">5 React Hooks Patterns You Should Know</a></h3>
+                
+                <p>Level up your React game with these essential custom hooks patterns that solve common problems elegantly.</p>
+                
+                <a href="/posts/react-hooks-patterns" class="read-more">Read Post →</a>
+              </div>
+            </article>
+            
+            <article class="post-card">
+              <div class="post-card-content">
+                <div class="post-meta">
+                  <a href="/category/nodejs" class="post-category">Node.js</a>
+                  <time datetime="2026-03-03">March 3, 2026</time>
+                </div>
+                
+                <h3><a href="/posts/nodejs-authentication">Building Secure Authentication in Node.js</a></h3>
+                
+                <p>A comprehensive guide to implementing JWT authentication with refresh tokens, password hashing, and security best practices.</p>
+                
+                <a href="/posts/nodejs-authentication" class="read-more">Read Post →</a>
+              </div>
+            </article>
+            
+            <article class="post-card">
+              <div class="post-card-content">
+                <div class="post-meta">
+                  <a href="/category/css" class="post-category">CSS</a>
+                  <time datetime="2026-03-01">March 1, 2026</time>
+                </div>
+                
+                <h3><a href="/posts/css-grid-mastery">CSS Grid: From Basics to Advanced Layouts</a></h3>
+                
+                <p>Master CSS Grid with practical examples ranging from simple two-column layouts to complex responsive designs.</p>
+                
+                <a href="/posts/css-grid-mastery" class="read-more">Read Post →</a>
+              </div>
+            </article>
+          </section>
+        </div>
+        
+        <aside class="sidebar">
+          <section class="widget search-widget">
+            <h2>Search</h2>
+            <form action="/search" method="GET" role="search">
+              <label for="search-input" class="visually-hidden">Search posts</label>
+              <div class="search-box">
+                <input type="search" id="search-input" name="q" placeholder="Search tutorials..." required>
+                <button type="submit" aria-label="Search">🔍</button>
+              </div>
+            </form>
+          </section>
+          
+          <section class="widget newsletter-widget">
+            <h2>Weekly Newsletter</h2>
+            <p>Get the latest tutorials and web dev tips delivered to your inbox every Monday.</p>
+            
+            <form action="/subscribe" method="POST" class="newsletter-form">
+              <label for="newsletter-email" class="visually-hidden">Email address</label>
+              <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
+              <button type="submit" class="btn btn-primary">Subscribe</button>
+            </form>
+            
+            <p class="subscriber-count">Join 12,500+ developers</p>
+          </section>
+          
+          <section class="widget topics-widget">
+            <h2>Browse by Topic</h2>
+            <ul>
+              <li><a href="/category/javascript">JavaScript</a> <span class="count">(45)</span></li>
+              <li><a href="/category/react">React</a> <span class="count">(32)</span></li>
+              <li><a href="/category/nodejs">Node.js</a> <span class="count">(28)</span></li>
+              <li><a href="/category/typescript">TypeScript</a> <span class="count">(21)</span></li>
+              <li><a href="/category/css">CSS</a> <span class="count">(18)</span></li>
+              <li><a href="/category/performance">Performance</a> <span class="count">(15)</span></li>
+              <li><a href="/category/testing">Testing</a> <span class="count">(12)</span></li>
+              <li><a href="/category/devops">DevOps</a> <span class="count">(10)</span></li>
+            </ul>
+          </section>
+          
+          <section class="widget popular-widget">
+            <h2>Most Popular</h2>
+            <ol class="popular-list">
+              <li>
+                <a href="/posts/async-await-guide">
+                  <span class="popular-title">Mastering Async/Await in JavaScript</span>
+                  <span class="popular-meta">42K views</span>
+                </a>
+              </li>
+              <li>
+                <a href="/posts/react-performance">
+                  <span class="popular-title">React Performance Optimization</span>
+                  <span class="popular-meta">38K views</span>
+                </a>
+              </li>
+              <li>
+                <a href="/posts/git-workflow">
+                  <span class="popular-title">Git Workflow Best Practices</span>
+                  <span class="popular-meta">35K views</span>
+                </a>
+              </li>
+              <li>
+                <a href="/posts/array-methods">
+                  <span class="popular-title">JavaScript Array Methods Cheat Sheet</span>
+                  <span class="popular-meta">31K views</span>
+                </a>
+              </li>
+            </ol>
+          </section>
+          
+          <section class="widget series-widget">
+            <h2>Tutorial Series</h2>
+            <ul class="series-list">
+              <li>
+                <a href="/series/javascript-fundamentals">
+                  <strong>JavaScript Fundamentals</strong>
+                  <span>12 parts</span>
+                </a>
+              </li>
+              <li>
+                <a href="/series/react-from-scratch">
+                  <strong>React from Scratch</strong>
+                  <span>8 parts</span>
+                </a>
+              </li>
+              <li>
+                <a href="/series/nodejs-backend">
+                  <strong>Building APIs with Node.js</strong>
+                  <span>10 parts</span>
+                </a>
+              </li>
+            </ul>
+          </section>
+          
+          <section class="widget resources-widget">
+            <h2>Free Resources</h2>
+            <ul>
+              <li><a href="/cheatsheets">Cheat Sheets</a></li>
+              <li><a href="/snippets">Code Snippets</a></li>
+              <li><a href="/tools">Developer Tools</a></li>
+              <li><a href="/books">Recommended Books</a></li>
+            </ul>
+          </section>
+          
+          <section class="widget ad-widget">
+            <div class="ad-placeholder">
+              <p class="ad-label">Sponsored</p>
+              <div class="ad-content">
+                <h3>Learn Full-Stack Development</h3>
+                <p>Master modern web development with our comprehensive course.</p>
+                <a href="/courses" class="btn btn-small">Learn More</a>
+              </div>
+            </div>
+          </section>
+        </aside>
+      </div>
+    </div>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>&lt;DevBytes /&gt;</h3>
+          <p>Practical web development tutorials and insights for modern developers.</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://twitter.com/devbytes" aria-label="Twitter">Twitter</a>
+            <a href="https://github.com/devbytes" aria-label="GitHub">GitHub</a>
+            <a href="https://dev.to/devbytes" aria-label="DEV">DEV.to</a>
+            <a href="/rss" aria-label="RSS Feed">RSS</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Content</h3>
+          <ul>
+            <li><a href="/tutorials">All Tutorials</a></li>
+            <li><a href="/series">Tutorial Series</a></li>
+            <li><a href="/cheatsheets">Cheat Sheets</a></li>
+            <li><a href="/snippets">Code Snippets</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Community</h3>
+          <ul>
+            <li><a href="/discord">Join Discord</a></li>
+            <li><a href="/newsletter">Newsletter</a></li>
+            <li><a href="/contribute">Write for Us</a></li>
+            <li><a href="/sponsor">Sponsor</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>More</h3>
+          <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/contact">Contact</a></li>
+            <li><a href="/advertise">Advertise</a></li>
+            <li><a href="/uses">Uses</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 DevBytes. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+          <a href="/code-of-conduct">Code of Conduct</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="prism.js" defer></script>
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/blog-travel.html b/skills/html-coder/assets/blog-travel.html
new file mode 100644
index 000000000..3c77e8cbe
--- /dev/null
+++ b/skills/html-coder/assets/blog-travel.html
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Wanderlust Chronicles - Travel blog sharing adventures, destination guides, and tips for exploring the world.">
+  <title>Wanderlust Chronicles - Travel Blog & Adventure Stories</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">✈️ Wanderlust Chronicles</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/destinations">Destinations</a></li>
+          <li><a href="/guides">Travel Guides</a></li>
+          <li><a href="/tips">Travel Tips</a></li>
+          <li><a href="/photography">Photography</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-travel">
+      <img src="hero-travel.jpg" alt="Mountain landscape at sunset" width="1920" height="600" loading="eager" class="hero-image">
+      <div class="hero-overlay">
+        <div class="container">
+          <h1>Explore the World with Wanderlust Chronicles</h1>
+          <p>Travel stories, destination guides, and practical tips for adventure seekers</p>
+        </div>
+      </div>
+    </section>
+    
+    <div class="container">
+      <div class="travel-layout">
+        <div class="travel-main">
+          <article class="featured-post">
+            <div class="post-image-container">
+              <img src="japan-featured.jpg" alt="Traditional Japanese temple with cherry blossoms" width="1000" height="600" loading="eager">
+              <div class="post-badge">Featured</div>
+            </div>
+            
+            <div class="post-content">
+              <div class="post-meta">
+                <a href="/destination/japan" class="post-location">🇯🇵 Japan</a>
+                <time datetime="2026-03-06">March 6, 2026</time>
+                <span class="reading-time">15 min read</span>
+              </div>
+              
+              <h2><a href="/posts/japan-cherry-blossom-guide">The Ultimate Guide to Cherry Blossom Season in Japan</a></h2>
+              
+              <p class="post-excerpt">Cherry blossom season in Japan is magical, but timing is everything. After visiting during sakura season three times, here's everything you need to know to plan the perfect trip—from best viewing spots to crowded tourist traps to avoid.</p>
+              
+              <div class="post-highlights">
+                <h3>In this guide:</h3>
+                <ul>
+                  <li>Best cities and viewing spots for cherry blossoms</li>
+                  <li>When to visit (peak bloom forecasts)</li>
+                  <li>Budget breakdown and money-saving tips</li>
+                  <li>Cultural etiquette and hanami traditions</li>
+                  <li>Photography tips for capturing perfect sakura shots</li>
+                </ul>
+              </div>
+              
+              <a href="/posts/japan-cherry-blossom-guide" class="btn btn-primary">Read Full Guide</a>
+            </div>
+          </article>
+          
+          <section class="recent-posts">
+            <h2>Recent Adventures</h2>
+            
+            <div class="posts-grid">
+              <article class="post-card">
+                <a href="/posts/patagonia-trek" class="post-image-link">
+                  <img src="patagonia.jpg" alt="Hiking trail in Patagonia mountains" width="400" height="300" loading="lazy">
+                  <span class="post-duration">7 Days</span>
+                </a>
+                
+                <div class="post-content">
+                  <div class="post-meta">
+                    <a href="/destination/argentina" class="post-location">🇦🇷 Argentina</a>
+                    <time datetime="2026-03-03">March 3, 2026</time>
+                  </div>
+                  
+                  <h3><a href="/posts/patagonia-trek">Trekking the W Circuit in Torres del Paine</a></h3>
+                  
+                  <p>My 7-day journey through one of the world's most spectacular hiking destinations—complete with gear recommendations and trail conditions.</p>
+                  
+                  <a href="/posts/patagonia-trek" class="read-more">Read Story →</a>
+                </div>
+              </article>
+              
+              <article class="post-card">
+                <a href="/posts/morocco-markets" class="post-image-link">
+                  <img src="morocco.jpg" alt="Colorful Moroccan souks and markets" width="400" height="300" loading="lazy">
+                  <span class="post-duration">10 Days</span>
+                </a>
+                
+                <div class="post-content">
+                  <div class="post-meta">
+                    <a href="/destination/morocco" class="post-location">🇲🇦 Morocco</a>
+                    <time datetime="2026-02-28">February 28, 2026</time>
+                  </div>
+                  
+                  <h3><a href="/posts/morocco-markets">Getting Lost in Marrakech's Medina</a></h3>
+                  
+                  <p>A sensory overload in the best way possible—navigating souks, haggling for treasures, and discovering hidden riads in Morocco's most vibrant city.</p>
+                  
+                  <a href="/posts/morocco-markets" class="read-more">Read Story →</a>
+                </div>
+              </article>
+              
+              <article class="post-card">
+                <a href="/posts/iceland-road-trip" class="post-image-link">
+                  <img src="iceland.jpg" alt="Iceland waterfall landscape" width="400" height="300" loading="lazy">
+                  <span class="post-duration">14 Days</span>
+                </a>
+                
+                <div class="post-content">
+                  <div class="post-meta">
+                    <a href="/destination/iceland" class="post-location">🇮🇸 Iceland</a>
+                    <time datetime="2026-02-25">February 25, 2026</time>
+                  </div>
+                  
+                  <h3><a href="/posts/iceland-road-trip">Ring Road Adventure: 2 Weeks Around Iceland</a></h3>
+                  
+                  <p>The ultimate Iceland road trip itinerary with waterfalls, glaciers, hot springs, and the Northern Lights—plus practical driving tips.</p>
+                  
+                  <a href="/posts/iceland-road-trip" class="read-more">Read Story →</a>
+                </div>
+              </article>
+              
+              <article class="post-card">
+                <a href="/posts/bali-digital-nomad" class="post-image-link">
+                  <img src="bali.jpg" alt="Bali rice terraces" width="400" height="300" loading="lazy">
+                  <span class="post-duration">30 Days</span>
+                </a>
+                
+                <div class="post-content">
+                  <div class="post-meta">
+                    <a href="/destination/indonesia" class="post-location">🇮🇩 Indonesia</a>
+                    <time datetime="2026-02-20">February 20, 2026</time>
+                  </div>
+                  
+                  <h3><a href="/posts/bali-digital-nomad">A Month as a Digital Nomad in Bali</a></h3>
+                  
+                  <p>Living and working remotely in Ubud—coworking spaces, accommodation tips, cost of living, and balancing work with exploration.</p>
+                  
+                  <a href="/posts/bali-digital-nomad" class="read-more">Read Story →</a>
+                </div>
+              </article>
+              
+              <article class="post-card">
+                <a href="/posts/camino-de-santiago" class="post-image-link">
+                  <img src="camino.jpg" alt="Pilgrimage path in Spain" width="400" height="300" loading="lazy">
+                  <span class="post-duration">21 Days</span>
+                </a>
+                
+                <div class="post-content">
+                  <div class="post-meta">
+                    <a href="/destination/spain" class="post-location">🇪🇸 Spain</a>
+                    <time datetime="2026-02-15">February 15, 2026</time>
+                  </div>
+                  
+                  <h3><a href="/posts/camino-de-santiago">Walking the Camino de Santiago: A 500km Journey</a></h3>
+                  
+                  <p>Three weeks of walking across Spain taught me more than any guidebook could—lessons from the ancient pilgrimage route.</p>
+                  
+                  <a href="/posts/camino-de-santiago" class="read-more">Read Story →</a>
+                </div>
+              </article>
+              
+              <article class="post-card">
+                <a href="/posts/new-zealand-south-island" class="post-image-link">
+                  <img src="new-zealand.jpg" alt="New Zealand mountain vista" width="400" height="300" loading="lazy">
+                  <span class="post-duration">12 Days</span>
+                </a>
+                
+                <div class="post-content">
+                  <div class="post-meta">
+                    <a href="/destination/new-zealand" class="post-location">🇳🇿 New Zealand</a>
+                    <time datetime="2026-02-10">February 10, 2026</time>
+                  </div>
+                  
+                  <h3><a href="/posts/new-zealand-south-island">South Island Road Trip: Queenstown to Christchurch</a></h3>
+                  
+                  <p>Adventure capital to alpine beauty—exploring New Zealand's stunning South Island with stops for hiking, stargazing, and adrenaline activities.</p>
+                  
+                  <a href="/posts/new-zealand-south-island" class="read-more">Read Story →</a>
+                </div>
+              </article>
+            </div>
+          </section>
+          
+          <section class="destinations-map">
+            <h2>Where I've Been</h2>
+            <div class="map-container">
+              <img src="world-map.jpg" alt="World map showing visited destinations" width="1000" height="500" loading="lazy">
+              <p class="map-stats">
+                <strong>42 countries</strong> visited across <strong>6 continents</strong>
+              </p>
+            </div>
+          </section>
+          
+          <nav class="pagination" aria-label="Pagination">
+            <span class="page-info">Page 1 of 8</span>
+            <a href="/page/2" class="btn btn-outline">Older Posts →</a>
+          </nav>
+        </div>
+        
+        <aside class="sidebar">
+          <section class="widget about-widget">
+            <img src="avatar.jpg" alt="Sophia exploring outdoors" width="120" height="120" loading="lazy" class="avatar-circle">
+            <h2>Hi, I'm Sophia!</h2>
+            <p>Full-time traveler sharing stories and practical advice from the road. I've been exploring the world since 2020 and haven't looked back.</p>
+            <a href="/about" class="btn btn-outline btn-small">My Story</a>
+          </section>
+          
+          <section class="widget newsletter-widget">
+            <h2>📬 Travel Newsletter</h2>
+            <p>Get new posts, destination guides, and travel tips delivered weekly.</p>
+            
+            <form action="/subscribe" method="POST" class="newsletter-form">
+              <label for="newsletter-email" class="visually-hidden">Email address</label>
+              <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
+              <button type="submit" class="btn btn-primary">Subscribe</button>
+            </form>
+            
+            <p class="subscriber-count">Join 8,200+ travelers</p>
+          </section>
+          
+          <section class="widget destinations-widget">
+            <h2>Browse by Destination</h2>
+            <ul class="destinations-list">
+              <li><a href="/destination/japan">🇯🇵 Japan <span>(8)</span></a></li>
+              <li><a href="/destination/italy">🇮🇹 Italy <span>(7)</span></a></li>
+              <li><a href="/destination/thailand">🇹🇭 Thailand <span>(6)</span></a></li>
+              <li><a href="/destination/spain">🇪🇸 Spain <span>(5)</span></a></li>
+              <li><a href="/destination/greece">🇬🇷 Greece <span>(5)</span></a></li>
+              <li><a href="/destination/iceland">🇮🇸 Iceland <span>(4)</span></a></li>
+              <li><a href="/destinations/all">View All Destinations →</a></li>
+            </ul>
+          </section>
+          
+          <section class="widget travel-resources-widget">
+            <h2>Travel Resources</h2>
+            <ul>
+              <li><a href="/gear">My Travel Gear</a></li>
+              <li><a href="/packing-lists">Packing Lists</a></li>
+              <li><a href="/budget-tips">Budget Travel Tips</a></li>
+              <li><a href="/photography">Photography Tips</a></li>
+              <li><a href="/planning">Trip Planning Guide</a></li>
+              <li><a href="/apps">Favorite Travel Apps</a></li>
+            </ul>
+          </section>
+          
+          <section class="widget popular-posts-widget">
+            <h2>Most Popular</h2>
+            <ol class="popular-posts-list">
+              <li>
+                <a href="/posts/solo-travel-safety">
+                  <img src="solo-travel-thumb.jpg" alt="" width="60" height="60" loading="lazy">
+                  <div>
+                    <span class="popular-title">Solo Travel Safety Tips for Women</span>
+                    <span class="popular-views">85K views</span>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="/posts/travel-credit-cards">
+                  <img src="credit-cards-thumb.jpg" alt="" width="60" height="60" loading="lazy">
+                  <div>
+                    <span class="popular-title">Best Travel Credit Cards 2026</span>
+                    <span class="popular-views">62K views</span>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="/posts/long-term-travel">
+                  <img src="long-term-thumb.jpg" alt="" width="60" height="60" loading="lazy">
+                  <div>
+                    <span class="popular-title">How I Afford to Travel Full-Time</span>
+                    <span class="popular-views">58K views</span>
+                  </div>
+                </a>
+              </li>
+            </ol>
+          </section>
+          
+          <section class="widget instagram-widget">
+            <h2>📷 Latest from Instagram</h2>
+            <p class="instagram-handle">@wanderlust_chronicles</p>
+            
+            <div class="instagram-grid">
+              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-1.jpg" alt="" width="100" height="100" loading="lazy"></a>
+              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-2.jpg" alt="" width="100" height="100" loading="lazy"></a>
+              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-3.jpg" alt="" width="100" height="100" loading="lazy"></a>
+              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-4.jpg" alt="" width="100" height="100" loading="lazy"></a>
+              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-5.jpg" alt="" width="100" height="100" loading="lazy"></a>
+              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-6.jpg" alt="" width="100" height="100" loading="lazy"></a>
+            </div>
+            
+            <a href="https://instagram.com/wanderlust_chronicles" class="btn btn-outline btn-small">Follow on Instagram</a>
+          </section>
+          
+          <section class="widget categories-widget">
+            <h2>Categories</h2>
+            <ul>
+              <li><a href="/category/destination-guides">Destination Guides</a></li>
+              <li><a href="/category/adventure-travel">Adventure Travel</a></li>
+              <li><a href="/category/budget-travel">Budget Travel</a></li>
+              <li><a href="/category/solo-travel">Solo Travel</a></li>
+              <li><a href="/category/food-travel">Food & Travel</a></li>
+              <li><a href="/category/photography">Travel Photography</a></li>
+            </ul>
+          </section>
+        </aside>
+      </div>
+    </div>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>✈️ Wanderlust Chronicles</h3>
+          <p>Travel stories and guides from around the world</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/wanderlust_chronicles" aria-label="Instagram">Instagram</a>
+            <a href="https://youtube.com/wanderlustchronicles" aria-label="YouTube">YouTube</a>
+            <a href="https://pinterest.com/wanderlustchronicles" aria-label="Pinterest">Pinterest</a>
+            <a href="https://facebook.com/wanderlustchronicles" aria-label="Facebook">Facebook</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Explore</h3>
+          <ul>
+            <li><a href="/destinations">All Destinations</a></li>
+            <li><a href="/guides">Travel Guides</a></li>
+            <li><a href="/itineraries">Sample Itineraries</a></li>
+            <li><a href="/photography">Photo Gallery</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/gear">Travel Gear</a></li>
+            <li><a href="/planning">Planning Tips</a></li>
+            <li><a href="/budget">Budget Calculator</a></li>
+            <li><a href="/faq">Travel FAQ</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Connect</h3>
+          <ul>
+            <li><a href="/about">About Me</a></li>
+            <li><a href="/contact">Contact</a></li>
+            <li><a href="/work-with-me">Work With Me</a></li>
+            <li><a href="/press">Press Kit</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Wanderlust Chronicles. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/disclosure">Disclosure</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/business-agency.html b/skills/html-coder/assets/business-agency.html
new file mode 100644
index 000000000..cc7c14f8f
--- /dev/null
+++ b/skills/html-coder/assets/business-agency.html
@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Creative digital agency specializing in branding, web design, digital marketing, and content creation.">
+  <title>Pixel Perfect - Creative Digital Agency</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="main-nav" aria-label="Main navigation">
+        <a href="/" class="brand">
+          <svg width="40" height="40" aria-label="Pixel Perfect logo">
+            <use href="#logo-icon"></use>
+          </svg>
+          <span>Pixel Perfect</span>
+        </a>
+        
+        <ul class="nav-links">
+          <li><a href="#work">Work</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="container">
+        <h1 class="hero-title">We Create Digital Experiences That Matter</h1>
+        <p class="hero-subtitle">A creative agency crafting beautiful brands, websites, and campaigns that connect with audiences.</p>
+        <a href="#work" class="btn btn-large">View Our Work</a>
+      </div>
+    </section>
+    
+    <section id="work" class="portfolio">
+      <div class="container">
+        <h2>Featured Projects</h2>
+        
+        <div class="project-grid">
+          <article class="project-card">
+            <a href="/project/techstart-branding">
+              <img src="project-techstart.jpg" alt="TechStart branding project showcase" width="600" height="400" loading="lazy">
+              <div class="project-info">
+                <h3>TechStart Branding</h3>
+                <p class="project-category">Brand Identity & Web Design</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/project/eco-marketplace">
+              <img src="project-eco.jpg" alt="Eco Marketplace e-commerce platform" width="600" height="400" loading="lazy">
+              <div class="project-info">
+                <h3>Eco Marketplace</h3>
+                <p class="project-category">E-commerce & UX Design</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/project/wellness-app">
+              <img src="project-wellness.jpg" alt="Wellness mobile app interface" width="600" height="400" loading="lazy">
+              <div class="project-info">
+                <h3>Wellness App</h3>
+                <p class="project-category">Mobile App Design</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/project/festival-campaign">
+              <img src="project-festival.jpg" alt="Summer festival marketing campaign" width="600" height="400" loading="lazy">
+              <div class="project-info">
+                <h3>Summer Festival Campaign</h3>
+                <p class="project-category">Marketing & Social Media</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/project/fintech-redesign">
+              <img src="project-fintech.jpg" alt="FinTech platform redesign" width="600" height="400" loading="lazy">
+              <div class="project-info">
+                <h3>FinTech Platform Redesign</h3>
+                <p class="project-category">UI/UX & Product Design</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/project/restaurant-branding">
+              <img src="project-restaurant.jpg" alt="Restaurant branding and identity" width="600" height="400" loading="lazy">
+              <div class="project-info">
+                <h3>Urban Bistro</h3>
+                <p class="project-category">Branding & Print Design</p>
+              </div>
+            </a>
+          </article>
+        </div>
+        
+        <div class="portfolio-cta">
+          <a href="/portfolio" class="btn btn-outline">View All Projects</a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="services" class="services">
+      <div class="container">
+        <header class="section-header">
+          <h2>What We Do</h2>
+          <p>Full-service creative solutions for modern brands</p>
+        </header>
+        
+        <div class="services-grid">
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">🎨</div>
+            <h3>Brand Identity</h3>
+            <p>Distinctive brand identities including logo design, visual systems, and brand guidelines.</p>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">💻</div>
+            <h3>Web Design & Development</h3>
+            <p>Beautiful, responsive websites built with modern technologies and best practices.</p>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">📱</div>
+            <h3>Mobile App Design</h3>
+            <p>Intuitive mobile experiences for iOS and Android that users love.</p>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">📊</div>
+            <h3>Digital Marketing</h3>
+            <p>Strategic campaigns across social media, email, and paid channels.</p>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">✏️</div>
+            <h3>Content Creation</h3>
+            <p>Engaging content including copywriting, photography, and video production.</p>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">🎯</div>
+            <h3>Strategy & Consulting</h3>
+            <p>Brand strategy, market research, and creative direction for your business.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="process">
+      <div class="container">
+        <h2>Our Process</h2>
+        
+        <ol class="process-steps">
+          <li class="process-step">
+            <div class="step-number" aria-hidden="true">1</div>
+            <h3>Discovery</h3>
+            <p>We learn about your brand, goals, audience, and challenges through workshops and research.</p>
+          </li>
+          
+          <li class="process-step">
+            <div class="step-number" aria-hidden="true">2</div>
+            <h3>Strategy</h3>
+            <p>Develop creative strategy and positioning based on insights and competitive analysis.</p>
+          </li>
+          
+          <li class="process-step">
+            <div class="step-number" aria-hidden="true">3</div>
+            <h3>Design</h3>
+            <p>Create concepts and iterate with your feedback to perfect the visual direction.</p>
+          </li>
+          
+          <li class="process-step">
+            <div class="step-number" aria-hidden="true">4</div>
+            <h3>Development</h3>
+            <p>Build and test your website, app, or campaign with attention to detail.</p>
+          </li>
+          
+          <li class="process-step">
+            <div class="step-number" aria-hidden="true">5</div>
+            <h3>Launch</h3>
+            <p>Deploy your project and provide training, documentation, and ongoing support.</p>
+          </li>
+        </ol>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-content">
+            <h2>About Our Agency</h2>
+            <p>Pixel Perfect is a creative digital agency founded in 2015 by designers and developers who believed that beautiful design and technical excellence could coexist.</p>
+            
+            <p>Today, our team of 30+ creatives, strategists, and developers works with brands around the world to create digital experiences that drive results.</p>
+            
+            <p>We've won awards, but we're most proud of the lasting relationships we've built with our clients and the impact our work has on their businesses.</p>
+            
+            <a href="/about" class="link-arrow">Learn more about us</a>
+          </div>
+          
+          <div class="about-image">
+            <img src="team-photo.jpg" alt="Pixel Perfect team members collaborating" width="500" height="400" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="testimonials">
+      <div class="container">
+        <h2>Client Love</h2>
+        
+        <div class="testimonial-grid">
+          <blockquote class="testimonial">
+            <p>"Pixel Perfect transformed our brand and created a website that perfectly captures our vision. Their creativity and professionalism exceeded expectations."</p>
+            <footer>
+              <cite>
+                <strong>Jessica Martinez</strong><br>
+                <span>Founder, TechStart</span>
+              </cite>
+            </footer>
+          </blockquote>
+          
+          <blockquote class="testimonial">
+            <p>"Working with Pixel Perfect was seamless. They understood our goals and delivered a mobile app that our users absolutely love."</p>
+            <footer>
+              <cite>
+                <strong>David Kim</strong><br>
+                <span>Product Manager, Wellness Co</span>
+              </cite>
+            </footer>
+          </blockquote>
+          
+          <blockquote class="testimonial">
+            <p>"Their digital marketing campaigns generated 3x ROI in the first quarter. Creative genius combined with data-driven strategy."</p>
+            <footer>
+              <cite>
+                <strong>Amanda Foster</strong><br>
+                <span>CMO, Urban Bistro</span>
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+    
+    <section class="clients">
+      <div class="container">
+        <h2>Trusted By</h2>
+        
+        <div class="client-logos">
+          <img src="client-techstart.svg" alt="TechStart" width="120" height="40" loading="lazy">
+          <img src="client-eco.svg" alt="Eco Marketplace" width="120" height="40" loading="lazy">
+          <img src="client-wellness.svg" alt="Wellness Co" width="120" height="40" loading="lazy">
+          <img src="client-fintech.svg" alt="FinTech Platform" width="120" height="40" loading="lazy">
+          <img src="client-bistro.svg" alt="Urban Bistro" width="120" height="40" loading="lazy">
+          <img src="client-festival.svg" alt="Summer Festival" width="120" height="40" loading="lazy">
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-wrapper">
+          <div class="contact-intro">
+            <h2>Let's Create Something Amazing Together</h2>
+            <p>Ready to elevate your brand? Get in touch and let's discuss your project.</p>
+            
+            <address class="contact-details">
+              <p>
+                <strong>Email</strong><br>
+                <a href="mailto:hello@pixelperfect.example.com">hello@pixelperfect.example.com</a>
+              </p>
+              
+              <p>
+                <strong>Phone</strong><br>
+                <a href="tel:+18005554321">+1 (800) 555-4321</a>
+              </p>
+              
+              <p>
+                <strong>Studio</strong><br>
+                456 Creative Lane<br>
+                San Francisco, CA 94102
+              </p>
+            </address>
+          </div>
+          
+          <form class="contact-form" action="/project-inquiry" method="POST">
+            <div class="form-row">
+              <div class="form-group">
+                <label for="name">Name</label>
+                <input type="text" id="name" name="name" required>
+              </div>
+              
+              <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required>
+              </div>
+            </div>
+            
+            <div class="form-group">
+              <label for="company">Company</label>
+              <input type="text" id="company" name="company">
+            </div>
+            
+            <div class="form-group">
+              <label for="service">Service Interested In</label>
+              <select id="service" name="service" required>
+                <option value="">Select a service</option>
+                <option value="branding">Brand Identity</option>
+                <option value="web">Web Design & Development</option>
+                <option value="mobile">Mobile App Design</option>
+                <option value="marketing">Digital Marketing</option>
+                <option value="content">Content Creation</option>
+                <option value="strategy">Strategy & Consulting</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="budget">Budget Range</label>
+              <select id="budget" name="budget">
+                <option value="">Select budget range</option>
+                <option value="10-25k">$10,000 - $25,000</option>
+                <option value="25-50k">$25,000 - $50,000</option>
+                <option value="50-100k">$50,000 - $100,000</option>
+                <option value="100k+">$100,000+</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="message">Tell Us About Your Project</label>
+              <textarea id="message" name="message" rows="5" required></textarea>
+            </div>
+            
+            <button type="submit" class="btn btn-primary btn-large">Send Inquiry</button>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-col">
+          <h3>Pixel Perfect</h3>
+          <p>Creative digital agency in San Francisco.</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/pixelperfect" aria-label="Instagram">Instagram</a>
+            <a href="https://dribbble.com/pixelperfect" aria-label="Dribbble">Dribbble</a>
+            <a href="https://behance.net/pixelperfect" aria-label="Behance">Behance</a>
+            <a href="https://linkedin.com/company/pixelperfect" aria-label="LinkedIn">LinkedIn</a>
+          </div>
+        </div>
+        
+        <div class="footer-col">
+          <h3>Services</h3>
+          <ul>
+            <li><a href="/branding">Branding</a></li>
+            <li><a href="/web-design">Web Design</a></li>
+            <li><a href="/mobile-apps">Mobile Apps</a></li>
+            <li><a href="/marketing">Marketing</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-col">
+          <h3>Agency</h3>
+          <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/work">Our Work</a></li>
+            <li><a href="/blog">Blog</a></li>
+            <li><a href="/careers">Careers</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-col">
+          <h3>Connect</h3>
+          <ul>
+            <li><a href="/contact">Contact</a></li>
+            <li><a href="/newsletter">Newsletter</a></li>
+            <li><a href="/events">Events</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Pixel Perfect Agency. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="app.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/business-company.html b/skills/html-coder/assets/business-company.html
new file mode 100644
index 000000000..892103156
--- /dev/null
+++ b/skills/html-coder/assets/business-company.html
@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Leading technology solutions provider delivering innovative software and consulting services to businesses worldwide.">
+  <meta name="keywords" content="technology, software, consulting, business solutions">
+  <meta name="author" content="TechCorp Industries">
+  
+  <title>TechCorp Industries - Innovative Technology Solutions</title>
+  
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="alternate icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+  
+  <!-- Open Graph for social sharing -->
+  <meta property="og:title" content="TechCorp Industries - Innovative Technology Solutions">
+  <meta property="og:description" content="Leading technology solutions provider delivering innovative software and consulting services.">
+  <meta property="og:image" content="og-image.jpg">
+  <meta property="og:url" content="https://techcorp.example.com">
+  <meta property="og:type" content="website">
+</head>
+<body>
+  <!-- Skip to main content link for accessibility -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  
+  <!-- Header with navigation -->
+  <header class="site-header">
+    <div class="container">
+      <div class="header-content">
+        <div class="logo">
+          <a href="/" aria-label="TechCorp Industries - Home">
+            <img src="logo.svg" alt="TechCorp Industries" width="180" height="50">
+          </a>
+        </div>
+        
+        <nav aria-label="Main navigation">
+          <button class="nav-toggle" aria-expanded="false" aria-controls="main-nav" aria-label="Toggle navigation menu">
+            <span class="hamburger"></span>
+          </button>
+          
+          <ul id="main-nav" class="main-nav">
+            <li><a href="/" aria-current="page">Home</a></li>
+            <li><a href="#services">Services</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#solutions">Solutions</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </header>
+  
+  <!-- Main content -->
+  <main id="main-content">
+    <!-- Hero section -->
+    <section class="hero" aria-labelledby="hero-heading">
+      <div class="container">
+        <div class="hero-content">
+          <h1 id="hero-heading">Transforming Business Through Technology</h1>
+          <p class="hero-subtitle">We deliver cutting-edge software solutions that drive innovation and accelerate growth for enterprises worldwide.</p>
+          
+          <div class="hero-actions">
+            <a href="#contact" class="btn btn-primary">Get Started</a>
+            <a href="#solutions" class="btn btn-secondary">View Solutions</a>
+          </div>
+        </div>
+        
+        <div class="hero-image">
+          <img src="hero-illustration.svg" alt="Technology innovation illustration" width="600" height="400" loading="eager">
+        </div>
+      </div>
+    </section>
+    
+    <!-- Services section -->
+    <section id="services" class="services" aria-labelledby="services-heading">
+      <div class="container">
+        <header class="section-header">
+          <h2 id="services-heading">Our Services</h2>
+          <p>Comprehensive technology solutions tailored to your business needs</p>
+        </header>
+        
+        <div class="services-grid">
+          <article class="service-card">
+            <img src="icon-software.svg" alt="" aria-hidden="true" width="64" height="64">
+            <h3>Software Development</h3>
+            <p>Custom software solutions built with modern technologies and best practices to solve your unique business challenges.</p>
+            <a href="#software" class="card-link">Learn more <span aria-hidden="true">→</span></a>
+          </article>
+          
+          <article class="service-card">
+            <img src="icon-cloud.svg" alt="" aria-hidden="true" width="64" height="64">
+            <h3>Cloud Solutions</h3>
+            <p>Scalable cloud infrastructure and migration services to enhance performance, security, and cost-efficiency.</p>
+            <a href="#cloud" class="card-link">Learn more <span aria-hidden="true">→</span></a>
+          </article>
+          
+          <article class="service-card">
+            <img src="icon-consulting.svg" alt="" aria-hidden="true" width="64" height="64">
+            <h3>IT Consulting</h3>
+            <p>Strategic technology advisory services to optimize your IT infrastructure and drive digital transformation.</p>
+            <a href="#consulting" class="card-link">Learn more <span aria-hidden="true">→</span></a>
+          </article>
+          
+          <article class="service-card">
+            <img src="icon-security.svg" alt="" aria-hidden="true" width="64" height="64">
+            <h3>Cybersecurity</h3>
+            <p>Comprehensive security solutions protecting your business from evolving cyber threats and vulnerabilities.</p>
+            <a href="#security" class="card-link">Learn more <span aria-hidden="true">→</span></a>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <!-- About section -->
+    <section id="about" class="about" aria-labelledby="about-heading">
+      <div class="container">
+        <div class="about-content">
+          <div class="about-text">
+            <h2 id="about-heading">About TechCorp Industries</h2>
+            <p>For over <strong>15 years</strong>, TechCorp Industries has been at the forefront of technology innovation, helping businesses transform their operations through cutting-edge solutions.</p>
+            
+            <p>Our team of <strong>500+ experts</strong> across the globe works with clients ranging from startups to Fortune 500 companies, delivering solutions that drive measurable results.</p>
+            
+            <ul class="stats-list">
+              <li>
+                <strong>500+</strong>
+                <span>Projects Completed</span>
+              </li>
+              <li>
+                <strong>250+</strong>
+                <span>Enterprise Clients</span>
+              </li>
+              <li>
+                <strong>98%</strong>
+                <span>Client Satisfaction</span>
+              </li>
+            </ul>
+          </div>
+          
+          <div class="about-image">
+            <img src="team.jpg" alt="TechCorp team collaborating in modern office" width="550" height="400" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <!-- Solutions section -->
+    <section id="solutions" class="solutions" aria-labelledby="solutions-heading">
+      <div class="container">
+        <header class="section-header">
+          <h2 id="solutions-heading">Industry Solutions</h2>
+          <p>Specialized solutions for your industry challenges</p>
+        </header>
+        
+        <div class="solutions-list">
+          <article class="solution-item">
+            <h3>Healthcare</h3>
+            <p>HIPAA-compliant platforms for patient management, telemedicine, and healthcare analytics.</p>
+          </article>
+          
+          <article class="solution-item">
+            <h3>Finance</h3>
+            <p>Secure fintech solutions for banking, payments, and financial services with regulatory compliance.</p>
+          </article>
+          
+          <article class="solution-item">
+            <h3>Retail & E-commerce</h3>
+            <p>Omnichannel retail platforms with inventory management, POS systems, and customer analytics.</p>
+          </article>
+          
+          <article class="solution-item">
+            <h3>Manufacturing</h3>
+            <p>IoT-enabled smart manufacturing systems for supply chain optimization and quality control.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <!-- Testimonials section -->
+    <section class="testimonials" aria-labelledby="testimonials-heading">
+      <div class="container">
+        <h2 id="testimonials-heading">What Our Clients Say</h2>
+        
+        <div class="testimonials-grid">
+          <blockquote class="testimonial-card">
+            <p>"TechCorp transformed our legacy systems into a modern, scalable platform. The results exceeded our expectations."</p>
+            <footer>
+              <cite>
+                <strong>Sarah Johnson</strong>
+                <span>CTO, GlobalRetail Inc.</span>
+              </cite>
+            </footer>
+          </blockquote>
+          
+          <blockquote class="testimonial-card">
+            <p>"Their expertise in cloud migration saved us 40% in infrastructure costs while improving performance."</p>
+            <footer>
+              <cite>
+                <strong>Michael Chen</strong>
+                <span>VP Technology, FinanceFirst</span>
+              </cite>
+            </footer>
+          </blockquote>
+          
+          <blockquote class="testimonial-card">
+            <p>"Outstanding team with deep technical knowledge and excellent communication throughout the project."</p>
+            <footer>
+              <cite>
+                <strong>Emily Rodriguez</strong>
+                <span>CEO, HealthTech Solutions</span>
+              </cite>
+            </footer>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+    
+    <!-- Contact section -->
+    <section id="contact" class="contact" aria-labelledby="contact-heading">
+      <div class="container">
+        <div class="contact-content">
+          <div class="contact-info">
+            <h2 id="contact-heading">Get In Touch</h2>
+            <p>Ready to transform your business with technology? Let's discuss your project.</p>
+            
+            <address class="contact-details">
+              <div class="contact-item">
+                <h3>Email</h3>
+                <a href="mailto:contact@techcorp.example.com">contact@techcorp.example.com</a>
+              </div>
+              
+              <div class="contact-item">
+                <h3>Phone</h3>
+                <a href="tel:+18005551234">+1 (800) 555-1234</a>
+              </div>
+              
+              <div class="contact-item">
+                <h3>Office</h3>
+                <p>
+                  123 Innovation Parkway<br>
+                  Tech District, CA 94000<br>
+                  United States
+                </p>
+              </div>
+            </address>
+          </div>
+          
+          <div class="contact-form-wrapper">
+            <form class="contact-form" action="/submit-contact" method="POST">
+              <h3>Send Us a Message</h3>
+              
+              <div class="form-group">
+                <label for="name">Full Name</label>
+                <input type="text" id="name" name="name" required autocomplete="name">
+              </div>
+              
+              <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" required autocomplete="email">
+              </div>
+              
+              <div class="form-group">
+                <label for="company">Company</label>
+                <input type="text" id="company" name="company" autocomplete="organization">
+              </div>
+              
+              <div class="form-group">
+                <label for="message">Message</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+              </div>
+              
+              <button type="submit" class="btn btn-primary">Send Message</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <!-- Footer -->
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>TechCorp Industries</h3>
+          <p>Innovative technology solutions for modern businesses.</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://linkedin.com/company/techcorp" aria-label="LinkedIn">
+              <svg width="24" height="24" aria-hidden="true">
+                <use href="#icon-linkedin"></use>
+              </svg>
+            </a>
+            <a href="https://twitter.com/techcorp" aria-label="Twitter">
+              <svg width="24" height="24" aria-hidden="true">
+                <use href="#icon-twitter"></use>
+              </svg>
+            </a>
+            <a href="https://github.com/techcorp" aria-label="GitHub">
+              <svg width="24" height="24" aria-hidden="true">
+                <use href="#icon-github"></use>
+              </svg>
+            </a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Services</h3>
+          <ul>
+            <li><a href="#software">Software Development</a></li>
+            <li><a href="#cloud">Cloud Solutions</a></li>
+            <li><a href="#consulting">IT Consulting</a></li>
+            <li><a href="#security">Cybersecurity</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/blog">Blog</a></li>
+            <li><a href="/press">Press</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Legal</h3>
+          <ul>
+            <li><a href="/privacy">Privacy Policy</a></li>
+            <li><a href="/terms">Terms of Service</a></li>
+            <li><a href="/security">Security</a></li>
+            <li><a href="/accessibility">Accessibility</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 TechCorp Industries. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/business-consulting.html b/skills/html-coder/assets/business-consulting.html
new file mode 100644
index 000000000..467d537d7
--- /dev/null
+++ b/skills/html-coder/assets/business-consulting.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Strategic business consulting firm helping organizations navigate growth, transformation, and operational excellence.">
+  <title>Stratify Consulting - Strategic Business Advisory</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <div class="header-inner">
+        <a href="/" class="logo">Stratify Consulting</a>
+        
+        <nav aria-label="Main navigation">
+          <ul class="nav-list">
+            <li><a href="#services">Services</a></li>
+            <li><a href="#approach">Our Approach</a></li>
+            <li><a href="#case-studies">Case Studies</a></li>
+            <li><a href="#insights">Insights</a></li>
+            <li><a href="#contact" class="btn-small">Contact Us</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="container">
+        <h1>Strategic Consulting for Business Growth</h1>
+        <p class="subtitle">We partner with leaders to solve their toughest challenges and create lasting value.</p>
+        <a href="#contact" class="btn btn-primary">Schedule Consultation</a>
+      </div>
+    </section>
+    
+    <section id="services" class="services">
+      <div class="container">
+        <h2>Our Services</h2>
+        <p class="section-intro">Comprehensive consulting services across strategy, operations, and transformation.</p>
+        
+        <div class="services-list">
+          <article class="service-item">
+            <h3>Strategy Development</h3>
+            <p>Craft winning strategies aligned with your vision, market dynamics, and competitive landscape.</p>
+            <ul>
+              <li>Corporate strategy</li>
+              <li>Market entry & expansion</li>
+              <li>Competitive positioning</li>
+              <li>Portfolio optimization</li>
+            </ul>
+          </article>
+          
+          <article class="service-item">
+            <h3>Organizational Transformation</h3>
+            <p>Guide your organization through change with proven methodologies and hands-on support.</p>
+            <ul>
+              <li>Change management</li>
+              <li>Operating model design</li>
+              <li>Organizational restructuring</li>
+              <li>Culture transformation</li>
+            </ul>
+          </article>
+          
+          <article class="service-item">
+            <h3>Operations Excellence</h3>
+            <p>Optimize operations to drive efficiency, reduce costs, and improve customer satisfaction.</p>
+            <ul>
+              <li>Process optimization</li>
+              <li>Supply chain management</li>
+              <li>Performance improvement</li>
+              <li>Lean & Six Sigma</li>
+            </ul>
+          </article>
+          
+          <article class="service-item">
+            <h3>Digital Transformation</h3>
+            <p>Leverage technology to reimagine business models, processes, and customer experiences.</p>
+            <ul>
+              <li>Digital strategy</li>
+              <li>Technology roadmap</li>
+              <li>Data & analytics</li>
+              <li>Innovation programs</li>
+            </ul>
+          </article>
+          
+          <article class="service-item">
+            <h3>M&A Advisory</h3>
+            <p>Navigate mergers, acquisitions, and divestitures with strategic and operational expertise.</p>
+            <ul>
+              <li>Deal strategy & screening</li>
+              <li>Due diligence</li>
+              <li>Integration planning</li>
+              <li>Post-merger integration</li>
+            </ul>
+          </article>
+          
+          <article class="service-item">
+            <h3>Performance Management</h3>
+            <p>Establish metrics, dashboards, and governance to drive accountability and results.</p>
+            <ul>
+              <li>KPI framework design</li>
+              <li>Dashboard development</li>
+              <li>Performance tracking</li>
+              <li>Executive reporting</li>
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="approach" class="approach">
+      <div class="container">
+        <h2>Our Approach</h2>
+        
+        <div class="approach-grid">
+          <article class="approach-step">
+            <div class="step-number" aria-hidden="true">01</div>
+            <h3>Discover</h3>
+            <p>Deep dive into your business, challenges, and opportunities through stakeholder interviews and data analysis.</p>
+          </article>
+          
+          <article class="approach-step">
+            <div class="step-number" aria-hidden="true">02</div>
+            <h3>Design</h3>
+            <p>Develop tailored solutions based on industry best practices and your unique context.</p>
+          </article>
+          
+          <article class="approach-step">
+            <div class="step-number" aria-hidden="true">03</div>
+            <h3>Deliver</h3>
+            <p>Implement solutions with your team, building capabilities and ensuring sustainable results.</p>
+          </article>
+          
+          <article class="approach-step">
+            <div class="step-number" aria-hidden="true">04</div>
+            <h3>Drive</h3>
+            <p>Monitor progress, refine approaches, and drive continuous improvement to maximize value.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="case-studies" class="case-studies">
+      <div class="container">
+        <h2>Client Success Stories</h2>
+        
+        <div class="case-study-grid">
+          <article class="case-study">
+            <div class="case-study-header">
+              <span class="industry-tag">Retail</span>
+              <h3>40% Cost Reduction Through Supply Chain Optimization</h3>
+            </div>
+            <p class="challenge"><strong>Challenge:</strong> National retailer faced rising operational costs and inventory management issues.</p>
+            <p class="solution"><strong>Solution:</strong> Redesigned supply chain network, implemented demand forecasting, and optimized inventory levels.</p>
+            <p class="results"><strong>Results:</strong></p>
+            <ul>
+              <li>40% reduction in logistics costs</li>
+              <li>25% improvement in inventory turnover</li>
+              <li>$15M annual savings</li>
+            </ul>
+          </article>
+          
+          <article class="case-study">
+            <div class="case-study-header">
+              <span class="industry-tag">Financial Services</span>
+              <h3>Digital Transformation Driving 3x Revenue Growth</h3>
+            </div>
+            <p class="challenge"><strong>Challenge:</strong> Traditional bank struggling to compete with digital-first competitors.</p>
+            <p class="solution"><strong>Solution:</strong> Developed digital strategy, launched mobile banking platform, and transformed customer experience.</p>
+            <p class="results"><strong>Results:</strong></p>
+            <ul>
+              <li>3x increase in digital revenue</li>
+              <li>60% of customers now digital-first</li>
+              <li>Net Promoter Score improved by 35 points</li>
+            </ul>
+          </article>
+          
+          <article class="case-study">
+            <div class="case-study-header">
+              <span class="industry-tag">Manufacturing</span>
+              <h3>Post-Merger Integration Achieving $50M Synergies</h3>
+            </div>
+            <p class="challenge"><strong>Challenge:</strong> Manufacturing company acquired competitor and needed rapid integration.</p>
+            <p class="solution"><strong>Solution:</strong> Led end-to-end integration including organizational design, systems consolidation, and culture alignment.</p>
+            <p class="results"><strong>Results:</strong></p>
+            <ul>
+              <li>$50M in cost synergies realized</li>
+              <li>Integration completed 3 months ahead of schedule</li>
+              <li>95% employee retention rate</li>
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="stats">
+      <div class="container">
+        <div class="stats-grid">
+          <div class="stat">
+            <div class="stat-number">500+</div>
+            <div class="stat-label">Projects Delivered</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">$2B+</div>
+            <div class="stat-label">Client Value Created</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">95%</div>
+            <div class="stat-label">Client Satisfaction</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">20+</div>
+            <div class="stat-label">Years Experience</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="insights" class="insights">
+      <div class="container">
+        <h2>Latest Insights</h2>
+        
+        <div class="insights-grid">
+          <article class="insight-card">
+            <time datetime="2026-03-01">March 1, 2026</time>
+            <h3><a href="/insights/ai-strategy-2026">Building an AI Strategy for 2026</a></h3>
+            <p>How leading organizations are leveraging artificial intelligence to drive competitive advantage.</p>
+            <a href="/insights/ai-strategy-2026" class="read-more">Read article</a>
+          </article>
+          
+          <article class="insight-card">
+            <time datetime="2026-02-15">February 15, 2026</time>
+            <h3><a href="/insights/resilient-supply-chains">Creating Resilient Supply Chains</a></h3>
+            <p>Five strategies to build supply chain resilience in an uncertain global environment.</p>
+            <a href="/insights/resilient-supply-chains" class="read-more">Read article</a>
+          </article>
+          
+          <article class="insight-card">
+            <time datetime="2026-02-01">February 1, 2026</time>
+            <h3><a href="/insights/culture-transformation">Leading Culture Transformation</a></h3>
+            <p>Practical approaches to shifting organizational culture and driving sustainable change.</p>
+            <a href="/insights/culture-transformation" class="read-more">Read article</a>
+          </article>
+        </div>
+        
+        <div class="insights-cta">
+          <a href="/insights" class="btn btn-outline">View All Insights</a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-content">
+          <div class="contact-text">
+            <h2>Let's Discuss Your Challenge</h2>
+            <p>Schedule a confidential consultation to explore how we can help your organization achieve its goals.</p>
+            
+            <address class="contact-info">
+              <p>
+                <strong>Email:</strong><br>
+                <a href="mailto:consulting@stratify.example.com">consulting@stratify.example.com</a>
+              </p>
+              <p>
+                <strong>Phone:</strong><br>
+                <a href="tel:+18005559876">+1 (800) 555-9876</a>
+              </p>
+              <p>
+                <strong>Headquarters:</strong><br>
+                100 Executive Plaza<br>
+                New York, NY 10001
+              </p>
+            </address>
+          </div>
+          
+          <form class="contact-form" action="/submit-inquiry" method="POST">
+            <h3>Request Consultation</h3>
+            
+            <div class="form-group">
+              <label for="full-name">Full Name</label>
+              <input type="text" id="full-name" name="name" required>
+            </div>
+            
+            <div class="form-group">
+              <label for="email-address">Email Address</label>
+              <input type="email" id="email-address" name="email" required>
+            </div>
+            
+            <div class="form-group">
+              <label for="company-name">Company</label>
+              <input type="text" id="company-name" name="company" required>
+            </div>
+            
+            <div class="form-group">
+              <label for="title">Job Title</label>
+              <input type="text" id="title" name="title" required>
+            </div>
+            
+            <div class="form-group">
+              <label for="service-area">Area of Interest</label>
+              <select id="service-area" name="service" required>
+                <option value="">Select service</option>
+                <option value="strategy">Strategy Development</option>
+                <option value="transformation">Organizational Transformation</option>
+                <option value="operations">Operations Excellence</option>
+                <option value="digital">Digital Transformation</option>
+                <option value="ma">M&A Advisory</option>
+                <option value="performance">Performance Management</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="details">Tell Us About Your Challenge</label>
+              <textarea id="details" name="message" rows="4" required></textarea>
+            </div>
+            
+            <button type="submit" class="btn btn-primary">Submit Inquiry</button>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Stratify Consulting</h3>
+          <p>Strategic advisory for business transformation.</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Services</h3>
+          <ul>
+            <li><a href="#strategy">Strategy</a></li>
+            <li><a href="#transformation">Transformation</a></li>
+            <li><a href="#operations">Operations</a></li>
+            <li><a href="#digital">Digital</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/team">Team</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/insights">Insights</a></li>
+            <li><a href="/case-studies">Case Studies</a></li>
+            <li><a href="/research">Research</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Stratify Consulting. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/business-services.html b/skills/html-coder/assets/business-services.html
new file mode 100644
index 000000000..3fe3f9c9c
--- /dev/null
+++ b/skills/html-coder/assets/business-services.html
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Professional business services including accounting, legal consulting, HR solutions, and strategic advisory for growing companies.">
+  <meta name="keywords" content="business services, accounting, legal, HR, consulting">
+  
+  <title>ProServe - Professional Business Services</title>
+  
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">
+          <img src="logo.svg" alt="ProServe" width="150" height="40">
+        </a>
+        
+        <ul class="nav-menu">
+          <li><a href="#services">Services</a></li>
+          <li><a href="#expertise">Expertise</a></li>
+          <li><a href="#pricing">Pricing</a></li>
+          <li><a href="#resources">Resources</a></li>
+          <li><a href="#contact" class="btn-nav">Get Started</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="container">
+        <h1>Professional Services for Modern Businesses</h1>
+        <p class="lead">Expert accounting, legal, HR, and consulting services to help your business thrive.</p>
+        
+        <form class="hero-form" action="/get-quote" method="POST">
+          <fieldset>
+            <legend class="visually-hidden">Request a consultation</legend>
+            
+            <div class="form-row">
+              <input type="text" name="name" placeholder="Your Name" required aria-label="Your name">
+              <input type="email" name="email" placeholder="Email Address" required aria-label="Email address">
+              <select name="service" required aria-label="Select service">
+                <option value="">Select Service</option>
+                <option value="accounting">Accounting</option>
+                <option value="legal">Legal</option>
+                <option value="hr">HR Solutions</option>
+                <option value="consulting">Consulting</option>
+              </select>
+              <button type="submit" class="btn btn-primary">Get Free Consultation</button>
+            </div>
+          </fieldset>
+        </form>
+        
+        <p class="hero-note"><small>No credit card required. Free 30-minute consultation.</small></p>
+      </div>
+    </section>
+    
+    <section id="services" class="services">
+      <div class="container">
+        <h2>Our Services</h2>
+        
+        <div class="services-grid">
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">📊</div>
+            <h3>Accounting & Bookkeeping</h3>
+            <p>Complete accounting services including bookkeeping, tax preparation, financial reporting, and payroll management.</p>
+            <ul>
+              <li>Monthly bookkeeping</li>
+              <li>Tax filing & planning</li>
+              <li>Financial statements</li>
+              <li>Payroll processing</li>
+            </ul>
+            <a href="#accounting" class="service-link">Learn more</a>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">⚖️</div>
+            <h3>Legal Consulting</h3>
+            <p>Business law expertise covering contracts, compliance, intellectual property, and corporate governance.</p>
+            <ul>
+              <li>Contract drafting & review</li>
+              <li>Compliance management</li>
+              <li>IP protection</li>
+              <li>Legal risk assessment</li>
+            </ul>
+            <a href="#legal" class="service-link">Learn more</a>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">👥</div>
+            <h3>HR Solutions</h3>
+            <p>Comprehensive human resources services including recruitment, employee management, and benefits administration.</p>
+            <ul>
+              <li>Talent acquisition</li>
+              <li>Employee onboarding</li>
+              <li>Performance management</li>
+              <li>Benefits administration</li>
+            </ul>
+            <a href="#hr" class="service-link">Learn more</a>
+          </article>
+          
+          <article class="service">
+            <div class="service-icon" aria-hidden="true">💡</div>
+            <h3>Strategic Consulting</h3>
+            <p>Business strategy advisory helping you make informed decisions and achieve sustainable growth.</p>
+            <ul>
+              <li>Business planning</li>
+              <li>Market analysis</li>
+              <li>Growth strategy</li>
+              <li>Operations optimization</li>
+            </ul>
+            <a href="#consulting" class="service-link">Learn more</a>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="expertise" class="expertise">
+      <div class="container">
+        <div class="two-column">
+          <div class="column">
+            <h2>Industry Expertise</h2>
+            <p>We serve businesses across various industries with specialized knowledge and experience.</p>
+            
+            <dl class="industries-list">
+              <dt>Technology & SaaS</dt>
+              <dd>Startups, software companies, and tech service providers</dd>
+              
+              <dt>Healthcare</dt>
+              <dd>Medical practices, clinics, and healthcare service organizations</dd>
+              
+              <dt>Retail & E-commerce</dt>
+              <dd>Online stores, brick-and-mortar retailers, and marketplaces</dd>
+              
+              <dt>Professional Services</dt>
+              <dd>Consulting firms, agencies, and B2B service providers</dd>
+              
+              <dt>Real Estate</dt>
+              <dd>Property management, real estate agencies, and developers</dd>
+            </dl>
+          </div>
+          
+          <div class="column">
+            <img src="expertise.jpg" alt="Professional team analyzing business data" width="500" height="400" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="pricing" class="pricing">
+      <div class="container">
+        <header class="section-header">
+          <h2>Transparent Pricing</h2>
+          <p>Choose a plan that fits your business needs</p>
+        </header>
+        
+        <div class="pricing-grid">
+          <article class="pricing-card">
+            <h3>Starter</h3>
+            <p class="price">
+              <span class="currency">$</span>
+              <span class="amount">499</span>
+              <span class="period">/month</span>
+            </p>
+            <p class="pricing-desc">Perfect for small businesses and startups</p>
+            
+            <ul class="features-list">
+              <li>Monthly bookkeeping</li>
+              <li>Quarterly tax filing</li>
+              <li>Financial reports</li>
+              <li>Email support</li>
+            </ul>
+            
+            <a href="#signup" class="btn btn-outline">Get Started</a>
+          </article>
+          
+          <article class="pricing-card featured">
+            <div class="badge">Most Popular</div>
+            <h3>Growth</h3>
+            <p class="price">
+              <span class="currency">$</span>
+              <span class="amount">999</span>
+              <span class="period">/month</span>
+            </p>
+            <p class="pricing-desc">For growing businesses with complex needs</p>
+            
+            <ul class="features-list">
+              <li>Everything in Starter, plus:</li>
+              <li>Payroll processing</li>
+              <li>Monthly tax planning</li>
+              <li>HR consultation</li>
+              <li>Priority support</li>
+            </ul>
+            
+            <a href="#signup" class="btn btn-primary">Get Started</a>
+          </article>
+          
+          <article class="pricing-card">
+            <h3>Enterprise</h3>
+            <p class="price">
+              <span class="amount">Custom</span>
+            </p>
+            <p class="pricing-desc">Tailored solutions for large organizations</p>
+            
+            <ul class="features-list">
+              <li>Everything in Growth, plus:</li>
+              <li>Dedicated account manager</li>
+              <li>Custom reporting</li>
+              <li>Legal consulting included</li>
+              <li>24/7 support</li>
+            </ul>
+            
+            <a href="#contact" class="btn btn-outline">Contact Sales</a>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="resources" class="resources">
+      <div class="container">
+        <h2>Resources & Insights</h2>
+        
+        <div class="resources-grid">
+          <article class="resource-card">
+            <img src="guide-taxes.jpg" alt="" width="350" height="200" loading="lazy">
+            <div class="resource-content">
+              <span class="resource-category">Guide</span>
+              <h3>Small Business Tax Planning Guide 2026</h3>
+              <p>Essential tax strategies every business owner should know to maximize deductions and minimize liability.</p>
+              <a href="/resources/tax-guide-2026" class="resource-link">Download PDF</a>
+            </div>
+          </article>
+          
+          <article class="resource-card">
+            <img src="webinar-hr.jpg" alt="" width="350" height="200" loading="lazy">
+            <div class="resource-content">
+              <span class="resource-category">Webinar</span>
+              <h3>Building Effective HR Policies</h3>
+              <p>Learn how to create HR policies that protect your business and support employee success.</p>
+              <a href="/webinars/hr-policies" class="resource-link">Watch Recording</a>
+            </div>
+          </article>
+          
+          <article class="resource-card">
+            <img src="template-contracts.jpg" alt="" width="350" height="200" loading="lazy">
+            <div class="resource-content">
+              <span class="resource-category">Template</span>
+              <h3>Free Contract Templates</h3>
+              <p>Download professionally drafted contract templates for common business agreements.</p>
+              <a href="/resources/contract-templates" class="resource-link">Get Templates</a>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="cta">
+      <div class="container">
+        <div class="cta-content">
+          <h2>Ready to Focus on Growing Your Business?</h2>
+          <p>Let us handle the business services so you can focus on what you do best.</p>
+          <a href="#contact" class="btn btn-primary btn-large">Schedule Free Consultation</a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-grid">
+          <div class="contact-info">
+            <h2>Get In Touch</h2>
+            <p>Have questions? We're here to help.</p>
+            
+            <address>
+              <p>
+                <strong>Phone:</strong><br>
+                <a href="tel:+18005556789">+1 (800) 555-6789</a>
+              </p>
+              
+              <p>
+                <strong>Email:</strong><br>
+                <a href="mailto:hello@proserve.example.com">hello@proserve.example.com</a>
+              </p>
+              
+              <p>
+                <strong>Office Hours:</strong><br>
+                Monday - Friday: 9:00 AM - 6:00 PM EST<br>
+                Saturday: 10:00 AM - 2:00 PM EST
+              </p>
+            </address>
+          </div>
+          
+          <form class="contact-form" action="/contact" method="POST">
+            <div class="form-group">
+              <label for="contact-name">Name</label>
+              <input type="text" id="contact-name" name="name" required>
+            </div>
+            
+            <div class="form-group">
+              <label for="contact-email">Email</label>
+              <input type="email" id="contact-email" name="email" required>
+            </div>
+            
+            <div class="form-group">
+              <label for="contact-service">Service Interest</label>
+              <select id="contact-service" name="service" required>
+                <option value="">Select a service</option>
+                <option value="accounting">Accounting & Bookkeeping</option>
+                <option value="legal">Legal Consulting</option>
+                <option value="hr">HR Solutions</option>
+                <option value="consulting">Strategic Consulting</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="contact-message">Message</label>
+              <textarea id="contact-message" name="message" rows="4" required></textarea>
+            </div>
+            
+            <button type="submit" class="btn btn-primary">Send Message</button>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-col">
+          <img src="logo.svg" alt="ProServe" width="120" height="32" class="footer-logo">
+          <p>Professional business services for growing companies.</p>
+        </div>
+        
+        <div class="footer-col">
+          <h3>Services</h3>
+          <ul>
+            <li><a href="#accounting">Accounting</a></li>
+            <li><a href="#legal">Legal</a></li>
+            <li><a href="#hr">HR Solutions</a></li>
+            <li><a href="#consulting">Consulting</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-col">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/team">Our Team</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-col">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/blog">Blog</a></li>
+            <li><a href="/guides">Guides</a></li>
+            <li><a href="/webinars">Webinars</a></li>
+            <li><a href="/faq">FAQ</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 ProServe. All rights reserved.</p>
+        <nav aria-label="Footer legal links">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Service</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="app.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/creative-artist-portfolio.html b/skills/html-coder/assets/creative-artist-portfolio.html
new file mode 100644
index 000000000..cdc550b76
--- /dev/null
+++ b/skills/html-coder/assets/creative-artist-portfolio.html
@@ -0,0 +1,435 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Maya Chen - Contemporary visual artist working with mixed media, painting, and sculpture. View artwork and exhibitions.">
+  <meta property="og:title" content="Maya Chen - Contemporary Artist">
+  <meta property="og:description" content="Exploring identity, memory, and transformation through mixed media art">
+  <meta property="og:type" content="website">
+  <title>Maya Chen - Contemporary Artist</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Maya Chen</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#works">Works</a></li>
+          <li><a href="#exhibitions">Exhibitions</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-art">
+      <div class="hero-artwork">
+        <img src="hero-artwork.jpg" alt="Abstract mixed media artwork with textured layers" width="1200" height="800" loading="eager">
+      </div>
+      <div class="hero-text">
+        <div class="container">
+          <h1>Maya Chen</h1>
+          <p class="hero-subtitle">Contemporary Artist</p>
+          <p class="hero-statement">Exploring identity, memory, and transformation through mixed media, painting, and sculpture</p>
+        </div>
+      </div>
+    </section>
+    
+    <section id="works" class="works">
+      <div class="container">
+        <header class="section-header">
+          <h2>Selected Works</h2>
+        </header>
+        
+        <div class="works-list">
+          <article class="artwork-feature">
+            <div class="artwork-image">
+              <img src="artwork-series-1.jpg" alt="Memory Fragments series - layered mixed media pieces" width="1000" height="667" loading="lazy">
+            </div>
+            <div class="artwork-details">
+              <h3>Memory Fragments Series</h3>
+              <p class="artwork-year">2025-2026</p>
+              <p class="artwork-medium">Mixed media on canvas, incorporating found objects, photography transfers, and acrylic paint</p>
+              <p class="artwork-dimensions">Various dimensions, 24" x 36" to 48" x 72"</p>
+              
+              <div class="artwork-statement">
+                <p>This ongoing series explores the fractured nature of memory—how our recollections layer, fade, and transform over time. Each piece incorporates personal photographs, vintage ephemera, and textured materials that represent the physical traces of lived experience.</p>
+                
+                <p>The work investigates how we construct identity from fragments of the past, questioning the reliability of memory while celebrating its emotional resonance.</p>
+              </div>
+              
+              <p class="artwork-status"><strong>Status:</strong> Selected pieces available. <a href="#contact">Inquire for details</a></p>
+            </div>
+          </article>
+          
+          <article class="artwork-feature">
+            <div class="artwork-image">
+              <img src="artwork-series-2.jpg" alt="Threshold series - sculptural installations" width="1000" height="667" loading="lazy">
+            </div>
+            <div class="artwork-details">
+              <h3>Threshold Series</h3>
+              <p class="artwork-year">2024</p>
+              <p class="artwork-medium">Steel, fabric, resin, and LED lighting</p>
+              <p class="artwork-dimensions">Site-specific installations, dimensions variable</p>
+              
+              <div class="artwork-statement">
+                <p>Threshold examines liminal spaces—both physical and psychological—where transformation occurs. These sculptural installations create portals that viewers can move through, experiencing shifts in light, texture, and spatial perception.</p>
+                
+                <p>The series draws inspiration from traditional architectural elements reimagined through contemporary materials, inviting contemplation about boundaries, passage, and change.</p>
+              </div>
+              
+              <p class="artwork-status"><strong>Collection:</strong> San Francisco Museum of Modern Art (commissioned installation)</p>
+            </div>
+          </article>
+          
+          <article class="artwork-feature">
+            <div class="artwork-image">
+              <img src="artwork-series-3.jpg" alt="Dialogue series - diptych paintings" width="1000" height="667" loading="lazy">
+            </div>
+            <div class="artwork-details">
+              <h3>Dialogue Series</h3>
+              <p class="artwork-year">2023</p>
+              <p class="artwork-medium">Oil and acrylic on linen, diptych format</p>
+              <p class="artwork-dimensions">Each panel: 36" x 48"</p>
+              
+              <div class="artwork-statement">
+                <p>Presented as paired paintings, Dialogue explores the relationship between Eastern and Western aesthetic traditions, drawing from my Chinese-American heritage. Each diptych places abstract gestural marks in conversation with more structured, geometric forms.</p>
+                
+                <p>The work examines cultural hybridity and the constant negotiation between different ways of seeing and being in the world.</p>
+              </div>
+              
+              <p class="artwork-status"><strong>Status:</strong> Series complete. Several pieces in private collections, 3 available for purchase</p>
+            </div>
+          </article>
+          
+          <article class="artwork-feature">
+            <div class="artwork-image">
+              <img src="artwork-series-4.jpg" alt="Ephemera collection - small-scale works on paper" width="1000" height="667" loading="lazy">
+            </div>
+            <div class="artwork-details">
+              <h3>Ephemera Collection</h3>
+              <p class="artwork-year">2022-ongoing</p>
+              <p class="artwork-medium">Ink, watercolor, collage on handmade paper</p>
+              <p class="artwork-dimensions">8" x 10" to 12" x 16"</p>
+              
+              <div class="artwork-statement">
+                <p>A more intimate body of work created as daily practice pieces. These smaller works explore spontaneity and imperfection, incorporating accidental marks, tea stains, and found papers collected during travels.</p>
+                
+                <p>The collection celebrates the beauty of transience and the creative power of embracing mistakes.</p>
+              </div>
+              
+              <p class="artwork-status"><strong>Status:</strong> Available through studio visits. Prices range $400-$1,200</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="exhibitions" class="exhibitions">
+      <div class="container">
+        <header class="section-header">
+          <h2>Exhibitions</h2>
+        </header>
+        
+        <div class="exhibition-timeline">
+          <h3>Upcoming</h3>
+          
+          <article class="exhibition-item">
+            <div class="exhibition-date">
+              <time datetime="2026-09">September 2026</time>
+            </div>
+            <div class="exhibition-details">
+              <h4>Memory & Material</h4>
+              <p class="exhibition-type">Solo Exhibition</p>
+              <p class="exhibition-venue">Contemporary Arts Center, Chicago, IL</p>
+              <p>Major solo exhibition featuring new work from the Memory Fragments series alongside site-specific installations.</p>
+            </div>
+          </article>
+          
+          <article class="exhibition-item">
+            <div class="exhibition-date">
+              <time datetime="2026-06">June 2026</time>
+            </div>
+            <div class="exhibition-details">
+              <h4>Emerging Voices</h4>
+              <p class="exhibition-type">Group Exhibition</p>
+              <p class="exhibition-venue">Whitney Museum of American Art, New York, NY</p>
+              <p>Group show featuring 12 contemporary artists exploring identity and cultural heritage.</p>
+            </div>
+          </article>
+          
+          <h3>Past Exhibitions</h3>
+          
+          <article class="exhibition-item">
+            <div class="exhibition-date">
+              <time datetime="2025-10">October 2025</time>
+            </div>
+            <div class="exhibition-details">
+              <h4>Threshold: An Installation</h4>
+              <p class="exhibition-type">Solo Exhibition</p>
+              <p class="exhibition-venue">San Francisco Museum of Modern Art, San Francisco, CA</p>
+              <p>Commissioned installation for the museum's contemporary gallery space.</p>
+            </div>
+          </article>
+          
+          <article class="exhibition-item">
+            <div class="exhibition-date">
+              <time datetime="2024-05">May 2024</time>
+            </div>
+            <div class="exhibition-details">
+              <h4>Dialogue: East/West</h4>
+              <p class="exhibition-type">Solo Exhibition</p>
+              <p class="exhibition-venue">Gallery 101, Los Angeles, CA</p>
+              <p>Complete presentation of the Dialogue Series with critical acclaim.</p>
+            </div>
+          </article>
+          
+          <article class="exhibition-item">
+            <div class="exhibition-date">
+              <time datetime="2023-11">November 2023</time>
+            </div>
+            <div class="exhibition-details">
+              <h4>Intersections: Asian-American Artists</h4>
+              <p class="exhibition-type">Group Exhibition</p>
+              <p class="exhibition-venue">Brooklyn Museum, Brooklyn, NY</p>
+            </div>
+          </article>
+          
+          <article class="exhibition-item">
+            <div class="exhibition-date">
+              <time datetime="2022-03">March 2022</time>
+            </div>
+            <div class="exhibition-details">
+              <h4>New Talent</h4>
+              <p class="exhibition-type">Group Exhibition</p>
+              <p class="exhibition-venue">Saatchi Gallery, London, UK</p>
+              <p>International exhibition showcasing emerging contemporary artists.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-image">
+            <img src="artist-portrait.jpg" alt="Maya Chen in her studio" width="600" height="750" loading="lazy">
+            <p class="image-caption">In the studio, Oakland, 2026. Photo by Jordan Hayes</p>
+          </div>
+          
+          <div class="about-content">
+            <h2>About the Artist</h2>
+            
+            <p>Maya Chen (b. 1992, San Francisco, CA) is a contemporary visual artist working primarily in mixed media, painting, and sculptural installation. Her work explores themes of cultural identity, memory, and transformation through layered, tactile compositions that invite prolonged contemplation.</p>
+            
+            <p>Drawing from her Chinese-American heritage, Chen's practice investigates the spaces between cultures—the negotiations, translations, and hybrid forms that emerge from living across multiple worlds. Her work often incorporates found materials, vintage photographs, and traditional craft techniques alongside contemporary media.</p>
+            
+            <p>Chen received her MFA from California College of the Arts (2018) and her BA from Yale University (2014). She has been awarded residencies at Headlands Center for the Arts and the Vermont Studio Center, and her work has been featured in <cite>Artforum</cite>, <cite>Art in America</cite>, and <cite>Hyperallergic</cite>.</p>
+            
+            <p>She currently lives and works in Oakland, California.</p>
+            
+            <h3>Education</h3>
+            <dl class="education-list">
+              <dt>2018</dt>
+              <dd>MFA, Studio Art, California College of the Arts, San Francisco, CA</dd>
+              
+              <dt>2014</dt>
+              <dd>BA, Art History and Studio Art, Yale University, New Haven, CT</dd>
+            </dl>
+            
+            <h3>Awards & Residencies</h3>
+            <ul class="awards-list">
+              <li>Emerging Artist Grant, Joan Mitchell Foundation (2025)</li>
+              <li>Artist Residency, Headlands Center for the Arts (2024)</li>
+              <li>Artadia Award Finalist (2023)</li>
+              <li>Vermont Studio Center Fellowship (2022)</li>
+              <li>Inaugural Contemporary Art Prize, Asian Arts Museum (2021)</li>
+            </ul>
+            
+            <h3>Collections</h3>
+            <ul class="collections-list">
+              <li>San Francisco Museum of Modern Art, San Francisco, CA</li>
+              <li>Asian Art Museum, San Francisco, CA</li>
+              <li>de Young Museum, San Francisco, CA</li>
+              <li>Berkeley Art Museum and Pacific Film Archive, Berkeley, CA</li>
+              <li>Private collections (USA, UK, Hong Kong)</li>
+            </ul>
+            
+            <h3>Press & Publications</h3>
+            <ul class="press-list">
+              <li>"Maya Chen's Layered Histories," <cite>Artforum</cite>, November 2025</li>
+              <li>"Threshold: Navigating Liminal Space," <cite>Art in America</cite>, October 2025</li>
+              <li>"10 Emerging Artists to Watch," <cite>Hyperallergic</cite>, January 2024</li>
+              <li>"In Dialogue with Heritage," <cite>Sculpture Magazine</cite>, Summer 2023</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="statement">
+      <div class="container">
+        <div class="statement-content">
+          <h2>Artist Statement</h2>
+          
+          <p>My work emerges from the intersection of memory, materiality, and cultural identity. As a first-generation Chinese-American, I've always been fascinated by the ways we construct meaning across different cultural frameworks—the translations, mistranslations, and beautiful hybrid forms that result.</p>
+          
+          <p>I work primarily with mixed media and installation, building up layers of material that mirror the layering of experience and memory. My practice incorporates found photographs, vintage papers, textiles, and traditional craft techniques alongside contemporary materials like resin and LED lighting. This juxtaposition of old and new, East and West, reflects my lived experience navigating multiple cultural identities.</p>
+          
+          <p>Memory—both personal and collective—is central to my work. I'm interested in how memories fragment, shift, and reconstruct over time, and how physical objects can serve as anchors for recollection. The materials I choose carry their own histories and associations, adding layers of meaning beyond my own intentions.</p>
+          
+          <p>Through my art, I create spaces for reflection and questioning. I want viewers to slow down, look closely, and discover the subtle details and layered narratives embedded within each piece. My work asks: How do we remember? What gets preserved and what fades? How do we honor multiple truths simultaneously?</p>
+          
+          <p>Ultimately, I believe art can create bridges—between cultures, between past and present, between individual experience and collective understanding. My hope is that the work resonates not just with those who share my specific cultural background, but with anyone who has navigated the complexity of identity, memory, and belonging.</p>
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-layout">
+          <div class="contact-info-section">
+            <h2>Get in Touch</h2>
+            <p>For inquiries about available works, studio visits, commissions, or press requests, please reach out using the form or contact information below.</p>
+            
+            <div class="contact-details">
+              <h3>Contact Information</h3>
+              <p>
+                <strong>Email:</strong> <a href="mailto:studio@mayachen.art">studio@mayachen.art</a><br>
+                <strong>Studio:</strong> Oakland, California<br>
+                <strong>Representation:</strong> Gallery 101, Los Angeles
+              </p>
+            </div>
+            
+            <div class="contact-details">
+              <h3>Gallery Representation</h3>
+              <p>
+                <strong>Gallery 101</strong><br>
+                456 Art District Blvd<br>
+                Los Angeles, CA 90013<br>
+                <a href="tel:+13105551234">(310) 555-1234</a><br>
+                <a href="https://gallery101.example.com">gallery101.example.com</a>
+              </p>
+            </div>
+            
+            <div class="social-links">
+              <h3>Follow My Work</h3>
+              <ul>
+                <li><a href="https://instagram.com/mayachenart">Instagram</a></li>
+                <li><a href="https://artsy.net/artist/maya-chen">Artsy</a></li>
+                <li><a href="https://saatchiart.com/mayachen">Saatchi Art</a></li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="contact-form-container">
+            <form class="contact-form" action="/contact-artist" method="POST">
+              <div class="form-group">
+                <label for="contact-name">Name</label>
+                <input type="text" id="contact-name" name="name" required autocomplete="name">
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-email">Email</label>
+                <input type="email" id="contact-email" name="email" required autocomplete="email">
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-phone">Phone <span class="optional">(optional)</span></label>
+                <input type="tel" id="contact-phone" name="phone" autocomplete="tel">
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-subject">Subject</label>
+                <select id="contact-subject" name="subject" required>
+                  <option value="">Select subject</option>
+                  <option value="purchase">Purchase Inquiry</option>
+                  <option value="studio-visit">Studio Visit Request</option>
+                  <option value="commission">Commission Inquiry</option>
+                  <option value="exhibition">Exhibition Opportunity</option>
+                  <option value="press">Press / Media</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-message">Message</label>
+                <textarea id="contact-message" name="message" rows="6" required></textarea>
+              </div>
+              
+              <button type="submit" class="btn btn-primary">Send Message</button>
+              
+              <p class="form-footer"><small>I typically respond to inquiries within 3-5 business days.</small></p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="newsletter">
+      <div class="container">
+        <h2>Studio Updates</h2>
+        <p>Subscribe to receive occasional updates about new work, exhibitions, and studio news</p>
+        
+        <form class="newsletter-form" action="/subscribe" method="POST">
+          <label for="newsletter-email" class="visually-hidden">Email address</label>
+          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
+          <button type="submit" class="btn btn-secondary">Subscribe</button>
+        </form>
+        
+        <p class="newsletter-note"><small>I respect your privacy. No spam, unsubscribe anytime.</small></p>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Maya Chen</h3>
+          <p>Contemporary Visual Artist<br>Oakland, California</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Navigation</h3>
+          <ul>
+            <li><a href="#works">Works</a></li>
+            <li><a href="#exhibitions">Exhibitions</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Connect</h3>
+          <ul>
+            <li><a href="https://instagram.com/mayachenart">Instagram</a></li>
+            <li><a href="https://artsy.net/artist/maya-chen">Artsy</a></li>
+            <li><a href="/press">Press Kit</a></li>
+            <li><a href="/cv">Download CV (PDF)</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Maya Chen. All artwork images and content are protected by copyright.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Use</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/creative-designer-portfolio.html b/skills/html-coder/assets/creative-designer-portfolio.html
new file mode 100644
index 000000000..29ab21fa2
--- /dev/null
+++ b/skills/html-coder/assets/creative-designer-portfolio.html
@@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Alex Rivera - UI/UX Designer specializing in web and mobile app design. View my portfolio of design work.">
+  <meta property="og:title" content="Alex Rivera - UI/UX Designer">
+  <meta property="og:description" content="Creating beautiful, user-centered digital experiences">
+  <meta property="og:type" content="website">
+  <title>Alex Rivera - UI/UX Designer</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Alex Rivera</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#work">Work</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#process">Process</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content">
+          <p class="hero-label">UI/UX Designer</p>
+          <h1>Creating beautiful, user-centered digital experiences</h1>
+          <p class="hero-description">I design intuitive interfaces for web and mobile applications, focusing on usability, accessibility, and delightful interactions.</p>
+          <div class="hero-actions">
+            <a href="#work" class="btn btn-primary">View My Work</a>
+            <a href="#contact" class="btn btn-outline">Get in Touch</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="work" class="portfolio">
+      <div class="container">
+        <header class="section-header">
+          <h2>Selected Work</h2>
+          <p>Recent projects showcasing my design approach</p>
+        </header>
+        
+        <div class="portfolio-grid">
+          <article class="project-card featured">
+            <a href="/work/fintech-app" class="project-link">
+              <img src="fintech-hero.jpg" alt="FinTech mobile banking app interface" width="800" height="500" loading="eager">
+              <div class="project-content">
+                <div class="project-tags">
+                  <span class="tag">Mobile App</span>
+                  <span class="tag">FinTech</span>
+                </div>
+                <h3>FinTech Mobile Banking</h3>
+                <p>Complete redesign of a mobile banking experience for 2M+ users, improving task completion rates by 40%</p>
+                <span class="project-cta" aria-hidden="true">View Case Study →</span>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/work/wellness-platform" class="project-link">
+              <img src="wellness-cover.jpg" alt="Wellness platform dashboard design" width="600" height="400" loading="lazy">
+              <div class="project-content">
+                <div class="project-tags">
+                  <span class="tag">Web App</span>
+                  <span class="tag">Healthcare</span>
+                </div>
+                <h3>Wellness Management Platform</h3>
+                <p>Enterprise wellness platform connecting employees with health resources and coaching</p>
+                <span class="project-cta" aria-hidden="true">View Case Study →</span>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/work/elearning-redesign" class="project-link">
+              <img src="elearning-cover.jpg" alt="E-learning platform interface redesign" width="600" height="400" loading="lazy">
+              <div class="project-content">
+                <div class="project-tags">
+                  <span class="tag">Web Design</span>
+                  <span class="tag">Education</span>
+                </div>
+                <h3>E-Learning Platform Redesign</h3>
+                <p>Modernizing an online education platform to improve learner engagement and course completion</p>
+                <span class="project-cta" aria-hidden="true">View Case Study →</span>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/work/food-delivery" class="project-link">
+              <img src="food-delivery-cover.jpg" alt="Food delivery app UI design" width="600" height="400" loading="lazy">
+              <div class="project-content">
+                <div class="project-tags">
+                  <span class="tag">Mobile App</span>
+                  <span class="tag">Consumer</span>
+                </div>
+                <h3>Food Delivery App</h3>
+                <p>Streamlined ordering experience reducing checkout time by 60%</p>
+                <span class="project-cta" aria-hidden="true">View Case Study →</span>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/work/saas-dashboard" class="project-link">
+              <img src="saas-cover.jpg" alt="SaaS analytics dashboard" width="600" height="400" loading="lazy">
+              <div class="project-content">
+                <div class="project-tags">
+                  <span class="tag">Web App</span>
+                  <span class="tag">SaaS</span>
+                </div>
+                <h3>Analytics Dashboard</h3>
+                <p>Data visualization dashboard helping teams make informed decisions</p>
+                <span class="project-cta" aria-hidden="true">View Case Study →</span>
+              </div>
+            </a>
+          </article>
+          
+          <article class="project-card">
+            <a href="/work/nonprofit-website" class="project-link">
+              <img src="nonprofit-cover.jpg" alt="Nonprofit organization website" width="600" height="400" loading="lazy">
+              <div class="project-content">
+                <div class="project-tags">
+                  <span class="tag">Website</span>
+                  <span class="tag">Nonprofit</span>
+                </div>
+                <h3>Nonprofit Rebrand & Website</h3>
+                <p>Complete brand refresh and website redesign increasing donations by 85%</p>
+                <span class="project-cta" aria-hidden="true">View Case Study →</span>
+              </div>
+            </a>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-image">
+            <img src="profile.jpg" alt="Alex Rivera at design desk" width="500" height="600" loading="lazy">
+          </div>
+          
+          <div class="about-content">
+            <h2>About Me</h2>
+            <p>I'm a UI/UX designer with 8 years of experience creating digital products that people love to use. Based in San Francisco, I work with startups and established companies to design intuitive, accessible, and beautiful experiences.</p>
+            
+            <p>My design philosophy is rooted in empathy—understanding users' needs, frustrations, and goals. I believe great design solves real problems while creating moments of delight.</p>
+            
+            <p>When I'm not designing, you'll find me hiking Bay Area trails, experimenting with film photography, or mentoring junior designers through ADPList.</p>
+            
+            <h3>Skills & Expertise</h3>
+            <div class="skills-grid">
+              <div class="skill-category">
+                <h4>Design</h4>
+                <ul>
+                  <li>UX Research & Testing</li>
+                  <li>Information Architecture</li>
+                  <li>Interaction Design</li>
+                  <li>Visual Design</li>
+                  <li>Prototyping</li>
+                  <li>Design Systems</li>
+                </ul>
+              </div>
+              
+              <div class="skill-category">
+                <h4>Tools</h4>
+                <ul>
+                  <li>Figma</li>
+                  <li>Adobe Creative Suite</li>
+                  <li>Sketch</li>
+                  <li>Framer</li>
+                  <li>Principle</li>
+                  <li>InVision</li>
+                </ul>
+              </div>
+              
+              <div class="skill-category">
+                <h4>Development</h4>
+                <ul>
+                  <li>HTML & CSS</li>
+                  <li>JavaScript Basics</li>
+                  <li>Responsive Design</li>
+                  <li>Accessibility (WCAG)</li>
+                </ul>
+              </div>
+            </div>
+            
+            <h3>Recognition</h3>
+            <ul class="recognition-list">
+              <li>🏆 Awwwards Site of the Day (2025)</li>
+              <li>📱 Apple Design Award Finalist (2024)</li>
+              <li>✨ Featured in UX Collective (2023)</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="process" class="process">
+      <div class="container">
+        <header class="section-header">
+          <h2>My Design Process</h2>
+          <p>How I approach every project</p>
+        </header>
+        
+        <div class="process-steps">
+          <article class="process-step">
+            <div class="step-number" aria-hidden="true">01</div>
+            <h3>Discover & Research</h3>
+            <p>Understanding the problem space through user interviews, competitive analysis, and stakeholder workshops. I dig deep to uncover user needs and business constraints.</p>
+            <ul class="step-activities">
+              <li>User interviews</li>
+              <li>Competitive analysis</li>
+              <li>Heuristic evaluation</li>
+              <li>Analytics review</li>
+            </ul>
+          </article>
+          
+          <article class="process-step">
+            <div class="step-number" aria-hidden="true">02</div>
+            <h3>Define & Strategize</h3>
+            <p>Synthesizing research into actionable insights, creating user personas, journey maps, and defining the product strategy and key metrics for success.</p>
+            <ul class="step-activities">
+              <li>User personas</li>
+              <li>Journey mapping</li>
+              <li>Information architecture</li>
+              <li>Success metrics definition</li>
+            </ul>
+          </article>
+          
+          <article class="process-step">
+            <div class="step-number" aria-hidden="true">03</div>
+            <h3>Design & Prototype</h3>
+            <p>Exploring multiple solutions through sketching, wireframing, and high-fidelity mockups. Creating interactive prototypes to test ideas and gather feedback early.</p>
+            <ul class="step-activities">
+              <li>Sketching & ideation</li>
+              <li>Wireframing</li>
+              <li>Visual design</li>
+              <li>Interactive prototyping</li>
+            </ul>
+          </article>
+          
+          <article class="process-step">
+            <div class="step-number" aria-hidden="true">04</div>
+            <h3>Test & Iterate</h3>
+            <p>Conducting usability testing with real users, analyzing results, and refining the design based on feedback. Design is never done on the first try.</p>
+            <ul class="step-activities">
+              <li>Usability testing</li>
+              <li>Accessibility audits</li>
+              <li>Design iteration</li>
+              <li>Stakeholder reviews</li>
+            </ul>
+          </article>
+          
+          <article class="process-step">
+            <div class="step-number" aria-hidden="true">05</div>
+            <h3>Deliver & Support</h3>
+            <p>Collaborating closely with developers during implementation, creating design documentation and style guides, and measuring post-launch performance.</p>
+            <ul class="step-activities">
+              <li>Developer handoff</li>
+              <li>Design system documentation</li>
+              <li>QA & design review</li>
+              <li>Post-launch monitoring</li>
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="testimonials">
+      <div class="container">
+        <h2>What Clients Say</h2>
+        
+        <div class="testimonials-grid">
+          <article class="testimonial-card">
+            <blockquote>
+              <p>"Alex transformed our product from confusing to intuitive. User satisfaction scores jumped 45% after the redesign, and our support tickets dropped significantly. Outstanding work."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="client-sarah.jpg" alt="" width="60" height="60" loading="lazy">
+              <div class="author-info">
+                <cite>Sarah Chen</cite>
+                <p>Product Director, FinTech Corp</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card">
+            <blockquote>
+              <p>"Working with Alex was a dream. They listened carefully to our needs, challenged our assumptions (in the best way), and delivered designs that exceeded our expectations."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="client-michael.jpg" alt="" width="60" height="60" loading="lazy">
+              <div class="author-info">
+                <cite>Michael Torres</cite>
+                <p>Founder, WellnessHub</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card">
+            <blockquote>
+              <p>"Alex brings both creative vision and analytical rigor. Every design decision was backed by research and testing. The result was a product users actually want to use."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="client-jennifer.jpg" alt="" width="60" height="60" loading="lazy">
+              <div class="author-info">
+                <cite>Jennifer Park</cite>
+                <p>VP Product, EduLearn</p>
+              </div>
+            </footer>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-layout">
+          <div class="contact-intro">
+            <h2>Let's Work Together</h2>
+            <p>I'm currently available for freelance projects and consulting work. Whether you need a full product redesign or want to improve a specific feature, I'd love to hear about your project.</p>
+            
+            <div class="contact-info">
+              <p><strong>Email:</strong> <a href="mailto:alex@alexrivera.design">alex@alexrivera.design</a></p>
+              <p><strong>Location:</strong> San Francisco, CA (Remote-friendly)</p>
+              <p><strong>Response time:</strong> Usually within 24 hours</p>
+            </div>
+            
+            <div class="social-links">
+              <a href="https://dribbble.com/alexrivera" class="social-link">Dribbble</a>
+              <a href="https://linkedin.com/in/alexrivera" class="social-link">LinkedIn</a>
+              <a href="https://twitter.com/alexrivera" class="social-link">Twitter</a>
+              <a href="https://medium.com/@alexrivera" class="social-link">Medium</a>
+            </div>
+          </div>
+          
+          <div class="contact-form-container">
+            <form class="contact-form" action="/send-message" method="POST">
+              <div class="form-group">
+                <label for="contact-name">Name</label>
+                <input type="text" id="contact-name" name="name" required autocomplete="name">
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-email">Email</label>
+                <input type="email" id="contact-email" name="email" required autocomplete="email">
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-company">Company <span class="optional">(optional)</span></label>
+                <input type="text" id="contact-company" name="company" autocomplete="organization">
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-project-type">Project Type</label>
+                <select id="contact-project-type" name="project-type">
+                  <option value="">Select type</option>
+                  <option value="full-product">Full Product Design</option>
+                  <option value="feature">Feature Design</option>
+                  <option value="redesign">Redesign/Refresh</option>
+                  <option value="consulting">Design Consulting</option>
+                  <option value="research">UX Research</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-budget">Budget Range</label>
+                <select id="contact-budget" name="budget">
+                  <option value="">Select range</option>
+                  <option value="5k-10k">$5k - $10k</option>
+                  <option value="10k-25k">$10k - $25k</option>
+                  <option value="25k-50k">$25k - $50k</option>
+                  <option value="50k+">$50k+</option>
+                  <option value="not-sure">Not sure yet</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-timeline">Desired Timeline</label>
+                <input type="text" id="contact-timeline" name="timeline" placeholder="e.g., 2-3 months, ASAP, Q3 2026">
+              </div>
+              
+              <div class="form-group">
+                <label for="contact-message">Tell Me About Your Project</label>
+                <textarea id="contact-message" name="message" rows="5" placeholder="What problem are you trying to solve? Who are your users? What's your vision?" required></textarea>
+              </div>
+              
+              <button type="submit" class="btn btn-primary btn-large">Send Message</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Alex Rivera</h3>
+          <p>UI/UX Designer creating thoughtful digital experiences</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Quick Links</h3>
+          <ul>
+            <li><a href="#work">Portfolio</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#process">Process</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Connect</h3>
+          <ul>
+            <li><a href="https://dribbble.com/alexrivera">Dribbble</a></li>
+            <li><a href="https://linkedin.com/in/alexrivera">LinkedIn</a></li>
+            <li><a href="https://twitter.com/alexrivera">Twitter</a></li>
+            <li><a href="https://medium.com/@alexrivera">Medium</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Alex Rivera. All rights reserved.</p>
+        <p>Designed and coded with care</p>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/creative-photographer-portfolio.html b/skills/html-coder/assets/creative-photographer-portfolio.html
new file mode 100644
index 000000000..09f74a7b4
--- /dev/null
+++ b/skills/html-coder/assets/creative-photographer-portfolio.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Jordan Hayes - Professional photographer specializing in portraits, weddings, and commercial photography.">
+  <meta property="og:title" content="Jordan Hayes Photography">
+  <meta property="og:description" content="Capturing authentic moments and telling stories through photography">
+  <meta property="og:type" content="website">
+  <title>Jordan Hayes - Professional Photographer</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Jordan Hayes</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#portfolio">Portfolio</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#contact">Book a Session</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-photo">
+      <img src="hero-image.jpg" alt="Dramatic portrait photograph with natural lighting" width="1920" height="1080" loading="eager" class="hero-image">
+      <div class="hero-overlay">
+        <div class="container">
+          <div class="hero-content">
+            <h1>Capturing Authentic Moments</h1>
+            <p>Professional photographer based in New York, specializing in portraits, weddings, and commercial work</p>
+            <a href="#portfolio" class="btn btn-primary">View Portfolio</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="portfolio" class="portfolio">
+      <div class="container">
+        <header class="section-header">
+          <h2>Portfolio</h2>
+          <p>A selection of my recent work</p>
+        </header>
+        
+        <nav class="portfolio-filter" aria-label="Filter portfolio">
+          <button class="filter-btn active" data-filter="all">All</button>
+          <button class="filter-btn" data-filter="portraits">Portraits</button>
+          <button class="filter-btn" data-filter="weddings">Weddings</button>
+          <button class="filter-btn" data-filter="commercial">Commercial</button>
+          <button class="filter-btn" data-filter="lifestyle">Lifestyle</button>
+        </nav>
+        
+        <div class="gallery-grid">
+          <article class="gallery-item" data-category="portraits">
+            <a href="/gallery/portrait-1" class="gallery-link">
+              <img src="portrait-1.jpg" alt="Professional headshot with natural light" width="600" height="800" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Executive Portrait Session</h3>
+                <p class="category">Portraits</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="weddings">
+            <a href="/gallery/wedding-1" class="gallery-link">
+              <img src="wedding-1.jpg" alt="Wedding couple embracing at sunset" width="800" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Brooklyn Rooftop Wedding</h3>
+                <p class="category">Weddings</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="commercial">
+            <a href="/gallery/commercial-1" class="gallery-link">
+              <img src="commercial-1.jpg" alt="Product photography setup with dramatic lighting" width="600" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Fashion Editorial</h3>
+                <p class="category">Commercial</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="portraits">
+            <a href="/gallery/portrait-2" class="gallery-link">
+              <img src="portrait-2.jpg" alt="Family portrait in natural outdoor setting" width="800" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Family Portrait</h3>
+                <p class="category">Portraits</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="lifestyle">
+            <a href="/gallery/lifestyle-1" class="gallery-link">
+              <img src="lifestyle-1.jpg" alt="Candid lifestyle photography in urban setting" width="600" height="800" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Urban Lifestyle</h3>
+                <p class="category">Lifestyle</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="weddings">
+            <a href="/gallery/wedding-2" class="gallery-link">
+              <img src="wedding-2.jpg" alt="Wedding ceremony detail shot" width="600" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Garden Wedding Ceremony</h3>
+                <p class="category">Weddings</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="commercial">
+            <a href="/gallery/commercial-2" class="gallery-link">
+              <img src="commercial-2.jpg" alt="Brand campaign photography" width="800" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Brand Campaign</h3>
+                <p class="category">Commercial</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="portraits">
+            <a href="/gallery/portrait-3" class="gallery-link">
+              <img src="portrait-3.jpg" alt="Artistic portrait with creative lighting" width="600" height="800" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Creative Portrait Series</h3>
+                <p class="category">Portraits</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="lifestyle">
+            <a href="/gallery/lifestyle-2" class="gallery-link">
+              <img src="lifestyle-2.jpg" alt="Lifestyle photography capturing everyday moments" width="800" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Day in the Life</h3>
+                <p class="category">Lifestyle</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="weddings">
+            <a href="/gallery/wedding-3" class="gallery-link">
+              <img src="wedding-3.jpg" alt="Wedding reception celebration photograph" width="600" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Reception Moments</h3>
+                <p class="category">Weddings</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="commercial">
+            <a href="/gallery/commercial-3" class="gallery-link">
+              <img src="commercial-3.jpg" alt="Corporate event photography" width="600" height="800" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Corporate Event</h3>
+                <p class="category">Commercial</p>
+              </div>
+            </a>
+          </article>
+          
+          <article class="gallery-item" data-category="lifestyle">
+            <a href="/gallery/lifestyle-3" class="gallery-link">
+              <img src="lifestyle-3.jpg" alt="Travel and adventure lifestyle photography" width="800" height="600" loading="lazy">
+              <div class="gallery-caption">
+                <h3>Travel Stories</h3>
+                <p class="category">Lifestyle</p>
+              </div>
+            </a>
+          </article>
+        </div>
+        
+        <div class="gallery-cta">
+          <p>Want to see more? Check out my full galleries on Instagram</p>
+          <a href="https://instagram.com/jordanhayesphoto" class="btn btn-outline">Follow on Instagram</a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="services" class="services">
+      <div class="container">
+        <header class="section-header">
+          <h2>Services & Pricing</h2>
+          <p>Professional photography for every occasion</p>
+        </header>
+        
+        <div class="services-grid">
+          <article class="service-card">
+            <div class="service-icon" aria-hidden="true">📸</div>
+            <h3>Portrait Photography</h3>
+            <p>Professional headshots, personal branding, and family portraits</p>
+            
+            <ul class="service-features">
+              <li>1-2 hour session</li>
+              <li>Location of your choice or studio</li>
+              <li>Wardrobe consultation</li>
+              <li>50+ edited high-resolution images</li>
+              <li>Online gallery for viewing/download</li>
+              <li>Print rights included</li>
+            </ul>
+            
+            <p class="service-price">Starting at <strong>$450</strong></p>
+            <a href="#contact" class="btn btn-outline">Book Now</a>
+          </article>
+          
+          <article class="service-card featured">
+            <div class="badge">Most Popular</div>
+            <div class="service-icon" aria-hidden="true">💍</div>
+            <h3>Wedding Photography</h3>
+            <p>Full-day coverage capturing every moment of your special day</p>
+            
+            <ul class="service-features">
+              <li>Up to 10 hours coverage</li>
+              <li>Engagement session included</li>
+              <li>Second photographer available</li>
+              <li>500+ edited high-resolution images</li>
+              <li>Custom online gallery</li>
+              <li>Print rights included</li>
+              <li>Wedding album option available</li>
+            </ul>
+            
+            <p class="service-price">Starting at <strong>$3,500</strong></p>
+            <a href="#contact" class="btn btn-primary">Book Now</a>
+          </article>
+          
+          <article class="service-card">
+            <div class="service-icon" aria-hidden="true">💼</div>
+            <h3>Commercial & Brand</h3>
+            <p>Product photography, brand campaigns, and corporate events</p>
+            
+            <ul class="service-features">
+              <li>Half or full-day shoots</li>
+              <li>Studio or on-location</li>
+              <li>Art direction available</li>
+              <li>Edited images for web & print</li>
+              <li>Fast turnaround available</li>
+              <li>Commercial licensing included</li>
+            </ul>
+            
+            <p class="service-price">Starting at <strong>$1,200</strong></p>
+            <a href="#contact" class="btn btn-outline">Get a Quote</a>
+          </article>
+        </div>
+        
+        <div class="services-note">
+          <p><strong>Custom Packages:</strong> Every project is unique. Contact me to discuss a custom package that fits your specific needs and budget.</p>
+        </div>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-image">
+            <img src="photographer-portrait.jpg" alt="Jordan Hayes with camera" width="500" height="600" loading="lazy">
+          </div>
+          
+          <div class="about-content">
+            <h2>About Jordan</h2>
+            <p>Hi, I'm Jordan! I've been a professional photographer for over 10 years, and I still get excited every time I pick up my camera.</p>
+            
+            <p>My journey into photography started with a borrowed film camera and a college photography course. What began as a hobby quickly became a passion, and eventually, my career. I love that photography lets me meet incredible people, witness their most important moments, and create images they'll treasure forever.</p>
+            
+            <p>My approach is documentary-style with an editorial eye—I want to capture genuine emotions and authentic moments, but with beautiful composition and lighting. Whether I'm shooting a wedding, a portrait session, or a commercial project, my goal is always the same: tell a story that resonates.</p>
+            
+            <p>When I'm not behind the camera, you'll find me exploring New York's neighborhoods, trying new coffee shops, or planning my next travel photography adventure.</p>
+            
+            <h3>What I Believe</h3>
+            <ul class="beliefs-list">
+              <li><strong>Authenticity over perfection:</strong> Real moments are more beautiful than posed ones</li>
+              <li><strong>Connection matters:</strong> The best photos come from genuine rapport</li>
+              <li><strong>Light is everything:</strong> Understanding light transforms good into great</li>
+              <li><strong>Stories > shots:</strong> Every photo should tell part of a larger narrative</li>
+            </ul>
+            
+            <h3>Experience & Recognition</h3>
+            <ul class="experience-list">
+              <li>10+ years professional photography experience</li>
+              <li>200+ weddings photographed</li>
+              <li>Featured in Martha Stewart Weddings, The Knot</li>
+              <li>Commercial clients include Nike, Airbnb, Etsy</li>
+              <li>Member: Professional Photographers of America</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="testimonials">
+      <div class="container">
+        <h2>Kind Words from Clients</h2>
+        
+        <div class="testimonials-grid">
+          <article class="testimonial-card">
+            <blockquote>
+              <p>"Jordan captured our wedding day perfectly—every laugh, every tear, every spontaneous moment. When we look at our photos, we're transported right back to that day. We couldn't be happier!"</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <cite>Emily & Marcus</cite>
+              <p>Wedding Clients, 2025</p>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card">
+            <blockquote>
+              <p>"As someone who usually hates having their photo taken, Jordan made the headshot session actually enjoyable. The photos came out amazing—professional but still natural. I use them everywhere now!"</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <cite>David Chen</cite>
+              <p>Corporate Portrait Client</p>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card">
+            <blockquote>
+              <p>"We've worked with Jordan on three campaigns now. They consistently deliver stunning work, understand our brand vision, and are an absolute professional. Highly recommend!"</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <cite>Rachel Green</cite>
+              <p>Marketing Director, Boutique Fashion Brand</p>
+            </footer>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="instagram-feed">
+      <div class="container">
+        <h2>Follow Along on Instagram</h2>
+        <p>@jordanhayesphoto</p>
+        
+        <div class="instagram-grid">
+          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
+            <img src="insta-1.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
+          </a>
+          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
+            <img src="insta-2.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
+          </a>
+          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
+            <img src="insta-3.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
+          </a>
+          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
+            <img src="insta-4.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
+          </a>
+          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
+            <img src="insta-5.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
+          </a>
+          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
+            <img src="insta-6.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
+          </a>
+        </div>
+        
+        <a href="https://instagram.com/jordanhayesphoto" class="btn btn-outline">Follow @jordanhayesphoto</a>
+      </div>
+    </section>
+    
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-layout">
+          <div class="contact-intro">
+            <h2>Let's Create Something Beautiful</h2>
+            <p>I'd love to hear about your photography needs and discuss how we can work together.</p>
+            
+            <div class="contact-details">
+              <p><strong>Email:</strong> <a href="mailto:jordan@jordanhayes.photo">jordan@jordanhayes.photo</a></p>
+              <p><strong>Phone:</strong> <a href="tel:+12125551234">(212) 555-1234</a></p>
+              <p><strong>Studio:</strong> Brooklyn, NY</p>
+              <p><strong>Available:</strong> Travel available nationwide</p>
+            </div>
+            
+            <div class="availability">
+              <h3>Booking Status</h3>
+              <p class="status-badge">✅ Accepting New Clients</p>
+              <p><strong>2026 Wedding Availability:</strong> 8 dates remaining<br>
+              <strong>Portrait Sessions:</strong> Booking 2-3 weeks out</p>
+            </div>
+          </div>
+          
+          <div class="contact-form-container">
+            <form class="contact-form" action="/booking-inquiry" method="POST">
+              <div class="form-group">
+                <label for="booking-name">Name</label>
+                <input type="text" id="booking-name" name="name" required autocomplete="name">
+              </div>
+              
+              <div class="form-row">
+                <div class="form-group">
+                  <label for="booking-email">Email</label>
+                  <input type="email" id="booking-email" name="email" required autocomplete="email">
+                </div>
+                
+                <div class="form-group">
+                  <label for="booking-phone">Phone</label>
+                  <input type="tel" id="booking-phone" name="phone" autocomplete="tel">
+                </div>
+              </div>
+              
+              <div class="form-group">
+                <label for="booking-service">Service Interested In</label>
+                <select id="booking-service" name="service" required>
+                  <option value="">Select service</option>
+                  <option value="portrait">Portrait Photography</option>
+                  <option value="wedding">Wedding Photography</option>
+                  <option value="commercial">Commercial / Brand</option>
+                  <option value="event">Event Photography</option>
+                  <option value="other">Other / Not Sure</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="booking-date">Preferred Date(s)</label>
+                <input type="text" id="booking-date" name="date" placeholder="e.g., June 15, 2026 or Summer 2026">
+              </div>
+              
+              <div class="form-group">
+                <label for="booking-location">Location</label>
+                <input type="text" id="booking-location" name="location" placeholder="Where will the session/event take place?">
+              </div>
+              
+              <div class="form-group">
+                <label for="booking-details">Tell Me About Your Vision</label>
+                <textarea id="booking-details" name="details" rows="5" placeholder="What kind of photos are you looking for? Any inspiration or specific requests?" required></textarea>
+              </div>
+              
+              <div class="form-group">
+                <label for="booking-budget">Budget Range</label>
+                <select id="booking-budget" name="budget">
+                  <option value="">Select budget (optional)</option>
+                  <option value="under-1k">Under $1,000</option>
+                  <option value="1k-2k">$1,000 - $2,000</option>
+                  <option value="2k-4k">$2,000 - $4,000</option>
+                  <option value="4k-6k">$4,000 - $6,000</option>
+                  <option value="6k+">$6,000+</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="booking-referral">How did you hear about me? <span class="optional">(optional)</span></label>
+                <input type="text" id="booking-referral" name="referral" placeholder="Referral, Instagram, Google, etc.">
+              </div>
+              
+              <button type="submit" class="btn btn-primary btn-large">Send Inquiry</button>
+              
+              <p class="form-footer"><small>I typically respond within 24 hours. Looking forward to connecting!</small></p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Jordan Hayes Photography</h3>
+          <p>Capturing life's authentic moments</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/jordanhayesphoto" aria-label="Instagram">Instagram</a>
+            <a href="https://facebook.com/jordanhayesphoto" aria-label="Facebook">Facebook</a>
+            <a href="https://pinterest.com/jordanhayesphoto" aria-label="Pinterest">Pinterest</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Services</h3>
+          <ul>
+            <li><a href="#services">Portrait Photography</a></li>
+            <li><a href="#services">Wedding Photography</a></li>
+            <li><a href="#services">Commercial Work</a></li>
+            <li><a href="/pricing">Full Pricing</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/blog">Photography Blog</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/testimonials">Client Reviews</a></li>
+            <li><a href="/vendors">Preferred Vendors</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Jordan Hayes Photography. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms & Conditions</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/food-bakery.html b/skills/html-coder/assets/food-bakery.html
new file mode 100644
index 000000000..265df4a68
--- /dev/null
+++ b/skills/html-coder/assets/food-bakery.html
@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Sweet Haven Bakery - Artisan breads, custom cakes, and fresh pastries. Order online for pickup or delivery.">
+  <title>Sweet Haven Bakery - Fresh Baked Goods Daily</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Sweet Haven Bakery</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#products">Products</a></li>
+          <li><a href="#custom">Custom Orders</a></li>
+          <li><a href="#daily">Daily Specials</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#order">Order Now</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="hero-content">
+        <h1>Handcrafted Baked Goods Made Fresh Daily</h1>
+        <p>From scratch recipes using premium ingredients since 1998</p>
+        <div class="hero-actions">
+          <a href="#order" class="btn btn-primary">Order Pickup or Delivery</a>
+          <a href="#custom" class="btn btn-secondary">Custom Cakes</a>
+        </div>
+      </div>
+    </section>
+    
+    <section class="highlights">
+      <div class="container">
+        <div class="highlights-grid">
+          <div class="highlight">
+            <div class="highlight-icon" aria-hidden="true">🥖</div>
+            <h2>Fresh Daily</h2>
+            <p>Baked from scratch every morning, nothing frozen</p>
+          </div>
+          
+          <div class="highlight">
+            <div class="highlight-icon" aria-hidden="true">🎂</div>
+            <h2>Custom Cakes</h2>
+            <p>Beautiful custom designs for any occasion</p>
+          </div>
+          
+          <div class="highlight">
+            <div class="highlight-icon" aria-hidden="true">🚚</div>
+            <h2>Delivery Available</h2>
+            <p>Order online for same-day local delivery</p>
+          </div>
+          
+          <div class="highlight">
+            <div class="highlight-icon" aria-hidden="true">🌾</div>
+            <h2>Special Diets</h2>
+            <p>Gluten-free, vegan, and sugar-free options</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="products" class="products">
+      <div class="container">
+        <header class="section-header">
+          <h2>Our Products</h2>
+          <p>All items baked fresh daily in our kitchen</p>
+        </header>
+        
+        <div class="products-grid">
+          <article class="product-card">
+            <img src="artisan-breads.jpg" alt="Assorted artisan bread loaves" width="400" height="300" loading="eager">
+            <div class="product-content">
+              <h3>Artisan Breads</h3>
+              <p>Hand-shaped loaves made with natural starters and long fermentation</p>
+              <ul class="product-varieties">
+                <li>Sourdough - $6.50</li>
+                <li>French Baguette - $4.00</li>
+                <li>Whole Wheat - $5.50</li>
+                <li>Rosemary Focaccia - $7.00</li>
+                <li>Ciabatta - $5.00</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="product-card">
+            <img src="pastries.jpg" alt="Fresh pastries and croissants" width="400" height="300" loading="lazy">
+            <div class="product-content">
+              <h3>Pastries & Croissants</h3>
+              <p>Flaky, buttery pastries made with European-style techniques</p>
+              <ul class="product-varieties">
+                <li>Butter Croissant - $4.00</li>
+                <li>Pain au Chocolat - $4.50</li>
+                <li>Almond Croissant - $5.00</li>
+                <li>Danish Pastry - $4.25</li>
+                <li>Cinnamon Roll - $4.75</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="product-card">
+            <img src="cakes.jpg" alt="Decorated celebration cakes" width="400" height="300" loading="lazy">
+            <div class="product-content">
+              <h3>Cakes & Celebration</h3>
+              <p>Custom and ready-made cakes for every occasion</p>
+              <ul class="product-varieties">
+                <li>Custom Layer Cake - from $45</li>
+                <li>Cupcakes (dozen) - $36</li>
+                <li>Cheesecake - $32</li>
+                <li>Tiramisu - $28</li>
+                <li>Opera Cake - $35</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="product-card">
+            <img src="cookies.jpg" alt="Assorted cookies on display" width="400" height="300" loading="lazy">
+            <div class="product-content">
+              <h3>Cookies & Treats</h3>
+              <p>Classic favorites and unique specialty cookies</p>
+              <ul class="product-varieties">
+                <li>Chocolate Chip - $2.50</li>
+                <li>Macarons (6 pack) - $18</li>
+                <li>Brownies - $3.50</li>
+                <li>Biscotti - $3.00</li>
+                <li>Madeleines (6 pack) - $8</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="product-card">
+            <img src="pies.jpg" alt="Fresh fruit pies" width="400" height="300" loading="lazy">
+            <div class="product-content">
+              <h3>Pies & Tarts</h3>
+              <p>Seasonal fruit pies and elegant tarts with handmade crusts</p>
+              <ul class="product-varieties">
+                <li>Apple Pie - $24</li>
+                <li>Fruit Tart - $28</li>
+                <li>Lemon Meringue - $26</li>
+                <li>Pecan Pie - $25</li>
+                <li>Mini Quiche (4 pack) - $16</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="product-card">
+            <img src="specialty.jpg" alt="Gluten-free and vegan baked goods" width="400" height="300" loading="lazy">
+            <div class="product-content">
+              <h3>Specialty & Dietary</h3>
+              <p>Delicious options for special dietary needs</p>
+              <ul class="product-varieties">
+                <li>Gluten-Free Bread - $8.00</li>
+                <li>Vegan Muffins - $4.00</li>
+                <li>Sugar-Free Cookies - $3.00</li>
+                <li>Keto Brownies - $4.50</li>
+                <li>Dairy-Free Cupcakes - $4.25</li>
+              </ul>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="custom" class="custom-orders">
+      <div class="container">
+        <div class="custom-layout">
+          <div class="custom-content">
+            <h2>Custom Cake Orders</h2>
+            <p>Make your celebration special with a custom-designed cake from our talented pastry team.</p>
+            
+            <h3>What We Offer</h3>
+            <ul class="custom-features">
+              <li>Wedding cakes with tasting appointments</li>
+              <li>Birthday cakes in any theme</li>
+              <li>Corporate event desserts</li>
+              <li>Baby shower and bridal shower cakes</li>
+              <li>Anniversary and celebration cakes</li>
+              <li>Custom sugar work and decorations</li>
+            </ul>
+            
+            <h3>Ordering Process</h3>
+            <ol class="custom-steps">
+              <li><strong>Consultation:</strong> Submit request form or call to discuss your vision</li>
+              <li><strong>Design:</strong> We'll create a custom design based on your preferences</li>
+              <li><strong>Order:</strong> Approve design, confirm flavors, and place order</li>
+              <li><strong>Pickup:</strong> Pick up your cake on your event date</li>
+            </ol>
+            
+            <p class="custom-note"><strong>Note:</strong> Custom orders require at least 2 weeks advance notice. Wedding cakes need 6-8 weeks.</p>
+          </div>
+          
+          <div class="custom-form-container">
+            <h3>Request Custom Cake Quote</h3>
+            
+            <form class="custom-form" action="/custom-quote" method="POST">
+              <div class="form-group">
+                <label for="custom-name">Name</label>
+                <input type="text" id="custom-name" name="name" required autocomplete="name">
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-email">Email</label>
+                <input type="email" id="custom-email" name="email" required autocomplete="email">
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-phone">Phone</label>
+                <input type="tel" id="custom-phone" name="phone" required autocomplete="tel">
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-event-date">Event Date</label>
+                <input type="date" id="custom-event-date" name="event-date" required min="2026-03-22">
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-occasion">Occasion</label>
+                <select id="custom-occasion" name="occasion" required>
+                  <option value="">Select occasion</option>
+                  <option value="wedding">Wedding</option>
+                  <option value="birthday">Birthday</option>
+                  <option value="anniversary">Anniversary</option>
+                  <option value="baby-shower">Baby Shower</option>
+                  <option value="bridal-shower">Bridal Shower</option>
+                  <option value="corporate">Corporate Event</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-servings">Number of Servings</label>
+                <input type="number" id="custom-servings" name="servings" min="10" max="500" required>
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-flavors">Preferred Flavors</label>
+                <textarea id="custom-flavors" name="flavors" rows="2" placeholder="E.g., Vanilla cake with chocolate buttercream" required></textarea>
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-design">Design Ideas & Details</label>
+                <textarea id="custom-design" name="design" rows="4" placeholder="Describe your vision, colors, themes, inspiration photos, etc." required></textarea>
+              </div>
+              
+              <div class="form-group">
+                <label for="custom-budget">Budget Range</label>
+                <select id="custom-budget" name="budget">
+                  <option value="">Select budget range</option>
+                  <option value="50-100">$50 - $100</option>
+                  <option value="100-200">$100 - $200</option>
+                  <option value="200-350">$200 - $350</option>
+                  <option value="350-500">$350 - $500</option>
+                  <option value="500+">$500+</option>
+                </select>
+              </div>
+              
+              <button type="submit" class="btn btn-primary btn-large">Request Quote</button>
+              
+              <p class="form-footer"><small>We'll respond within 24 hours with pricing and availability</small></p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="daily" class="daily-specials">
+      <div class="container">
+        <h2>Daily Specials</h2>
+        <p>Fresh baked items available each day of the week</p>
+        
+        <div class="specials-grid">
+          <article class="special-card">
+            <h3>Monday</h3>
+            <p><strong>Cinnamon Roll Monday</strong></p>
+            <p>Oversized cinnamon rolls with cream cheese frosting - $5.50</p>
+          </article>
+          
+          <article class="special-card">
+            <h3>Tuesday</h3>
+            <p><strong>Tart Tuesday</strong></p>
+            <p>Selection of mini fruit tarts - $4.00 each</p>
+          </article>
+          
+          <article class="special-card">
+            <h3>Wednesday</h3>
+            <p><strong>Bread Day</strong></p>
+            <p>Buy 2 loaves, get 3rd loaf 50% off</p>
+          </article>
+          
+          <article class="special-card">
+            <h3>Thursday</h3>
+            <p><strong>Cookie Dozen</strong></p>
+            <p>Mix & match any cookies - Dozen for $24</p>
+          </article>
+          
+          <article class="special-card">
+            <h3>Friday</h3>
+            <p><strong>Fresh Challah</strong></p>
+            <p>Traditional braided challah bread - $7.00</p>
+          </article>
+          
+          <article class="special-card">
+            <h3>Saturday</h3>
+            <p><strong>Pastry Platter</strong></p>
+            <p>Assorted pastries perfect for brunch - $32 (serves 6)</p>
+          </article>
+          
+          <article class="special-card">
+            <h3>Sunday</h3>
+            <p><strong>Family Pie Day</strong></p>
+            <p>Whole pies $5 off - Perfect for weekend gatherings</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-image">
+            <img src="baker-working.jpg" alt="Baker preparing dough in kitchen" width="500" height="600" loading="lazy">
+          </div>
+          
+          <div class="about-content">
+            <h2>Our Story</h2>
+            <p>Sweet Haven Bakery was founded in 1998 by master baker Elena Martinez, who learned the art of traditional baking from her grandmother in France.</p>
+            
+            <p>For over 25 years, we've been dedicated to creating exceptional baked goods using time-honored techniques and the finest ingredients. Everything is made from scratch in our kitchen—no mixes, no shortcuts, no compromises.</p>
+            
+            <p>We source organic flour from local mills, use European butter, and work with seasonal fruits from nearby farms. The result is baked goods that taste like they came from your grandmother's kitchen—if she was a professionally trained French pastry chef.</p>
+            
+            <h3>What Makes Us Special</h3>
+            <ul class="about-features">
+              <li><strong>Traditional Methods:</strong> Hand-shaping, long fermentation, classic techniques</li>
+              <li><strong>Premium Ingredients:</strong> Organic flour, European butter, real vanilla</li>
+              <li><strong>Daily Fresh Baking:</strong> Everything made fresh each morning</li>
+              <li><strong>Custom Creations:</strong> Skilled cake decorators for special occasions</li>
+              <li><strong>Family Recipes:</strong> Passed down through generations</li>
+            </ul>
+            
+            <blockquote>
+              <p>"Good bread is the most fundamentally satisfying of all foods; and good bread with fresh butter, the greatest of feasts."</p>
+              <footer>
+                <cite>— James Beard</cite>
+              </footer>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="order" class="order-section">
+      <div class="container">
+        <h2>Order for Pickup or Delivery</h2>
+        <p>Get fresh baked goods delivered or ready for pickup</p>
+        
+        <form class="order-form" action="/place-order" method="POST">
+          <div class="form-row">
+            <div class="form-group">
+              <label for="order-name">Name</label>
+              <input type="text" id="order-name" name="name" required autocomplete="name">
+            </div>
+            
+            <div class="form-group">
+              <label for="order-email">Email</label>
+              <input type="email" id="order-email" name="email" required autocomplete="email">
+            </div>
+            
+            <div class="form-group">
+              <label for="order-phone">Phone</label>
+              <input type="tel" id="order-phone" name="phone" required autocomplete="tel">
+            </div>
+          </div>
+          
+          <fieldset class="form-group">
+            <legend>Order Type</legend>
+            <div class="radio-group">
+              <div class="radio-option">
+                <input type="radio" id="pickup" name="order-type" value="pickup" checked>
+                <label for="pickup">Pickup (No charge)</label>
+              </div>
+              <div class="radio-option">
+                <input type="radio" id="delivery" name="order-type" value="delivery">
+                <label for="delivery">Delivery ($5.00 fee, free over $50)</label>
+              </div>
+            </div>
+          </fieldset>
+          
+          <div class="form-group">
+            <label for="order-date">Pickup/Delivery Date</label>
+            <input type="date" id="order-date" name="date" required min="2026-03-08">
+          </div>
+          
+          <div class="form-group">
+            <label for="order-time">Time</label>
+            <select id="order-time" name="time" required>
+              <option value="">Select time</option>
+              <option value="07:00">7:00 AM (Store Opening)</option>
+              <option value="09:00">9:00 AM</option>
+              <option value="11:00">11:00 AM</option>
+              <option value="13:00">1:00 PM</option>
+              <option value="15:00">3:00 PM</option>
+              <option value="17:00">5:00 PM</option>
+              <option value="18:00">6:00 PM (Store Closing)</option>
+            </select>
+          </div>
+          
+          <div class="form-group delivery-address" style="display: none;">
+            <label for="order-address">Delivery Address</label>
+            <textarea id="order-address" name="address" rows="2" placeholder="Street address, city, ZIP" autocomplete="street-address"></textarea>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-items">Items to Order</label>
+            <textarea id="order-items" name="items" rows="4" placeholder="List items and quantities (e.g., 2 Sourdough Loaves, 1 dozen Chocolate Chip Cookies)" required></textarea>
+            <p class="form-hint"><small>We'll confirm availability and provide total pricing via email</small></p>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-notes">Special Requests <span class="optional">(optional)</span></label>
+            <textarea id="order-notes" name="notes" rows="2" placeholder="Allergies, substitutions, etc."></textarea>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large">Submit Order</button>
+        </form>
+      </div>
+    </section>
+    
+    <section class="hours-location">
+      <div class="container">
+        <div class="info-grid">
+          <div class="info-block">
+            <h2>Hours</h2>
+            <dl class="hours-list">
+              <dt>Tuesday - Saturday</dt>
+              <dd>7:00 AM - 6:00 PM</dd>
+              
+              <dt>Sunday</dt>
+              <dd>8:00 AM - 3:00 PM</dd>
+              
+              <dt>Monday</dt>
+              <dd>Closed</dd>
+            </dl>
+          </div>
+          
+          <address class="info-block">
+            <h2>Location</h2>
+            <p>
+              Sweet Haven Bakery<br>
+              456 Baker Street<br>
+              Portland, OR 97201
+            </p>
+            
+            <p>
+              <strong>Phone:</strong> <a href="tel:+15035551234">(503) 555-1234</a><br>
+              <strong>Email:</strong> <a href="mailto:orders@sweethaven.example.com">orders@sweethaven.example.com</a>
+            </p>
+          </address>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Sweet Haven Bakery</h3>
+          <p>Baking from scratch since 1998</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/sweethavenbakery" aria-label="Instagram">Instagram</a>
+            <a href="https://facebook.com/sweethavenbakery" aria-label="Facebook">Facebook</a>
+            <a href="https://pinterest.com/sweethavenbakery" aria-label="Pinterest">Pinterest</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Shop</h3>
+          <ul>
+            <li><a href="#products">All Products</a></li>
+            <li><a href="#custom">Custom Cakes</a></li>
+            <li><a href="#order">Order Online</a></li>
+            <li><a href="/gift-cards">Gift Cards</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>About</h3>
+          <ul>
+            <li><a href="/about">Our Story</a></li>
+            <li><a href="/wholesale">Wholesale</a></li>
+            <li><a href="/classes">Baking Classes</a></li>
+            <li><a href="/careers">Careers</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Sweet Haven Bakery. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/allergens">Allergen Information</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/food-cafe.html b/skills/html-coder/assets/food-cafe.html
new file mode 100644
index 000000000..069aa0f29
--- /dev/null
+++ b/skills/html-coder/assets/food-cafe.html
@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Brew & Bean Coffee House - Artisan coffee, fresh pastries, and community gathering space. Order online for pickup.">
+  <title>Brew & Bean Coffee House - Artisan Coffee & Pastries</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Brew & Bean</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#menu">Menu</a></li>
+          <li><a href="#order">Order Online</a></li>
+          <li><a href="#rewards">Rewards</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#locations">Locations</a></li>
+        </ul>
+        
+        <a href="/order" class="btn-cart" aria-label="View cart">🛒</a>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="hero-content">
+        <h1>Locally Roasted Coffee & Handcrafted Pastries</h1>
+        <p>Your neighborhood coffee house serving the community since 2018</p>
+        <div class="hero-actions">
+          <a href="#order" class="btn btn-primary">Order for Pickup</a>
+          <a href="#menu" class="btn btn-secondary">View Menu</a>
+        </div>
+      </div>
+    </section>
+    
+    <section class="features">
+      <div class="container">
+        <div class="features-grid">
+          <div class="feature">
+            <div class="feature-icon" aria-hidden="true">☕</div>
+            <h2>Single-Origin Coffee</h2>
+            <p>Ethically sourced beans roasted in-house weekly</p>
+          </div>
+          
+          <div class="feature">
+            <div class="feature-icon" aria-hidden="true">🥐</div>
+            <h2>Fresh Daily Baking</h2>
+            <p>Pastries, muffins, and treats baked fresh every morning</p>
+          </div>
+          
+          <div class="feature">
+            <div class="feature-icon" aria-hidden="true">📱</div>
+            <h2>Order Ahead</h2>
+            <p>Skip the line with mobile ordering and pickup</p>
+          </div>
+          
+          <div class="feature">
+            <div class="feature-icon" aria-hidden="true">⭐</div>
+            <h2>Rewards Program</h2>
+            <p>Earn points with every purchase, get free drinks</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="menu" class="menu">
+      <div class="container">
+        <header class="section-header">
+          <h2>Our Menu</h2>
+          <p>Handcrafted drinks and fresh baked goods</p>
+        </header>
+        
+        <div class="menu-categories">
+          <article class="menu-category">
+            <h3>Coffee & Espresso</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Drip Coffee</h4>
+                <div class="menu-item-sizes">
+                  <span>S $2.50</span>
+                  <span>M $3.00</span>
+                  <span>L $3.50</span>
+                </div>
+              </div>
+              <p class="description">House blend or daily single-origin roast</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Latte</h4>
+                <div class="menu-item-sizes">
+                  <span>S $4.00</span>
+                  <span>M $4.75</span>
+                  <span>L $5.50</span>
+                </div>
+              </div>
+              <p class="description">Espresso with steamed milk, choice of milk</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Cappuccino</h4>
+                <div class="menu-item-sizes">
+                  <span>S $3.75</span>
+                  <span>M $4.50</span>
+                  <span>L $5.25</span>
+                </div>
+              </div>
+              <p class="description">Espresso with steamed milk and foam</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Americano</h4>
+                <div class="menu-item-sizes">
+                  <span>S $3.25</span>
+                  <span>M $3.75</span>
+                  <span>L $4.25</span>
+                </div>
+              </div>
+              <p class="description">Espresso shots with hot water</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Cold Brew</h4>
+                <div class="menu-item-sizes">
+                  <span>M $4.50</span>
+                  <span>L $5.25</span>
+                </div>
+              </div>
+              <p class="description">Smooth, slow-steeped cold coffee</p>
+            </div>
+          </article>
+          
+          <article class="menu-category">
+            <h3>Specialty Drinks</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Caramel Macchiato</h4>
+                <div class="menu-item-sizes">
+                  <span>M $5.25</span>
+                  <span>L $6.00</span>
+                </div>
+              </div>
+              <p class="description">Vanilla, espresso, steamed milk, caramel drizzle</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Mocha</h4>
+                <div class="menu-item-sizes">
+                  <span>M $5.00</span>
+                  <span>L $5.75</span>
+                </div>
+              </div>
+              <p class="description">Espresso, chocolate, steamed milk, whipped cream</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Chai Latte</h4>
+                <div class="menu-item-sizes">
+                  <span>M $4.75</span>
+                  <span>L $5.50</span>
+                </div>
+              </div>
+              <p class="description">Spiced tea concentrate with steamed milk</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Matcha Latte</h4>
+                <div class="menu-item-sizes">
+                  <span>M $5.50</span>
+                  <span>L $6.25</span>
+                </div>
+              </div>
+              <p class="description">Premium Japanese matcha with steamed milk</p>
+            </div>
+          </article>
+          
+          <article class="menu-category">
+            <h3>Pastries & Food</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Croissant</h4>
+                <span class="price">$4.50</span>
+              </div>
+              <p class="description">Butter croissant, plain or chocolate</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Muffin</h4>
+                <span class="price">$3.75</span>
+              </div>
+              <p class="description">Blueberry, chocolate chip, or bran</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Avocado Toast</h4>
+                <span class="price">$8.50</span>
+              </div>
+              <p class="description">Smashed avocado on sourdough, everything spice</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Breakfast Sandwich</h4>
+                <span class="price">$7.50</span>
+              </div>
+              <p class="description">Egg, cheese, choice of bacon or sausage</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Bagel with Cream Cheese</h4>
+                <span class="price">$4.00</span>
+              </div>
+              <p class="description">Plain, everything, or sesame bagel</p>
+            </div>
+          </article>
+        </div>
+        
+        <div class="menu-footer">
+          <p class="menu-note">
+            <strong>Milk Options:</strong> Whole, 2%, Oat (+$0.75), Almond (+$0.75), Soy (+$0.50)<br>
+            <strong>Add Shots:</strong> Extra espresso shot +$1.00
+          </p>
+        </div>
+      </div>
+    </section>
+    
+    <section id="order" class="order-online">
+      <div class="container">
+        <h2>Order Online for Pickup</h2>
+        <p>Skip the line and order ahead</p>
+        
+        <form class="order-form" action="/place-order" method="POST">
+          <div class="form-row">
+            <div class="form-group">
+              <label for="order-name">Name</label>
+              <input type="text" id="order-name" name="name" required autocomplete="name">
+            </div>
+            
+            <div class="form-group">
+              <label for="order-phone">Phone</label>
+              <input type="tel" id="order-phone" name="phone" required autocomplete="tel">
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-location">Pickup Location</label>
+            <select id="order-location" name="location" required>
+              <option value="">Select location</option>
+              <option value="downtown">Downtown - 123 Main St</option>
+              <option value="university">University District - 456 College Ave</option>
+              <option value="westside">Westside - 789 West Blvd</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-time">Pickup Time</label>
+            <select id="order-time" name="pickup-time" required>
+              <option value="">Select time</option>
+              <option value="asap">ASAP (15-20 min)</option>
+              <option value="30min">30 minutes</option>
+              <option value="1hr">1 hour</option>
+              <option value="2hr">2 hours</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-items">Order Details</label>
+            <textarea id="order-items" name="items" rows="4" placeholder="List your items (e.g., Medium Latte with oat milk, Chocolate Croissant)" required></textarea>
+            <p class="form-hint"><small>You'll confirm quantities and options on the next page</small></p>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-notes">Special Instructions <span class="optional">(optional)</span></label>
+            <textarea id="order-notes" name="notes" rows="2" placeholder="Allergies, preferences, etc."></textarea>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large">Continue to Order</button>
+        </form>
+      </div>
+    </section>
+    
+    <section id="rewards" class="rewards">
+      <div class="container">
+        <div class="rewards-layout">
+          <div class="rewards-content">
+            <h2>Bean Rewards Program</h2>
+            <p>Earn points with every purchase and get rewarded!</p>
+            
+            <div class="rewards-tiers">
+              <div class="tier">
+                <h3>How It Works</h3>
+                <ol>
+                  <li>Sign up for free</li>
+                  <li>Earn 1 point per $1 spent</li>
+                  <li>Redeem points for rewards</li>
+                </ol>
+              </div>
+              
+              <div class="tier">
+                <h3>Reward Levels</h3>
+                <dl class="rewards-list">
+                  <dt>50 Points</dt>
+                  <dd>Free pastry or breakfast item</dd>
+                  
+                  <dt>125 Points</dt>
+                  <dd>Free specialty drink (any size)</dd>
+                  
+                  <dt>250 Points</dt>
+                  <dd>$10 off your order</dd>
+                </dl>
+              </div>
+              
+              <div class="tier">
+                <h3>Member Perks</h3>
+                <ul>
+                  <li>Free drink on your birthday</li>
+                  <li>Early access to new menu items</li>
+                  <li>Exclusive member promotions</li>
+                  <li>Order ahead privileges</li>
+                </ul>
+              </div>
+            </div>
+            
+            <a href="/rewards/signup" class="btn btn-primary">Join Bean Rewards</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-image">
+            <img src="cafe-interior.jpg" alt="Cozy cafe interior with seating and coffee bar" width="600" height="400" loading="lazy">
+          </div>
+          
+          <div class="about-content">
+            <h2>Your Community Coffee House</h2>
+            <p>Brew & Bean started in 2018 with a simple mission: create exceptional coffee and a welcoming space where neighbors become friends.</p>
+            
+            <p>We roast our own beans in small batches, source from ethical sustainable farms, and bake fresh pastries every morning. But what we're most proud of is the community we've built.</p>
+            
+            <p>Whether you're here to work, meet friends, or simply enjoy a quiet moment with a great cup of coffee, we're glad you chose Brew & Bean.</p>
+            
+            <h3>Our Values</h3>
+            <ul class="values-list">
+              <li><strong>Quality:</strong> Premium beans, expert roasting, skilled baristas</li>
+              <li><strong>Community:</strong> Supporting local artists, hosting events, giving back</li>
+              <li><strong>Sustainability:</strong> Eco-friendly packaging, composting, green practices</li>
+              <li><strong>Inclusivity:</strong> Everyone is welcome at our table</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="locations" class="locations">
+      <div class="container">
+        <h2>Our Locations</h2>
+        
+        <div class="locations-grid">
+          <article class="location-card">
+            <h3>Downtown</h3>
+            <address>
+              123 Main Street<br>
+              San Francisco, CA 94102
+            </address>
+            <p><strong>Phone:</strong> <a href="tel:+14155551234">(415) 555-1234</a></p>
+            
+            <dl class="location-hours">
+              <dt>Monday - Friday:</dt>
+              <dd>6:00 AM - 8:00 PM</dd>
+              
+              <dt>Saturday - Sunday:</dt>
+              <dd>7:00 AM - 9:00 PM</dd>
+            </dl>
+            
+            <p class="location-features">
+              <small>WiFi • Outdoor Seating • Meeting Room</small>
+            </p>
+          </article>
+          
+          <article class="location-card">
+            <h3>University District</h3>
+            <address>
+              456 College Avenue<br>
+              San Francisco, CA 94115
+            </address>
+            <p><strong>Phone:</strong> <a href="tel:+14155555678">(415) 555-5678</a></p>
+            
+            <dl class="location-hours">
+              <dt>Monday - Friday:</dt>
+              <dd>6:30 AM - 10:00 PM</dd>
+              
+              <dt>Saturday - Sunday:</dt>
+              <dd>7:00 AM - 10:00 PM</dd>
+            </dl>
+            
+            <p class="location-features">
+              <small>WiFi • Study Area • Late Hours</small>
+            </p>
+          </article>
+          
+          <article class="location-card">
+            <h3>Westside</h3>
+            <address>
+              789 West Boulevard<br>
+              San Francisco, CA 94121
+            </address>
+            <p><strong>Phone:</strong> <a href="tel:+14155559012">(415) 555-9012</a></p>
+            
+            <dl class="location-hours">
+              <dt>Monday - Friday:</dt>
+              <dd>6:30 AM - 7:00 PM</dd>
+              
+              <dt>Saturday - Sunday:</dt>
+              <dd>7:00 AM - 8:00 PM</dd>
+            </dl>
+            
+            <p class="location-features">
+              <small>WiFi • Family Friendly • Drive-Through</small>
+            </p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="newsletter">
+      <div class="container">
+        <h2>Stay Connected</h2>
+        <p>Get updates on new drinks, special promotions, and community events</p>
+        
+        <form class="newsletter-form" action="/subscribe" method="POST">
+          <label for="newsletter-email" class="visually-hidden">Email address</label>
+          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
+          <button type="submit" class="btn btn-primary">Subscribe</button>
+        </form>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Brew & Bean</h3>
+          <p>Community coffee since 2018</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/brewandbean" aria-label="Instagram">Instagram</a>
+            <a href="https://facebook.com/brewandbean" aria-label="Facebook">Facebook</a>
+            <a href="https://twitter.com/brewandbean" aria-label="Twitter">Twitter</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Quick Links</h3>
+          <ul>
+            <li><a href="#menu">Menu</a></li>
+            <li><a href="#order">Order Online</a></li>
+            <li><a href="/rewards">Bean Rewards</a></li>
+            <li><a href="/gift-cards">Gift Cards</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">Our Story</a></li>
+            <li><a href="/wholesale">Wholesale</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/contact">Contact Us</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Brew & Bean Coffee House. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Service</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/food-foodtruck.html b/skills/html-coder/assets/food-foodtruck.html
new file mode 100644
index 000000000..8e95c29e8
--- /dev/null
+++ b/skills/html-coder/assets/food-foodtruck.html
@@ -0,0 +1,624 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Taco Nomad Food Truck - Authentic street tacos and Mexican street food. Find our locations and order ahead.">
+  <title>Taco Nomad Food Truck - Authentic Street Tacos</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">🌮 Taco Nomad</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#locations">Find Us</a></li>
+          <li><a href="#menu">Menu</a></li>
+          <li><a href="#order">Order Ahead</a></li>
+          <li><a href="#catering">Catering</a></li>
+          <li><a href="#about">About</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="hero-content">
+        <h1>Authentic Street Tacos on Wheels</h1>
+        <p>Handmade tortillas, slow-cooked meats, fresh ingredients—delivered from our mobile kitchen</p>
+        <div class="hero-actions">
+          <a href="#locations" class="btn btn-primary">Where We Are Today</a>
+          <a href="#menu" class="btn btn-secondary">View Menu</a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="locations" class="current-location">
+      <div class="container">
+        <h2>🚚 We're Here Today!</h2>
+        
+        <div class="location-today">
+          <div class="location-card-today">
+            <p class="location-date"><strong>Today, <time datetime="2026-03-07">Saturday, March 7</time></strong></p>
+            
+            <div class="location-stop">
+              <h3>Lunch Service</h3>
+              <p class="location-time"><strong>11:00 AM - 2:00 PM</strong></p>
+              <address class="location-address">
+                Tech Plaza<br>
+                555 Market Street<br>
+                San Francisco, CA 94103
+              </address>
+              <p class="location-map"><a href="https://maps.google.com/?q=555+Market+Street+San+Francisco+CA">Get Directions →</a></p>
+            </div>
+            
+            <div class="location-stop">
+              <h3>Dinner Service</h3>
+              <p class="location-time"><strong>5:00 PM - 9:00 PM</strong></p>
+              <address class="location-address">
+                Marina Square<br>
+                2100 Chestnut Street<br>
+                San Francisco, CA 94123
+              </address>
+              <p class="location-map"><a href="https://maps.google.com/?q=2100+Chestnut+Street+San+Francisco+CA">Get Directions →</a></p>
+            </div>
+          </div>
+        </div>
+        
+        <div class="location-updates">
+          <p><strong>Get real-time location updates:</strong></p>
+          <div class="social-links">
+            <a href="https://twitter.com/taconomad" class="btn btn-outline">Follow on Twitter</a>
+            <a href="https://instagram.com/taconomad" class="btn btn-outline">Follow on Instagram</a>
+            <a href="/subscribe" class="btn btn-outline">Text Alerts</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="schedule">
+      <div class="container">
+        <h2>Weekly Schedule</h2>
+        <p>Our typical weekly rotation—follow us on social for real-time updates</p>
+        
+        <div class="schedule-grid">
+          <article class="schedule-day">
+            <h3>Monday</h3>
+            <div class="schedule-stop">
+              <p class="time">11:30 AM - 2:00 PM</p>
+              <p class="location">Financial District<br><small>One Market Plaza</small></p>
+            </div>
+            <div class="schedule-stop">
+              <p class="time">5:00 PM - 8:00 PM</p>
+              <p class="location">Mission District<br><small>Valencia & 20th</small></p>
+            </div>
+          </article>
+          
+          <article class="schedule-day">
+            <h3>Tuesday</h3>
+            <div class="schedule-stop">
+              <p class="time">11:30 AM - 2:00 PM</p>
+              <p class="location">SOMA<br><small>Tech Plaza</small></p>
+            </div>
+            <div class="schedule-stop">
+              <p class="time">5:30 PM - 8:30 PM</p>
+              <p class="location">Outer Sunset<br><small>Judah & 43rd</small></p>
+            </div>
+          </article>
+          
+          <article class="schedule-day">
+            <h3>Wednesday</h3>
+            <div class="schedule-stop">
+              <p class="time">11:30 AM - 2:00 PM</p>
+              <p class="location">Union Square<br><small>Powell Street</small></p>
+            </div>
+            <div class="schedule-stop">
+              <p class="time">5:00 PM - 9:00 PM</p>
+              <p class="location">Hayes Valley<br><small>Octavia & Fell</small></p>
+            </div>
+          </article>
+          
+          <article class="schedule-day">
+            <h3>Thursday</h3>
+            <div class="schedule-stop">
+              <p class="time">11:30 AM - 2:00 PM</p>
+              <p class="location">Embarcadero<br><small>Ferry Building</small></p>
+            </div>
+            <div class="schedule-stop">
+              <p class="time">5:00 PM - 9:00 PM</p>
+              <p class="location">Haight-Ashbury<br><small>Haight & Ashbury</small></p>
+            </div>
+          </article>
+          
+          <article class="schedule-day">
+            <h3>Friday</h3>
+            <div class="schedule-stop">
+              <p class="time">11:30 AM - 2:30 PM</p>
+              <p class="location">Financial District<br><small>One Market Plaza</small></p>
+            </div>
+            <div class="schedule-stop">
+              <p class="time">5:00 PM - 10:00 PM</p>
+              <p class="location">North Beach<br><small>Washington Square</small></p>
+            </div>
+          </article>
+          
+          <article class="schedule-day">
+            <h3>Saturday</h3>
+            <div class="schedule-stop">
+              <p class="time">11:00 AM - 4:00 PM</p>
+              <p class="location">Ferry Plaza Farmers Market<br><small>Embarcadero</small></p>
+            </div>
+            <div class="schedule-stop">
+              <p class="time">5:00 PM - 9:00 PM</p>
+              <p class="location">Marina<br><small>Chestnut Street</small></p>
+            </div>
+          </article>
+          
+          <article class="schedule-day">
+            <h3>Sunday</h3>
+            <div class="schedule-stop">
+              <p class="time">11:00 AM - 5:00 PM</p>
+              <p class="location">Dolores Park<br><small>18th & Dolores</small></p>
+            </div>
+          </article>
+        </div>
+        
+        <p class="schedule-note"><small><strong>Note:</strong> Schedule subject to change due to weather, events, or private bookings. Always check social media for today's confirmed locations.</small></p>
+      </div>
+    </section>
+    
+    <section id="menu" class="menu">
+      <div class="container">
+        <header class="section-header">
+          <h2>Our Menu</h2>
+          <p>Street-style tacos and Mexican favorites made fresh to order</p>
+        </header>
+        
+        <div class="menu-sections">
+          <article class="menu-section">
+            <h3>Street Tacos</h3>
+            <p class="section-desc">Served on handmade corn tortillas with cilantro, onion, and lime</p>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Carne Asada</h4>
+                <span class="price">$4.00</span>
+              </div>
+              <p class="description">Grilled marinated steak with charred edges</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Al Pastor</h4>
+                <span class="price">$4.00</span>
+              </div>
+              <p class="description">Spit-roasted pork with pineapple</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Carnitas</h4>
+                <span class="price">$4.00</span>
+              </div>
+              <p class="description">Slow-braised, tender pulled pork</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Pollo Asado</h4>
+                <span class="price">$3.75</span>
+              </div>
+              <p class="description">Citrus-marinated grilled chicken</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Pescado</h4>
+                <span class="price">$4.50</span>
+              </div>
+              <p class="description">Beer-battered or grilled fish with cabbage slaw</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Veggie (V)</h4>
+                <span class="price">$3.50</span>
+              </div>
+              <p class="description">Grilled seasonal vegetables with black beans</p>
+            </div>
+          </article>
+          
+          <article class="menu-section">
+            <h3>Burritos & Bowls</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Classic Burrito</h4>
+                <span class="price">$12.00</span>
+              </div>
+              <p class="description">Choice of protein, rice, beans, cheese, salsa, sour cream</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>California Burrito</h4>
+                <span class="price">$13.00</span>
+              </div>
+              <p class="description">Carne asada, fries, cheese, guacamole, pico de gallo</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Burrito Bowl</h4>
+                <span class="price">$11.50</span>
+              </div>
+              <p class="description">All burrito ingredients served in a bowl (no tortilla)</p>
+            </div>
+          </article>
+          
+          <article class="menu-section">
+            <h3>Sides & Extras</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Chips & Guacamole</h4>
+                <span class="price">$6.00</span>
+              </div>
+              <p class="description">Fresh-made guacamole with crispy tortilla chips</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Elote (Mexican Street Corn)</h4>
+                <span class="price">$5.00</span>
+              </div>
+              <p class="description">Grilled corn, mayo, cotija cheese, chili powder, lime</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Rice & Beans</h4>
+                <span class="price">$4.00</span>
+              </div>
+              <p class="description">Cilantro-lime rice with black or pinto beans</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Churros</h4>
+                <span class="price">$5.00</span>
+              </div>
+              <p class="description">Fried dough with cinnamon sugar and chocolate sauce</p>
+            </div>
+          </article>
+          
+          <article class="menu-section">
+            <h3>Drinks</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Horchata</h4>
+                <span class="price">$3.50</span>
+              </div>
+              <p class="description">Sweet rice milk with cinnamon</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Jamaica (Hibiscus Tea)</h4>
+                <span class="price">$3.50</span>
+              </div>
+              <p class="description">Refreshing hibiscus iced tea</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Jarritos</h4>
+                <span class="price">$3.00</span>
+              </div>
+              <p class="description">Mexican sodas (multiple flavors)</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Bottled Water</h4>
+                <span class="price">$2.00</span>
+              </div>
+            </div>
+          </article>
+        </div>
+        
+        <div class="menu-footer">
+          <h3>Combo Deals</h3>
+          <ul class="combo-list">
+            <li><strong>3 Tacos Combo:</strong> Any 3 tacos + rice & beans + drink - $16</li>
+            <li><strong>Taco Tuesday:</strong> All tacos $3 each (every Tuesday)</li>
+            <li><strong>Lunch Special:</strong> 2 tacos + side + drink - $12 (Mon-Fri, 11:30-2pm)</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    
+    <section id="order" class="order-ahead">
+      <div class="container">
+        <h2>Order Ahead</h2>
+        <p>Skip the line—order now and pick up when you arrive</p>
+        
+        <form class="order-form" action="/submit-order" method="POST">
+          <div class="form-row">
+            <div class="form-group">
+              <label for="order-name">Name</label>
+              <input type="text" id="order-name" name="name" required autocomplete="name" placeholder="Name for order">
+            </div>
+            
+            <div class="form-group">
+              <label for="order-phone">Phone</label>
+              <input type="tel" id="order-phone" name="phone" required autocomplete="tel">
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-location">Pickup Location</label>
+            <select id="order-location" name="location" required>
+              <option value="">Where will you pick up?</option>
+              <option value="current">Today's Current Location</option>
+              <option value="lunch-market">Lunch - One Market Plaza</option>
+              <option value="dinner-marina">Dinner - Marina (Chestnut St)</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-time">Pickup Time</label>
+            <select id="order-time" name="pickup-time" required>
+              <option value="">Select time</option>
+              <option value="asap">ASAP (10-15 min)</option>
+              <option value="30min">30 minutes</option>
+              <option value="1hr">1 hour</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-details">Your Order</label>
+            <textarea id="order-details" name="order" rows="5" placeholder="Example:&#10;- 2 Carne Asada Tacos&#10;- 1 Al Pastor Taco&#10;- 1 Chips & Guac&#10;- 1 Horchata" required></textarea>
+          </div>
+          
+          <div class="form-group">
+            <label for="order-notes">Special Instructions <span class="optional">(optional)</span></label>
+            <textarea id="order-notes" name="notes" rows="2" placeholder="Extra spicy, no onions, etc."></textarea>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large">Place Order</button>
+          
+          <p class="form-note"><small>We'll text you when your order is ready. Payment at pickup (cash or card).</small></p>
+        </form>
+      </div>
+    </section>
+    
+    <section id="catering" class="catering">
+      <div class="container">
+        <div class="catering-layout">
+          <div class="catering-content">
+            <h2>Private Events & Catering</h2>
+            <p>Bring Taco Nomad to your next event! Perfect for corporate lunches, weddings, birthday parties, and special celebrations.</p>
+            
+            <h3>What We Offer</h3>
+            <ul class="catering-features">
+              <li>Full taco bar with multiple protein options</li>
+              <li>All toppings, salsas, and sides included</li>
+              <li>Professional setup and service</li>
+              <li>Vegetarian and dietary options available</li>
+              <li>Serves groups of 20-200 people</li>
+              <li>Available evenings and weekends</li>
+            </ul>
+            
+            <h3>Packages Starting At</h3>
+            <ul class="catering-pricing">
+              <li><strong>Basic Package:</strong> $18/person - 3 tacos, rice & beans</li>
+              <li><strong>Deluxe Package:</strong> $25/person - Taco bar with all sides</li>
+              <li><strong>Premium Package:</strong> $32/person - Full spread with appetizers</li>
+            </ul>
+            
+            <p class="catering-note"><strong>Minimum:</strong> 20 people | <strong>Booking:</strong> 2 weeks advance notice</p>
+          </div>
+          
+          <div class="catering-form-container">
+            <h3>Request Catering Quote</h3>
+            
+            <form class="catering-form" action="/catering-request" method="POST">
+              <div class="form-group">
+                <label for="catering-name">Name</label>
+                <input type="text" id="catering-name" name="name" required autocomplete="name">
+              </div>
+              
+              <div class="form-group">
+                <label for="catering-email">Email</label>
+                <input type="email" id="catering-email" name="email" required autocomplete="email">
+              </div>
+              
+              <div class="form-group">
+                <label for="catering-phone">Phone</label>
+                <input type="tel" id="catering-phone" name="phone" required autocomplete="tel">
+              </div>
+              
+              <div class="form-group">
+                <label for="catering-date">Event Date</label>
+                <input type="date" id="catering-date" name="date" required min="2026-03-21">
+              </div>
+              
+              <div class="form-group">
+                <label for="catering-location">Event Location</label>
+                <input type="text" id="catering-location" name="location" placeholder="City or address" required>
+              </div>
+              
+              <div class="form-group">
+                <label for="catering-guests">Number of Guests</label>
+                <input type="number" id="catering-guests" name="guests" min="20" max="200" required>
+              </div>
+              
+              <div class="form-group">
+                <label for="catering-type">Event Type</label>
+                <select id="catering-type" name="event-type">
+                  <option value="">Select type</option>
+                  <option value="corporate">Corporate Event</option>
+                  <option value="wedding">Wedding</option>
+                  <option value="birthday">Birthday Party</option>
+                  <option value="private">Private Party</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+              
+              <div class="form-group">
+                <label for="catering-details">Event Details</label>
+                <textarea id="catering-details" name="details" rows="3" placeholder="Tell us about your event and any special needs"></textarea>
+              </div>
+              
+              <button type="submit" class="btn btn-primary btn-large">Request Quote</button>
+              
+              <p class="form-footer"><small>We'll respond within 48 hours with availability and pricing</small></p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-image">
+            <img src="food-truck.jpg" alt="Taco Nomad food truck with customers" width="600" height="400" loading="lazy">
+          </div>
+          
+          <div class="about-content">
+            <h2>Our Story</h2>
+            <p>Taco Nomad started in 2019 when chef Carlos Mendoza traded his restaurant kitchen for a mobile one, bringing authentic Mexican street food to the neighborhoods of San Francisco.</p>
+            
+            <p>Growing up in Mexico City, Carlos learned to make tortillas from his abuela and spent years perfecting traditional cooking techniques. Now he's sharing those flavors from the window of his custom-built taco truck.</p>
+            
+            <p>Every morning, we make fresh corn and flour tortillas by hand. Our meats are marinated overnight and slow-cooked for hours. The salsas? Made fresh daily with roasted chilies and authentic spices.</p>
+            
+            <p>We believe great tacos shouldn't require a sit-down restaurant. They're meant to be eaten standing on a street corner, shared with friends, and enjoyed throughout the city. That's why we're always on the move, bringing authentic street tacos to wherever you are.</p>
+            
+            <blockquote>
+              <p>"The best tacos are made with love, served fresh, and shared with community. That's what we do every day."</p>
+              <footer>
+                <cite>— Carlos Mendoza, Owner & Chef</cite>
+              </footer>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="reviews">
+      <div class="container">
+        <h2>What People Are Saying</h2>
+        
+        <div class="reviews-grid">
+          <article class="review-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Best tacos in SF, hands down. The al pastor is incredible and the handmade tortillas make all the difference. Worth seeking out wherever they are!"</p>
+            </blockquote>
+            <footer>
+              <cite>— Sarah M., <a href="https://yelp.com">Yelp</a></cite>
+            </footer>
+          </article>
+          
+          <article class="review-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Carlos and his team are amazing. We hired them for our company event and everyone raved about the food. Authentic, delicious, and great service."</p>
+            </blockquote>
+            <footer>
+              <cite>— James L., Catering Client</cite>
+            </footer>
+          </article>
+          
+          <article class="review-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"I follow them on Twitter to find out where they'll be. The carnitas tacos are perfection—crispy, juicy, loaded with flavor. And those churros!"</p>
+            </blockquote>
+            <footer>
+              <cite>— Michael T., <a href="https://google.com/maps">Google</a></cite>
+            </footer>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="newsletter">
+      <div class="container">
+        <h2>Never Miss Us</h2>
+        <p>Get our weekly schedule and special offers delivered to your inbox</p>
+        
+        <form class="newsletter-form" action="/subscribe" method="POST">
+          <label for="newsletter-email" class="visually-hidden">Email address</label>
+          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
+          <button type="submit" class="btn btn-primary">Subscribe</button>
+        </form>
+        
+        <p class="newsletter-alt">Prefer text messages? <a href="/sms-signup">Sign up for SMS alerts</a></p>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>🌮 Taco Nomad</h3>
+          <p>Authentic street tacos since 2019</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://twitter.com/taconomad" aria-label="Twitter">Twitter</a>
+            <a href="https://instagram.com/taconomad" aria-label="Instagram">Instagram</a>
+            <a href="https://facebook.com/taconomad" aria-label="Facebook">Facebook</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Find Us</h3>
+          <ul>
+            <li><a href="#locations">Today's Locations</a></li>
+            <li><a href="/schedule">Weekly Schedule</a></li>
+            <li><a href="/alerts">Location Alerts</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Menu & Ordering</h3>
+          <ul>
+            <li><a href="#menu">Full Menu</a></li>
+            <li><a href="#order">Order Ahead</a></li>
+            <li><a href="#catering">Catering</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Contact</h3>
+          <p>
+            <strong>Email:</strong> <a href="mailto:carlos@taconomad.example.com">carlos@taconomad.example.com</a><br>
+            <strong>Phone:</strong> <a href="tel:+14155557890">(415) 555-7890</a>
+          </p>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Taco Nomad. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/food-restaurant.html b/skills/html-coder/assets/food-restaurant.html
new file mode 100644
index 000000000..18ce888c9
--- /dev/null
+++ b/skills/html-coder/assets/food-restaurant.html
@@ -0,0 +1,392 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Savory Bistro - Farm-to-table restaurant serving seasonal American cuisine in downtown. Reservations available.">
+  <title>Savory Bistro - Farm-to-Table Restaurant</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Savory Bistro</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#menu">Menu</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#reservations">Reservations</a></li>
+          <li><a href="#events">Private Events</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero">
+      <div class="hero-content">
+        <h1>Farm-to-Table Dining Experience</h1>
+        <p>Seasonal American cuisine crafted with locally-sourced ingredients</p>
+        <div class="hero-actions">
+          <a href="#reservations" class="btn btn-primary">Reserve a Table</a>
+          <a href="#menu" class="btn btn-secondary">View Menu</a>
+        </div>
+      </div>
+    </section>
+    
+    <section class="highlights">
+      <div class="container">
+        <div class="highlights-grid">
+          <div class="highlight">
+            <div class="highlight-icon" aria-hidden="true">🌱</div>
+            <h2>Farm-to-Table</h2>
+            <p>Ingredients sourced from local farms daily</p>
+          </div>
+          
+          <div class="highlight">
+            <div class="highlight-icon" aria-hidden="true">👨‍🍳</div>
+            <h2>Chef-Driven</h2>
+            <p>Creative seasonal menus by award-winning chef</p>
+          </div>
+          
+          <div class="highlight">
+            <div class="highlight-icon" aria-hidden="true">🍷</div>
+            <h2>Curated Wine List</h2>
+            <p>150+ selections from sustainable wineries</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="menu" class="menu">
+      <div class="container">
+        <header class="section-header">
+          <h2>Our Menu</h2>
+          <p>Fresh seasonal selections updated weekly</p>
+        </header>
+        
+        <div class="menu-sections">
+          <article class="menu-section">
+            <h3>Appetizers</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Heirloom Tomato Salad</h4>
+                <span class="price">$14</span>
+              </div>
+              <p class="description">Local heirloom tomatoes, burrata, basil, aged balsamic</p>
+              <p class="dietary-info"><small>Vegetarian, Gluten-free</small></p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Crispy Brussels Sprouts</h4>
+                <span class="price">$12</span>
+              </div>
+              <p class="description">Flash-fried, honey-sriracha glaze, toasted almonds</p>
+              <p class="dietary-info"><small>Vegan option available</small></p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Charcuterie Board</h4>
+                <span class="price">$22</span>
+              </div>
+              <p class="description">Artisan cheeses, cured meats, house-made jam, crackers</p>
+            </div>
+          </article>
+          
+          <article class="menu-section">
+            <h3>Main Courses</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Pan-Seared Salmon</h4>
+                <span class="price">$32</span>
+              </div>
+              <p class="description">Wild-caught salmon, roasted vegetables, lemon-dill sauce</p>
+              <p class="dietary-info"><small>Gluten-free</small></p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Grass-Fed Ribeye</h4>
+                <span class="price">$42</span>
+              </div>
+              <p class="description">12 oz ribeye, garlic mashed potatoes, seasonal vegetables</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Wild Mushroom Risotto</h4>
+                <span class="price">$26</span>
+              </div>
+              <p class="description">Arborio rice, mixed mushrooms, truffle oil, parmesan</p>
+              <p class="dietary-info"><small>Vegetarian</small></p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Roasted Half Chicken</h4>
+                <span class="price">$28</span>
+              </div>
+              <p class="description">Free-range chicken, herb butter, roasted root vegetables</p>
+              <p class="dietary-info"><small>Gluten-free</small></p>
+            </div>
+          </article>
+          
+          <article class="menu-section">
+            <h3>Desserts</h3>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Seasonal Fruit Tart</h4>
+                <span class="price">$10</span>
+              </div>
+              <p class="description">Fresh berries, vanilla pastry cream, almond crust</p>
+            </div>
+            
+            <div class="menu-item">
+              <div class="menu-item-header">
+                <h4>Dark Chocolate Torte</h4>
+                <span class="price">$12</span>
+              </div>
+              <p class="description">Rich chocolate, raspberry coulis, whipped cream</p>
+            </div>
+          </article>
+        </div>
+        
+        <div class="menu-footer">
+          <a href="/menu.pdf" class="btn btn-outline" download>Download Full Menu (PDF)</a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-layout">
+          <div class="about-image">
+            <img src="chef-portrait.jpg" alt="Chef Maria Rodriguez in restaurant kitchen" width="500" height="600" loading="lazy">
+          </div>
+          
+          <div class="about-content">
+            <h2>Meet Chef Maria Rodriguez</h2>
+            <p>Chef Maria brings 15 years of culinary expertise to Savory Bistro, combining classical French techniques with modern American flavors.</p>
+            
+            <p>Her philosophy is simple: start with the best ingredients from local farms and let their natural flavors shine. Every dish is crafted with care, celebrating the seasons and supporting our community.</p>
+            
+            <p>Maria's commitment to sustainability and farm partnerships has earned Savory Bistro recognition as one of the city's top sustainable restaurants.</p>
+            
+            <blockquote>
+              <p>"Cooking is about honoring the ingredients and the farmers who grew them. When you start with quality, the rest is easy."</p>
+              <footer>
+                <cite>— Chef Maria Rodriguez</cite>
+              </footer>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="reservations" class="reservations">
+      <div class="container">
+        <h2>Make a Reservation</h2>
+        <p>Join us for an unforgettable dining experience</p>
+        
+        <form class="reservation-form" action="/book-table" method="POST">
+          <div class="form-row">
+            <div class="form-group">
+              <label for="res-name">Name</label>
+              <input type="text" id="res-name" name="name" required autocomplete="name">
+            </div>
+            
+            <div class="form-group">
+              <label for="res-email">Email</label>
+              <input type="email" id="res-email" name="email" required autocomplete="email">
+            </div>
+            
+            <div class="form-group">
+              <label for="res-phone">Phone</label>
+              <input type="tel" id="res-phone" name="phone" required autocomplete="tel">
+            </div>
+          </div>
+          
+          <div class="form-row">
+            <div class="form-group">
+              <label for="res-date">Date</label>
+              <input type="date" id="res-date" name="date" required min="2026-03-08">
+            </div>
+            
+            <div class="form-group">
+              <label for="res-time">Time</label>
+              <select id="res-time" name="time" required>
+                <option value="">Select time</option>
+                <option value="17:00">5:00 PM</option>
+                <option value="17:30">5:30 PM</option>
+                <option value="18:00">6:00 PM</option>
+                <option value="18:30">6:30 PM</option>
+                <option value="19:00">7:00 PM</option>
+                <option value="19:30">7:30 PM</option>
+                <option value="20:00">8:00 PM</option>
+                <option value="20:30">8:30 PM</option>
+                <option value="21:00">9:00 PM</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="res-guests">Party Size</label>
+              <select id="res-guests" name="guests" required>
+                <option value="">Select guests</option>
+                <option value="1">1 guest</option>
+                <option value="2">2 guests</option>
+                <option value="3">3 guests</option>
+                <option value="4">4 guests</option>
+                <option value="5">5 guests</option>
+                <option value="6">6 guests</option>
+                <option value="7">7+ guests</option>
+              </select>
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label for="res-requests">Special Requests <span class="optional">(optional)</span></label>
+            <textarea id="res-requests" name="requests" rows="3" placeholder="Allergies, dietary restrictions, special occasions, etc."></textarea>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large">Book Table</button>
+          
+          <p class="form-note"><small>For parties of 8 or more, please call us at <a href="tel:+14155551234">(415) 555-1234</a></small></p>
+        </form>
+      </div>
+    </section>
+    
+    <section id="events" class="events">
+      <div class="container">
+        <div class="events-layout">
+          <div class="events-content">
+            <h2>Private Events</h2>
+            <p>Host your special event at Savory Bistro. Our private dining room accommodates up to 40 guests for intimate celebrations, corporate dinners, and special occasions.</p>
+            
+            <ul class="events-features">
+              <li>Customizable menus</li>
+              <li>Dedicated event coordinator</li>
+              <li>Private dining room</li>
+              <li>AV equipment available</li>
+              <li>Wine pairing options</li>
+            </ul>
+            
+            <a href="/private-events" class="btn btn-outline">Learn More About Private Events</a>
+          </div>
+          
+          <div class="events-image">
+            <img src="private-dining.jpg" alt="Elegant private dining room setup" width="600" height="400" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="hours">
+      <div class="container">
+        <h2>Hours & Location</h2>
+        
+        <div class="hours-grid">
+          <div class="hours-info">
+            <h3>Opening Hours</h3>
+            <dl class="hours-list">
+              <dt>Monday - Thursday</dt>
+              <dd>5:00 PM - 10:00 PM</dd>
+              
+              <dt>Friday - Saturday</dt>
+              <dd>5:00 PM - 11:00 PM</dd>
+              
+              <dt>Sunday</dt>
+              <dd>4:00 PM - 9:00 PM</dd>
+            </dl>
+            
+            <p class="hours-note"><small>Closed major holidays</small></p>
+          </div>
+          
+          <address class="location-info">
+            <h3>Location</h3>
+            <p>
+              Savory Bistro<br>
+              123 Main Street<br>
+              San Francisco, CA 94102
+            </p>
+            
+            <p>
+              <strong>Phone:</strong> <a href="tel:+14155551234">(415) 555-1234</a><br>
+              <strong>Email:</strong> <a href="mailto:info@savorybistro.example.com">info@savorybistro.example.com</a>
+            </p>
+          </address>
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact" class="newsletter">
+      <div class="container">
+        <h2>Stay Updated</h2>
+        <p>Subscribe to our newsletter for seasonal menu updates, special events, and exclusive offers.</p>
+        
+        <form class="newsletter-form" action="/subscribe" method="POST">
+          <label for="newsletter-email" class="visually-hidden">Email address</label>
+          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
+          <button type="submit" class="btn btn-primary">Subscribe</button>
+        </form>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Savory Bistro</h3>
+          <p>Farm-to-table dining since 2015</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/savorybistro" aria-label="Instagram">Instagram</a>
+            <a href="https://facebook.com/savorybistro" aria-label="Facebook">Facebook</a>
+            <a href="https://yelp.com/biz/savorybistro" aria-label="Yelp">Yelp</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Restaurant</h3>
+          <ul>
+            <li><a href="#menu">Menu</a></li>
+            <li><a href="#reservations">Reservations</a></li>
+            <li><a href="#events">Private Events</a></li>
+            <li><a href="/gift-cards">Gift Cards</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>About</h3>
+          <ul>
+            <li><a href="/about">Our Story</a></li>
+            <li><a href="/chef">Meet the Chef</a></li>
+            <li><a href="/farm-partners">Farm Partners</a></li>
+            <li><a href="/careers">Careers</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Savory Bistro. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/accessibility">Accessibility</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/tech-app-landing.html b/skills/html-coder/assets/tech-app-landing.html
new file mode 100644
index 000000000..e7e427824
--- /dev/null
+++ b/skills/html-coder/assets/tech-app-landing.html
@@ -0,0 +1,551 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="FitTrack - Your personal fitness companion. Track workouts, set goals, and achieve your fitness dreams with AI-powered coaching.">
+  <meta property="og:title" content="FitTrack - AI-Powered Fitness App">
+  <meta property="og:description" content="Transform your fitness journey with personalized workouts and nutrition">
+  <meta property="og:image" content="og-image.png">
+  <meta property="og:type" content="website">
+  <title>FitTrack - AI-Powered Fitness App</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header-transparent">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">
+          <img src="logo.svg" alt="FitTrack" width="140" height="40">
+        </a>
+        
+        <ul class="nav-menu">
+          <li><a href="#features">Features</a></li>
+          <li><a href="#how-it-works">How It Works</a></li>
+          <li><a href="#testimonials">Reviews</a></li>
+          <li><a href="#pricing">Pricing</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="#download" class="btn btn-primary">Download App</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-app">
+      <div class="container">
+        <div class="hero-content">
+          <div class="badge">🎉 Now with AI Personal Trainer</div>
+          
+          <h1>Your fitness journey starts here</h1>
+          <p class="hero-subtitle">Transform your body and mind with personalized workouts, nutrition plans, and AI-powered coaching. Join 2 million users achieving their fitness goals.</p>
+          
+          <div class="app-download-buttons">
+            <a href="https://apps.apple.com/app/fittrack" class="download-button">
+              <img src="app-store-badge.svg" alt="Download on the App Store" width="140" height="42" loading="eager">
+            </a>
+            <a href="https://play.google.com/store/apps/details?id=com.fittrack" class="download-button">
+              <img src="google-play-badge.svg" alt="Get it on Google Play" width="157" height="42" loading="eager">
+            </a>
+          </div>
+          
+          <div class="hero-stats">
+            <div class="stat">
+              <strong>2M+</strong>
+              <span>Active Users</span>
+            </div>
+            <div class="stat">
+              <strong>4.8★</strong>
+              <span>App Store Rating</span>
+            </div>
+            <div class="stat">
+              <strong>50M+</strong>
+              <span>Workouts Logged</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="hero-phone-mockup">
+          <img src="phone-mockup-hero.png" alt="FitTrack app interface showing workout tracking screen" width="400" height="800" loading="eager">
+        </div>
+      </div>
+    </section>
+    
+    <section class="features-showcase">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Everything you need to reach your goals</h2>
+          <p>Powerful features that make fitness simple and effective</p>
+        </div>
+        
+        <div class="feature-showcase-item">
+          <div class="showcase-content">
+            <div class="feature-icon-large" aria-hidden="true">🤖</div>
+            <h3>AI Personal Trainer</h3>
+            <p>Get a personalized workout plan tailored to your fitness level, goals, and available equipment. Our AI adapts to your progress and adjusts your training in real-time.</p>
+            
+            <ul class="feature-highlights">
+              <li>Custom workout plans based on your goals</li>
+              <li>Real-time form correction using your camera</li>
+              <li>Adaptive difficulty that grows with you</li>
+              <li>Voice-guided coaching during workouts</li>
+            </ul>
+          </div>
+          
+          <div class="showcase-image">
+            <img src="feature-ai-trainer.png" alt="AI trainer interface with exercise form analysis" width="500" height="600" loading="lazy">
+          </div>
+        </div>
+        
+        <div class="feature-showcase-item reverse">
+          <div class="showcase-content">
+            <div class="feature-icon-large" aria-hidden="true">📊</div>
+            <h3>Track Your Progress</h3>
+            <p>Watch your transformation unfold with detailed progress tracking, body measurements, workout history, and performance analytics.</p>
+            
+            <ul class="feature-highlights">
+              <li>Visual progress photos with timeline</li>
+              <li>Body measurements and weight tracking</li>
+              <li>Workout history and personal records</li>
+              <li>Detailed analytics and insights</li>
+            </ul>
+          </div>
+          
+          <div class="showcase-image">
+            <img src="feature-progress.png" alt="Progress tracking dashboard with charts and measurements" width="500" height="600" loading="lazy">
+          </div>
+        </div>
+        
+        <div class="feature-showcase-item">
+          <div class="showcase-content">
+            <div class="feature-icon-large" aria-hidden="true">🥗</div>
+            <h3>Nutrition Made Easy</h3>
+            <p>Fuel your workouts with personalized meal plans and nutrition tracking. Scan food barcodes, log meals in seconds, and hit your macros effortlessly.</p>
+            
+            <ul class="feature-highlights">
+              <li>Custom meal plans for your goals</li>
+              <li>Barcode scanner for quick logging</li>
+              <li>Macro and calorie tracking</li>
+              <li>Thousands of recipes included</li>
+            </ul>
+          </div>
+          
+          <div class="showcase-image">
+            <img src="feature-nutrition.png" alt="Nutrition tracking interface with meal logging" width="500" height="600" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="features" class="features-grid-section">
+      <div class="container">
+        <h2>More features to love</h2>
+        
+        <div class="features-grid-compact">
+          <article class="feature-card-small">
+            <div class="feature-icon" aria-hidden="true">⏱️</div>
+            <h3>Workout Timer</h3>
+            <p>Built-in timers for intervals, rest periods, and circuit training</p>
+          </article>
+          
+          <article class="feature-card-small">
+            <div class="feature-icon" aria-hidden="true">🎯</div>
+            <h3>Goal Setting</h3>
+            <p>Set and achieve fitness milestones with guided goal programs</p>
+          </article>
+          
+          <article class="feature-card-small">
+            <div class="feature-icon" aria-hidden="true">👥</div>
+            <h3>Social Features</h3>
+            <p>Connect with friends, join challenges, and share achievements</p>
+          </article>
+          
+          <article class="feature-card-small">
+            <div class="feature-icon" aria-hidden="true">⌚</div>
+            <h3>Wearable Sync</h3>
+            <p>Sync with Apple Watch, Garmin, Fitbit, and more</p>
+          </article>
+          
+          <article class="feature-card-small">
+            <div class="feature-icon" aria-hidden="true">📹</div>
+            <h3>Video Tutorials</h3>
+            <p>HD exercise videos with professional trainers</p>
+          </article>
+          
+          <article class="feature-card-small">
+            <div class="feature-icon" aria-hidden="true">🏆</div>
+            <h3>Achievements</h3>
+            <p>Earn badges and rewards as you hit milestones</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="how-it-works" class="how-it-works-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Getting started is easy</h2>
+          <p>From download to first workout in under 5 minutes</p>
+        </div>
+        
+        <div class="steps-grid">
+          <article class="step-card">
+            <div class="step-number">1</div>
+            <h3>Download & Create Account</h3>
+            <p>Get the app from the App Store or Google Play. Sign up in seconds with email or social login.</p>
+          </article>
+          
+          <article class="step-card">
+            <div class="step-number">2</div>
+            <h3>Set Your Goals</h3>
+            <p>Tell us about your fitness level, goals, and preferences. Our AI will create your personalized plan.</p>
+          </article>
+          
+          <article class="step-card">
+            <div class="step-number">3</div>
+            <h3>Start Training</h3>
+            <p>Follow your custom workout plan with video guidance, form correction, and real-time coaching.</p>
+          </article>
+          
+          <article class="step-card">
+            <div class="step-number">4</div>
+            <h3>Track & Improve</h3>
+            <p>Watch your progress, celebrate achievements, and let our AI refine your plan as you get stronger.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="app-screenshots-section">
+      <div class="container">
+        <h2>A glimpse inside the app</h2>
+        
+        <div class="screenshots-carousel">
+          <div class="screenshot">
+            <img src="screenshot-home.png" alt="Home screen with today's workout" width="300" height="600" loading="lazy">
+            <p>Home Dashboard</p>
+          </div>
+          
+          <div class="screenshot">
+            <img src="screenshot-workout.png" alt="Active workout screen with exercise timer" width="300" height="600" loading="lazy">
+            <p>Workout Tracker</p>
+          </div>
+          
+          <div class="screenshot">
+            <img src="screenshot-progress.png" alt="Progress charts and body measurements" width="300" height="600" loading="lazy">
+            <p>Progress Tracking</p>
+          </div>
+          
+          <div class="screenshot">
+            <img src="screenshot-nutrition.png" alt="Meal logging and macro breakdown" width="300" height="600" loading="lazy">
+            <p>Nutrition Log</p>
+          </div>
+          
+          <div class="screenshot">
+            <img src="screenshot-ai.png" alt="AI trainer giving personalized recommendations" width="300" height="600" loading="lazy">
+            <p>AI Coaching</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="testimonials" class="testimonials-app-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Real people, real results</h2>
+          <p>Join thousands who've transformed their lives with FitTrack</p>
+        </div>
+        
+        <div class="testimonials-grid">
+          <article class="testimonial-card-app">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Lost 30 pounds in 4 months! The AI trainer keeps me motivated and the workouts are never boring. Best fitness app I've ever used."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="user-mike.jpg" alt="" width="48" height="48" loading="lazy">
+              <div>
+                <cite>Mike Thompson</cite>
+                <p>Lost 30 lbs • 4 months</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card-app">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"As a busy mom, I never thought I'd find time for fitness. FitTrack's quick workouts fit perfectly into my schedule. Down 2 dress sizes!"</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="user-jennifer.jpg" alt="" width="48" height="48" loading="lazy">
+              <div>
+                <cite>Jennifer Lee</cite>
+                <p>Built consistency • 6 months</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card-app">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Gained 15 pounds of muscle and hit all my strength goals. The progressive overload system and form checks are incredible."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="user-carlos.jpg" alt="" width="48" height="48" loading="lazy">
+              <div>
+                <cite>Carlos Rodriguez</cite>
+                <p>Gained 15 lbs muscle • 5 months</p>
+              </div>
+            </footer>
+          </article>
+        </div>
+        
+        <div class="app-rating-summary">
+          <div class="rating-large">
+            <span class="rating-number">4.8</span>
+            <span class="rating-stars">★★★★★</span>
+          </div>
+          <p><strong>Based on 125,000+ reviews</strong></p>
+          <p>Average across App Store and Google Play</p>
+        </div>
+      </div>
+    </section>
+    
+    <section id="pricing" class="pricing-app-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Choose your plan</h2>
+          <p>Start free, upgrade when you're ready</p>
+        </div>
+        
+        <div class="pricing-cards-app">
+          <article class="pricing-card-app">
+            <h3>Free</h3>
+            <p class="pricing-app-price">
+              <span class="price-amount">$0</span>
+            </p>
+            <p class="pricing-period">Forever free</p>
+            
+            <a href="#download" class="btn btn-outline btn-large">Get Started</a>
+            
+            <ul class="pricing-features">
+              <li>✓ Basic workout tracking</li>
+              <li>✓ 50+ exercises library</li>
+              <li>✓ Progress photos</li>
+              <li>✓ Community access</li>
+              <li>✗ AI Personal Trainer</li>
+              <li>✗ Custom meal plans</li>
+              <li>✗ Form correction</li>
+            </ul>
+          </article>
+          
+          <article class="pricing-card-app featured">
+            <div class="popular-badge">Most Popular</div>
+            <h3>Premium</h3>
+            <p class="pricing-app-price">
+              <span class="price-amount">$12.99</span>
+            </p>
+            <p class="pricing-period">per month</p>
+            
+            <a href="#download" class="btn btn-primary btn-large">Start 7-Day Free Trial</a>
+            
+            <ul class="pricing-features">
+              <li>✓ Everything in Free, plus:</li>
+              <li>✓ AI Personal Trainer</li>
+              <li>✓ Custom workout plans</li>
+              <li>✓ Real-time form correction</li>
+              <li>✓ Personalized meal plans</li>
+              <li>✓ Nutrition tracking</li>
+              <li>✓ Unlimited workout programs</li>
+              <li>✓ Advanced analytics</li>
+            </ul>
+            
+            <p class="pricing-note"><small>or $99.99/year (save 35%)</small></p>
+          </article>
+          
+          <article class="pricing-card-app">
+            <h3>Elite</h3>
+            <p class="pricing-app-price">
+              <span class="price-amount">$29.99</span>
+            </p>
+            <p class="pricing-period">per month</p>
+            
+            <a href="#download" class="btn btn-outline btn-large">Start 7-Day Free Trial</a>
+            
+            <ul class="pricing-features">
+              <li>✓ Everything in Premium, plus:</li>
+              <li>✓ 1-on-1 video coaching sessions</li>
+              <li>✓ Live group classes</li>
+              <li>✓ Priority support</li>
+              <li>✓ Custom supplement recommendations</li>
+              <li>✓ Exclusive challenges & prizes</li>
+            </ul>
+            
+            <p class="pricing-note"><small>or $249.99/year (save 30%)</small></p>
+          </article>
+        </div>
+        
+        <p class="pricing-guarantee">💪 30-Day Money-Back Guarantee • Cancel Anytime</p>
+      </div>
+    </section>
+    
+    <section class="press-section">
+      <div class="container">
+        <h2>As featured in</h2>
+        
+        <div class="press-logos">
+          <img src="press-techcrunch.svg" alt="TechCrunch" width="140" height="30" loading="lazy">
+          <img src="press-forbes.svg" alt="Forbes" width="100" height="30" loading="lazy">
+          <img src="press-wired.svg" alt="Wired" width="100" height="30" loading="lazy">
+          <img src="press-shape.svg" alt="Shape Magazine" width="100" height="30" loading="lazy">
+          <img src="press-menshealth.svg" alt="Men's Health" width="120" height="30" loading="lazy">
+        </div>
+        
+        <blockquote class="press-quote">
+          <p>"FitTrack is revolutionizing personal fitness with AI technology that rivals a human personal trainer."</p>
+          <cite>— TechCrunch</cite>
+        </blockquote>
+      </div>
+    </section>
+    
+    <section id="download" class="download-cta-section">
+      <div class="container">
+        <div class="download-cta-content">
+          <h2>Ready to start your transformation?</h2>
+          <p>Download FitTrack now and get 7 days of Premium free</p>
+          
+          <div class="app-download-buttons-large">
+            <a href="https://apps.apple.com/app/fittrack" class="download-button-large">
+              <img src="app-store-badge.svg" alt="Download on the App Store" width="160" height="48" loading="lazy">
+            </a>
+            <a href="https://play.google.com/store/apps/details?id=com.fittrack" class="download-button-large">
+              <img src="google-play-badge.svg" alt="Get it on Google Play" width="180" height="48" loading="lazy">
+            </a>
+          </div>
+          
+          <p class="download-note">
+            <small>✓ No credit card required for free trial • Available on iOS 14+ and Android 8+</small>
+          </p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="faq-section">
+      <div class="container">
+        <h2>Frequently Asked Questions</h2>
+        
+        <div class="faq-grid">
+          <article class="faq-item">
+            <h3>Do I need equipment to use FitTrack?</h3>
+            <p>No! We offer bodyweight workouts, as well as plans for home equipment or full gyms. Tell us what you have, and we'll customize your workouts accordingly.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>Can I use FitTrack if I'm a complete beginner?</h3>
+            <p>Absolutely! Our AI adapts to any fitness level. We'll start you with beginner-friendly workouts and gradually progress as you get stronger.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>How does the AI Personal Trainer work?</h3>
+            <p>Our AI analyzes your goals, fitness level, progress, and feedback to create personalized workout plans. It uses your phone's camera for form correction and adjusts difficulty in real-time.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>Can I cancel my subscription anytime?</h3>
+            <p>Yes! Cancel anytime through your app store subscription settings. You'll continue to have access until the end of your billing period.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>Does FitTrack work offline?</h3>
+            <p>Yes! Download workouts and exercise videos to use offline. Nutrition tracking and basic features work without internet. Your data syncs when you're back online.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>What devices are supported?</h3>
+            <p>FitTrack works on iOS 14+ (iPhone and iPad) and Android 8+. We also integrate with Apple Watch, Garmin, Fitbit, and other popular fitness wearables.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>FitTrack</h3>
+          <p>Your AI-powered fitness companion</p>
+          
+          <div class="app-badges-footer">
+            <a href="https://apps.apple.com/app/fittrack">
+              <img src="app-store-badge-small.svg" alt="App Store" width="120" height="36" loading="lazy">
+            </a>
+            <a href="https://play.google.com/store/apps/details?id=com.fittrack">
+              <img src="google-play-badge-small.svg" alt="Google Play" width="135" height="36" loading="lazy">
+            </a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/workout-programs">Workout Programs</a></li>
+            <li><a href="/nutrition">Nutrition</a></li>
+            <li><a href="/integrations">Integrations</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/blog">Blog</a></li>
+            <li><a href="/success-stories">Success Stories</a></li>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/community">Community</a></li>
+            <li><a href="/trainers">For Trainers</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/press">Press</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Social</h3>
+          <div class="social-links-footer">
+            <a href="https://instagram.com/fittrack" aria-label="Instagram">Instagram</a>
+            <a href="https://twitter.com/fittrack" aria-label="Twitter">Twitter</a>
+            <a href="https://facebook.com/fittrack" aria-label="Facebook">Facebook</a>
+            <a href="https://youtube.com/fittrack" aria-label="YouTube">YouTube</a>
+            <a href="https://tiktok.com/@fittrack" aria-label="TikTok">TikTok</a>
+          </div>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 FitTrack Inc. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Service</a>
+          <a href="/cookies">Cookie Policy</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="app.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/tech-saas-landing.html b/skills/html-coder/assets/tech-saas-landing.html
new file mode 100644
index 000000000..92c0d7589
--- /dev/null
+++ b/skills/html-coder/assets/tech-saas-landing.html
@@ -0,0 +1,439 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="CloudFlow - Modern project management software for distributed teams. Streamline workflows, boost productivity, and collaborate seamlessly.">
+  <meta property="og:title" content="CloudFlow - Project Management for Modern Teams">
+  <meta property="og:description" content="The all-in-one workspace for remote teams">
+  <meta property="og:type" content="website">
+  <title>CloudFlow - Project Management for Modern Teams</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">CloudFlow</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#features">Features</a></li>
+          <li><a href="#pricing">Pricing</a></li>
+          <li><a href="/customers">Customers</a></li>
+          <li><a href="/resources">Resources</a></li>
+          <li><a href="/company">Company</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/login" class="btn-link">Sign In</a>
+          <a href="/signup" class="btn btn-primary">Start Free Trial</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-saas">
+      <div class="container">
+        <div class="hero-content">
+          <h1>The workspace where work happens</h1>
+          <p class="hero-subtitle">CloudFlow brings your teams, projects, and workflows together in one collaborative platform. No more juggling multiple tools.</p>
+          
+          <form class="hero-signup-form" action="/start-trial" method="POST">
+            <label for="hero-email" class="visually-hidden">Work email</label>
+            <input type="email" id="hero-email" name="email" placeholder="Work email address" required autocomplete="email">
+            <button type="submit" class="btn btn-primary btn-large">Start Free Trial</button>
+          </form>
+          
+          <p class="hero-trust">
+            <small>✓ Free 14-day trial • No credit card required • Cancel anytime</small>
+          </p>
+          
+          <div class="social-proof">
+            <p><strong>Trusted by 50,000+ teams worldwide</strong></p>
+            <div class="logo-strip">
+              <img src="logo-stripe.svg" alt="Stripe" width="80" height="30" loading="eager">
+              <img src="logo-shopify.svg" alt="Shopify" width="80" height="30" loading="eager">
+              <img src="logo-zoom.svg" alt="Zoom" width="80" height="30" loading="eager">
+              <img src="logo-slack.svg" alt="Slack" width="80" height="30" loading="eager">
+              <img src="logo-notion.svg" alt="Notion" width="80" height="30" loading="eager">
+            </div>
+          </div>
+        </div>
+        
+        <div class="hero-image">
+          <img src="dashboard-preview.png" alt="CloudFlow dashboard interface showing project boards and tasks" width="800" height="600" loading="eager">
+        </div>
+      </div>
+    </section>
+    
+    <section class="features-overview">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Everything your team needs to succeed</h2>
+          <p>Powerful features designed for how modern teams work</p>
+        </div>
+        
+        <div class="features-grid">
+          <article class="feature-card">
+            <div class="feature-icon" aria-hidden="true">📋</div>
+            <h3>Project Management</h3>
+            <p>Organize work with customizable boards, lists, and timelines. Track progress from start to finish.</p>
+          </article>
+          
+          <article class="feature-card">
+            <div class="feature-icon" aria-hidden="true">💬</div>
+            <h3>Team Collaboration</h3>
+            <p>Real-time messaging, comments, and @mentions keep everyone in the loop.</p>
+          </article>
+          
+          <article class="feature-card">
+            <div class="feature-icon" aria-hidden="true">📊</div>
+            <h3>Analytics & Reporting</h3>
+            <p>Visualize team performance with customizable dashboards and automated reports.</p>
+          </article>
+          
+          <article class="feature-card">
+            <div class="feature-icon" aria-hidden="true">🔗</div>
+            <h3>Integrations</h3>
+            <p>Connect with 100+ tools including Slack, Google Drive, GitHub, and more.</p>
+          </article>
+          
+          <article class="feature-card">
+            <div class="feature-icon" aria-hidden="true">⚡</div>
+            <h3>Automation</h3>
+            <p>Automate repetitive tasks with custom workflows and triggers.</p>
+          </article>
+          
+          <article class="feature-card">
+            <div class="feature-icon" aria-hidden="true">🔒</div>
+            <h3>Enterprise Security</h3>
+            <p>Bank-level encryption, SSO, and compliance certifications you can trust.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="features" class="features-detailed">
+      <div class="container">
+        <article class="feature-detail">
+          <div class="feature-detail-content">
+            <h2>Plan projects with clarity</h2>
+            <p>Visualize your roadmap with multiple views—boards, lists, timelines, or calendars. Switch between views instantly to see your work the way you need to.</p>
+            
+            <ul class="feature-list">
+              <li>✓ Kanban boards for agile workflows</li>
+              <li>✓ Gantt charts for timeline planning</li>
+              <li>✓ Calendar view for deadline tracking</li>
+              <li>✓ List view for simple task management</li>
+            </ul>
+            
+            <a href="/features/project-management" class="btn btn-outline">Learn More</a>
+          </div>
+          
+          <div class="feature-detail-image">
+            <img src="feature-boards.png" alt="Project board interface with drag-and-drop cards" width="600" height="400" loading="lazy">
+          </div>
+        </article>
+        
+        <article class="feature-detail reverse">
+          <div class="feature-detail-content">
+            <h2>Collaborate in real-time</h2>
+            <p>No more endless email threads. Discuss tasks, share files, and make decisions faster with built-in collaboration tools.</p>
+            
+            <ul class="feature-list">
+              <li>✓ Task comments and @mentions</li>
+              <li>✓ File attachments and previews</li>
+              <li>✓ Activity feeds and notifications</li>
+              <li>✓ Guest access for external stakeholders</li>
+            </ul>
+            
+            <a href="/features/collaboration" class="btn btn-outline">Learn More</a>
+          </div>
+          
+          <div class="feature-detail-image">
+            <img src="feature-collaboration.png" alt="Team collaboration interface with comments and mentions" width="600" height="400" loading="lazy">
+          </div>
+        </article>
+        
+        <article class="feature-detail">
+          <div class="feature-detail-content">
+            <h2>Automate your workflow</h2>
+            <p>Save hours every week by automating repetitive tasks. No coding required—just set up rules and let CloudFlow handle the rest.</p>
+            
+            <ul class="feature-list">
+              <li>✓ Custom automation rules</li>
+              <li>✓ Trigger actions based on events</li>
+              <li>✓ Recurring task creation</li>
+              <li>✓ Pre-built automation templates</li>
+            </ul>
+            
+            <a href="/features/automation" class="btn btn-outline">Learn More</a>
+          </div>
+          
+          <div class="feature-detail-image">
+            <img src="feature-automation.png" alt="Automation workflow builder interface" width="600" height="400" loading="lazy">
+          </div>
+        </article>
+      </div>
+    </section>
+    
+    <section class="testimonials-section">
+      <div class="container">
+        <h2>Loved by teams everywhere</h2>
+        
+        <div class="testimonials-grid">
+          <article class="testimonial-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"CloudFlow transformed how our distributed team works together. We've improved project delivery times by 40% and everyone actually enjoys using it."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="testimonial-sarah.jpg" alt="" width="48" height="48" loading="lazy">
+              <div>
+                <cite>Sarah Martinez</cite>
+                <p>Head of Product, TechCorp</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Finally, a project management tool that doesn't require a PhD to understand. My team was up and running in under an hour."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="testimonial-james.jpg" alt="" width="48" height="48" loading="lazy">
+              <div>
+                <cite>James Chen</cite>
+                <p>Founder, StartupXYZ</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"The automation features alone have saved us 10+ hours per week. CloudFlow pays for itself many times over."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="testimonial-priya.jpg" alt="" width="48" height="48" loading="lazy">
+              <div>
+                <cite>Priya Patel</cite>
+                <p>Operations Manager, GrowthCo</p>
+              </div>
+            </footer>
+        </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="pricing" class="pricing-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Simple, transparent pricing</h2>
+          <p>Choose the plan that fits your team size and needs</p>
+        </div>
+        
+        <div class="pricing-toggle">
+          <button class="toggle-option active" data-billing="monthly">Monthly</button>
+          <button class="toggle-option" data-billing="annual">Annual <span class="badge">Save 20%</span></button>
+        </div>
+        
+        <div class="pricing-grid">
+          <article class="pricing-card">
+            <h3>Free</h3>
+            <p class="pricing-description">Perfect for small teams getting started</p>
+            
+            <p class="pricing-price">
+              <span class="price-amount">$0</span>
+              <span class="price-period">forever</span>
+            </p>
+            
+            <a href="/signup?plan=free" class="btn btn-outline btn-large">Get Started</a>
+            
+            <ul class="pricing-features">
+              <li>✓ Up to 10 team members</li>
+              <li>✓ 3 projects</li>
+              <li>✓ Basic task management</li>
+              <li>✓ 5GB storage</li>
+              <li>✓ Mobile apps</li>
+              <li>✓ Email support</li>
+            </ul>
+          </article>
+          
+          <article class="pricing-card featured">
+            <div class="popular-badge">Most Popular</div>
+            <h3>Pro</h3>
+            <p class="pricing-description">For growing teams that need more power</p>
+            
+            <p class="pricing-price">
+              <span class="price-amount">$12</span>
+              <span class="price-period">per user/month</span>
+            </p>
+            
+            <a href="/signup?plan=pro" class="btn btn-primary btn-large">Start Free Trial</a>
+            
+            <ul class="pricing-features">
+              <li>✓ Unlimited team members</li>
+              <li>✓ Unlimited projects</li>
+              <li>✓ Advanced workflows</li>
+              <li>✓ 100GB storage per user</li>
+              <li>✓ Custom fields & views</li>
+              <li>✓ Automation (100 actions/month)</li>
+              <li>✓ Timeline & calendar views</li>
+              <li>✓ Priority support</li>
+            </ul>
+          </article>
+          
+          <article class="pricing-card">
+            <h3>Enterprise</h3>
+            <p class="pricing-description">Advanced features for large organizations</p>
+            
+            <p class="pricing-price">
+              <span class="price-amount">Custom</span>
+            </p>
+            
+            <a href="/contact-sales" class="btn btn-outline btn-large">Contact Sales</a>
+            
+            <ul class="pricing-features">
+              <li>✓ Everything in Pro, plus:</li>
+              <li>✓ Unlimited storage</li>
+              <li>✓ Advanced security & permissions</li>
+              <li>✓ SSO & SAML</li>
+              <li>✓ Dedicated account manager</li>
+              <li>✓ 99.9% uptime SLA</li>
+              <li>✓ Custom integrations</li>
+              <li>✓ On-premise deployment option</li>
+            </ul>
+          </article>
+        </div>
+        
+        <p class="pricing-note">All plans include a 14-day free trial. No credit card required.</p>
+      </div>
+    </section>
+    
+    <section class="integrations-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Connects with your favorite tools</h2>
+          <p>CloudFlow integrates seamlessly with 100+ apps you already use</p>
+        </div>
+        
+        <div class="integrations-grid">
+          <div class="integration-logo">
+            <img src="integration-slack.svg" alt="Slack" width="120" height="40" loading="lazy">
+          </div>
+          <div class="integration-logo">
+            <img src="integration-google.svg" alt="Google Workspace" width="120" height="40" loading="lazy">
+          </div>
+          <div class="integration-logo">
+            <img src="integration-github.svg" alt="GitHub" width="120" height="40" loading="lazy">
+          </div>
+          <div class="integration-logo">
+            <img src="integration-dropbox.svg" alt="Dropbox" width="120" height="40" loading="lazy">
+          </div>
+          <div class="integration-logo">
+            <img src="integration-zoom.svg" alt="Zoom" width="120" height="40" loading="lazy">
+          </div>
+          <div class="integration-logo">
+            <img src="integration-salesforce.svg" alt="Salesforce" width="120" height="40" loading="lazy">
+          </div>
+          <div class="integration-logo">
+            <img src="integration-figma.svg" alt="Figma" width="120" height="40" loading="lazy">
+          </div>
+          <div class="integration-logo">
+            <img src="integration-jira.svg" alt="Jira" width="120" height="40" loading="lazy">
+          </div>
+        </div>
+        
+        <a href="/integrations" class="btn btn-outline">View All Integrations</a>
+      </div>
+    </section>
+    
+    <section class="cta-section">
+      <div class="container">
+        <div class="cta-content">
+          <h2>Ready to transform how your team works?</h2>
+          <p>Join 50,000+ teams already using CloudFlow to get more done</p>
+          
+          <form class="cta-signup-form" action="/start-trial" method="POST">
+            <label for="cta-email" class="visually-hidden">Work email</label>
+            <input type="email" id="cta-email" name="email" placeholder="Work email address" required autocomplete="email">
+            <button type="submit" class="btn btn-primary btn-large">Start Free Trial</button>
+          </form>
+          
+          <p class="cta-trust">
+            <small>✓ Free 14-day trial • No credit card required • Cancel anytime</small>
+          </p>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>CloudFlow</h3>
+          <p>The all-in-one workspace for modern teams</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://twitter.com/cloudflow" aria-label="Twitter">Twitter</a>
+            <a href="https://linkedin.com/company/cloudflow" aria-label="LinkedIn">LinkedIn</a>
+            <a href="https://facebook.com/cloudflow" aria-label="Facebook">Facebook</a>
+            <a href="https://youtube.com/cloudflow" aria-label="YouTube">YouTube</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/integrations">Integrations</a></li>
+            <li><a href="/security">Security</a></li>
+            <li><a href="/updates">Product Updates</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/blog">Blog</a></li>
+            <li><a href="/guides">Guides</a></li>
+            <li><a href="/templates">Templates</a></li>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/api">API Documentation</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/customers">Customers</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/press">Press Kit</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 CloudFlow, Inc. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Service</a>
+          <a href="/gdpr">GDPR</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/tech-startup-homepage.html b/skills/html-coder/assets/tech-startup-homepage.html
new file mode 100644
index 000000000..784fc89de
--- /dev/null
+++ b/skills/html-coder/assets/tech-startup-homepage.html
@@ -0,0 +1,625 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Vertex AI - Building the future of enterprise automation. AI-powered workflow automation that saves companies millions.">
+  <meta property="og:title" content="Vertex AI - Enterprise Workflow Automation">
+  <meta property="og:description" content="AI that automates your business processes end-to-end">
+  <meta property="og:image" content="og-vertex.png">
+  <meta property="og:type" content="website">
+  <title>Vertex AI - Building the Future of Enterprise Automation</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header-startup">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">
+          <img src="vertex-logo.svg" alt="Vertex AI" width="130" height="40">
+        </a>
+        
+        <ul class="nav-menu">
+          <li><a href="#product">Product</a></li>
+          <li><a href="#how-it-works">How It Works</a></li>
+          <li><a href="#customers">Customers</a></li>
+          <li><a href="#company">Company</a></li>
+          <li><a href="/blog">Blog</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/contact" class="btn btn-outline">Contact Sales</a>
+          <a href="/demo" class="btn btn-primary">Request Demo</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-startup">
+      <div class="container">
+        <div class="hero-content-startup">
+          <div class="announcement-badge">
+            <span class="badge-icon">🚀</span>
+            <span>Series B Funding: $45M raised from Sequoia Capital</span>
+            <a href="/blog/series-b-announcement">Read more →</a>
+          </div>
+          
+          <h1>Automate your business.<br>Amplify your impact.</h1>
+          
+          <p class="hero-description">Vertex AI transforms complex business processes into intelligent, automated workflows. What used to take hours now takes seconds—powered by cutting-edge AI that learns and adapts to your business.</p>
+          
+          <div class="hero-cta-group">
+            <a href="/demo" class="btn btn-primary btn-large">Request a Demo</a>
+            <a href="#product" class="btn btn-outline btn-large">See How It Works</a>
+          </div>
+          
+          <div class="hero-proof-points">
+            <div class="proof-point">
+              <strong>87%</strong>
+              <span>Average time saved</span>
+            </div>
+            <div class="proof-point">
+              <strong>$2.4M</strong>
+              <span>Avg. annual savings</span>
+            </div>
+            <div class="proof-point">
+              <strong>500+</strong>
+              <span>Enterprise customers</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="hero-visual">
+          <img src="platform-dashboard.png" alt="Vertex AI platform dashboard showing automated workflow analytics" width="900" height="600" loading="eager">
+        </div>
+      </div>
+    </section>
+    
+    <section class="customers-logo-section">
+      <div class="container">
+        <p class="customers-headline">Trusted by leading enterprises worldwide</p>
+        
+        <div class="customer-logos">
+          <img src="customer-adobe.svg" alt="Adobe" width="100" height="40" loading="lazy">
+          <img src="customer-salesforce.svg" alt="Salesforce" width="120" height="40" loading="lazy">
+          <img src="customer-deloitte.svg" alt="Deloitte" width="100" height="40" loading="lazy">
+          <img src="customer-general-electric.svg" alt="General Electric" width="80" height="40" loading="lazy">
+          <img src="customer-airbnb.svg" alt="Airbnb" width="100" height="40" loading="lazy">
+          <img src="customer-walmart.svg" alt="Walmart" width="100" height="40" loading="lazy">
+        </div>
+      </div>
+    </section>
+    
+    <section class="problem-solution-section">
+      <div class="container">
+        <div class="problem-solution-grid">
+          <div class="problem-box">
+            <h2>The Problem</h2>
+            <p class="intro-text">Businesses waste billions on manual, repetitive tasks</p>
+            
+            <ul class="problem-list">
+              <li>
+                <strong>Manual Data Entry:</strong>
+                <span>Teams spend 40% of their time on repetitive data tasks</span>
+              </li>
+              <li>
+                <strong>Disconnected Systems:</strong>
+                <span>Data silos create inefficiencies and errors</span>
+              </li>
+              <li>
+                <strong>Slow Approvals:</strong>
+                <span>Business processes bottleneck on manual reviews</span>
+              </li>
+              <li>
+                <strong>Limited Insights:</strong>
+                <span>Important patterns hidden in unstructured data</span>
+              </li>
+            </ul>
+          </div>
+          
+          <div class="solution-box">
+            <h2>The Solution</h2>
+            <p class="intro-text">AI that understands and automates your entire workflow</p>
+            
+            <ul class="solution-list">
+              <li>
+                <strong>Intelligent Automation:</strong>
+                <span>AI handles data entry, extraction, and validation automatically</span>
+              </li>
+              <li>
+                <strong>Unified Platform:</strong>
+                <span>Connect all your systems with pre-built integrations</span>
+              </li>
+              <li>
+                <strong>Smart Routing:</strong>
+                <span>AI routes approvals and flagging based on priorities</span>
+              </li>
+              <li>
+                <strong>Predictive Analytics:</strong>
+                <span>Surface insights and anomalies in real-time</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="product" class="product-showcase-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>One platform. Infinite possibilities.</h2>
+          <p>Vertex AI adapts to any business process, in any industry</p>
+        </div>
+        
+        <div class="product-features-showcase">
+          <article class="product-feature-large">
+            <div class="product-feature-content">
+              <div class="feature-label">Core Technology</div>
+              <h3>AI That Actually Understands Your Business</h3>
+              <p>Our proprietary Natural Language Processing engine reads and understands documents, emails, forms, and conversations just like a human—but 1000x faster. It learns your business rules and applies them consistently across all workflows.</p>
+              
+              <ul class="capability-list">
+                <li>Document intelligence (invoices, contracts, forms)</li>
+                <li>Email and message processing</li>
+                <li>Intelligent data extraction and validation</li>
+                <li>Context-aware decision making</li>
+              </ul>
+            </div>
+            
+            <div class="product-feature-visual">
+              <img src="feature-ai-processing.png" alt="AI document processing showing invoice data extraction" width="600" height="400" loading="lazy">
+            </div>
+          </article>
+          
+          <article class="product-feature-large reverse">
+            <div class="product-feature-content">
+              <div class="feature-label">Workflow Builder</div>
+              <h3>Build Automations in Minutes, Not Months</h3>
+              <p>Our visual workflow builder lets you create complex automations without writing code. Drag, drop, and connect—Vertex AI handles the rest. Or use our AI assistant to generate workflows from natural language descriptions.</p>
+              
+              <ul class="capability-list">
+                <li>Visual drag-and-drop interface</li>
+                <li>AI-powered workflow generation</li>
+                <li>Pre-built templates for common processes</li>
+                <li>Real-time testing and debugging</li>
+              </ul>
+            </div>
+            
+            <div class="product-feature-visual">
+              <img src="feature-workflow-builder.png" alt="Visual workflow builder interface with connected nodes" width="600" height="400" loading="lazy">
+            </div>
+          </article>
+          
+          <article class="product-feature-large">
+            <div class="product-feature-content">
+              <div class="feature-label">Integrations</div>
+              <h3>Connect Everything You Use</h3>
+              <p>Vertex AI integrates seamlessly with 200+ business applications. From CRMs to ERPs to custom internal tools—if it has an API, we can connect to it. No more data silos.</p>
+              
+              <ul class="capability-list">
+                <li>200+ pre-built integrations</li>
+                <li>Custom API connections</li>
+                <li>Real-time data sync</li>
+                <li>Secure data handling (SOC 2, GDPR compliant)</li>
+              </ul>
+            </div>
+            
+            <div class="product-feature-visual">
+              <img src="feature-integrations.png" alt="Integration hub showing connected business applications" width="600" height="400" loading="lazy">
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="how-it-works" class="how-it-works-startup">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>From setup to ROI in weeks</h2>
+          <p>Our proven implementation process gets you up and running fast</p>
+        </div>
+        
+        <div class="process-timeline">
+          <article class="timeline-step">
+            <div class="timeline-marker">
+              <span class="timeline-number">1</span>
+            </div>
+            <div class="timeline-content">
+              <div class="timeline-duration">Week 1</div>
+              <h3>Discovery & Planning</h3>
+              <p>Our team works with you to map your current processes, identify automation opportunities, and design your custom solution.</p>
+            </div>
+          </article>
+          
+          <article class="timeline-step">
+            <div class="timeline-marker">
+              <span class="timeline-number">2</span>
+            </div>
+            <div class="timeline-content">
+              <div class="timeline-duration">Week 2-3</div>
+              <h3>Configuration & Integration</h3>
+              <p>We configure Vertex AI for your business, connect your systems, and build your initial automation workflows.</p>
+            </div>
+          </article>
+          
+          <article class="timeline-step">
+            <div class="timeline-marker">
+              <span class="timeline-number">3</span>
+            </div>
+            <div class="timeline-content">
+              <div class="timeline-duration">Week 4</div>
+              <h3>Testing & Training</h3>
+              <p>Test workflows with real data, train your team, and refine automations based on feedback.</p>
+            </div>
+          </article>
+          
+          <article class="timeline-step">
+            <div class="timeline-marker">
+              <span class="timeline-number">4</span>
+            </div>
+            <div class="timeline-content">
+              <div class="timeline-duration">Week 5+</div>
+              <h3>Launch & Optimize</h3>
+              <p>Go live with ongoing support. Our AI continuously learns and optimizes your workflows for maximum efficiency.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="customers" class="case-study-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Real results from real customers</h2>
+        </div>
+        
+        <div class="case-studies">
+          <article class="case-study-card featured-case">
+            <div class="case-study-header">
+              <img src="logo-acme-corp.svg" alt="Acme Corp" width="120" height="40" loading="lazy">
+              <span class="case-study-industry">Financial Services</span>
+            </div>
+            
+            <h3>How Acme Corp Automated Invoice Processing</h3>
+            <p class="case-study-description">Acme Corp processes 50,000+ invoices monthly across 30 countries. Manual processing was slow, error-prone, and expensive.</p>
+            
+            <div class="case-study-results">
+              <div class="result-stat">
+                <strong>94%</strong>
+                <span>Faster processing</span>
+              </div>
+              <div class="result-stat">
+                <strong>$1.8M</strong>
+                <span>Annual savings</span>
+              </div>
+              <div class="result-stat">
+                <strong>99.7%</strong>
+                <span>Accuracy rate</span>
+              </div>
+            </div>
+            
+            <blockquote>
+              <p>"Vertex AI transformed our accounts payable department. What used to take a team of 12 people now runs automatically with 2 people overseeing exceptions. The ROI was immediate."</p>
+              <cite>— Michael Chen, CFO at Acme Corp</cite>
+            </blockquote>
+            
+            <a href="/case-studies/acme-corp" class="case-study-link">Read Full Case Study →</a>
+          </article>
+          
+          <article class="case-study-card">
+            <div class="case-study-header">
+              <img src="logo-healthtech.svg" alt="HealthTech Solutions" width="120" height="40" loading="lazy">
+              <span class="case-study-industry">Healthcare</span>
+            </div>
+            
+            <h3>Streamlining Patient Onboarding</h3>
+            
+            <div class="case-study-results-compact">
+              <div class="result-stat-compact">
+                <strong>70%</strong>
+                <span>Time reduction</span>
+              </div>
+              <div class="result-stat-compact">
+                <strong>3x</strong>
+                <span>More patients served</span>
+              </div>
+            </div>
+            
+            <p class="case-study-quote">"Patient satisfaction scores increased by 40% after implementing Vertex AI."</p>
+            
+            <a href="/case-studies/healthtech" class="case-study-link">Read Case Study →</a>
+          </article>
+          
+          <article class="case-study-card">
+            <div class="case-study-header">
+              <img src="logo-retail-plus.svg" alt="RetailPlus" width="120" height="40" loading="lazy">
+              <span class="case-study-industry">Retail</span>
+            </div>
+            
+            <h3>Automating Supply Chain Operations</h3>
+            
+            <div class="case-study-results-compact">
+              <div class="result-stat-compact">
+                <strong>85%</strong>
+                <span>Order accuracy</span>
+              </div>
+              <div class="result-stat-compact">
+                <strong>$3.2M</strong>
+                <span>Cost savings</span>
+              </div>
+            </div>
+            
+            <p class="case-study-quote">"We eliminated stockouts and reduced excess inventory by 60%."</p>
+            
+            <a href="/case-studies/retailplus" class="case-study-link">Read Case Study →</a>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="company" class="company-section">
+      <div class="container">
+        <div class="company-intro">
+          <h2>Built by automation experts. Backed by world-class investors.</h2>
+          <p>We're on a mission to eliminate tedious work and let people focus on what matters most.</p>
+        </div>
+        
+        <div class="company-grid">
+          <div class="company-block">
+            <h3>Our Story</h3>
+            <p>Founded in 2021 by a team of AI researchers and enterprise software veterans, Vertex AI was born from a simple insight: businesses waste billions on work that machines can do better.</p>
+            
+            <p>After seeing firsthand how Fortune 500 companies struggled with manual processes, we set out to build AI that actually works—accurate, reliable, and easy to use.</p>
+            
+            <p>Today, we serve 500+ enterprise customers across industries, processing over 10 million automated workflows daily.</p>
+          </div>
+          
+          <div class="company-stats-grid">
+            <div class="company-stat">
+              <strong>500+</strong>
+              <span>Enterprise customers</span>
+            </div>
+            <div class="company-stat">
+              <strong>$45M</strong>
+              <span>Series B funding</span>
+            </div>
+            <div class="company-stat">
+              <strong>120</strong>
+              <span>Team members</span>
+            </div>
+            <div class="company-stat">
+              <strong>10M+</strong>
+              <span>Workflows daily</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="investors-section">
+      <div class="container">
+        <h2>Backed by Leading Investors</h2>
+        
+        <div class="investors-grid">
+          <div class="investor-logo">
+            <img src="investor-sequoia.svg" alt="Sequoia Capital" width="140" height="50" loading="lazy">
+          </div>
+          <div class="investor-logo">
+            <img src="investor-andreessen.svg" alt="Andreessen Horowitz" width="140" height="50" loading="lazy">
+          </div>
+          <div class="investor-logo">
+            <img src="investor-accel.svg" alt="Accel Partners" width="120" height="50" loading="lazy">
+          </div>
+          <div class="investor-logo">
+            <img src="investor-yc.svg" alt="Y Combinator" width="80" height="50" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="team-section">
+      <div class="container">
+        <h2>Meet the Team</h2>
+        <p class="team-intro">Led by experienced founders with deep expertise in AI and enterprise software</p>
+        
+        <div class="team-grid">
+          <article class="team-member">
+            <img src="team-sarah-williams.jpg" alt="Sarah Williams" width="200" height="200" loading="lazy">
+            <h3>Sarah Williams</h3>
+            <p class="team-role">Co-founder & CEO</p>
+            <p class="team-bio">Former VP Product at Salesforce. Stanford CS PhD. 15 years building enterprise software.</p>
+            <a href="https://linkedin.com/in/sarahwilliams" class="team-social" aria-label="Sarah Williams on LinkedIn">LinkedIn</a>
+          </article>
+          
+          <article class="team-member">
+            <img src="team-david-chen.jpg" alt="David Chen" width="200" height="200" loading="lazy">
+            <h3>David Chen</h3>
+            <p class="team-role">Co-founder & CTO</p>
+            <p class="team-bio">AI researcher from MIT. Published 30+ papers on NLP. Led ML teams at Google Brain.</p>
+            <a href="https://linkedin.com/in/davidchen" class="team-social" aria-label="David Chen on LinkedIn">LinkedIn</a>
+          </article>
+          
+          <article class="team-member">
+            <img src="team-priya-patel.jpg" alt="Priya Patel" width="200" height="200" loading="lazy">
+            <h3>Priya Patel</h3>
+            <p class="team-role">VP of Engineering</p>
+            <p class="team-bio">Built scalable systems at Uber and Stripe. Berkeley EECS. Loves distributed systems.</p>
+            <a href="https://linkedin.com/in/priyapatel" class="team-social" aria-label="Priya Patel on LinkedIn">LinkedIn</a>
+          </article>
+          
+          <article class="team-member">
+            <img src="team-marcus-johnson.jpg" alt="Marcus Johnson" width="200" height="200" loading="lazy">
+            <h3>Marcus Johnson</h3>
+            <p class="team-role">VP of Sales</p>
+            <p class="team-bio">20 years in enterprise sales. Former SVP at Oracle. Closed 100+ Fortune 500 deals.</p>
+            <a href="https://linkedin.com/in/marcusjohnson" class="team-social" aria-label="Marcus Johnson on LinkedIn">LinkedIn</a>
+          </article>
+        </div>
+        
+        <div class="careers-cta">
+          <h3>Join Our Team</h3>
+          <p>We're hiring world-class talent across engineering, product, sales, and operations.</p>
+          <a href="/careers" class="btn btn-primary">View Open Positions</a>
+        </div>
+      </div>
+    </section>
+    
+    <section class="press-mentions-section">
+      <div class="container">
+        <h2>In the News</h2>
+        
+        <div class="press-articles">
+          <article class="press-article">
+            <img src="press-techcrunch-logo.svg" alt="TechCrunch" width="120" height="30" loading="lazy">
+            <h3>"Vertex AI raises $45M to automate enterprise workflows"</h3>
+            <p><time datetime="2026-01-15">January 15, 2026</time></p>
+            <a href="https://techcrunch.com/vertex-ai-series-b">Read Article →</a>
+          </article>
+          
+          <article class="press-article">
+            <img src="press-forbes-logo.svg" alt="Forbes" width="100" height="30" loading="lazy">
+            <h3>"The AI Startups Transforming Enterprise Software"</h3>
+            <p><time datetime="2025-11-20">November 20, 2025</time></p>
+            <a href="https://forbes.com/ai-startups-2025">Read Article →</a>
+          </article>
+          
+          <article class="press-article">
+            <img src="press-wsjlogo.svg" alt="Wall Street Journal" width="120" height="30" loading="lazy">
+            <h3>"How AI Is Reshaping Corporate Back Offices"</h3>
+            <p><time datetime="2025-09-08">September 8, 2025</time></p>
+            <a href="https://wsj.com/ai-back-offices">Read Article →</a>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="final-cta-section">
+      <div class="container">
+        <div class="final-cta-content">
+          <h2>Ready to automate your business?</h2>
+          <p>See how Vertex AI can transform your workflows in a personalized demo.</p>
+          
+          <form class="demo-request-form" action="/request-demo" method="POST">
+            <div class="form-row">
+              <div class="form-group">
+                <label for="demo-name">Full Name *</label>
+                <input type="text" id="demo-name" name="name" required autocomplete="name">
+              </div>
+              
+              <div class="form-group">
+                <label for="demo-email">Work Email *</label>
+                <input type="email" id="demo-email" name="email" required autocomplete="email">
+              </div>
+            </div>
+            
+            <div class="form-row">
+              <div class="form-group">
+                <label for="demo-company">Company *</label>
+                <input type="text" id="demo-company" name="company" required autocomplete="organization">
+              </div>
+              
+              <div class="form-group">
+                <label for="demo-size">Company Size *</label>
+                <select id="demo-size" name="company_size" required>
+                  <option value="">Select size...</option>
+                  <option value="1-50">1-50 employees</option>
+                  <option value="51-200">51-200 employees</option>
+                  <option value="201-1000">201-1,000 employees</option>
+                  <option value="1001-5000">1,001-5,000 employees</option>
+                  <option value="5001+">5,001+ employees</option>
+                </select>
+              </div>
+            </div>
+            
+            <div class="form-group">
+              <label for="demo-use-case">Tell us about your automation needs</label>
+              <textarea id="demo-use-case" name="use_case" rows="4" placeholder="E.g., We process 10,000 invoices monthly and want to automate approval workflows..."></textarea>
+            </div>
+            
+            <button type="submit" class="btn btn-primary btn-large">Request Demo</button>
+            
+            <p class="form-note"><small>We'll respond within 24 hours to schedule your personalized demo</small></p>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <img src="vertex-logo-white.svg" alt="Vertex AI" width="130" height="40" loading="lazy">
+          <p>Automate your business.<br>Amplify your impact.</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://twitter.com/vertexai" aria-label="Twitter">Twitter</a>
+            <a href="https://linkedin.com/company/vertexai" aria-label="LinkedIn">LinkedIn</a>
+            <a href="https://youtube.com/vertexai" aria-label="YouTube">YouTube</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/platform">Platform</a></li>
+            <li><a href="/integrations">Integrations</a></li>
+            <li><a href="/security">Security</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/demo">Request Demo</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Solutions</h3>
+          <ul>
+            <li><a href="/solutions/finance">Finance & Accounting</a></li>
+            <li><a href="/solutions/hr">Human Resources</a></li>
+            <li><a href="/solutions/operations">Operations</a></li>
+            <li><a href="/solutions/customer-service">Customer Service</a></li>
+            <li><a href="/case-studies">Case Studies</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/blog">Blog</a></li>
+            <li><a href="/documentation">Documentation</a></li>
+            <li><a href="/api">API Reference</a></li>
+            <li><a href="/guides">Guides</a></li>
+            <li><a href="/support">Support</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/press">Press</a></li>
+            <li><a href="/partners">Partners</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Vertex AI, Inc. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Service</a>
+          <a href="/security">Security</a>
+          <a href="/compliance">Compliance</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/travel-destination-guide.html b/skills/html-coder/assets/travel-destination-guide.html
new file mode 100644
index 000000000..152c6e932
--- /dev/null
+++ b/skills/html-coder/assets/travel-destination-guide.html
@@ -0,0 +1,746 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Complete travel guide to Lisbon, Portugal. Discover the best things to do, where to stay, what to eat, and insider tips for visiting Portugal's vibrant capital.">
+  <meta property="og:title" content="Lisbon Travel Guide - Complete Guide to Portugal's Capital">
+  <meta property="og:description" content="Your ultimate guide to exploring Lisbon: attractions, food, hotels, and local tips">
+  <meta property="og:image" content="og-lisbon.jpg">
+  <meta property="og:type" content="article">
+  <title>Lisbon Travel Guide: Complete Guide to Portugal's Capital | 2026</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header-guide">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Travel Guides</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/destinations">Destinations</a></li>
+          <li><a href="/guides">All Guides</a></li>
+          <li><a href="/blog">Blog</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <button class="btn-link" onclick="openSearch()">🔍 Search</button>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <article class="destination-guide">
+      <section class="hero-guide">
+        <div class="hero-guide-image">
+          <img src="lisbon-hero.jpg" alt="Colorful buildings and tram in Lisbon's Alfama district" width="1920" height="800" loading="eager">
+        </div>
+        
+        <div class="container">
+          <div class="hero-guide-content">
+            <div class="destination-meta">
+              <span class="location-badge">🇵🇹 Portugal</span>
+              <span class="updated-date">Updated March 2026</span>
+            </div>
+            
+            <h1>The Complete Lisbon Travel Guide</h1>
+            <p class="hero-subtitle">Your ultimate guide to exploring Portugal's sun-soaked capital—from historic neighborhoods to world-class cuisine</p>
+            
+            <div class="author-info">
+              <img src="author-sofia.jpg" alt="" width="48" height="48" loading="eager">
+              <div>
+                <p>By <strong>Sofia Martinez</strong></p>
+                <p>Lisbon resident & travel writer • 15 min read</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <div class="guide-nav-sticky" id="guide-nav">
+        <div class="container">
+          <nav class="guide-nav" aria-label="Guide sections">
+            <a href="#overview">Overview</a>
+            <a href="#best-time">Best Time</a>
+            <a href="#attractions">Top Attractions</a>
+            <a href="#neighborhoods">Neighborhoods</a>
+            <a href="#food">Food & Drink</a>
+            <a href="#where-to-stay">Where to Stay</a>
+            <a href="#getting-around">Getting Around</a>
+            <a href="#itineraries">Itineraries</a>
+            <a href="#tips">Local Tips</a>
+          </nav>
+        </div>
+      </div>
+      
+      <div class="container">
+        <div class="guide-layout">
+          <div class="guide-content">
+            <section id="overview" class="guide-section">
+              <h2>Why Visit Lisbon?</h2>
+              
+              <p class="lead-paragraph">Lisbon is having a moment—and for good reason. Portugal's capital seamlessly blends old-world charm with contemporary cool, offering sun-drenched days, incredible seafood, historic neighborhoods draped in azulejo tiles, and some of Europe's best nightlife.</p>
+              
+              <p>Built across seven hills overlooking the Tagus River, Lisbon rewards wanderers with stunning viewpoints (miradouros), vintage yellow trams rattling through narrow streets, and a laid-back vibe that's rare among European capitals. Whether you're here for the history, the food, the beaches, or the culture, Lisbon delivers.</p>
+              
+              <div class="quick-facts">
+                <h3>Quick Facts</h3>
+                <dl class="facts-grid">
+                  <div class="fact-item">
+                    <dt>Population:</dt>
+                    <dd>505,000 (2.9M metro area)</dd>
+                  </div>
+                  
+                  <div class="fact-item">
+                    <dt>Language:</dt>
+                    <dd>Portuguese (English widely spoken)</dd>
+                  </div>
+                  
+                  <div class="fact-item">
+                    <dt>Currency:</dt>
+                    <dd>Euro (€)</dd>
+                  </div>
+                  
+                  <div class="fact-item">
+                    <dt>Time Zone:</dt>
+                    <dd>WET (UTC+0) / WEST (UTC+1 summer)</dd>
+                  </div>
+                  
+                  <div class="fact-item">
+                    <dt>Best For:</dt>
+                    <dd>History, food, beaches, nightlife</dd>
+                  </div>
+                  
+                  <div class="fact-item">
+                    <dt>Budget:</dt>
+                    <dd>€80-150/day (mid-range traveler)</dd>
+                  </div>
+                </dl>
+              </div>
+            </section>
+            
+            <section id="best-time" class="guide-section">
+              <h2>When to Visit Lisbon</h2>
+              
+              <p>Lisbon enjoys 300+ days of sunshine annually, making it a year-round destination. That said, timing matters for crowds and weather.</p>
+              
+              <div class="seasons-grid">
+                <article class="season-card">
+                  <h3>🌸 Spring (March-May)</h3>
+                  <p class="season-verdict"><strong>Best Time to Visit</strong></p>
+                  <p>Perfect weather (60-70°F), fewer crowds, jacaranda trees blooming, and reasonable prices. April and May are ideal.</p>
+                  
+                  <ul class="season-pros-cons">
+                    <li class="pro">✓ Beautiful weather</li>
+                    <li class="pro">✓ Fewer tourists</li>
+                    <li class="pro">✓ Lower prices</li>
+                    <li class="con">✗ Can be rainy in March</li>
+                  </ul>
+                </article>
+                
+                <article class="season-card">
+                  <h3>☀️ Summer (June-August)</h3>
+                  <p class="season-verdict"><strong>Peak Season</strong></p>
+                  <p>Hot and sunny (75-85°F), perfect beach weather. Busiest and most expensive time. Book accommodations well in advance.</p>
+                  
+                  <ul class="season-pros-cons">
+                    <li class="pro">✓ Best beach weather</li>
+                    <li class="pro">✓ Long days (sunset at 9pm)</li>
+                    <li class="pro">✓ Festival season</li>
+                    <li class="con">✗ Crowded and expensive</li>
+                    <li class="con">✗ Can be very hot</li>
+                  </ul>
+                </article>
+                
+                <article class="season-card">
+                  <h3>🍂 Fall (September-November)</h3>
+                  <p class="season-verdict"><strong>Excellent Choice</strong></p>
+                  <p>September is still warm (70-75°F), October is perfect, November gets rainy. Great shoulder season with fewer crowds.</p>
+                  
+                  <ul class="season-pros-cons">
+                    <li class="pro">✓ Pleasant temperatures</li>
+                    <li class="pro">✓ Fewer tourists</li>
+                    <li class="pro">✓ Ocean still warm in Sept</li>
+                    <li class="con">✗ Rain increases in Nov</li>
+                  </ul>
+                </article>
+                
+                <article class="season-card">
+                  <h3>❄️ Winter (December-February)</h3>
+                  <p class="season-verdict"><strong>Budget-Friendly</strong></p>
+                  <p>Mild (50-60°F) but rainy. Quietest time with lowest prices. Still enjoyable for city exploration and indoor activities.</p>
+                  
+                  <ul class="season-pros-cons">
+                    <li class="pro">✓ Lowest prices</li>
+                    <li class="pro">✓ No crowds</li>
+                    <li class="pro">✓ Cozy cafés and museums</li>
+                    <li class="con">✗ Rainy and gray</li>
+                    <li class="con">✗ Not beach weather</li>
+                  </ul>
+                </article>
+              </div>
+            </section>
+            
+            <section id="attractions" class="guide-section">
+              <h2>Top Attractions & Things to Do</h2>
+              
+              <div class="attractions-list">
+                <article class="attraction-item">
+                  <div class="attraction-image">
+                    <img src="attraction-belem-tower.jpg" alt="Belém Tower fortress on the Tagus River" width="400" height="300" loading="lazy">
+                  </div>
+                  
+                  <div class="attraction-content">
+                    <div class="attraction-header">
+                      <h3>Belém Tower & Jerónimos Monastery</h3>
+                      <span class="attraction-rating">★★★★★</span>
+                    </div>
+                    
+                    <p>These UNESCO World Heritage sites showcase Portugal's maritime glory. The ornate Manueline architecture is stunning, and the monastery's cloister is peaceful perfection.</p>
+                    
+                    <div class="attraction-details">
+                      <p><strong>Location:</strong> Belém district</p>
+                      <p><strong>Cost:</strong> €12 (combo ticket)</p>
+                      <p><strong>Time needed:</strong> 2-3 hours</p>
+                      <p><strong>Pro tip:</strong> Arrive early to beat crowds, then grab a pastel de nata at Pastéis de Belém</p>
+                    </div>
+                  </div>
+                </article>
+                
+                <article class="attraction-item">
+                  <div class="attraction-image">
+                    <img src="attraction-alfama.jpg" alt="Narrow cobblestone streets of Alfama neighborhood" width="400" height="300" loading="lazy">
+                  </div>
+                  
+                  <div class="attraction-content">
+                    <div class="attraction-header">
+                      <h3>Wander Alfama's Maze</h3>
+                      <span class="attraction-rating">★★★★★</span>
+                    </div>
+                    
+                    <p>Lisbon's oldest neighborhood is a labyrinth of steep alleys, hidden squares, and fado music drifting from taverns. Get lost on purpose—it's the best way to experience Alfama.</p>
+                    
+                    <div class="attraction-details">
+                      <p><strong>Location:</strong> Alfama district</p>
+                      <p><strong>Cost:</strong> Free (just walking)</p>
+                      <p><strong>Time needed:</strong> Half day</p>
+                      <p><strong>Pro tip:</strong> Start at São Jorge Castle and wind down to the waterfront</p>
+                    </div>
+                  </div>
+                </article>
+                
+                <article class="attraction-item">
+                  <div class="attraction-image">
+                    <img src="attraction-tram28.jpg" alt="Yellow vintage tram 28 on narrow street" width="400" height="300" loading="lazy">
+                  </div>
+                  
+                  <div class="attraction-content">
+                    <div class="attraction-header">
+                      <h3>Ride Tram 28</h3>
+                      <span class="attraction-rating">★★★★☆</span>
+                    </div>
+                    
+                    <p>The iconic yellow tram rattles through Lisbon's historic neighborhoods, climbing steep hills and squeezing through impossibly narrow streets. It's touristy but fun.</p>
+                    
+                    <div class="attraction-details">
+                      <p><strong>Route:</strong> Martim Moniz to Campo de Ourique</p>
+                      <p><strong>Cost:</strong> €3 (single ride)</p>
+                      <p><strong>Time needed:</strong> 40 minutes full route</p>
+                      <p><strong>Pro tip:</strong> Board early morning or late afternoon to avoid crowds</p>
+                    </div>
+                  </div>
+                </article>
+                
+                <article class="attraction-item">
+                  <div class="attraction-image">
+                    <img src="attraction-tile-museum.jpg" alt="Colorful Portuguese azulejo tiles display" width="400" height="300" loading="lazy">
+                  </div>
+                  
+                  <div class="attraction-content">
+                    <div class="attraction-header">
+                      <h3>National Tile Museum</h3>
+                      <span class="attraction-rating">★★★★☆</span>
+                    </div>
+                    
+                    <p>Portugal's iconic azulejo tiles get their moment. This underrated museum showcases 500 years of tile artistry in a beautiful former convent.</p>
+                    
+                    <div class="attraction-details">
+                      <p><strong>Location:</strong> Beato district</p>
+                      <p><strong>Cost:</strong> €5</p>
+                      <p><strong>Time needed:</strong> 1.5 hours</p>
+                      <p><strong>Pro tip:</strong> Don't miss the stunning blue-and-white capela (chapel)</p>
+                    </div>
+                  </div>
+                </article>
+                
+                <article class="attraction-item">
+                  <div class="attraction-image">
+                    <img src="attraction-sintra.jpg" alt="Colorful Pena Palace in Sintra mountains" width="400" height="300" loading="lazy">
+                  </div>
+                  
+                  <div class="attraction-content">
+                    <div class="attraction-header">
+                      <h3>Day Trip to Sintra</h3>
+                      <span class="attraction-rating">★★★★★</span>
+                    </div>
+                    
+                    <p>This fairy-tale town is 30 minutes from Lisbon and absolutely unmissable. Colorful palaces, mysterious quintas (estates), and forested hills create a magical atmosphere.</p>
+                    
+                    <div class="attraction-details">
+                      <p><strong>Distance:</strong> 30 min by train from Rossio</p>
+                      <p><strong>Must-see:</strong> Pena Palace, Quinta da Regaleira, Moorish Castle</p>
+                      <p><strong>Time needed:</strong> Full day</p>
+                      <p><strong>Pro tip:</strong> Book palace tickets online in advance to skip lines</p>
+                    </div>
+                  </div>
+                </article>
+              </div>
+              
+              <div class="more-attractions">
+                <h3>More Worth Your Time</h3>
+                <ul class="attractions-list-compact">
+                  <li><strong>LX Factory:</strong> Hip creative complex in converted industrial space (cafés, shops, street art)</li>
+                  <li><strong>Miradouros:</strong> Viewpoints scattered across the city—try Portas do Sol and Senhora do Monte</li>
+                  <li><strong>Time Out Market:</strong> Gourmet food court with Lisbon's best chefs under one roof</li>
+                  <li><strong>São Jorge Castle:</strong> Moorish castle with panoramic city views</li>
+                  <li><strong>Oceanário:</strong> One of Europe's best aquariums (great for families)</li>
+                  <li><strong>Beaches:</strong> Cascais and Costa da Caparica (30-45 min from center)</li>
+                </ul>
+              </div>
+            </section>
+            
+            <section id="neighborhoods" class="guide-section">
+              <h2>Lisbon's Neighborhoods</h2>
+              
+              <div class="neighborhoods-list">
+                <article class="neighborhood-card">
+                  <h3>🏛️ Alfama</h3>
+                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Historic, atmospheric, authentic</p>
+                  <p>Lisbon's oldest district survived the 1755 earthquake. Today it's a warren of steep streets, traditional fado houses, and local taverns. Touristy but charming.</p>
+                  <p><strong>Best for:</strong> History buffs, photographers, fado music lovers</p>
+                  <p><strong>Don't miss:</strong> São Jorge Castle, Feira da Ladra flea market (Tuesdays and Saturdays)</p>
+                </article>
+                
+                <article class="neighborhood-card">
+                  <h3>🎭 Bairro Alto</h3>
+                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Bohemian, nightlife hub, artsy</p>
+                  <p>By day: quirky shops and quiet streets. By night: Lisbon's party central with bars spilling onto cobblestones. The energy is infectious after 10pm.</p>
+                  <p><strong>Best for:</strong> Nightlife, bar hopping, young travelers</p>
+                  <p><strong>Don't miss:</strong> Sunset drinks with views, street parties on Pink Street</p>
+                </article>
+                
+                <article class="neighborhood-card">
+                  <h3>🌊 Belém</h3>
+                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Historical, spacious, monumental</p>
+                  <p>Where Portugal's Age of Discovery comes alive. Waterfront location with major monuments and the famous pastel de nata bakery.</p>
+                  <p><strong>Best for:</strong> History enthusiasts, families, monument lovers</p>
+                  <p><strong>Don't miss:</strong> Pastéis de Belém (arrive before 9am to avoid queues)</p>
+                </article>
+                
+                <article class="neighborhood-card">
+                  <h3>🛍️ Chiado & Baixa</h3>
+                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Elegant, commercial, central</p>
+                  <p>The downtown core. Baixa's grid streets (rebuilt after 1755 earthquake) lead to Chiado's elegant shopping district and literary cafés.</p>
+                  <p><strong>Best for:</strong> Shopping, central location, classic cafés</p>
+                  <p><strong>Don't miss:</strong> A Brasileira café, Santa Justa Lift viewpoint</p>
+                </article>
+                
+                <article class="neighborhood-card">
+                  <h3>🎨 Príncipe Real</h3>
+                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Trendy, LGBTQ+ friendly, upscale</p>
+                  <p>Lisbon's most fashionable neighborhood with concept stores, design shops, botanical garden, and excellent restaurants.</p>
+                  <p><strong>Best for:</strong> Foodies, design lovers, gay travelers</p>
+                  <p><strong>Don't miss:</strong> Weekend brunch scene, Jardim do Príncipe Real park</p>
+                </article>
+              </div>
+            </section>
+            
+            <section id="food" class="guide-section">
+              <h2>Food & Drink in Lisbon</h2>
+              
+              <p>Lisbon's food scene is having a renaissance. Traditional tasca (taverns) sit alongside innovative restaurants, while markets overflow with fresh seafood and produce.</p>
+              
+              <div class="must-try-foods">
+                <h3>Must-Try Dishes</h3>
+                
+                <div class="food-grid">
+                  <article class="food-card">
+                    <h4>Pastel de Nata</h4>
+                    <p>Custard tart with flaky pastry. Lisbon's iconic sweet. Best at Pastéis de Belém or Manteigaria.</p>
+                    <p class="food-price">€1-2 each</p>
+                  </article>
+                  
+                  <article class="food-card">
+                    <h4>Bacalhau</h4>
+                    <p>Salted cod prepared 1,000 ways. Try bacalhau à brás (shredded cod with eggs and potatoes).</p>
+                    <p class="food-price">€12-18</p>
+                  </article>
+                  
+                  <article class="food-card">
+                    <h4>Sardinhas Assadas</h4>
+                    <p>Grilled sardines, especially during June's Santo António festival. Simple and delicious.</p>
+                    <p class="food-price">€8-12</p>
+                  </article>
+                  
+                  <article class="food-card">
+                    <h4>Caldo Verde</h4>
+                    <p>Comforting kale and potato soup with chouriço sausage. Perfect starter.</p>
+                    <p class="food-price">€3-5</p>
+                  </article>
+                  
+                  <article class="food-card">
+                    <h4>Arroz de Marisco</h4>
+                    <p>Seafood rice—Portugal's answer to paella. Rich, tomatoey, loaded with shellfish.</p>
+                    <p class="food-price">€15-25</p>
+                  </article>
+                  
+                  <article class="food-card">
+                    <h4>Bifana</h4>
+                    <p>Pork sandwich with mustard sauce. The ultimate Portuguese street food.</p>
+                    <p class="food-price">€3-5</p>
+                  </article>
+                </div>
+              </div>
+              
+              <div class="restaurant-recommendations">
+                <h3>Where to Eat</h3>
+                
+                <ul class="restaurants-list">
+                  <li>
+                    <strong>Time Out Market (Mercado da Ribeira):</strong>
+                    <span>Gourmet food hall with 40+ vendors. Great for trying multiple dishes. €€</span>
+                  </li>
+                  
+                  <li>
+                    <strong>Cervejaria Ramiro:</strong>
+                    <span>Legendary seafood spot. Order the garlic prawns and prego (steak sandwich). Expect queues. €€€</span>
+                  </li>
+                  
+                  <li>
+                    <strong>Taberna da Rua das Flores:</strong>
+                    <span>Small plates with creative twists on Portuguese classics. Book ahead. €€</span>
+                  </li>
+                  
+                  <li>
+                    <strong>A Cevicheria:</strong>
+                    <span>Peruvian-Portuguese fusion. The ceviche is incredible. Tiny—reserve ahead. €€€</span>
+                  </li>
+                  
+                  <li>
+                    <strong>Solar dos Presuntos:</strong>
+                    <span>Traditional Portuguese in generous portions. Family-run since 1974. €€</span>
+                  </li>
+                  
+                  <li>
+                    <strong>Pastéis de Belém:</strong>
+                    <span>The pastel de nata mecca. Using the secret royal recipe since 1837. Go early. €</span>
+                  </li>
+                </ul>
+                
+                <p class="price-key"><small><strong>Price key:</strong> € = under €15 | €€ = €15-30 | €€€ = €30+</small></p>
+              </div>
+              
+              <div class="drinks-section">
+                <h3>What to Drink</h3>
+                <ul>
+                  <li><strong>Vinho Verde:</strong> "Green wine"—young, slightly fizzy white wine. Perfect on hot days.</li>
+                  <li><strong>Ginjinha:</strong> Sour cherry liqueur served in chocolate cups. Tourist trap but fun.</li>
+                  <li><strong>Port Wine:</strong> Sweet fortified wine from Porto. Try a tawny or vintage.</li>
+                  <li><strong>Super Bock / Sagres:</strong> Local beers. Ice-cold imperial (draft) is the way.</li>
+                  <li><strong>Bica:</strong> Portuguese espresso. Order "uma bica" at any café counter.</li>
+                </ul>
+              </div>
+            </section>
+            
+            <section id="where-to-stay" class="guide-section">
+              <h2>Where to Stay in Lisbon</h2>
+              
+              <p>Choose your neighborhood based on your priorities: nightlife (Bairro Alto), history (Alfama), shopping and transit (Baixa), or trendy vibes (Príncipe Real).</p>
+              
+              <div class="accommodation-tiers">
+                <article class="accom-tier">
+                  <h3>Budget (€40-80/night)</h3>
+                  <ul>
+                    <li><strong>The Independente Hostel:</strong> Hip hostel with rooftop bar in São Bento</li>
+                    <li><strong>Home Lisbon Hostel:</strong> Social atmosphere, great for solo travelers</li>
+                    <li><strong>Airbnb:</strong> Apartments in local neighborhoods (Intendente, Graça)</li>
+                  </ul>
+                </article>
+                
+                <article class="accom-tier">
+                  <h3>Mid-Range (€80-180/night)</h3>
+                  <ul>
+                    <li><strong>Memmo Alfama Hotel:</strong> Design hotel with river views in Alfama</li>
+                    <li><strong>The Lumiares Hotel:</strong> Boutique hotel in Bairro Alto</li>
+                    <li><strong>My Story Hotel Rossio:</strong> Central location, rooftop terrace</li>
+                  </ul>
+                </article>
+                
+                <article class="accom-tier">
+                  <h3>Luxury (€180+/night)</h3>
+                  <ul>
+                    <li><strong>Memmo Príncipe Real:</strong> Chic hotel with rooftop pool and city views</li>
+                    <li><strong>Four Seasons Ritz Lisbon:</strong> Classic luxury in Parque Eduardo VII</li>
+                    <li><strong>Palácio Belmonte:</strong> Palace hotel in Alfama (splurge-worthy)</li>
+                  </ul>
+                </article>
+              </div>
+            </section>
+            
+            <section id="getting-around" class="guide-section">
+              <h2>Getting Around Lisbon</h2>
+              
+              <p>Lisbon is hilly—those seven hills are no joke. Combine walking, trams, metro, and the occasional Uber for efficient exploration.</p>
+              
+              <div class="transport-options">
+                <article class="transport-card">
+                  <h3>🚇 Metro</h3>
+                  <p>Fast and efficient. Four lines cover major areas. Buy a rechargeable Viva Viagem card (€0.50) and load with credit.</p>
+                  <p><strong>Cost:</strong> €1.50/ride or €6.80/day pass</p>
+                </article>
+                
+                <article class="transport-card">
+                  <h3>🚋 Trams</h3>
+                  <p>Iconic but slow. Tram 28 is touristy but fun. Use other trams (12, 15, 18, 25) for practical transportation.</p>
+                  <p><strong>Cost:</strong> €3 onboard, €1.50 with Viva Viagem</p>
+                </article>
+                
+                <article class="transport-card">
+                  <h3>🚌 Buses</h3>
+                  <p>Extensive network but confusing routes. Use Google Maps for directions.</p>
+                  <p><strong>Cost:</strong> €2 onboard, €1.50 with Viva Viagem</p>
+                </article>
+                
+                <article class="transport-card">
+                  <h3>🚕 Taxis & Uber</h3>
+                  <p>Taxis are cheap by European standards. Uber is widely available and often cheaper.</p>
+                  <p><strong>Cost:</strong> €5-15 for most rides within city</p>
+                </article>
+                
+                <article class="transport-card">
+                  <h3>🚶 Walking</h3>
+                  <p>The best way to discover hidden corners. Wear comfortable shoes—those cobblestones and hills are real.</p>
+                  <p><strong>Cost:</strong> Free (just blisters)</p>
+                </article>
+              </div>
+              
+              <div class="airport-info">
+                <h3>From the Airport</h3>
+                <ul>
+                  <li><strong>Metro:</strong> Red Line to city center (20 min, €1.50)</li>
+                  <li><strong>Aerobus:</strong> Direct to hotels and main squares (30 min, €4)</li>
+                  <li><strong>Taxi/Uber:</strong> Fixed rate to center (20 min, €15-25)</li>
+                </ul>
+              </div>
+            </section>
+            
+            <section id="itineraries" class="guide-section">
+              <h2>Sample Itineraries</h2>
+              
+              <div class="itinerary-tabs">
+                <article class="itinerary-card">
+                  <h3>3 Days in Lisbon</h3>
+                  
+                  <div class="itinerary-day">
+                    <h4>Day 1: Historic Lisbon</h4>
+                    <ul>
+                      <li>Morning: Explore Alfama, visit São Jorge Castle</li>
+                      <li>Lunch: Time Out Market</li>
+                      <li>Afternoon: Baixa and Chiado shopping</li>
+                      <li>Evening: Fado dinner in Alfama</li>
+                    </ul>
+                  </div>
+                  
+                  <div class="itinerary-day">
+                    <h4>Day 2: Belém & Waterfront</h4>
+                    <ul>
+                      <li>Morning: Jerónimos Monastery, Belém Tower, pastel de nata</li>
+                      <li>Lunch: By the waterfront in Belém</li>
+                      <li>Afternoon: LX Factory, walk along river</li>
+                      <li>Evening: Sunset at Miradouro de Santa Catarina, dinner in Bairro Alto</li>
+                    </ul>
+                  </div>
+                  
+                  <div class="itinerary-day">
+                    <h4>Day 3: Day Trip to Sintra</h4>
+                    <ul>
+                      <li>Full day: Pena Palace, Quinta da Regaleira, Sintra town</li>
+                      <li>Option: Add Cascais beach on return</li>
+                      <li>Evening: Back to Lisbon for final dinner</li>
+                    </ul>
+                  </div>
+                </article>
+              </div>
+            </section>
+            
+            <section id="tips" class="guide-section">
+              <h2>Local Tips & Need-to-Knows</h2>
+              
+              <div class="tips-grid">
+                <article class="tip-card">
+                  <h3>💰 Money Matters</h3>
+                  <ul>
+                    <li>Portugal uses euros (€)</li>
+                    <li>Cards widely accepted, but carry cash for small purchases</li>
+                    <li>Tipping: 5-10% at restaurants (not obligatory)</li>
+                    <li>Many places add "couvert" (bread/olives)—you can decline</li>
+                  </ul>
+                </article>
+                
+                <article class="tip-card">
+                  <h3>🗣️ Language</h3>
+                  <ul>
+                    <li>Portuguese is the official language</li>
+                    <li>English widely spoken in tourist areas</li>
+                    <li>Learn basics: "Olá" (hello), "Obrigado/a" (thank you), "Desculpe" (excuse me)</li>
+                    <li>"Não falo português" = I don't speak Portuguese</li>
+                  </ul>
+                </article>
+                
+                <article class="tip-card">
+                  <h3>⚡ Quick Facts</h3>
+                  <ul>
+                    <li>Outlets: Type C/F plugs (European two-pin)</li>
+                    <li>Water: Tap water is safe to drink</li>
+                    <li>WiFi: Available in most cafés and hotels</li>
+                    <li>Safety: Very safe city, but watch for pickpockets in crowded areas</li>
+                  </ul>
+                </article>
+                
+                <article class="tip-card">
+                  <h3>👟 Comfort Tips</h3>
+                  <ul>
+                    <li>Wear comfortable walking shoes—cobblestones and hills!</li>
+                    <li>Sunscreen essential (even in winter)</li>
+                    <li>Carry water bottle</li>
+                    <li>Download offline Google Maps</li>
+                  </ul>
+                </article>
+              </div>
+              
+              <div class="insider-tips">
+                <h3>Insider Secrets</h3>
+                <ul class="insider-list">
+                  <li>🕐 <strong>Dinner timing:</strong> Portuguese eat late (9-10pm). Restaurants open around 7:30pm.</li>
+                  <li>🚋 <strong>Tram hack:</strong> Take tram 28 from Martim Moniz early morning when it's empty.</li>
+                  <li>📸 <strong>Best viewpoints:</strong> Miradouro da Senhora do Monte (sunset), Portas do Sol (photos), São Pedro de Alcântara (central).</li>
+                  <li>🎵 <strong>Free fado:</strong> Skip tourist traps—hear authentic fado at Tasca do Chico (Bairro Alto) for price of a drink.</li>
+                  <li>🍷 <strong>Wine tip:</strong> Buy wine at supermarkets (€3-8 for excellent bottles). Restaurants mark up 200-300%.</li>
+                  <li>🏖️ <strong>Beach day:</strong> Skip crowded Cascais—take ferry to Costa da Caparica for local vibe.</li>
+                </ul>
+              </div>
+            </section>
+            
+            <section class="guide-footer-cta">
+              <h2>Ready to Explore Lisbon?</h2>
+              <p>This guide just scratches the surface. The best way to experience Lisbon is to wander, get lost, talk to locals, and embrace the unexpected.</p>
+              
+              <div class="cta-buttons">
+                <a href="/book-flight-lisbon" class="btn btn-primary">Find Flights to Lisbon</a>
+                <a href="/lisbon-hotels" class="btn btn-outline">Browse Hotels</a>
+              </div>
+            </section>
+          </div>
+          
+          <aside class="guide-sidebar">
+            <div class="sidebar-sticky">
+              <div class="quick-links-box">
+                <h3>Quick Links</h3>
+                <ul>
+                  <li><a href="#overview">Overview</a></li>
+                  <li><a href="#best-time">Best Time to Visit</a></li>
+                  <li><a href="#attractions">Top Attractions</a></li>
+                  <li><a href="#neighborhoods">Neighborhoods</a></li>
+                  <li><a href="#food">Food & Drink</a></li>
+                  <li><a href="#where-to-stay">Where to Stay</a></li>
+                  <li><a href="#getting-around">Getting Around</a></li>
+                  <li><a href="#itineraries">Itineraries</a></li>
+                  <li><a href="#tips">Local Tips</a></li>
+                </ul>
+              </div>
+              
+              <div class="related-guides-box">
+                <h3>Related Guides</h3>
+                <ul>
+                  <li><a href="/guides/porto">Porto Travel Guide</a></li>
+                  <li><a href="/guides/algarve">Algarve Beaches Guide</a></li>
+                  <li><a href="/guides/sintra">Sintra Day Trip Guide</a></li>
+                  <li><a href="/guides/portugal-itinerary">2-Week Portugal Itinerary</a></li>
+                </ul>
+              </div>
+              
+              <div class="newsletter-box">
+                <h3>Get Travel Tips</h3>
+                <p>Weekly destination guides and travel hacks in your inbox</p>
+                
+                <form class="sidebar-newsletter-form" action="/newsletter" method="POST">
+                  <label for="sidebar-email" class="visually-hidden">Email address</label>
+                  <input type="email" id="sidebar-email" name="email" placeholder="Your email" required autocomplete="email">
+                  <button type="submit" class="btn btn-primary">Subscribe</button>
+                </form>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </article>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Travel Guides</h3>
+          <p>In-depth destination guides written by locals and travel experts</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Popular Guides</h3>
+          <ul>
+            <li><a href="/guides/paris">Paris</a></li>
+            <li><a href="/guides/tokyo">Tokyo</a></li>
+            <li><a href="/guides/barcelona">Barcelona</a></li>
+            <li><a href="/guides/new-york">New York</a></li>
+            <li><a href="/guides">All Destinations</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/blog">Travel Blog</a></li>
+            <li><a href="/packing-lists">Packing Lists</a></li>
+            <li><a href="/travel-tips">Travel Tips</a></li>
+            <li><a href="/about">About Us</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Follow Us</h3>
+          <div class="social-links">
+            <a href="https://instagram.com/travelguides" aria-label="Instagram">Instagram</a>
+            <a href="https://pinterest.com/travelguides" aria-label="Pinterest">Pinterest</a>
+            <a href="https://twitter.com/travelguides" aria-label="Twitter">Twitter</a>
+          </div>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Travel Guides. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+          <a href="/contact">Contact</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="guide.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/travel-hotel.html b/skills/html-coder/assets/travel-hotel.html
new file mode 100644
index 000000000..86d20d976
--- /dev/null
+++ b/skills/html-coder/assets/travel-hotel.html
@@ -0,0 +1,681 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="The Grand Marina Hotel - Luxury beachfront hotel in Miami Beach. Experience world-class service, stunning ocean views, and exclusive amenities.">
+  <meta property="og:title" content="The Grand Marina Hotel - Luxury Beachfront Resort">
+  <meta property="og:description" content="Five-star luxury on Miami's most beautiful beach">
+  <meta property="og:image" content="og-hotel.jpg">
+  <meta property="og:type" content="website">
+  <title>The Grand Marina Hotel - Luxury Beachfront Resort | Miami Beach</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header-hotel">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">The Grand Marina</a>
+        
+        <ul class="nav-menu">
+          <li><a href="#rooms">Rooms & Suites</a></li>
+          <li><a href="#amenities">Amenities</a></li>
+          <li><a href="#dining">Dining</a></li>
+          <li><a href="#spa">Spa</a></li>
+          <li><a href="#events">Events</a></li>
+          <li><a href="#location">Location</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="tel:+13055551234" class="btn-link">📞 (305) 555-1234</a>
+          <a href="#book" class="btn btn-primary">Book Now</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-hotel">
+      <div class="hero-hotel-background">
+        <img src="hero-ocean-view.jpg" alt="Luxury hotel overlooking pristine Miami Beach with turquoise water" width="1920" height="900" loading="eager">
+      </div>
+      
+      <div class="hero-hotel-content">
+        <h1>Escape to Paradise</h1>
+        <p class="hero-subtitle">Where luxury meets the sea</p>
+        <a href="#book" class="btn btn-primary btn-large">Reserve Your Stay</a>
+      </div>
+    </section>
+    
+    <section class="quick-booking-bar" id="book">
+      <div class="container">
+        <form class="booking-form" action="/book" method="POST">
+          <div class="form-group">
+            <label for="check-in">Check In</label>
+            <input type="date" id="check-in" name="check_in" required>
+          </div>
+          
+          <div class="form-group">
+            <label for="check-out">Check Out</label>
+            <input type="date" id="check-out" name="check_out" required>
+          </div>
+          
+          <div class="form-group">
+            <label for="guests">Guests</label>
+            <select id="guests" name="guests" required>
+              <option value="1">1 Guest</option>
+              <option value="2" selected>2 Guests</option>
+              <option value="3">3 Guests</option>
+              <option value="4">4 Guests</option>
+              <option value="5">5+ Guests</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="rooms">Rooms</label>
+            <select id="rooms" name="rooms" required>
+              <option value="1" selected>1 Room</option>
+              <option value="2">2 Rooms</option>
+              <option value="3">3 Rooms</option>
+              <option value="4">4+ Rooms</option>
+            </select>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large">Check Availability</button>
+        </form>
+      </div>
+    </section>
+    
+    <section class="hotel-intro-section">
+      <div class="container">
+        <div class="intro-content-center">
+          <h2>Welcome to The Grand Marina</h2>
+          <p class="intro-lead">Experience the pinnacle of luxury hospitality on Miami's most coveted stretch of beach. Our five-star resort offers 350 elegantly appointed rooms and suites, world-class dining, a rejuvenating spa, and unparalleled service.</p>
+          
+          <div class="hotel-highlights">
+            <div class="highlight">
+              <span class="highlight-icon">🏖️</span>
+              <strong>Private Beach</strong>
+              <span>Direct beachfront access</span>
+            </div>
+            
+            <div class="highlight">
+              <span class="highlight-icon">🍽️</span>
+              <strong>5 Restaurants</strong>
+              <span>Award-winning cuisine</span>
+            </div>
+            
+            <div class="highlight">
+              <span class="highlight-icon">💆</span>
+              <strong>Luxury Spa</strong>
+              <span>20,000 sq ft wellness</span>
+            </div>
+            
+            <div class="highlight">
+              <span class="highlight-icon">⭐</span>
+              <strong>5-Star Service</strong>
+              <span>Forbes Travel Guide rated</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="rooms" class="rooms-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Rooms & Suites</h2>
+          <p>Choose from our selection of luxury accommodations</p>
+        </div>
+        
+        <div class="rooms-grid">
+          <article class="room-card">
+            <img src="room-deluxe.jpg" alt="Deluxe Ocean View Room with king bed and balcony" width="600" height="400" loading="lazy">
+            
+            <div class="room-content">
+              <h3>Deluxe Ocean View</h3>
+              <p class="room-size">450 sq ft • King or 2 Queens</p>
+              
+              <p class="room-description">Spacious rooms with floor-to-ceiling windows overlooking the Atlantic Ocean. Private balcony, marble bathroom, and modern amenities.</p>
+              
+              <ul class="room-amenities">
+                <li>Ocean view balcony</li>
+                <li>55" Smart TV</li>
+                <li>Marble bathroom with rainfall shower</li>
+                <li>Premium bedding</li>
+                <li>Mini bar & Nespresso machine</li>
+                <li>Fast WiFi included</li>
+              </ul>
+              
+              <div class="room-footer">
+                <p class="room-price">From <strong>$425</strong>/night</p>
+                <a href="/book?room=deluxe-ocean" class="btn btn-outline">Reserve Room</a>
+              </div>
+            </div>
+          </article>
+          
+          <article class="room-card">
+            <img src="room-suite.jpg" alt="Executive Suite with separate living area and ocean view" width="600" height="400" loading="lazy">
+            
+            <div class="room-content">
+              <h3>Executive Suite</h3>
+              <p class="room-size">750 sq ft • King Bed + Sofa Bed</p>
+              
+              <p class="room-description">Sophisticated suite with separate living area, perfect for extended stays or families. Panoramic ocean views from multiple balconies.</p>
+              
+              <ul class="room-amenities">
+                <li>Separate living & bedroom areas</li>
+                <li>Two balconies with ocean views</li>
+                <li>Dining table for 4</li>
+                <li>Two 55" Smart TVs</li>
+                <li>Luxury bathroom with soaking tub</li>
+                <li>Kitchenette with mini-fridge</li>
+              </ul>
+              
+              <div class="room-footer">
+                <p class="room-price">From <strong>$725</strong>/night</p>
+                <a href="/book?room=executive-suite" class="btn btn-outline">Reserve Suite</a>
+              </div>
+            </div>
+          </article>
+          
+          <article class="room-card featured-room">
+            <div class="featured-badge">Most Popular</div>
+            <img src="room-penthouse.jpg" alt="Oceanfront Penthouse with wraparound terrace" width="600" height="400" loading="lazy">
+            
+            <div class="room-content">
+              <h3>Oceanfront Penthouse</h3>
+              <p class="room-size">1,500 sq ft • 2 Bedrooms</p>
+              
+              <p class="room-description">The ultimate in luxury living. Two-bedroom penthouse with wraparound terrace, private plunge pool, and breathtaking 180-degree ocean views.</p>
+              
+              <ul class="room-amenities">
+                <li>Private plunge pool on terrace</li>
+                <li>2 bedrooms with king beds</li>
+                <li>2.5 luxury bathrooms</li>
+                <li>Full kitchen with chef's appliances</li>
+                <li>Living & dining for 8</li>
+                <li>Dedicated concierge service</li>
+<!--                <li>In-room spa services</li>
+              </ul>
+              
+              <div class="room-footer">
+                <p class="room-price">From <strong>$1,850</strong>/night</p>
+                <a href="/book?room=penthouse" class="btn btn-primary">Reserve Penthouse</a>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="amenities" class="amenities-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>World-Class Amenities</h2>
+          <p>Everything you need for an unforgettable stay</p>
+        </div>
+        
+        <div class="amenities-showcase">
+          <article class="amenity-feature">
+            <div class="amenity-image">
+              <img src="amenity-pool.jpg" alt="Infinity pool overlooking the ocean at sunset" width="700" height="500" loading="lazy">
+            </div>
+            
+            <div class="amenity-content">
+              <h3>Infinity Pool & Beach Club</h3>
+              <p>Three temperature-controlled pools including a stunning infinity pool that appears to merge with the ocean. Private cabanas, poolside bar service, and direct beach access.</p>
+              
+              <ul class="amenity-details">
+                <li>3 heated pools (lap, family, infinity)</li>
+                <li>Private beach cabanas (reservable)</li>
+                <li>Beach butler service</li>
+                <li>Watersports equipment rentals</li>
+                <li>Poolside dining all day</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="amenity-feature reverse">
+            <div class="amenity-image">
+              <img src="amenity-fitness.jpg" alt="State-of-the-art fitness center with ocean views" width="700" height="500" loading="lazy">
+            </div>
+            
+            <div class="amenity-content">
+              <h3>Fitness & Wellness Center</h3>
+              <p>State-of-the-art fitness facility with the latest equipment, personal trainers, and daily classes. Open 24/7 with stunning ocean views.</p>
+              
+              <ul class="amenity-details">
+                <li>Cutting-edge cardio & strength equipment</li>
+                <li>Daily yoga & pilates classes</li>
+                <li>Personal training sessions</li>
+                <li>Outdoor training area</li>
+                <li>Meditation garden</li>
+              </ul>
+            </div>
+          </article>
+        </div>
+        
+        <div class="amenities-grid-compact">
+          <div class="amenity-item">
+            <h4>🎾 Tennis Courts</h4>
+            <p>Two championship courts with pro shop</p>
+          </div>
+          
+          <div class="amenity-item">
+            <h4>🧒 Kids Club</h4>
+            <p>Supervised activities for ages 4-12</p>
+          </div>
+          
+          <div class="amenity-item">
+            <h4>💼 Business Center</h4>
+            <p>Meeting rooms and high-speed internet</p>
+          </div>
+          
+          <div class="amenity-item">
+            <h4>🚗 Valet Parking</h4>
+            <p>Complimentary for hotel guests</p>
+          </div>
+          
+          <div class="amenity-item">
+            <h4>🛎️ Concierge</h4>
+            <p>24/7 assistance and recommendations</p>
+          </div>
+          
+          <div class="amenity-item">
+            <h4>🚖 Airport Shuttle</h4>
+            <p>Luxury transport to MIA (fee applies)</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="dining" class="dining-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Exceptional Dining Experiences</h2>
+          <p>Five distinctive restaurants and bars</p>
+        </div>
+        
+        <div class="restaurants-grid">
+          <article class="restaurant-card">
+            <img src="restaurant-azure.jpg" alt="Elegant fine dining restaurant with ocean views" width="600" height="400" loading="lazy">
+            
+            <div class="restaurant-content">
+              <h3>Azure</h3>
+              <p class="restaurant-type">Fine Dining • Seafood</p>
+              
+              <p>Our signature restaurant featuring contemporary coastal cuisine and an award-winning wine collection. Michelin-recommended.</p>
+              
+              <div class="restaurant-details">
+                <p><strong>Hours:</strong> Dinner 6:00 PM - 11:00 PM</p>
+                <p><strong>Dress Code:</strong> Resort Elegant</p>
+                <p><strong>Reservations:</strong> Required</p>
+              </div>
+              
+              <a href="/dining/azure" class="btn btn-outline">View Menu</a>
+            </div>
+          </article>
+          
+          <article class="restaurant-card">
+            <img src="restaurant-terrace.jpg" alt="Outdoor breakfast buffet on oceanfront terrace" width="600" height="400" loading="lazy">
+            
+            <div class="restaurant-content">
+              <h3>The Oceanfront Terrace</h3>
+              <p class="restaurant-type">All-Day Dining • International</p>
+              
+              <p>Casual indoor-outdoor dining with stunning ocean views. Breakfast buffet, lunch, and dinner featuring international favorites.</p>
+              
+              <div class="restaurant-details">
+                <p><strong>Hours:</strong> 7:00 AM - 11:00 PM daily</p>
+                <p><strong>Dress Code:</strong> Resort Casual</p>
+                <p><strong>Reservations:</strong> Walk-ins welcome</p>
+              </div>
+              
+              <a href="/dining/terrace" class="btn btn-outline">View Menu</a>
+            </div>
+          </article>
+          
+          <article class="restaurant-card">
+            <img src="restaurant-sushi.jpg" alt="Modern sushi bar with chef preparing fresh sashimi" width="600" height="400" loading="lazy">
+            
+            <div class="restaurant-content">
+              <h3>Kai Sushi & Sake Bar</h3>
+              <p class="restaurant-type">Japanese • Sushi Bar</p>
+              
+              <p>Authentic Japanese cuisine with premium sushi, sashimi, and an extensive sake selection. Watch our master chefs at work.</p>
+              
+              <div class="restaurant-details">
+                <p><strong>Hours:</strong> 5:30 PM - 10:30 PM</p>
+                <p><strong>Dress Code:</strong> Smart Casual</p>
+                <p><strong>Reservations:</strong> Recommended</p>
+              </div>
+              
+              <a href="/dining/kai" class="btn btn-outline">View Menu</a>
+            </div>
+          </article>
+          
+          <article class="restaurant-card">
+            <img src="bar-sunset.jpg" alt="Rooftop bar at sunset with cocktails" width="600" height="400" loading="lazy">
+            
+            <div class="restaurant-content">
+              <h3>Sunset Bar & Lounge</h3>
+              <p class="restaurant-type">Rooftop Bar • Cocktails</p>
+              
+              <p>Spectacular 18th-floor rooftop bar with panoramic views, craft cocktails, and live DJ on weekends.</p>
+              
+              <div class="restaurant-details">
+                <p><strong>Hours:</strong> 4:00 PM - 1:00 AM</p>
+                <p><strong>Happy Hour:</strong> 5:00-7:00 PM daily</p>
+                <p><strong>Live Music:</strong> Thursday-Saturday</p>
+              </div>
+              
+              <a href="/dining/sunset-bar" class="btn btn-outline">View Menu</a>
+            </div>
+          </article>
+          
+          <article class="restaurant-card">
+            <img src="restaurant-poolside.jpg" alt="Poolside grill with tropical drinks and burgers" width="600" height="400" loading="lazy">
+            
+            <div class="restaurant-content">
+              <h3>Poolside Grill</h3>
+              <p class="restaurant-type">Casual • American Grill</p>
+              
+              <p>Laid-back poolside dining featuring burgers, salads, tropical cocktails, and frozen drinks. Perfect for lunch in the sun.</p>
+              
+              <div class="restaurant-details">
+                <p><strong>Hours:</strong> 11:00 AM - 6:00 PM</p>
+                <p><strong>Dress Code:</strong> Pool Attire Welcome</p>
+                <p><strong>Service:</strong> Order at pool or cabana</p>
+              </div>
+              
+              <a href="/dining/poolside" class="btn btn-outline">View Menu</a>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="spa" class="spa-section">
+      <div class="container">
+        <div class="spa-showcase">
+          <div class="spa-images">
+            <img src="spa-treatment.jpg" alt="Luxury spa treatment room with massage table and ocean view" width="700" height="500" loading="lazy">
+          </div>
+          
+          <div class="spa-content">
+            <h2>The Marina Spa</h2>
+            <p class="spa-tagline">A sanctuary of wellness and rejuvenation</p>
+            
+            <p>Escape to our 20,000 square foot luxury spa featuring 16 treatment rooms, hydrotherapy circuits, relaxation lounges, and a full-service salon. Our expert therapists offer innovative treatments using organic products.</p>
+            
+            <h3>Signature Treatments</h3>
+            <ul class="spa-treatments">
+              <li>
+                <strong>Ocean Ritual Massage</strong> (90 min) - $295
+                <p>Full-body massage with warm seashells and aquatic-inspired aromatherapy</p>
+              </li>
+              
+              <li>
+                <strong>Tropical Radiance Facial</strong> (75 min) - $235
+                <p>Rejuvenating facial with marine collagen and vitamin C</p>
+              </li>
+              
+              <li>
+                <strong>Couples Retreat</strong> (120 min) - $695
+                <p>Private suite with synchronized massage, champagne, and chocolate</p>
+              </li>
+              
+              <li>
+                <strong>Deep Tissue Sports Massage</strong> (60 min) - $195
+                <p>Targeted relief for muscle tension and recovery</p>
+              </li>
+            </ul>
+            
+            <h3>Spa Facilities</h3>
+            <p>Complimentary access with any 60+ minute treatment:</p>
+            <ul class="spa-facilities">
+              <li>Hydrotherapy circuit (hot & cold plunge pools)</li>
+              <li>Steam room & sauna</li>
+              <li>Relaxation lounge with ocean views</li>
+              <li>Tea & healthy snacks</li>
+            </ul>
+            
+            <div class="spa-cta">
+              <a href="/spa/book" class="btn btn-primary">Book Spa Treatment</a>
+              <a href="/spa/menu" class="btn btn-outline">Full Spa Menu</a>
+            </div>
+            
+            <p class="spa-note"><small>Hours: 9:00 AM - 8:00 PM daily • Advance reservations recommended</small></p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="events" class="events-section">
+      <div class="container">
+        <div class="section-header-center">
+          <h2>Weddings & Special Events</h2>
+          <p>Create unforgettable memories in paradise</p>
+        </div>
+        
+        <div class="events-content">
+          <div class="event-type">
+            <img src="event-wedding.jpg" alt="Beach wedding ceremony at sunset" width="600" height="400" loading="lazy">
+            
+            <h3>Dream Weddings</h3>
+            <p>Say "I do" with your toes in the sand or in our elegant ballroom. Our expert wedding team handles every detail to make your day perfect.</p>
+            
+            <ul>
+              <li>Beachfront & indoor ceremony locations</li>
+              <li>Capacity: 20-300 guests</li>
+              <li>Dedicated wedding coordinator</li>
+              <li>Custom menus & bar packages</li>
+              <li>Bridal suite & room blocks</li>
+              <li>Wedding night suite upgrade included</li>
+            </ul>
+            
+            <a href="/weddings" class="btn btn-outline">Wedding Packages</a>
+          </div>
+          
+          <div class="event-type">
+            <img src="event-meetings.jpg" alt="Modern meeting space with AV equipment" width="600" height="400" loading="lazy">
+            
+            <h3>Meetings & Corporate Events</h3>
+            <p>Inspire your team with a productive meeting in an inspiring setting. 25,000 sq ft of flexible meeting space with state-of-the-art technology.</p>
+            
+            <ul>
+              <li>12 meeting rooms + grand ballroom</li>
+              <li>Capacity: 10-500 attendees</li>
+              <li>High-speed WiFi & AV equipment</li>
+              <li>Dedicated event planner</li>
+              <li>Catering & break services</li>
+              <li>Team building activities available</li>
+            </ul>
+            
+            <a href="/meetings" class="btn btn-outline">Event Spaces</a>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="reviews-section">
+      <div class="container">
+        <h2>What Our Guests Say</h2>
+        
+        <div class="reviews-grid">
+          <article class="review-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Absolutely perfect in every way. The room was stunning, the staff went above and beyond, and the location is unbeatable. We've stayed at five-star hotels around the world, and The Grand Marina is among the very best."</p>
+            </blockquote>
+            <footer class="review-author">
+              <cite>Jennifer M.</cite>
+              <p>TripAdvisor • <time datetime="2026-02-15">February 2026</time></p>
+            </footer>
+          </article>
+          
+          <article class="review-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Our anniversary trip was magical. The oceanfront penthouse exceeded expectations, and the spa treatments were divine. Already planning our return visit!"</p>
+            </blockquote>
+            <footer class="review-author">
+              <cite>Michael & Sarah T.</cite>
+              <p>Google Reviews • <time datetime="2026-01-28">January 2026</time></p>
+            </footer>
+          </article>
+          
+          <article class="review-card">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"The kids loved the kids club, and we loved the adults-only pool. Azure restaurant was phenomenal—best seafood we've had. True luxury without stuffiness."</p>
+            </blockquote>
+            <footer class="review-author">
+              <cite>Rodriguez Family</cite>
+              <p>Expedia • <time datetime="2026-02-05">February 2026</time></p>
+            </footer>
+          </article>
+        </div>
+        
+        <div class="review-summary">
+          <p><strong>4.9/5.0</strong> based on 3,247 reviews across TripAdvisor, Google, and Expedia</p>
+          <p>🏆 TripAdvisor Travelers' Choice Award 2025 • Forbes Five-Star Rating</p>
+        </div>
+      </div>
+    </section>
+    
+    <section id="location" class="location-section">
+      <div class="container">
+        <div class="location-grid">
+          <div class="location-content">
+            <h2>Prime Miami Beach Location</h2>
+            <p>Nestled on the most beautiful stretch of Miami Beach, The Grand Marina offers the perfect blend of beachfront serenity and urban excitement.</p>
+            
+            <h3>Address</h3>
+            <address>
+              The Grand Marina Hotel<br>
+              1500 Ocean Drive<br>
+              Miami Beach, FL 33139<br>
+              <a href="tel:+13055551234">(305) 555-1234</a><br>
+              <a href="mailto:reservations@grandmarina.com">reservations@grandmarina.com</a>
+            </address>
+            
+            <h3>Nearby Attractions</h3>
+            <ul class="attractions-list">
+              <li>Art Deco Historic District - 0.3 miles</li>
+              <li>Lincoln Road Shopping - 1.2 miles</li>
+              <li>South Beach - 0.8 miles</li>
+              <li>Wynwood Arts District - 4 miles</li>
+              <li>Miami International Airport - 9 miles (20 min)</li>
+              <li>Port of Miami - 5 miles (cruise terminal)</li>
+            </ul>
+            
+            <a href="https://maps.google.com/?q=Grand+Marina+Hotel" class="btn btn-outline" target="_blank" rel="noopener">Get Directions</a>
+          </div>
+          
+          <div class="location-map">
+            <img src="location-map.png" alt="Map showing The Grand Marina Hotel location in Miami Beach" width="600" height="500" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="booking-cta-section">
+      <div class="container">
+        <div class="booking-cta-content">
+          <h2>Your Paradise Awaits</h2>
+          <p>Book direct for the best rates and exclusive benefits</p>
+          
+          <div class="booking-benefits">
+            <div class="benefit">✓ Best Rate Guarantee</div>
+            <div class="benefit">✓ Free WiFi</div>
+            <div class="benefit">✓ Complimentary Valet</div>
+            <div class="benefit">✓ Room Upgrade (subject to availability)</div>
+          </div>
+          
+          <a href="#book" class="btn btn-primary btn-large">Reserve Now</a>
+          
+          <p class="booking-contact">Or call our reservations team: <a href="tel:+13055551234"><strong>(305) 555-1234</strong></a></p>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>The Grand Marina</h3>
+          <p>Luxury beachfront resort</p>
+          <p>1500 Ocean Drive<br>
+          Miami Beach, FL 33139</p>
+          <p><a href="tel:+13055551234">(305) 555-1234</a></p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Hotel</h3>
+          <ul>
+            <li><a href="/rooms">Rooms & Suites</a></li>
+            <li><a href="/amenities">Amenities</a></li>
+            <li><a href="/dining">Dining</a></li>
+            <li><a href="/spa">Spa</a></li>
+            <li><a href="/offers">Special Offers</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Services</h3>
+          <ul>
+            <li><a href="/weddings">Weddings</a></li>
+            <li><a href="/meetings">Meetings & Events</a></li>
+            <li><a href="/concierge">Concierge</a></li>
+            <li><a href="/gallery">Photo Gallery</a></li>
+            <li><a href="/careers">Careers</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Guest Services</h3>
+          <ul>
+            <li><a href="/manage-reservation">Manage Reservation</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/accessibility">Accessibility</a></li>
+            <li><a href="/contact">Contact Us</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Connect</h3>
+          <div class="social-links">
+            <a href="https://instagram.com/grandmarina" aria-label="Instagram">Instagram</a>
+            <a href="https://facebook.com/grandmarina" aria-label="Facebook">Facebook</a>
+            <a href="https://twitter.com/grandmarina" aria-label="Twitter">Twitter</a>
+          </div>
+          
+          <h4>Newsletter</h4>
+          <form class="newsletter-form" action="/newsletter" method="POST">
+            <label for="newsletter-email" class="visually-hidden">Email address</label>
+            <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
+            <button type="submit" class="btn btn-outline">Subscribe</button>
+          </form>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 The Grand Marina Hotel. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms & Conditions</a>
+          <a href="/sitemap">Sitemap</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="hotel.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/travel-tour-agency.html b/skills/html-coder/assets/travel-tour-agency.html
new file mode 100644
index 000000000..d8eb2c5d5
--- /dev/null
+++ b/skills/html-coder/assets/travel-tour-agency.html
@@ -0,0 +1,781 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Wanderlust Adventures - Curated small-group tours to the world's most incredible destinations. Expert guides, authentic experiences, lifelong memories.">
+  <meta property="og:title" content="Wanderlust Adventures - Small Group Tours Worldwide">
+  <meta property="og:description" content="Explore the world with expert-led small group adventures">
+  <meta property="og:image" content="og-tours.jpg">
+  <meta property="og:type" content="website">
+  <title>Wanderlust Adventures - Small Group Tours & Adventure Travel</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header-tours">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">
+          <img src="wanderlust-logo.svg" alt="Wanderlust Adventures" width="180" height="45">
+        </a>
+        
+        <ul class="nav-menu">
+          <li><a href="#destinations">Destinations</a></li>
+          <li><a href="#tours">Tours</a></li>
+          <li><a href="#travel-styles">Travel Styles</a></li>
+          <li><a href="#why-us">Why Us</a></li>
+          <li><a href="/blog">Travel Blog</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="tel:+18885551234" class="btn-link">📞 (888) 555-1234</a>
+          <a href="#contact" class="btn btn-primary">Plan Your Trip</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="hero-tours">
+      <div class="hero-tours-background">
+        <img src="hero-adventure.jpg" alt="Group of travelers hiking mountain trail with stunning vista" width="1920" height="900" loading="eager">
+      </div>
+      
+      <div class="hero-tours-content">
+        <h1>Adventure Awaits</h1>
+        <p class="hero-subtitle">Small groups. Big experiences. Unforgettable journeys.</p>
+        <a href="#tours" class="btn btn-primary btn-large">Explore Our Tours</a>
+      </div>
+    </section>
+    
+    <section class="tour-search-section">
+      <div class="container">
+        <form class="tour-search-form" action="/search-tours" method="GET">
+          <div class="form-group">
+            <label for="destination">Where do you want to go?</label>
+            <select id="destination" name="destination">
+              <option value="">All Destinations</option>
+              <option value="europe">Europe</option>
+              <option value="asia">Asia</option>
+              <option value="africa">Africa</option>
+              <option value="south-america">South America</option>
+              <option value="north-america">North America</option>
+              <option value="oceania">Oceania</option>
+              <option value="antarctica">Antarctica</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="travel-style">Travel Style</label>
+            <select id="travel-style" name="travel_style">
+              <option value="">All Styles</option>
+              <option value="adventure">Adventure</option>
+              <option value="cultural">Cultural</option>
+              <option value="wildlife">Wildlife & Nature</option>
+              <option value="luxury">Luxury</option>
+              <option value="family">Family</option>
+              <option value="solo">Solo Traveler</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="duration">Duration</label>
+            <select id="duration" name="duration">
+              <option value="">Any Duration</option>
+              <option value="1-7">1-7 days</option>
+              <option value="8-14">8-14 days</option>
+              <option value="15-21">15-21 days</option>
+              <option value="22+">22+ days</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="month">Travel Month</label>
+            <select id="month" name="month">
+              <option value="">Any Month</option>
+              <option value="jan">January</option>
+              <option value="feb">February</option>
+              <option value="mar">March</option>
+              <option value="apr">April</option>
+              <option value="may">May</option>
+              <option value="jun">June</option>
+              <option value="jul">July</option>
+              <option value="aug">August</option>
+              <option value="sep">September</option>
+              <option value="oct">October</option>
+              <option value="nov">November</option>
+              <option value="dec">December</option>
+            </select>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large">Find Tours</button>
+        </form>
+      </div>
+    </section>
+    
+    <section class="intro-section">
+      <div class="container">
+        <div class="intro-content-center">
+          <h2>Explore the World with Wanderlust</h2>
+          <p class="intro-lead">For over 15 years, we've been crafting authentic travel experiences that go beyond typical tourism. Our small group tours (max 12 travelers) connect you with local cultures, hidden gems, and fellow adventurers.</p>
+          
+          <div class="stats-row">
+            <div class="stat-box">
+              <strong>15+</strong>
+              <span>Years of Experience</span>
+            </div>
+            
+            <div class="stat-box">
+              <strong>85</strong>
+              <span>Countries Explored</span>
+            </div>
+            
+            <div class="stat-box">
+              <strong>25,000+</strong>
+              <span>Happy Travelers</span>
+            </div>
+            
+            <div class="stat-box">
+              <strong>4.9/5</strong>
+              <span>Average Rating</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="tours" class="featured-tours-section">
+      <div class="container">
+        <div class="section-header-with-filter">
+          <h2>Featured Tours</h2>
+          
+          <div class="filter-buttons">
+            <button class="filter-btn active" data-category="all">All Tours</button>
+            <button class="filter-btn" data-category="adventure">Adventure</button>
+            <button class="filter-btn" data-category="cultural">Cultural</button>
+            <button class="filter-btn" data-category="wildlife">Wildlife</button>
+          </div>
+        </div>
+        
+        <div class="tours-grid">
+          <article class="tour-card" data-category="adventure">
+            <div class="tour-image-wrapper">
+              <img src="tour-patagonia.jpg" alt="Hikers on trail in Patagonia mountains" width="400" height="300" loading="lazy">
+              <div class="tour-badge">Adventure</div>
+              <div class="tour-price-badge">From $3,895</div>
+            </div>
+            
+            <div class="tour-content">
+              <div class="tour-meta">
+                <span class="tour-location">🇦🇷 🇨🇱 Argentina & Chile</span>
+                <span class="tour-duration">14 Days</span>
+              </div>
+              
+              <h3><a href="/tours/patagonia-explorer">Patagonia Explorer</a></h3>
+              <p>Trek through Torres del Paine, witness Perito Moreno Glacier, and explore the stunning landscapes of South America's wild frontier.</p>
+              
+              <ul class="tour-highlights">
+                <li>✓ Torres del Paine W Trek</li>
+                <li>✓ Perito Moreno Glacier</li>
+                <li>✓ El Chaltén hiking paradise</li>
+                <li>✓ Small group (max 12)</li>
+              </ul>
+              
+              <div class="tour-footer">
+                <div class="tour-dates">
+                  <strong>Next Departures:</strong>
+                  <p>Oct 15, Nov 5, Dec 1, 2026</p>
+                </div>
+                
+                <a href="/tours/patagonia-explorer" class="btn btn-outline">View Tour Details</a>
+              </div>
+            </div>
+          </article>
+          
+          <article class="tour-card featured-tour" data-category="cultural">
+            <div class="most-popular-badge">Most Popular</div>
+            <div class="tour-image-wrapper">
+              <img src="tour-japan.jpg" alt="Traditional Japanese temple in Kyoto" width="400" height="300" loading="lazy">
+              <div class="tour-badge">Cultural</div>
+              <div class="tour-price-badge">From $4,295</div>
+            </div>
+            
+            <div class="tour-content">
+              <div class="tour-meta">
+                <span class="tour-location">🇯🇵 Japan</span>
+                <span class="tour-duration">12 Days</span>
+              </div>
+              
+              <h3><a href="/tours/japan-discovery">Japan Discovery: Tokyo to Kyoto</a></h3>
+              <p>Experience the perfect blend of ancient tradition and modern innovation. From Tokyo's neon streets to Kyoto's serene temples.</p>
+              
+              <ul class="tour-highlights">
+                <li>✓ Bullet train experiences</li>
+                <li>✓ Traditional tea ceremony</li>
+                <li>✓ Mt. Fuji day trip</li>
+                <li>✓ Geisha district tour</li>
+              </ul>
+              
+              <div class="tour-footer">
+                <div class="tour-dates">
+                  <strong>Next Departures:</strong>
+                  <p>Apr 5, May 10, Sep 15, Oct 20</p>
+                </div>
+                
+                <a href="/tours/japan-discovery" class="btn btn-primary">View Tour Details</a>
+              </div>
+            </div>
+          </article>
+          
+          <article class="tour-card" data-category="wildlife">
+            <div class="tour-image-wrapper">
+              <img src="tour-safari.jpg" alt="Elephants walking at sunset in Tanzania" width="400" height="300" loading="lazy">
+              <div class="tour-badge">Wildlife</div>
+              <div class="tour-price-badge">From $5,495</div>
+            </div>
+            
+            <div class="tour-content">
+              <div class="tour-meta">
+                <span class="tour-location">🇹🇿 Tanzania</span>
+                <span class="tour-duration">10 Days</span>
+              </div>
+              
+              <h3><a href="/tours/tanzania-safari">Ultimate Tanzania Safari</a></h3>
+              <p>Witness the Great Migration, track the Big Five, and experience the magic of the Serengeti and Ngorongoro Crater.</p>
+              
+              <ul class="tour-highlights">
+                <li>✓ Serengeti game drives</li>
+                <li>✓ Ngorongoro Crater descent</li>
+                <li>✓ Luxury tented camps</li>
+                <li>✓ Expert wildlife guides</li>
+              </ul>
+              
+              <div class="tour-footer">
+                <div class="tour-dates">
+                  <strong>Next Departures:</strong>
+                  <p>Jul 10, Aug 5, Sep 20, 2026</p>
+                </div>
+                
+                <a href="/tours/tanzania-safari" class="btn btn-outline">View Tour Details</a>
+              </div>
+            </div>
+          </article>
+          
+          <article class="tour-card" data-category="adventure">
+            <div class="tour-image-wrapper">
+              <img src="tour-iceland.jpg" alt="Northern lights over Iceland landscape" width="400" height="300" loading="lazy">
+              <div class="tour-badge">Adventure</div>
+              <div class="tour-price-badge">From $3,295</div>
+            </div>
+            
+            <div class="tour-content">
+              <div class="tour-meta">
+                <span class="tour-location">🇮🇸 Iceland</span>
+                <span class="tour-duration">8 Days</span>
+              </div>
+              
+              <h3><a href="/tours/iceland-adventure">Iceland Winter Adventure</a></h3>
+              <p>Chase the Northern Lights, explore ice caves, soak in hot springs, and witness the raw power of Iceland's volcanic landscapes.</p>
+              
+              <ul class="tour-highlights">
+                <li>✓ Northern Lights hunting</li>
+                <li>✓ Ice cave exploration</li>
+                <li>✓ Golden Circle tour</li>
+                <li>✓ Blue Lagoon experience</li>
+              </ul>
+              
+              <div class="tour-footer">
+                <div class="tour-dates">
+                  <strong>Next Departures:</strong>
+                  <p>Nov 15, Dec 5, Jan 10, Feb 5</p>
+                </div>
+                
+                <a href="/tours/iceland-adventure" class="btn btn-outline">View Tour Details</a>
+              </div>
+            </div>
+          </article>
+          
+          <article class="tour-card" data-category="cultural">
+            <div class="tour-image-wrapper">
+              <img src="tour-morocco.jpg" alt="Colorful spices in Marrakech market" width="400" height="300" loading="lazy">
+              <div class="tour-badge">Cultural</div>
+              <div class="tour-price-badge">From $2,795</div>
+            </div>
+            
+            <div class="tour-content">
+              <div class="tour-meta">
+                <span class="tour-location">🇲🇦 Morocco</span>
+                <span class="tour-duration">10 Days</span>
+              </div>
+              
+              <h3><a href="/tours/morocco-magic">Morocco: From Souks to Sahara</a></h3>
+              <p>Immerse yourself in Morocco's vibrant culture, from bustling medinas to desert camps under starry skies.</p>
+              
+              <ul class="tour-highlights">
+                <li>✓ Marrakech & Fez exploration</li>
+                <li>✓ Sahara Desert camp</li>
+                <li>✓ Cooking class experience</li>
+                <li>✓ Atlas Mountains trek</li>
+              </ul>
+              
+              <div class="tour-footer">
+                <div class="tour-dates">
+                  <strong>Next Departures:</strong>
+                  <p>Mar 20, Apr 15, Oct 5, Nov 10</p>
+                </div>
+                
+                <a href="/tours/morocco-magic" class="btn btn-outline">View Tour Details</a>
+              </div>
+            </div>
+          </article>
+          
+          <article class="tour-card" data-category="adventure">
+            <div class="tour-image-wrapper">
+              <img src="tour-nepal.jpg" alt="Trekkers with view of Mount Everest" width="400" height="300" loading="lazy">
+              <div class="tour-badge">Adventure</div>
+              <div class="tour-price-badge">From $2,495</div>
+            </div>
+            
+            <div class="tour-content">
+              <div class="tour-meta">
+                <span class="tour-location">🇳🇵 Nepal</span>
+                <span class="tour-duration">15 Days</span>
+              </div>
+              
+              <h3><a href="/tours/everest-base-camp">Everest Base Camp Trek</a></h3>
+              <p>Stand in the shadow of the world's highest peak. This bucket-list trek takes you through Sherpa villages to Everest Base Camp.</p>
+              
+              <ul class="tour-highlights">
+                <li>✓ Trek to Everest Base Camp</li>
+                <li>✓ Kala Patthar sunrise (18,500 ft)</li>
+                <li>✓ Namche Bazaar & monasteries</li>
+                <li>✓ Experienced Sherpa guides</li>
+              </ul>
+              
+              <div class="tour-footer">
+                <div class="tour-dates">
+                  <strong>Next Departures:</strong>
+                  <p>Apr 1, May 1, Oct 1, Nov 1</p>
+                </div>
+                
+                <a href="/tours/everest-base-camp" class="btn btn-outline">View Tour Details</a>
+              </div>
+            </div>
+          </article>
+        </div>
+        
+        <div class="view-all-tours">
+          <a href="/all-tours" class="btn btn-outline btn-large">View All 120+ Tours</a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="destinations" class="destinations-section">
+      <div class="container">
+        <h2>Explore Our Destinations</h2>
+        <p class="section-intro">We offer tours to 85 countries across 7 continents</p>
+        
+        <div class="destinations-grid">
+          <a href="/destinations/europe" class="destination-card">
+            <img src="dest-europe.jpg" alt="European architecture and landscapes" width="400" height="300" loading="lazy">
+            <div class="destination-overlay">
+              <h3>Europe</h3>
+              <p>28 tours • 15 countries</p>
+            </div>
+          </a>
+          
+          <a href="/destinations/asia" class="destination-card">
+            <img src="dest-asia.jpg" alt="Asian temples and culture" width="400" height="300" loading="lazy">
+            <div class="destination-overlay">
+              <h3>Asia</h3>
+              <p>35 tours • 18 countries</p>
+            </div>
+          </a>
+          
+          <a href="/destinations/africa" class="destination-card">
+            <img src="dest-africa.jpg" alt="African wildlife and landscapes" width="400" height="300" loading="lazy">
+            <div class="destination-overlay">
+              <h3>Africa</h3>
+              <p>22 tours • 12 countries</p>
+            </div>
+          </a>
+          
+          <a href="/destinations/south-america" class="destination-card">
+            <img src="dest-south-america.jpg" alt="South American landscapes" width="400" height="300" loading="lazy">
+            <div class="destination-overlay">
+              <h3>South America</h3>
+              <p>18 tours • 8 countries</p>
+            </div>
+          </a>
+          
+          <a href="/destinations/oceania" class="destination-card">
+            <img src="dest-oceania.jpg" alt="Australian and Pacific islands" width="400" height="300" loading="lazy">
+            <div class="destination-overlay">
+              <h3>Oceania</h3>
+              <p>12 tours • 6 countries</p>
+            </div>
+          </a>
+          
+          <a href="/destinations/antarctica" class="destination-card">
+            <img src="dest-antarctica.jpg" alt="Antarctic ice and wildlife" width="400" height="300" loading="lazy">
+            <div class="destination-overlay">
+              <h3>Antarctica</h3>
+              <p>5 tours • 1 continent</p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+    
+    <section id="travel-styles" class="travel-styles-section">
+      <div class="container">
+        <h2>Find Your Travel Style</h2>
+        
+        <div class="travel-styles-grid">
+          <article class="style-card">
+            <div class="style-icon" aria-hidden="true">⛰️</div>
+            <h3>Adventure</h3>
+            <p>For thrill-seekers and outdoor enthusiasts. Hiking, climbing, rafting, and more active experiences.</p>
+            <a href="/travel-styles/adventure">Browse Adventure Tours</a>
+          </article>
+          
+          <article class="style-card">
+            <div class="style-icon" aria-hidden="true">🏛️</div>
+            <h3>Cultural</h3>
+            <p>Immerse yourself in local traditions, history, and authentic cultural experiences with expert guides.</p>
+            <a href="/travel-styles/cultural">Browse Cultural Tours</a>
+          </article>
+          
+          <article class="style-card">
+            <div class="style-icon" aria-hidden="true">🦁</div>
+            <h3>Wildlife & Nature</h3>
+            <p>Get up close with incredible wildlife. Safaris, marine life encounters, and pristine natural environments.</p>
+            <a href="/travel-styles/wildlife">Browse Wildlife Tours</a>
+          </article>
+          
+          <article class="style-card">
+            <div class="style-icon" aria-hidden="true">⭐</div>
+            <h3>Luxury</h3>
+            <p>Elevated experiences with premium accommodations, exclusive access, and refined comfort throughout.</p>
+            <a href="/travel-styles/luxury">Browse Luxury Tours</a>
+          </article>
+          
+          <article class="style-card">
+            <div class="style-icon" aria-hidden="true">👨‍👩‍👧‍👦</div>
+            <h3>Family</h3>
+            <p>Family-friendly adventures designed for all ages. Educational, fun, and creating memories together.</p>
+            <a href="/travel-styles/family">Browse Family Tours</a>
+          </article>
+          
+          <article class="style-card">
+            <div class="style-icon" aria-hidden="true">🎒</div>
+            <h3>Solo Traveler</h3>
+            <p>Join fellow solo adventurers. No single supplements on select tours, plus built-in companionship.</p>
+            <a href="/travel-styles/solo">Browse Solo Tours</a>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="why-us" class="why-us-section">
+      <div class="container">
+        <h2>Why Travel with Wanderlust?</h2>
+        
+        <div class="why-us-grid">
+          <article class="feature-box">
+            <div class="feature-icon-large" aria-hidden="true">👥</div>
+            <h3>Small Groups</h3>
+            <p>Maximum 12 travelers per tour. Get personal attention, make real connections, and access places large groups can't go.</p>
+          </article>
+          
+          <article class="feature-box">
+            <div class="feature-icon-large" aria-hidden="true">🎓</div>
+            <h3>Expert Guides</h3>
+            <p>Our local guides are passionate storytellers and regional experts. They live where we travel and share insider knowledge.</p>
+          </article>
+          
+          <article class="feature-box">
+            <div class="feature-icon-large" aria-hidden="true">🏠</div>
+            <h3>Authentic Experiences</h3>
+            <p>Stay in boutique hotels, dine where locals eat, and participate in genuine cultural exchanges. No tourist traps.</p>
+          </article>
+          
+          <article class="feature-box">
+            <div class="feature-icon-large" aria-hidden="true">🌍</div>
+            <h3>Responsible Travel</h3>
+            <p>We're committed to sustainable tourism, supporting local communities, and minimizing environmental impact.</p>
+          </article>
+          
+          <article class="feature-box">
+            <div class="feature-icon-large" aria-hidden="true">✅</div>
+            <h3>Hassle-Free Planning</h3>
+            <p>Everything's arranged: accommodations, transportation, most meals, activities, and expert guidance throughout.</p>
+          </article>
+          
+          <article class="feature-box">
+            <div class="feature-icon-large" aria-hidden="true">💯</div>
+            <h3>Satisfaction Guaranteed</h3>
+            <p>4.9/5 average rating from 25,000+ travelers. If you're not satisfied, we'll make it right—that's our promise.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="testimonials-tours-section">
+      <div class="container">
+        <h2>Hear from Our Travelers</h2>
+        
+        <div class="testimonials-grid">
+          <article class="testimonial-card-tours">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"The Japan tour exceeded every expectation. Our guide Yuki was incredible—so knowledgeable and accommodating. The small group size made it feel like traveling with friends. Already booked my next Wanderlust tour!"</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="traveler-emma.jpg" alt="" width="60" height="60" loading="lazy">
+              <div>
+                <cite>Emma Richardson</cite>
+                <p>Japan Discovery Tour • March 2026</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card-tours">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"Best vacation of my life! The Tanzania safari was perfectly organized. We saw lions, elephants, and witnessed the Great Migration. Our guide's wildlife knowledge was unmatched. Worth every penny."</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="traveler-david.jpg" alt="" width="60" height="60" loading="lazy">
+              <div>
+                <cite>David & Lisa Chen</cite>
+                <p>Tanzania Safari • August 2025</p>
+              </div>
+            </footer>
+          </article>
+          
+          <article class="testimonial-card-tours">
+            <div class="rating" aria-label="5 stars">★★★★★</div>
+            <blockquote>
+              <p>"As a solo female traveler, I felt completely safe and welcomed. Met amazing people and pushed myself beyond my comfort zone on the Patagonia trek. Life-changing experience!"</p>
+            </blockquote>
+            <footer class="testimonial-author">
+              <img src="traveler-maria.jpg" alt="" width="60" height="60" loading="lazy">
+              <div>
+                <cite>Maria Santos</cite>
+                <p>Patagonia Explorer • November 2025</p>
+              </div>
+            </footer>
+          </article>
+        </div>
+        
+        <div class="review-summary">
+          <p><strong>4.9/5.0</strong> average rating • <strong>25,000+</strong> satisfied travelers • <strong>98%</strong> would recommend</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="planning-help-section">
+      <div class="container">
+        <div class="planning-content">
+          <h2>Need Help Planning?</h2>
+          <p>Our travel experts are here to answer questions and help you find the perfect tour</p>
+          
+          <div class="contact-options">
+            <div class="contact-option">
+              <span class="contact-icon" aria-hidden="true">📞</span>
+              <div>
+                <h3>Call Us</h3>
+                <p><a href="tel:+18885551234"><strong>(888) 555-1234</strong></a></p>
+                <p>Mon-Fri 9am-6pm EST</p>
+              </div>
+            </div>
+            
+            <div class="contact-option">
+              <span class="contact-icon" aria-hidden="true">💬</span>
+              <div>
+                <h3>Live Chat</h3>
+                <p><button class="btn-link" onclick="openChat()">Start a conversation</button></p>
+                <p>Available 7 days a week</p>
+              </div>
+            </div>
+            
+            <div class="contact-option">
+              <span class="contact-icon" aria-hidden="true">✉️</span>
+              <div>
+                <h3>Email Us</h3>
+                <p><a href="mailto:travel@wanderlustadv.com">travel@wanderlustadv.com</a></p>
+                <p>Response within 24 hours</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact" class="booking-inquiry-section">
+      <div class="container">
+        <h2>Request a Custom Quote</h2>
+        <p class="section-intro">Tell us about your dream trip and we'll create a personalized itinerary</p>
+        
+        <form class="inquiry-form" action="/request-quote" method="POST">
+          <div class="form-row">
+            <div class="form-group">
+              <label for="inquiry-name">Full Name *</label>
+              <input type="text" id="inquiry-name" name="name" required autocomplete="name">
+            </div>
+            
+            <div class="form-group">
+              <label for="inquiry-email">Email Address *</label>
+              <input type="email" id="inquiry-email" name="email" required autocomplete="email">
+            </div>
+          </div>
+          
+          <div class="form-row">
+            <div class="form-group">
+              <label for="inquiry-phone">Phone Number</label>
+              <input type="tel" id="inquiry-phone" name="phone" autocomplete="tel">
+            </div>
+            
+            <div class="form-group">
+              <label for="inquiry-travelers">Number of Travelers *</label>
+              <select id="inquiry-travelers" name="travelers" required>
+                <option value="">Select...</option>
+                <option value="1">1 traveler (solo)</option>
+                <option value="2">2 travelers</option>
+                <option value="3-4">3-4 travelers</option>
+                <option value="5-8">5-8 travelers</option>
+                <option value="9+">9+ travelers (private group)</option>
+              </select>
+            </div>
+          </div>
+          
+          <div class="form-row">
+            <div class="form-group">
+              <label for="inquiry-destination">Preferred Destination(s)</label>
+              <input type="text" id="inquiry-destination" name="destination" placeholder="e.g., Japan, Iceland, Morocco">
+            </div>
+            
+            <div class="form-group">
+              <label for="inquiry-dates">Preferred Travel Dates</label>
+              <input type="text" id="inquiry-dates" name="dates" placeholder="e.g., April 2027, Summer 2027">
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label for="inquiry-budget">Budget per Person (USD)</label>
+            <select id="inquiry-budget" name="budget">
+              <option value="">Prefer not to say</option>
+              <option value="under-2000">Under $2,000</option>
+              <option value="2000-3500">$2,000 - $3,500</option>
+              <option value="3500-5000">$3,500 - $5,000</option>
+              <option value="5000-7500">$5,000 - $7,500</option>
+              <option value="7500+">$7,500+</option>
+            </select>
+          </div>
+          
+          <div class="form-group">
+            <label for="inquiry-interests">Tell us about your travel interests and expectations</label>
+            <textarea id="inquiry-interests" name="interests" rows="5" placeholder="What kind of experiences are you looking for? Any must-see destinations or activities? Physical fitness level? Accommodation preferences?"></textarea>
+          </div>
+          
+          <div class="form-group-checkbox">
+            <input type="checkbox" id="inquiry-newsletter" name="newsletter" value="yes">
+            <label for="inquiry-newsletter">Send me travel inspiration and special offers</label>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large">Request Quote</button>
+          
+          <p class="form-note"><small>We'll respond within 24 hours with a personalized itinerary and pricing</small></p>
+        </form>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <img src="wanderlust-logo-white.svg" alt="Wanderlust Adventures" width="180" height="45" loading="lazy">
+          <p>Small groups. Big experiences.</p>
+          
+          <div class="social-links" aria-label="Social media">
+            <a href="https://instagram.com/wanderlustadv" aria-label="Instagram">Instagram</a>
+            <a href="https://facebook.com/wanderlustadv" aria-label="Facebook">Facebook</a>
+            <a href="https://youtube.com/wanderlustadv" aria-label="YouTube">YouTube</a>
+            <a href="https://pinterest.com/wanderlustadv" aria-label="Pinterest">Pinterest</a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Destinations</h3>
+          <ul>
+            <li><a href="/destinations/europe">Europe</a></li>
+            <li><a href="/destinations/asia">Asia</a></li>
+            <li><a href="/destinations/africa">Africa</a></li>
+            <li><a href="/destinations/south-america">South America</a></li>
+            <li><a href="/destinations">All Destinations</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Travel Styles</h3>
+          <ul>
+            <li><a href="/travel-styles/adventure">Adventure</a></li>
+            <li><a href="/travel-styles/cultural">Cultural</a></li>
+            <li><a href="/travel-styles/wildlife">Wildlife</a></li>
+            <li><a href="/travel-styles/luxury">Luxury</a></li>
+            <li><a href="/travel-styles/family">Family</a></li>
+            <li><a href="/travel-styles/solo">Solo Travel</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Resources</h3>
+          <ul>
+            <li><a href="/blog">Travel Blog</a></li>
+            <li><a href="/travel-guides">Travel Guides</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/reviews">Reviews</a></li>
+            <li><a href="/packing-lists">Packing Lists</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/sustainability">Sustainability</a></li>
+            <li><a href="/our-team">Our Team</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-certifications">
+        <p><strong>Certified & Trusted:</strong></p>
+        <div class="certifications">
+          <span>ASTA Member</span>
+          <span>Adventure Travel Trade Association</span>
+          <span>B Corp Certified</span>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Wanderlust Adventures. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms & Conditions</a>
+          <a href="/booking-terms">Booking Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="tours.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-404.html b/skills/html-coder/assets/util-404.html
new file mode 100644
index 000000000..08229d4dd
--- /dev/null
+++ b/skills/html-coder/assets/util-404.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Page not found. The page you're looking for doesn't exist or has been moved.">
+  <meta name="robots" content="noindex, nofollow">
+  <title>404 - Page Not Found</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <main id="main" class="error-page">
+    <div class="error-container">
+      <div class="error-illustration">
+        <img src="404-illustration.svg" alt="" width="400" height="300" loading="eager">
+      </div>
+      
+      <div class="error-content">
+        <h1 class="error-code">404</h1>
+        <h2>Page Not Found</h2>
+        <p class="error-message">Oops! The page you're looking for doesn't exist. It might have been moved or deleted.</p>
+        
+        <div class="error-actions">
+          <a href="/" class="btn btn-primary">Go Home</a>
+          <button type="button" class="btn btn-outline" onclick="history.back()">Go Back</button>
+        </div>
+        
+        <div class="error-search">
+          <p>Try searching for what you need:</p>
+          <form action="/search" method="GET" class="search-form">
+            <label for="search" class="visually-hidden">Search</label>
+            <input type="search" id="search" name="q" placeholder="Search our site..." autocomplete="off">
+            <button type="submit" class="btn btn-primary">Search</button>
+          </form>
+        </div>
+        
+        <div class="helpful-links">
+          <h3>Popular Pages</h3>
+          <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/products">Products</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/contact">Contact Support</a></li>
+            <li><a href="/help">Help Center</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+  
+  <footer class="error-footer">
+    <p>&copy; 2026 Company Name. All rights reserved.</p>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-500.html b/skills/html-coder/assets/util-500.html
new file mode 100644
index 000000000..f42870694
--- /dev/null
+++ b/skills/html-coder/assets/util-500.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Internal server error. We're experiencing technical difficulties. Please try again later.">
+  <meta name="robots" content="noindex, nofollow">
+  <title>500 - Internal Server Error</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <main id="main" class="error-page">
+    <div class="error-container">
+      <div class="error-illustration">
+        <img src="500-illustration.svg" alt="" width="400" height="300" loading="eager">
+      </div>
+      
+      <div class="error-content">
+        <h1 class="error-code">500</h1>
+        <h2>Internal Server Error</h2>
+        <p class="error-message">Something went wrong on our end. We're working to fix the issue. Please try again in a few moments.</p>
+        
+        <div class="error-actions">
+          <a href="/" class="btn btn-primary">Go Home</a>
+          <button type="button" class="btn btn-outline" onclick="location.reload()">Refresh Page</button>
+        </div>
+        
+        <div class="error-info-box">
+          <h3>What can you do?</h3>
+          <ul>
+            <li><strong>Wait a moment</strong> and try refreshing the page</li>
+            <li><strong>Clear your browser cache</strong> and cookies, then try again</li>
+            <li><strong>Check our status page</strong> for any ongoing incidents: <a href="https://status.example.com" target="_blank" rel="noopener">status.example.com</a></li>
+            <li><strong>Contact support</strong> if the problem persists: <a href="/contact">support@example.com</a></li>
+          </ul>
+        </div>
+        
+        <div class="error-status">
+          <p><strong>Error ID:</strong> <code>ERR-2026-03-08-A7B3D9</code></p>
+          <p class="error-note"><small>Please include this error ID when contacting support</small></p>
+        </div>
+      </div>
+    </div>
+  </main>
+  
+  <footer class="error-footer">
+    <p>&copy; 2026 Company Name. All rights reserved.</p>
+    <nav aria-label="Support">
+      <a href="/help">Help Center</a>
+      <a href="/contact">Contact Support</a>
+      <a href="https://status.example.com">Status Page</a>
+    </nav>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-about.html b/skills/html-coder/assets/util-about.html
new file mode 100644
index 000000000..c98c14df7
--- /dev/null
+++ b/skills/html-coder/assets/util-about.html
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Learn about our company mission, values, team, and story. We're building innovative solutions to help teams work better together.">
+  <title>About Us - Our Story & Mission</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Company</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/products">Products</a></li>
+          <li><a href="/pricing">Pricing</a></li>
+          <li><a href="/about" aria-current="page">About</a></li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/login" class="btn-link">Sign In</a>
+          <a href="/signup" class="btn btn-primary">Get Started</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="about-hero">
+      <div class="container">
+        <h1>Building the Future of Collaboration</h1>
+        <p class="hero-subtitle">We're on a mission to help teams work smarter, not harder</p>
+      </div>
+    </section>
+    
+    <section class="about-story-section">
+      <div class="container">
+        <div class="story-content">
+          <h2>Our Story</h2>
+          
+          <p class="lead-paragraph">Founded in 2018, our company started with a simple observation: teams were struggling with too many disconnected tools, complicated workflows, and endless meetings.</p>
+          
+          <p>Three co-founders with backgrounds in software engineering, product design, and organizational psychology came together to build a better solution. We believed there had to be a simpler way for teams to collaborate and get work done.</p>
+          
+          <p>What started as a weekend project in a San Francisco garage has grown into a platform serving 100,000+ teams worldwide. Along the way, we've stayed true to our core belief: technology should empower people, not complicate their lives.</p>
+          
+          <p>Today, we're a team of 150+ people across three continents, united by a shared mission to make collaboration effortless for everyone.</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="mission-values-section">
+      <div class="container">
+        <div class="mission-box">
+          <h2>Our Mission</h2>
+          <p class="mission-statement">To empower every team to achieve more together by providing intuitive, powerful tools that simplify collaboration.</p>
+        </div>
+        
+        <div class="values-grid">
+          <h2>Our Values</h2>
+          
+          <article class="value-card">
+            <div class="value-icon" aria-hidden="true">👥</div>
+            <h3>People First</h3>
+            <p>We build for humans, not robots. Every feature is designed with real people and real workflows in mind.</p>
+          </article>
+          
+          <article class="value-card">
+            <div class="value-icon" aria-hidden="true">🎯</div>
+            <h3>Simplicity Wins</h3>
+            <p>Complex problems don't require complex solutions. We strive for elegance and clarity in everything we do.</p>
+          </article>
+          
+          <article class="value-card">
+            <div class="value-icon" aria-hidden="true">🚀</div>
+            <h3>Move Fast</h3>
+            <p>Speed matters. We ship early, learn quickly, and iterate constantly based on customer feedback.</p>
+          </article>
+          
+          <article class="value-card">
+            <div class="value-icon" aria-hidden="true">🌍</div>
+            <h3>Global Perspective</h3>
+            <p>Our customers span every timezone and culture. We build for a diverse, global audience.</p>
+          </article>
+          
+          <article class="value-card">
+            <div class="value-icon" aria-hidden="true">💪</div>
+            <h3>Own It</h3>
+            <p>We take responsibility for our work, our commitments, and our impact on customers and teammates.</p>
+          </article>
+          
+          <article class="value-card">
+            <div class="value-icon" aria-hidden="true">🌱</div>
+            <h3>Always Learning</h3>
+            <p>The best solution today might be obsolete tomorrow. We stay curious, humble, and open to new ideas.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="team-section">
+      <div class="container">
+        <h2>Meet the Leadership Team</h2>
+        
+        <div class="team-grid">
+          <article class="team-member-card">
+            <img src="team-sarah.jpg" alt="Sarah Chen" width="200" height="200" loading="lazy">
+            <h3>Sarah Chen</h3>
+            <p class="team-role">Co-founder & CEO</p>
+            <p class="team-bio">Former VP Product at Salesforce. Stanford CS. Passionate about human-centered design.</p>
+            <div class="team-social">
+              <a href="https://linkedin.com/in/sarahchen" aria-label="Sarah Chen on LinkedIn">LinkedIn</a>
+              <a href="https://twitter.com/sarahchen" aria-label="Sarah Chen on Twitter">Twitter</a>
+            </div>
+          </article>
+          
+          <article class="team-member-card">
+            <img src="team-marcus.jpg" alt="Marcus Johnson" width="200" height="200" loading="lazy">
+            <h3>Marcus Johnson</h3>
+            <p class="team-role">Co-founder & CTO</p>
+            <p class="team-bio">Built distributed systems at Google. MIT EECS. Believes in elegant, scalable architectures.</p>
+            <div class="team-social">
+              <a href="https://linkedin.com/in/marcusj" aria-label="Marcus Johnson on LinkedIn">LinkedIn</a>
+              <a href="https://github.com/marcusj" aria-label="Marcus Johnson on GitHub">GitHub</a>
+            </div>
+          </article>
+          
+          <article class="team-member-card">
+            <img src="team-priya.jpg" alt="Priya Patel" width="200" height="200" loading="lazy">
+            <h3>Priya Patel</h3>
+            <p class="team-role">Co-founder & Chief Design Officer</p>
+            <p class="team-bio">Design leader from IDEO. Yale Psychology PhD. Obsessed with user experience.</p>
+            <div class="team-social">
+              <a href="https://linkedin.com/in/priyapatel" aria-label="Priya Patel on LinkedIn">LinkedIn</a>
+              <a href="https://dribbble.com/priyapatel" aria-label="Priya Patel on Dribbble">Dribbble</a>
+            </div>
+          </article>
+          
+          <article class="team-member-card">
+            <img src="team-james.jpg" alt="James Kim" width="200" height="200" loading="lazy">
+            <h3>James Kim</h3>
+            <p class="team-role">VP of Engineering</p>
+            <p class="team-bio">Engineering leader from Stripe. Built payments infrastructure at scale.</p>
+            <div class="team-social">
+              <a href="https://linkedin.com/in/jameskim" aria-label="James Kim on LinkedIn">LinkedIn</a>
+            </div>
+          </article>
+          
+          <article class="team-member-card">
+            <img src="team-lisa.jpg" alt="Lisa Rodriguez" width="200" height="200" loading="lazy">
+            <h3>Lisa Rodriguez</h3>
+            <p class="team-role">VP of Customer Success</p>
+            <p class="team-bio">Customer advocate from HubSpot. Believes happy customers are the best growth strategy.</p>
+            <div class="team-social">
+              <a href="https://linkedin.com/in/lisarodriguez" aria-label="Lisa Rodriguez on LinkedIn">LinkedIn</a>
+            </div>
+          </article>
+          
+          <article class="team-member-card">
+            <img src="team-david.jpg" alt="David Thompson" width="200" height="200" loading="lazy">
+            <h3>David Thompson</h3>
+            <p class="team-role">VP of Sales</p>
+            <p class="team-bio">20 years in enterprise software sales. Focused on building long-term partnerships.</p>
+            <div class="team-social">
+              <a href="https://linkedin.com/in/davidthompson" aria-label="David Thompson on LinkedIn">LinkedIn</a>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="stats-section">
+      <div class="container">
+        <h2>By the Numbers</h2>
+        
+        <div class="stats-grid">
+          <div class="stat-box">
+            <strong>100,000+</strong>
+            <span>Teams using our platform</span>
+          </div>
+          
+          <div class="stat-box">
+            <strong>150+</strong>
+            <span>Team members worldwide</span>
+          </div>
+          
+          <div class="stat-box">
+            <strong>$40M</strong>
+            <span>Series B funding raised</span>
+          </div>
+          
+          <div class="stat-box">
+            <strong>99.9%</strong>
+            <span>Platform uptime</span>
+          </div>
+          
+          <div class="stat-box">
+            <strong>120+</strong>
+            <span>Countries served</span>
+          </div>
+          
+          <div class="stat-box">
+            <strong>4.8★</strong>
+            <span>Customer satisfaction</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="investors-section">
+      <div class="container">
+        <h2>Backed by Leading Investors</h2>
+        
+        <div class="investors-grid">
+          <img src="investor-sequoia.svg" alt="Sequoia Capital" width="140" height="50" loading="lazy">
+          <img src="investor-accel.svg" alt="Accel Partners" width="120" height="50" loading="lazy">
+          <img src="investor-yc.svg" alt="Y Combinator" width="80" height="50" loading="lazy">
+          <img src="investor-andreessen.svg" alt="Andreessen Horowitz" width="140" height="50" loading="lazy">
+        </div>
+      </div>
+    </section>
+    
+    <section class="careers-section">
+      <div class="container">
+        <h2>Join Our Team</h2>
+        <p>We're always looking for talented people who share our mission</p>
+        
+        <div class="careers-highlights">
+          <div class="highlight-item">
+            <span class="highlight-icon" aria-hidden="true">🏡</span>
+            <strong>Remote-First</strong>
+            <p>Work from anywhere</p>
+          </div>
+          
+          <div class="highlight-item">
+            <span class="highlight-icon" aria-hidden="true">🏥</span>
+            <strong>Great Benefits</strong>
+            <p>Health, dental, vision covered</p>
+          </div>
+          
+          <div class="highlight-item">
+            <span class="highlight-icon" aria-hidden="true">🌴</span>
+            <strong>Unlimited PTO</strong>
+            <p>Take time when you need it</p>
+          </div>
+          
+          <div class="highlight-item">
+            <span class="highlight-icon" aria-hidden="true">📚</span>
+            <strong>Learning Budget</strong>
+            <p>$2,000/year for growth</p>
+          </div>
+        </div>
+        
+        <a href="/careers" class="btn btn-primary btn-large">View Open Positions</a>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Company</h3>
+          <p>Building innovative solutions</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/updates">Updates</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Support</h3>
+          <ul>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/press">Press</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Company Name. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="main.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-contact.html b/skills/html-coder/assets/util-contact.html
new file mode 100644
index 000000000..1a65bacab
--- /dev/null
+++ b/skills/html-coder/assets/util-contact.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Contact us for support, sales inquiries, partnerships, or general questions. We're here to help.">
+  <title>Contact Us - Get in Touch</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Company</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/products">Products</a></li>
+          <li><a href="/pricing">Pricing</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="/contact" aria-current="page">Contact</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/login" class="btn-link">Sign In</a>
+          <a href="/signup" class="btn btn-primary">Get Started</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="contact-hero">
+      <div class="container">
+        <h1>Get in Touch</h1>
+        <p class="hero-subtitle">Have a question or need help? We'd love to hear from you.</p>
+      </div>
+    </section>
+    
+    <section class="contact-methods-section">
+      <div class="container">
+        <div class="contact-methods-grid">
+          <article class="contact-method-card">
+            <div class="contact-icon" aria-hidden="true">💬</div>
+            <h2>Live Chat</h2>
+            <p>Chat with our support team for quick answers</p>
+            <p><strong>Available:</strong> Mon-Fri, 9am-6pm EST</p>
+            <button class="btn btn-primary" onclick="openLiveChat()">Start Chat</button>
+          </article>
+          
+          <article class="contact-method-card">
+            <div class="contact-icon" aria-hidden="true">✉️</div>
+            <h2>Email Support</h2>
+            <p>Send us a detailed message and we'll respond within 24 hours</p>
+            <p><strong>Email:</strong> <a href="mailto:support@example.com">support@example.com</a></p>
+            <a href="#contact-form" class="btn btn-outline">Send Message</a>
+          </article>
+          
+          <article class="contact-method-card">
+            <div class="contact-icon" aria-hidden="true">📞</div>
+            <h2>Phone</h2>
+            <p>Speak directly with our team</p>
+            <p><strong>US:</strong> <a href="tel:+18005551234">1-800-555-1234</a></p>
+            <p><strong>UK:</strong> <a href="tel:+442012345678">+44 20 1234 5678</a></p>
+            <p class="contact-hours"><small>Mon-Fri, 9am-6pm EST</small></p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section id="contact-form" class="contact-form-section">
+      <div class="container">
+        <div class="contact-form-layout">
+          <div class="contact-form-intro">
+            <h2>Send Us a Message</h2>
+            <p>Fill out the form below and we'll get back to you as soon as possible.</p>
+            
+            <div class="response-time-badge">
+              <span class="badge-icon">⚡</span>
+              <div>
+                <strong>Average response time</strong>
+                <p>Under 2 hours during business hours</p>
+              </div>
+            </div>
+          </div>
+          
+          <form class="contact-form" action="/contact" method="POST">
+            <div class="form-row">
+              <div class="form-group">
+                <label for="first-name">First Name *</label>
+                <input type="text" id="first-name" name="first_name" required autocomplete="given-name">
+              </div>
+              
+              <div class="form-group">
+                <label for="last-name">Last Name *</label>
+                <input type="text" id="last-name" name="last_name" required autocomplete="family-name">
+              </div>
+            </div>
+            
+            <div class="form-row">
+              <div class="form-group">
+                <label for="email">Email Address *</label>
+                <input type="email" id="email" name="email" required autocomplete="email">
+              </div>
+              
+              <div class="form-group">
+                <label for="phone">Phone Number</label>
+                <input type="tel" id="phone" name="phone" autocomplete="tel">
+              </div>
+            </div>
+            
+            <div class="form-group">
+              <label for="subject">Subject *</label>
+              <select id="subject" name="subject" required>
+                <option value="">Select a topic...</option>
+                <option value="support">Technical Support</option>
+                <option value="sales">Sales Inquiry</option>
+                <option value="billing">Billing Question</option>
+                <option value="partnership">Partnership Opportunity</option>
+                <option value="feedback">Product Feedback</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="message">Message *</label>
+              <textarea id="message" name="message" rows="6" required placeholder="Tell us how we can help..."></textarea>
+              <small class="form-help-text">Please provide as much detail as possible</small>
+            </div>
+            
+            <div class="form-group-checkbox">
+              <input type="checkbox" id="newsletter" name="newsletter" value="yes">
+              <label for="newsletter">Send me product updates and company news</label>
+            </div>
+            
+            <button type="submit" class="btn btn-primary btn-large">Send Message</button>
+            
+            <p class="form-note"><small>By submitting this form, you agree to our <a href="/privacy">Privacy Policy</a></small></p>
+          </form>
+        </div>
+      </div>
+    </section>
+    
+    <section class="office-locations-section">
+      <div class="container">
+        <h2>Our Offices</h2>
+        
+        <div class="offices-grid">
+          <article class="office-card">
+            <h3>San Francisco (HQ)</h3>
+            <address>
+              123 Market Street<br>
+              Suite 500<br>
+              San Francisco, CA 94103<br>
+              United States
+            </address>
+            <p><a href="tel:+14155551234">+1 (415) 555-1234</a></p>
+            <p><a href="mailto:sf@example.com">sf@example.com</a></p>
+          </article>
+          
+          <article class="office-card">
+            <h3>London</h3>
+            <address>
+              45 Finsbury Pavement<br>
+              London EC2A 1PQ<br>
+              United Kingdom
+            </address>
+            <p><a href="tel:+442012345678">+44 20 1234 5678</a></p>
+            <p><a href="mailto:london@example.com">london@example.com</a></p>
+          </article>
+          
+          <article class="office-card">
+            <h3>Singapore</h3>
+            <address>
+              1 Raffles Place<br>
+              #40-02 One Raffles Place<br>
+              Singapore 048616
+            </address>
+            <p><a href="tel:+6562345678">+65 6234 5678</a></p>
+            <p><a href="mailto:singapore@example.com">singapore@example.com</a></p>
+          </article>
+        </div>
+      </div>
+    </section>
+    
+    <section class="department-contacts-section">
+      <div class="container">
+        <h2>Department Contacts</h2>
+        
+        <div class="departments-grid">
+          <div class="department">
+            <h3>💼 Sales</h3>
+            <p>Product demos and pricing information</p>
+            <p><a href="mailto:sales@example.com">sales@example.com</a></p>
+          </div>
+          
+          <div class="department">
+            <h3>🔧 Technical Support</h3>
+            <p>Help with technical issues</p>
+            <p><a href="mailto:support@example.com">support@example.com</a></p>
+          </div>
+          
+          <div class="department">
+            <h3>💳 Billing</h3>
+            <p>Questions about invoices and payments</p>
+            <p><a href="mailto:billing@example.com">billing@example.com</a></p>
+          </div>
+          
+          <div class="department">
+            <h3>📰 Press & Media</h3>
+            <p>Media inquiries and press releases</p>
+            <p><a href="mailto:press@example.com">press@example.com</a></p>
+          </div>
+          
+          <div class="department">
+            <h3>🤝 Partnerships</h3>
+            <p>Business development opportunities</p>
+            <p><a href="mailto:partners@example.com">partners@example.com</a></p>
+          </div>
+          
+          <div class="department">
+            <h3>💼 Careers</h3>
+            <p>Job opportunities and applications</p>
+            <p><a href="mailto:careers@example.com">careers@example.com</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <section class="faq-preview-section">
+      <div class="container">
+        <h2>Frequently Asked Questions</h2>
+        <p>Looking for quick answers? Check out our FAQ page</p>
+        
+        <div class="faq-preview-items">
+          <div class="faq-preview-item">
+            <h3>What are your support hours?</h3>
+            <p>Our support team is available Monday-Friday, 9am-6pm EST via chat, email, and phone.</p>
+          </div>
+          
+          <div class="faq-preview-item">
+            <h3>How long does it take to get a response?</h3>
+            <p>We typically respond within 2 hours during business hours, and within 24 hours outside business hours.</p>
+          </div>
+          
+          <div class="faq-preview-item">
+            <h3>Do you offer enterprise support?</h3>
+            <p>Yes! Enterprise customers receive dedicated account managers and 24/7 priority support.</p>
+          </div>
+        </div>
+        
+        <a href="/faq" class="btn btn-outline">View All FAQs</a>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Company</h3>
+          <p>Building innovative solutions</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/updates">Product Updates</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Support</h3>
+          <ul>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/press">Press</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Company Name. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="contact.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-faq.html b/skills/html-coder/assets/util-faq.html
new file mode 100644
index 000000000..0816c83a0
--- /dev/null
+++ b/skills/html-coder/assets/util-faq.html
@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Find answers to frequently asked questions about our product, billing, technical support, and account management.">
+  <title>Frequently Asked Questions (FAQ)</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Company</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/products">Products</a></li>
+          <li><a href="/pricing">Pricing</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/login" class="btn-link">Sign In</a>
+          <a href="/signup" class="btn btn-primary">Get Started</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="faq-hero">
+      <div class="container">
+        <h1>Frequently Asked Questions</h1>
+        <p class="hero-subtitle">Find answers to common questions about our product and services</p>
+        
+        <form class="faq-search-form" role="search">
+          <label for="faq-search" class="sr-only">Search FAQs</label>
+          <input 
+            type="search" 
+            id="faq-search" 
+            name="q" 
+            placeholder="Search for answers..." 
+            aria-label="Search FAQs">
+          <button type="submit" aria-label="Search">Search</button>
+        </form>
+      </div>
+    </section>
+    
+    <section class="faq-content">
+      <div class="container">
+        <div class="faq-categories">
+          <button class="category-btn active" data-category="all" aria-pressed="true">All Questions</button>
+          <button class="category-btn" data-category="general" aria-pressed="false">General</button>
+          <button class="category-btn" data-category="billing" aria-pressed="false">Billing</button>
+          <button class="category-btn" data-category="technical" aria-pressed="false">Technical</button>
+          <button class="category-btn" data-category="account" aria-pressed="false">Account</button>
+          <button class="category-btn" data-category="security" aria-pressed="false">Security</button>
+        </div>
+        
+        <!-- General -->
+        <article class="faq-section" data-category="general">
+          <h2>General Questions</h2>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>What is your product and what does it do?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Our product is a collaborative project management platform designed to help teams organize work, track progress, and communicate effectively. It combines task management, file sharing, team messaging, and reporting in one intuitive interface.</p>
+              <p>Key features include real-time collaboration, customizable workflows, integration with 50+ popular tools, and powerful analytics to help you understand team productivity.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>Who should use your product?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Our platform is ideal for teams of any size—from startups to enterprises—across various industries including software development, marketing, design, operations, and more.</p>
+              <p>If your team struggles with scattered tools, missed deadlines, or unclear priorities, our product can help streamline your workflow.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>Is there a free trial available?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Yes! We offer a 14-day free trial of our Professional plan with full access to all features. No credit card required to start your trial.</p>
+              <p>We also have a free Starter plan available indefinitely for small teams (up to 5 members) with basic features.</p>
+            </div>
+          </details>
+        </article>
+        
+        <!-- Billing -->
+        <article class="faq-section" data-category="billing">
+          <h2>Billing & Pricing</h2>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>How much does your product cost?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>We offer three pricing tiers:</p>
+              <ul>
+                <li><strong>Starter:</strong> Free (up to 5 team members, 10 projects)</li>
+                <li><strong>Professional:</strong> $29/month per user (unlimited projects, advanced features)</li>
+                <li><strong>Enterprise:</strong> Custom pricing (dedicated support, custom integrations, SSO)</li>
+              </ul>
+              <p>Annual billing is available with a 20% discount. <a href="/pricing">View detailed pricing</a></p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>Can I change my plan later?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Absolutely! You can upgrade or downgrade your plan at any time from your account settings.</p>
+              <p>When upgrading, you'll be charged a prorated amount for the remainder of your billing period. When downgrading, the change takes effect at the start of your next billing cycle.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>What payment methods do you accept?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>We accept all major credit cards (Visa, Mastercard, American Express, Discover) and PayPal.</p>
+              <p>Enterprise customers can pay via invoice (bank transfer or check). Contact our sales team to set up invoice billing.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>What is your refund policy?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>We offer a 30-day money-back guarantee. If you're not satisfied with our product within the first 30 days, contact us for a full refund.</p>
+              <p>After 30 days, subscriptions are non-refundable, but you can cancel anytime to prevent future charges.</p>
+            </div>
+          </details>
+        </article>
+        
+        <!-- Technical -->
+        <article class="faq-section" data-category="technical">
+          <h2>Technical Questions</h2>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>What browsers do you support?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Our platform works best on the latest versions of:</p>
+              <ul>
+                <li>Google Chrome (recommended)</li>
+                <li>Mozilla Firefox</li>
+                <li>Safari (macOS and iOS)</li>
+                <li>Microsoft Edge</li>
+              </ul>
+              <p>We recommend keeping your browser up to date for the best experience and security.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>Do you have mobile apps?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Yes! We have native mobile apps for both iOS (iPhone and iPad) and Android devices.</p>
+              <p>Download from the <a href="https://apps.apple.com" target="_blank" rel="noopener">App Store</a> or <a href="https://play.google.com" target="_blank" rel="noopener">Google Play Store</a>. All plans have access to mobile apps.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>What integrations are available?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>We integrate with 50+ popular tools including:</p>
+              <ul>
+                <li><strong>Communication:</strong> Slack, Microsoft Teams, Zoom</li>
+                <li><strong>File Storage:</strong> Google Drive, Dropbox, Box, OneDrive</li>
+                <li><strong>Development:</strong> GitHub, GitLab, Bitbucket, Jira</li>
+                <li><strong>Calendar:</strong> Google Calendar, Outlook Calendar</li>
+                <li><strong>CRM:</strong> Salesforce, HubSpot</li>
+              </ul>
+              <p>We also provide a REST API for custom integrations.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>Can I import data from another tool?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Yes! We provide import tools for popular platforms including Asana, Trello, Monday.com, and Basecamp.</p>
+              <p>You can also import data via CSV files. Our support team can help with large-scale migrations. <a href="/contact">Contact us</a> to discuss your migration needs.</p>
+            </div>
+          </details>
+        </article>
+        
+        <!-- Account -->
+        <article class="faq-section" data-category="account">
+          <h2>Account Management</h2>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>How do I add team members?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>To add team members:</p>
+              <ol>
+                <li>Go to Settings → Team Members</li>
+                <li>Click "Invite Members"</li>
+                <li>Enter email addresses (one per line or comma-separated)</li>
+                <li>Select their role (Admin, Member, or Guest)</li>
+                <li>Click "Send Invitations"</li>
+              </ol>
+              <p>Team members will receive an email invitation to join your workspace.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>What's the difference between Admin, Member, and Guest roles?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p><strong>Admins</strong> have full access including billing, team management, and all workspace settings.</p>
+              <p><strong>Members</strong> can create and manage projects, invite guests, but cannot access billing or remove admins.</p>
+              <p><strong>Guests</strong> have limited access to specific projects they're invited to. Great for clients or external collaborators.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>How do I delete my account?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>To delete your account:</p>
+              <ol>
+                <li>Go to Settings → Account</li>
+                <li>Scroll to the bottom and click "Delete Account"</li>
+                <li>Confirm deletion by typing your email address</li>
+              </ol>
+              <p><strong>Warning:</strong> This permanently deletes all your data and cannot be undone. Consider exporting your data first.</p>
+            </div>
+          </details>
+        </article>
+        
+        <!-- Security -->
+        <article class="faq-section" data-category="security">
+          <h2>Security & Privacy</h2>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>How secure is my data?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Security is our top priority. We use:</p>
+              <ul>
+                <li><strong>Encryption:</strong> 256-bit SSL/TLS encryption for data in transit, AES-256 encryption for data at rest</li>
+                <li><strong>Infrastructure:</strong> AWS with SOC 2 Type II compliance</li>
+                <li><strong>Backups:</strong> Automatic daily backups with 30-day retention</li>
+                <li><strong>Monitoring:</strong> 24/7 security monitoring and threat detection</li>
+              </ul>
+              <p>Read our full <a href="/security">Security Policy</a> for details.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>Do you support two-factor authentication (2FA)?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Yes! We strongly recommend enabling 2FA for all accounts. We support:</p>
+              <ul>
+                <li>Authenticator apps (Google Authenticator, Authy, etc.)</li>
+                <li>SMS verification</li>
+                <li>Hardware security keys (YubiKey, etc.)</li>
+              </ul>
+              <p>Enable 2FA in Settings → Security → Two-Factor Authentication.</p>
+            </div>
+          </details>
+          
+          <details class="faq-item">
+            <summary>
+              <h3>Are you GDPR compliant?</h3>
+              <span class="faq-icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-answer">
+              <p>Yes, we are fully GDPR compliant. We provide:</p>
+              <ul>
+                <li>Data portability (export your data anytime)</li>
+                <li>Right to deletion (delete your account and data)</li>
+                <li>Data processing agreements (DPA) for enterprise customers</li>
+                <li>Transparent privacy practices</li>
+              </ul>
+              <p>Read our <a href="/privacy">Privacy Policy</a> for complete details.</p>
+            </div>
+          </details>
+        </article>
+      </div>
+    </section>
+    
+    <section class="faq-help-section">
+      <div class="container">
+        <h2>Still Need Help?</h2>
+        <p>Can't find the answer you're looking for? Our support team is here to help.</p>
+        
+        <div class="help-options">
+          <div class="help-option">
+            <h3>Contact Support</h3>
+            <p>Email us at support@example.com</p>
+            <a href="/contact" class="btn btn-outline">Contact Us</a>
+          </div>
+          
+          <div class="help-option">
+            <h3>Help Center</h3>
+            <p>Browse guides and tutorials</p>
+            <a href="/help" class="btn btn-outline">Visit Help Center</a>
+          </div>
+          
+          <div class="help-option">
+            <h3>Live Chat</h3>
+            <p>Chat with us Mon-Fri 9am-6pm EST</p>
+            <button class="btn btn-primary" onclick="startChat()">Start Chat</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Company</h3>
+          <p>Building innovative solutions</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/updates">Updates</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Support</h3>
+          <ul>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/press">Press</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Company Name. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="faq.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-login.html b/skills/html-coder/assets/util-login.html
new file mode 100644
index 000000000..de04d79f4
--- /dev/null
+++ b/skills/html-coder/assets/util-login.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Sign in to your account to access your dashboard, settings, and personalized features.">
+  <meta name="robots" content="noindex, nofollow">
+  <title>Sign In | Your Account</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <main id="main" class="auth-page">
+    <div class="auth-container">
+      <div class="auth-branding">
+        <a href="/" class="logo-link">
+          <img src="logo.svg" alt="Company Logo" width="150" height="50" loading="eager">
+        </a>
+      </div>
+      
+      <div class="auth-card">
+        <h1>Welcome back</h1>
+        <p class="auth-subtitle">Sign in to your account to continue</p>
+        
+        <form class="auth-form" action="/login" method="POST">
+          <div class="form-group">
+            <label for="email">Email Address</label>
+            <input 
+              type="email" 
+              id="email" 
+              name="email" 
+              placeholder="you@example.com"
+              required 
+              autocomplete="email"
+              autofocus>
+          </div>
+          
+          <div class="form-group">
+            <div class="label-with-link">
+              <label for="password">Password</label>
+              <a href="/forgot-password" class="link-small">Forgot password?</a>
+            </div>
+            <input 
+              type="password" 
+              id="password" 
+              name="password" 
+              placeholder="Enter your password"
+              required 
+              autocomplete="current-password"
+              minlength="8">
+          </div>
+          
+          <div class="form-group-checkbox">
+            <input type="checkbox" id="remember" name="remember" value="yes">
+            <label for="remember">Remember me for 30 days</label>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large btn-full-width">Sign In</button>
+        </form>
+        
+        <div class="divider">
+          <span>Or continue with</span>
+        </div>
+        
+        <div class="social-auth-buttons">
+          <button type="button" class="btn btn-outline btn-social" onclick="loginWithGoogle()">
+            <img src="google-icon.svg" alt="" width="20" height="20" loading="lazy">
+            <span>Google</span>
+          </button>
+          
+          <button type="button" class="btn btn-outline btn-social" onclick="loginWithGithub()">
+            <img src="github-icon.svg" alt="" width="20" height="20" loading="lazy">
+            <span>GitHub</span>
+          </button>
+        </div>
+        
+        <p class="auth-footer-text">
+          Don't have an account? 
+          <a href="/signup">Sign up</a>
+        </p>
+      </div>
+      
+      <footer class="auth-footer">
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Service</a>
+          <a href="/help">Help Center</a>
+        </nav>
+      </footer>
+    </div>
+  </main>
+  
+  <script src="auth.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-pricing.html b/skills/html-coder/assets/util-pricing.html
new file mode 100644
index 000000000..daad76ec3
--- /dev/null
+++ b/skills/html-coder/assets/util-pricing.html
@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Simple, transparent pricing plans for teams of all sizes. Choose the plan that fits your needs with flexible monthly or annual billing.">
+  <title>Pricing - Choose Your Plan</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Company</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/products">Products</a></li>
+          <li><a href="/pricing" aria-current="page">Pricing</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/login" class="btn-link">Sign In</a>
+          <a href="/signup" class="btn btn-primary">Get Started</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <section class="pricing-hero">
+      <div class="container">
+        <h1>Simple, Transparent Pricing</h1>
+        <p class="hero-subtitle">Choose the plan that fits your needs. No hidden fees. Cancel anytime.</p>
+        
+        <div class="billing-toggle">
+          <span class="toggle-label">Monthly</span>
+          <button 
+            type="button" 
+            class="toggle-switch" 
+            role="switch" 
+            aria-checked="false" 
+            aria-label="Switch to annual billing"
+            onclick="toggleBilling(this)">
+            <span class="toggle-slider"></span>
+          </button>
+          <span class="toggle-label">Annual<span class="save-badge">Save 20%</span></span>
+        </div>
+      </div>
+    </section>
+    
+    <section class="pricing-plans-section">
+      <div class="container">
+        <div class="pricing-grid">
+          <article class="pricing-card">
+            <div class="pricing-header">
+              <h2>Starter</h2>
+              <p class="pricing-description">Perfect for individuals and small teams getting started</p>
+            </div>
+            
+            <div class="pricing-price">
+              <span class="price-amount" data-monthly="$9" data-annual="$7.20">$9</span>
+              <span class="price-period">per user/month</span>
+            </div>
+            
+            <a href="/signup?plan=starter" class="btn btn-outline btn-large btn-full-width">Start Free Trial</a>
+            
+            <div class="pricing-features">
+              <h3>What's included:</h3>
+              <ul>
+                <li>✓ Up to 5 team members</li>
+                <li>✓ 10 projects</li>
+                <li>✓ 10GB storage</li>
+                <li>✓ Basic reporting</li>
+                <li>✓ Email support</li>
+                <li>✓ Mobile apps</li>
+                <li>✓ 2-factor authentication</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="pricing-card featured">
+            <div class="popular-badge">Most Popular</div>
+            <div class="pricing-header">
+              <h2>Professional</h2>
+              <p class="pricing-description">For growing teams that need more power and flexibility</p>
+            </div>
+            
+            <div class="pricing-price">
+              <span class="price-amount" data-monthly="$29" data-annual="$23.20">$29</span>
+              <span class="price-period">per user/month</span>
+            </div>
+            
+            <a href="/signup?plan=professional" class="btn btn-primary btn-large btn-full-width">Start Free Trial</a>
+            
+            <div class="pricing-features">
+              <h3>Everything in Starter, plus:</h3>
+              <ul>
+                <li>✓ Unlimited team members</li>
+                <li>✓ Unlimited projects</li>
+                <li>✓ 100GB storage per user</li>
+                <li>✓ Advanced reporting & analytics</li>
+                <li>✓ Priority email & chat support</li>
+                <li>✓ Custom fields & workflows</li>
+                <li>✓ Integrations (50+ apps)</li>
+                <li>✓ Advanced permissions</li>
+                <li>✓ Activity logs & audit trails</li>
+              </ul>
+            </div>
+          </article>
+          
+          <article class="pricing-card">
+            <div class="pricing-header">
+              <h2>Enterprise</h2>
+              <p class="pricing-description">Advanced features and support for large organizations</p>
+            </div>
+            
+            <div class="pricing-price">
+              <span class="price-amount">Custom</span>
+            </div>
+            
+            <a href="/contact-sales" class="btn btn-outline btn-large btn-full-width">Contact Sales</a>
+            
+            <div class="pricing-features">
+              <h3>Everything in Professional, plus:</h3>
+              <ul>
+                <li>✓ Unlimited storage</li>
+                <li>✓ Dedicated account manager</li>
+                <li>✓ 24/7 phone support</li>
+                <li>✓ 99.9% uptime SLA</li>
+                <li>✓ SSO & SAML</li>
+                <li>✓ Advanced security controls</li>
+                <li>✓ Custom integrations</li>
+                <li>✓ On-premise deployment option</li>
+                <li>✓ Training & onboarding</li>
+              </ul>
+            </div>
+          </article>
+        </div>
+        
+        <div class="pricing-trial-note">
+          <p>All plans include a <strong>14-day free trial</strong>. No credit card required.</p>
+        </div>
+      </div>
+    </section>
+    
+    <section class="comparison-table-section">
+      <div class="container">
+        <h2>Compare Plans</h2>
+        
+        <div class="comparison-table-wrapper">
+          <table class="comparison-table">
+            <thead>
+              <tr>
+                <th scope="col">Features</th>
+                <th scope="col">Starter</th>
+                <th scope="col">Professional</th>
+                <th scope="col">Enterprise</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">Team members</th>
+                <td>Up to 5</td>
+                <td>Unlimited</td>
+                <td>Unlimited</td>
+              </tr>
+              <tr>
+                <th scope="row">Projects</th>
+                <td>10</td>
+                <td>Unlimited</td>
+                <td>Unlimited</td>
+              </tr>
+              <tr>
+                <th scope="row">Storage</th>
+                <td>10GB total</td>
+                <td>100GB per user</td>
+                <td>Unlimited</td>
+              </tr>
+              <tr>
+                <th scope="row">Integrations</th>
+                <td>Basic (10 apps)</td>
+                <td>Advanced (50+ apps)</td>
+                <td>Custom + API access</td>
+              </tr>
+              <tr>
+                <th scope="row">Reporting</th>
+                <td>Basic</td>
+                <td>Advanced analytics</td>
+                <td>Custom reports</td>
+              </tr>
+              <tr>
+                <th scope="row">Support</th>
+                <td>Email</td>
+                <td>Email & chat (priority)</td>
+                <td>24/7 phone + dedicated manager</td>
+              </tr>
+              <tr>
+                <th scope="row">2FA / Security</th>
+                <td>✓</td>
+                <td>✓</td>
+                <td>✓ Advanced security</td>
+              </tr>
+              <tr>
+                <th scope="row">Activity logs</th>
+                <td>30 days</td>
+                <td>1 year</td>
+                <td>Unlimited</td>
+              </tr>
+              <tr>
+                <th scope="row">SSO / SAML</th>
+                <td>—</td>
+                <td>—</td>
+                <td>✓</td>
+              </tr>
+              <tr>
+                <th scope="row">SLA</th>
+                <td>—</td>
+                <td>99% uptime</td>
+                <td>99.9% uptime guaranteed</td>
+              </tr>
+              <tr>
+                <th scope="row">API access</th>
+                <td>Read-only</td>
+                <td>Full access</td>
+                <td>Full + custom webhooks</td>
+              </tr>
+              <tr>
+                <th scope="row">Training</th>
+                <td>Documentation</td>
+                <td>Webinars</td>
+                <td>Personalized onboarding</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+    
+    <section class="pricing-faq-section">
+      <div class="container">
+        <h2>Frequently Asked Questions</h2>
+        
+        <div class="faq-grid">
+          <article class="faq-item">
+            <h3>Can I change plans later?</h3>
+            <p>Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>What payment methods do you accept?</h3>
+            <p>We accept all major credit cards (Visa, Mastercard, American Express) and PayPal. Enterprise customers can pay by invoice.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>Is there a long-term contract?</h3>
+            <p>No. All plans are month-to-month or annual (for a discount). You can cancel anytime with no penalties.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>What happens when I reach my limit?</h3>
+            <p>We'll notify you when you're approaching your limits. You can upgrade your plan or remove inactive users/projects.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>Do you offer discounts for nonprofits?</h3>
+            <p>Yes! We offer 50% off for registered nonprofits and educational institutions. Contact sales for details.</p>
+          </article>
+          
+          <article class="faq-item">
+            <h3>Is my data secure?</h3>
+            <p>Absolutely. We use bank-level encryption, regular security audits, and are SOC 2 Type II certified. Your data is backed up daily.</p>
+          </article>
+        </div>
+        
+        <div class="faq-cta">
+          <p>Still have questions?</p>
+          <a href="/contact" class="btn btn-outline">Contact Sales</a>
+          <a href="/faq" class="btn-link">View All FAQs</a>
+        </div>
+      </div>
+    </section>
+    
+    <section class="pricing-cta-section">
+      <div class="container">
+        <h2>Ready to Get Started?</h2>
+        <p>Join thousands of teams using our platform</p>
+        <a href="/signup" class="btn btn-primary btn-large">Start Your Free Trial</a>
+        <p class="cta-note"><small>No credit card required • 14-day free trial • Cancel anytime</small></p>
+      </div>
+    </section>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Company</h3>
+          <p>Building innovative solutions</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/updates">Updates</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Support</h3>
+          <ul>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Company</h3>
+          <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/careers">Careers</a></li>
+            <li><a href="/press">Press</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Company Name. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+  
+  <script src="pricing.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-privacy.html b/skills/html-coder/assets/util-privacy.html
new file mode 100644
index 000000000..5410a08ee
--- /dev/null
+++ b/skills/html-coder/assets/util-privacy.html
@@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Privacy Policy for our service. Learn how we collect, use, protect, and share your personal information.">
+  <meta name="robots" content="noindex, nofollow">
+  <title>Privacy Policy</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Company</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/products">Products</a></li>
+          <li><a href="/pricing">Pricing</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/login" class="btn-link">Sign In</a>
+          <a href="/signup" class="btn btn-primary">Get Started</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <article class="legal-document">
+      <div class="container">
+        <header class="legal-header">
+          <h1>Privacy Policy</h1>
+          <p class="legal-meta">Last updated: <time datetime="2026-03-01">March 1, 2026</time></p>
+        </header>
+        
+        <nav class="legal-toc" aria-label="Table of contents">
+          <h2>Table of Contents</h2>
+          <ol>
+            <li><a href="#introduction">Introduction</a></li>
+            <li><a href="#information-collection">Information We Collect</a></li>
+            <li><a href="#information-use">How We Use Your Information</a></li>
+            <li><a href="#information-sharing">How We Share Your Information</a></li>
+            <li><a href="#data-retention">Data Retention</a></li>
+            <li><a href="#security">Data Security</a></li>
+            <li><a href="#cookies">Cookies and Tracking</a></li>
+            <li><a href="#your-rights">Your Privacy Rights</a></li>
+            <li><a href="#children">Children's Privacy</a></li>
+            <li><a href="#international">International Data Transfers</a></li>
+            <li><a href="#changes">Changes to This Policy</a></li>
+            <li><a href="#contact">Contact Us</a></li>
+          </ol>
+        </nav>
+        
+        <section class="legal-section" id="introduction">
+          <h2>1. Introduction</h2>
+          
+          <p>Welcome to Company Name. We respect your privacy and are committed to protecting your personal information. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our website, mobile application, and services (collectively, the "Service").</p>
+          
+          <p>By using the Service, you agree to the collection and use of information in accordance with this Privacy Policy. If you do not agree with this policy, please do not use the Service.</p>
+        </section>
+        
+        <section class="legal-section" id="information-collection">
+          <h2>2. Information We Collect</h2>
+          
+          <h3>2.1 Information You Provide to Us</h3>
+          
+          <p><strong>Account Information:</strong> When you register for an account, we collect:</p>
+          <ul>
+            <li>Name and email address</li>
+            <li>Password (encrypted)</li>
+            <li>Company name and job title (optional)</li>
+            <li>Profile picture (optional)</li>
+          </ul>
+          
+          <p><strong>Payment Information:</strong> When you make a purchase, we collect:</p>
+          <ul>
+            <li>Credit card information (processed securely by our payment processor)</li>
+            <li>Billing address</li>
+            <li>Transaction history</li>
+          </ul>
+          
+          <p><strong>User Content:</strong> We collect and store the content you create, upload, or share through the Service, including:</p>
+          <ul>
+            <li>Projects, tasks, and notes</li>
+            <li>Files and documents you upload</li>
+            <li>Comments and messages</li>
+            <li>Team and workspace data</li>
+          </ul>
+          
+          <p><strong>Communications:</strong> If you contact us, we may collect:</p>
+          <ul>
+            <li>Your email address and name</li>
+            <li>The content of your message</li>
+            <li>Support ticket information</li>
+          </ul>
+          
+          <h3>2.2 Information Collected Automatically</h3>
+          
+          <p><strong>Usage Data:</strong> We automatically collect information about how you use the Service:</p>
+          <ul>
+            <li>Pages viewed and features used</li>
+            <li>Time spent on the Service</li>
+            <li>Links clicked and search queries</li>
+            <li>Actions taken within the Service</li>
+          </ul>
+          
+          <p><strong>Device Information:</strong> We collect information about your device:</p>
+          <ul>
+            <li>IP address</li>
+            <li>Browser type and version</li>
+            <li>Operating system</li>
+            <li>Device identifiers</li>
+            <li>Mobile network information</li>
+          </ul>
+          
+          <p><strong>Location Data:</strong> We may collect approximate location information based on your IP address.</p>
+          
+          <h3>2.3 Information from Third Parties</h3>
+          
+          <p>We may receive information about you from third parties, such as:</p>
+          <ul>
+            <li>Social media platforms (if you connect your accounts)</li>
+            <li>Authentication services (Google, GitHub, etc.)</li>
+            <li>Analytics providers</li>
+            <li>Marketing partners</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="information-use">
+          <h2>3. How We Use Your Information</h2>
+          
+          <p>We use your information for the following purposes:</p>
+          
+          <h3>3.1 Provide and Improve the Service</h3>
+          <ul>
+            <li>Create and manage your account</li>
+            <li>Process transactions and send transaction notifications</li>
+            <li>Provide customer support</li>
+            <li>Develop new features and improve existing ones</li>
+            <li>Personalize your experience</li>
+          </ul>
+          
+          <h3>3.2 Communication</h3>
+          <ul>
+            <li>Send service updates and notifications</li>
+            <li>Respond to your inquiries</li>
+            <li>Send marketing communications (with your consent)</li>
+            <li>Conduct surveys and gather feedback</li>
+          </ul>
+          
+          <h3>3.3 Security and Compliance</h3>
+          <ul>
+            <li>Detect and prevent fraud, abuse, and security incidents</li>
+            <li>Debug and fix technical issues</li>
+            <li>Comply with legal obligations</li>
+            <li>Enforce our Terms of Service</li>
+          </ul>
+          
+          <h3>3.4 Analytics and Research</h3>
+          <ul>
+            <li>Analyze usage patterns and trends</li>
+            <li>Measure the effectiveness of marketing campaigns</li>
+            <li>Conduct research to improve our Service</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="information-sharing">
+          <h2>4. How We Share Your Information</h2>
+          
+          <p>We do not sell your personal information. We may share your information in the following circumstances:</p>
+          
+          <h3>4.1 With Your Consent</h3>
+          <p>We may share your information when you give us explicit permission to do so.</p>
+          
+          <h3>4.2 Service Providers</h3>
+          <p>We share information with third-party service providers who perform services on our behalf, including:</p>
+          <ul>
+            <li><strong>Cloud hosting:</strong> Amazon Web Services (AWS)</li>
+            <li><strong>Payment processing:</strong> Stripe</li>
+            <li><strong>Email delivery:</strong> SendGrid</li>
+            <li><strong>Analytics:</strong> Google Analytics, Mixpanel</li>
+            <li><strong>Customer support:</strong> Zendesk, Intercom</li>
+          </ul>
+          <p>These providers are contractually obligated to protect your information and use it only for the purposes we specify.</p>
+          
+          <h3>4.3 Business Transfers</h3>
+          <p>If we are involved in a merger, acquisition, or sale of assets, your information may be transferred as part of that transaction. We will notify you before your information becomes subject to a different privacy policy.</p>
+          
+          <h3>4.4 Legal Requirements</h3>
+          <p>We may disclose your information if required by law or in response to:</p>
+          <ul>
+            <li>Court orders or subpoenas</li>
+            <li>Law enforcement requests</li>
+            <li>Legal processes or government investigations</li>
+          </ul>
+          
+          <h3>4.5 Protection of Rights</h3>
+          <p>We may disclose information to:</p>
+          <ul>
+            <li>Protect our rights, property, or safety</li>
+            <li>Protect the rights, property, or safety of our users or others</li>
+            <li>Prevent fraud or abuse</li>
+            <li>Enforce our Terms of Service</li>
+          </ul>
+          
+          <h3>4.6 Aggregated Data</h3>
+          <p>We may share aggregated or de-identified information that cannot reasonably be used to identify you.</p>
+        </section>
+        
+        <section class="legal-section" id="data-retention">
+          <h2>5. Data Retention</h2>
+          
+          <p>We retain your personal information for as long as necessary to fulfill the purposes outlined in this Privacy Policy, unless a longer retention period is required or permitted by law.</p>
+          
+          <p><strong>Account Data:</strong> We retain your account information for as long as your account is active or as needed to provide you services.</p>
+          
+          <p><strong>After Account Deletion:</strong> When you delete your account, we will delete your personal information within 30 days, except where we are required to retain it for legal or compliance purposes.</p>
+          
+          <p><strong>Backup Data:</strong> Your information may remain in our backup systems for up to 90 days after deletion before being permanently removed.</p>
+        </section>
+        
+        <section class="legal-section" id="security">
+          <h2>6. Data Security</h2>
+          
+          <p>We implement appropriate technical and organizational measures to protect your information against unauthorized access, alteration, disclosure, or destruction.</p>
+          
+          <h3>6.1 Security Measures</h3>
+          <ul>
+            <li><strong>Encryption:</strong> Data in transit is encrypted using SSL/TLS; data at rest is encrypted using AES-256</li>
+            <li><strong>Access Controls:</strong> Strict access controls limit who can access your information</li>
+            <li><strong>Monitoring:</strong> 24/7 security monitoring and threat detection</li>
+            <li><strong>Regular Audits:</strong> Regular security audits and penetration testing</li>
+            <li><strong>Employee Training:</strong> Regular security training for all employees</li>
+          </ul>
+          
+          <h3>6.2 Your Responsibility</h3>
+          <p>You are responsible for maintaining the security of your account credentials. Use a strong, unique password and enable two-factor authentication.</p>
+          
+          <h3>6.3 No Guarantee</h3>
+          <p>While we strive to protect your information, no method of transmission over the internet or electronic storage is 100% secure. We cannot guarantee absolute security.</p>
+        </section>
+        
+        <section class="legal-section" id="cookies">
+          <h2>7. Cookies and Tracking Technologies</h2>
+          
+          <p>We use cookies and similar tracking technologies to collect information and improve our Service.</p>
+          
+          <h3>7.1 What Are Cookies?</h3>
+          <p>Cookies are small text files stored on your device by your web browser. They help us recognize you, remember your preferences, and understand how you use our Service.</p>
+          
+          <h3>7.2 Types of Cookies We Use</h3>
+          
+          <p><strong>Essential Cookies:</strong> Required for the Service to function. These include:</p>
+          <ul>
+            <li>Authentication and session management</li>
+            <li>Security and fraud prevention</li>
+          </ul>
+          
+          <p><strong>Functional Cookies:</strong> Enable enhanced functionality:</p>
+          <ul>
+            <li>Remember your preferences</li>
+            <li>Save your language selection</li>
+          </ul>
+          
+          <p><strong>Analytics Cookies:</strong> Help us understand how you use our Service:</p>
+          <ul>
+            <li>Google Analytics (measures traffic and usage patterns)</li>
+            <li>Mixpanel (tracks user behavior and feature usage)</li>
+          </ul>
+          
+          <p><strong>Advertising Cookies:</strong> Used to deliver relevant ads:</p>
+          <ul>
+            <li>Google Ads</li>
+            <li>Facebook Pixel</li>
+          </ul>
+          
+          <h3>7.3 Managing Cookies</h3>
+          <p>You can control cookies through your browser settings. Most browsers allow you to:</p>
+          <ul>
+            <li>View and delete cookies</li>
+            <li>Block third-party cookies</li>
+            <li>Block all cookies</li>
+            <li>Clear cookies when you close your browser</li>
+          </ul>
+          <p>Note that blocking cookies may affect your ability to use certain features of the Service.</p>
+          
+          <h3>7.4 Do Not Track</h3>
+          <p>Some browsers have a "Do Not Track" feature. We do not currently respond to Do Not Track signals.</p>
+        </section>
+        
+        <section class="legal-section" id="your-rights">
+          <h2>8. Your Privacy Rights</h2>
+          
+          <p>Depending on your location, you may have certain rights regarding your personal information:</p>
+          
+          <h3>8.1 Access and Portability</h3>
+          <p>You have the right to:</p>
+          <ul>
+            <li>Access your personal information</li>
+            <li>Request a copy of your data in a portable format</li>
+          </ul>
+          
+          <h3>8.2 Correction and Update</h3>
+          <p>You can update your account information at any time through your account settings or by contacting us.</p>
+          
+          <h3>8.3 Deletion</h3>
+          <p>You have the right to request deletion of your personal information. You can delete your account in your account settings or contact us.</p>
+          
+          <h3>8.4 Objection and Restriction</h3>
+          <p>You may object to certain processing of your information or request that we restrict processing in certain circumstances.</p>
+          
+          <h3>8.5 Withdraw Consent</h3>
+          <p>If processing is based on your consent, you have the right to withdraw consent at any time.</p>
+          
+          <h3>8.6 Opt-Out of Marketing</h3>
+          <p>You can opt out of marketing emails by clicking the "unsubscribe" link in any marketing email or updating your email preferences in your account settings.</p>
+          
+          <h3>8.7 California Privacy Rights (CCPA)</h3>
+          <p>If you are a California resident, you have additional rights under the California Consumer Privacy Act (CCPA):</p>
+          <ul>
+            <li>Right to know what personal information is collected, used, and shared</li>
+            <li>Right to delete personal information</li>
+            <li>Right to opt-out of the sale of personal information (we do not sell personal information)</li>
+            <li>Right to non-discrimination for exercising your CCPA rights</li>
+          </ul>
+          
+          <h3>8.8 European Privacy Rights (GDPR)</h3>
+          <p>If you are in the European Economic Area (EEA), you have rights under the General Data Protection Regulation (GDPR), including all the rights listed above.</p>
+          
+          <h3>8.9 How to Exercise Your Rights</h3>
+          <p>To exercise any of these rights, please contact us at <a href="mailto:privacy@example.com">privacy@example.com</a>. We will respond to your request within 30 days.</p>
+        </section>
+        
+        <section class="legal-section" id="children">
+          <h2>9. Children's Privacy</h2>
+          
+          <p>Our Service is not intended for children under 16 years of age. We do not knowingly collect personal information from children under 16.</p>
+          
+          <p>If you are a parent or guardian and believe that your child has provided us with personal information, please contact us. We will delete such information from our systems.</p>
+        </section>
+        
+        <section class="legal-section" id="international">
+          <h2>10. International Data Transfers</h2>
+          
+          <p>Your information may be transferred to and processed in countries other than your country of residence. These countries may have data protection laws that are different from the laws of your country.</p>
+          
+          <p>We use appropriate safeguards to protect your information when it is transferred internationally, including:</p>
+          <ul>
+            <li>Standard Contractual Clauses approved by the European Commission</li>
+            <li>Ensuring service providers are certified under the EU-U.S. Data Privacy Framework</li>
+            <li>Implementing appropriate technical and organizational measures</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="changes">
+          <h2>11. Changes to This Privacy Policy</h2>
+          
+          <p>We may update this Privacy Policy from time to time. We will notify you of any material changes by:</p>
+          <ul>
+            <li>Posting the new Privacy Policy on this page</li>
+            <li>Updating the "Last updated" date</li>
+            <li>Sending you an email notification (if you have an account)</li>
+          </ul>
+          
+          <p>Your continued use of the Service after changes become effective constitutes your acceptance of the revised Privacy Policy.</p>
+          
+          <p>We encourage you to review this Privacy Policy periodically to stay informed about how we protect your information.</p>
+        </section>
+        
+        <section class="legal-section" id="contact">
+          <h2>12. Contact Us</h2>
+          
+          <p>If you have questions or concerns about this Privacy Policy or our privacy practices, please contact us:</p>
+          
+          <address>
+            <p>
+              <strong>Privacy Team</strong><br>
+              Company Name, Inc.<br>
+              123 Main Street, Suite 500<br>
+              San Francisco, CA 94105<br>
+              United States
+            </p>
+            <p>
+              Email: <a href="mailto:privacy@example.com">privacy@example.com</a><br>
+              Phone: <a href="tel:+18005551234">1-800-555-1234</a>
+            </p>
+          </address>
+          
+          <p><strong>Data Protection Officer:</strong> If you are in the EEA, you can contact our Data Protection Officer at <a href="mailto:dpo@example.com">dpo@example.com</a>.</p>
+        </section>
+      </div>
+    </article>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Company</h3>
+          <p>Building innovative solutions</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/updates">Updates</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Support</h3>
+          <ul>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Legal</h3>
+          <ul>
+            <li><a href="/privacy">Privacy Policy</a></li>
+            <li><a href="/terms">Terms of Service</a></li>
+            <li><a href="/cookies">Cookie Policy</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Company Name. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-signup.html b/skills/html-coder/assets/util-signup.html
new file mode 100644
index 000000000..98341a3eb
--- /dev/null
+++ b/skills/html-coder/assets/util-signup.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Create a new account to get started with our platform. Free signup with email or social login.">
+  <meta name="robots" content="noindex, nofollow">
+  <title>Create Your Account | Sign Up</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <main id="main" class="auth-page">
+    <div class="auth-container">
+      <div class="auth-branding">
+        <a href="/" class="logo-link">
+          <img src="logo.svg" alt="Company Logo" width="150" height="50" loading="eager">
+        </a>
+      </div>
+      
+      <div class="auth-card">
+        <h1>Create your account</h1>
+        <p class="auth-subtitle">Get started with your free account</p>
+        
+        <div class="social-auth-buttons">
+          <button type="button" class="btn btn-outline btn-social" onclick="signupWithGoogle()">
+            <img src="google-icon.svg" alt="" width="20" height="20" loading="lazy">
+            <span>Continue with Google</span>
+          </button>
+          
+          <button type="button" class="btn btn-outline btn-social" onclick="signupWithGithub()">
+            <img src="github-icon.svg" alt="" width="20" height="20" loading="lazy">
+            <span>Continue with GitHub</span>
+          </button>
+        </div>
+        
+        <div class="divider">
+          <span>Or sign up with email</span>
+        </div>
+        
+        <form class="auth-form" action="/signup" method="POST">
+          <div class="form-row">
+            <div class="form-group">
+              <label for="first-name">First Name</label>
+              <input 
+                type="text" 
+                id="first-name" 
+                name="first_name" 
+                placeholder="John"
+                required 
+                autocomplete="given-name"
+                autofocus>
+            </div>
+            
+            <div class="form-group">
+              <label for="last-name">Last Name</label>
+              <input 
+                type="text" 
+                id="last-name" 
+                name="last_name" 
+                placeholder="Doe"
+                required 
+                autocomplete="family-name">
+            </div>
+          </div>
+          
+          <div class="form-group">
+            <label for="email">Email Address</label>
+            <input 
+              type="email" 
+              id="email" 
+              name="email" 
+              placeholder="you@example.com"
+              required 
+              autocomplete="email">
+          </div>
+          
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input 
+              type="password" 
+              id="password" 
+              name="password" 
+              placeholder="Create a strong password"
+              required 
+              autocomplete="new-password"
+              minlength="8"
+              aria-describedby="password-requirements">
+            <small id="password-requirements" class="form-help-text">
+              Minimum 8 characters, including uppercase, lowercase, and number
+            </small>
+          </div>
+          
+          <div class="form-group">
+            <label for="confirm-password">Confirm Password</label>
+            <input 
+              type="password" 
+              id="confirm-password" 
+              name="confirm_password" 
+              placeholder="Re-enter your password"
+              required 
+              autocomplete="new-password"
+              minlength="8">
+          </div>
+          
+          <div class="form-group-checkbox">
+            <input type="checkbox" id="terms" name="terms" value="accepted" required>
+            <label for="terms">
+              I agree to the <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>
+            </label>
+          </div>
+          
+          <div class="form-group-checkbox">
+            <input type="checkbox" id="newsletter" name="newsletter" value="yes">
+            <label for="newsletter">
+              Send me product updates and tips (optional)
+            </label>
+          </div>
+          
+          <button type="submit" class="btn btn-primary btn-large btn-full-width">Create Account</button>
+        </form>
+        
+        <p class="auth-footer-text">
+          Already have an account? 
+          <a href="/login">Sign in</a>
+        </p>
+      </div>
+      
+      <footer class="auth-footer">
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/terms">Terms of Service</a>
+          <a href="/help">Help Center</a>
+        </nav>
+      </footer>
+    </div>
+  </main>
+  
+  <script src="auth.js" defer></script>
+</body>
+</html>
diff --git a/skills/html-coder/assets/util-terms.html b/skills/html-coder/assets/util-terms.html
new file mode 100644
index 000000000..cddbaf381
--- /dev/null
+++ b/skills/html-coder/assets/util-terms.html
@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Terms of Service for using our platform. Read our terms and conditions for service usage, user responsibilities, and legal agreements.">
+  <meta name="robots" content="noindex, nofollow">
+  <title>Terms of Service</title>
+  <link rel="icon" href="favicon.ico">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a href="#main" class="skip-link">Skip to main content</a>
+  
+  <header class="header">
+    <div class="container">
+      <nav class="navbar" aria-label="Main navigation">
+        <a href="/" class="logo">Company</a>
+        
+        <ul class="nav-menu">
+          <li><a href="/products">Products</a></li>
+          <li><a href="/pricing">Pricing</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="/contact">Contact</a></li>
+        </ul>
+        
+        <div class="nav-actions">
+          <a href="/login" class="btn-link">Sign In</a>
+          <a href="/signup" class="btn btn-primary">Get Started</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+  
+  <main id="main">
+    <article class="legal-document">
+      <div class="container">
+        <header class="legal-header">
+          <h1>Terms of Service</h1>
+          <p class="legal-meta">Last updated: <time datetime="2026-03-01">March 1, 2026</time></p>
+        </header>
+        
+        <nav class="legal-toc" aria-label="Table of contents">
+          <h2>Table of Contents</h2>
+          <ol>
+            <li><a href="#acceptance">Acceptance of Terms</a></li>
+            <li><a href="#definitions">Definitions</a></li>
+            <li><a href="#account">Account Registration</a></li>
+            <li><a href="#use">Acceptable Use Policy</a></li>
+            <li><a href="#payment">Payment Terms</a></li>
+            <li><a href="#intellectual-property">Intellectual Property Rights</a></li>
+            <li><a href="#user-content">User Content</a></li>
+            <li><a href="#privacy">Privacy</a></li>
+            <li><a href="#termination">Termination</a></li>
+            <li><a href="#disclaimers">Disclaimers</a></li>
+            <li><a href="#limitation-liability">Limitation of Liability</a></li>
+            <li><a href="#indemnification">Indemnification</a></li>
+            <li><a href="#changes">Changes to Terms</a></li>
+            <li><a href="#governing-law">Governing Law</a></li>
+            <li><a href="#contact">Contact Information</a></li>
+          </ol>
+        </nav>
+        
+        <section class="legal-section" id="acceptance">
+          <h2>1. Acceptance of Terms</h2>
+          
+          <p>Welcome to our service. By accessing or using our website, mobile application, or any related services (collectively, the "Service"), you agree to be bound by these Terms of Service ("Terms").</p>
+          
+          <p>If you do not agree to these Terms, do not access or use the Service. If you are using the Service on behalf of an organization, you are agreeing to these Terms for that organization and representing that you have the authority to bind that organization to these Terms.</p>
+        </section>
+        
+        <section class="legal-section" id="definitions">
+          <h2>2. Definitions</h2>
+          
+          <p>For purposes of these Terms:</p>
+          
+          <ul>
+            <li><strong>"Company," "we," "us," or "our"</strong> refers to Company Name, Inc.</li>
+            <li><strong>"Service"</strong> refers to our website, applications, and related services.</li>
+            <li><strong>"User," "you," or "your"</strong> refers to the individual or entity using the Service.</li>
+            <li><strong>"Account"</strong> refers to your registered user account on the Service.</li>
+            <li><strong>"Content"</strong> refers to text, graphics, images, software, and other materials.</li>
+            <li><strong>"User Content"</strong> refers to Content that you submit, upload, or share through the Service.</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="account">
+          <h2>3. Account Registration</h2>
+          
+          <h3>3.1 Account Creation</h3>
+          <p>To use certain features of the Service, you must register for an account. You agree to provide accurate, current, and complete information during registration and to update such information to keep it accurate, current, and complete.</p>
+          
+          <h3>3.2 Account Security</h3>
+          <p>You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account. You agree to:</p>
+          <ul>
+            <li>Choose a strong password and keep it confidential</li>
+            <li>Notify us immediately of any unauthorized access to your account</li>
+            <li>Not share your account credentials with others</li>
+            <li>Log out of your account at the end of each session</li>
+          </ul>
+          
+          <h3>3.3 Account Eligibility</h3>
+          <p>You must be at least 16 years old to create an account. By creating an account, you represent that you meet this age requirement and that all information you provide is truthful and accurate.</p>
+        </section>
+        
+        <section class="legal-section" id="use">
+          <h2>4. Acceptable Use Policy</h2>
+          
+          <p>You agree to use the Service only for lawful purposes and in accordance with these Terms. You agree not to:</p>
+          
+          <ul>
+            <li>Violate any applicable laws or regulations</li>
+            <li>Infringe on intellectual property rights of others</li>
+            <li>Transmit viruses, malware, or other harmful code</li>
+            <li>Attempt to gain unauthorized access to the Service or other users' accounts</li>
+            <li>Use automated systems (bots, scrapers) without our written permission</li>
+            <li>Engage in any activity that interferes with or disrupts the Service</li>
+            <li>Harass, abuse, or harm other users</li>
+            <li>Impersonate any person or entity or misrepresent your affiliation</li>
+            <li>Collect or store personal data about other users without their consent</li>
+            <li>Use the Service to send spam, phishing attempts, or unsolicited communications</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="payment">
+          <h2>5. Payment Terms</h2>
+          
+          <h3>5.1 Billing</h3>
+          <p>Certain features of the Service require payment. You agree to pay all fees associated with your subscription plan. Fees are billed in advance on a monthly or annual basis and are non-refundable except as provided in Section 5.4.</p>
+          
+          <h3>5.2 Automatic Renewal</h3>
+          <p>Your subscription will automatically renew at the end of each billing period unless you cancel before the renewal date. You authorize us to charge your payment method on file for renewal fees.</p>
+          
+          <h3>5.3 Price Changes</h3>
+          <p>We may change our pricing at any time. Price changes will take effect at the start of the next billing cycle after we provide you with at least 30 days' notice.</p>
+          
+          <h3>5.4 Refund Policy</h3>
+          <p>We offer a 30-day money-back guarantee for new subscriptions. If you are not satisfied, contact us within 30 days of your initial payment for a full refund. After 30 days, payments are non-refundable.</p>
+          
+          <h3>5.5 Taxes</h3>
+          <p>All fees are exclusive of taxes. You are responsible for paying all applicable taxes associated with your use of the Service.</p>
+        </section>
+        
+        <section class="legal-section" id="intellectual-property">
+          <h2>6. Intellectual Property Rights</h2>
+          
+          <h3>6.1 Our Rights</h3>
+          <p>The Service and its original content, features, and functionality are owned by Company Name and are protected by international copyright, trademark, patent, trade secret, and other intellectual property laws.</p>
+          
+          <h3>6.2 License to Use</h3>
+          <p>Subject to these Terms, we grant you a limited, non-exclusive, non-transferable, revocable license to access and use the Service for your personal or internal business use.</p>
+          
+          <h3>6.3 Restrictions</h3>
+          <p>You may not:</p>
+          <ul>
+            <li>Copy, modify, or create derivative works of the Service</li>
+            <li>Reverse engineer, decompile, or disassemble any part of the Service</li>
+            <li>Remove or alter any copyright, trademark, or proprietary notices</li>
+            <li>Sell, rent, lease, sublicense, or transfer the Service to others</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="user-content">
+          <h2>7. User Content</h2>
+          
+          <h3>7.1 Ownership</h3>
+          <p>You retain all ownership rights to your User Content. By uploading User Content to the Service, you grant us a worldwide, non-exclusive, royalty-free license to use, store, reproduce, and display your User Content solely for the purpose of operating and providing the Service.</p>
+          
+          <h3>7.2 Responsibility</h3>
+          <p>You are solely responsible for your User Content. You represent and warrant that:</p>
+          <ul>
+            <li>You own or have the necessary rights to all User Content</li>
+            <li>Your User Content does not violate any third-party rights</li>
+            <li>Your User Content complies with these Terms and all applicable laws</li>
+          </ul>
+          
+          <h3>7.3 Content Removal</h3>
+          <p>We reserve the right to remove any User Content that violates these Terms or that we find objectionable, without notice.</p>
+        </section>
+        
+        <section class="legal-section" id="privacy">
+          <h2>8. Privacy</h2>
+          
+          <p>Your privacy is important to us. Our <a href="/privacy">Privacy Policy</a> explains how we collect, use, and protect your personal information. By using the Service, you agree to the collection and use of information in accordance with our Privacy Policy.</p>
+        </section>
+        
+        <section class="legal-section" id="termination">
+          <h2>9. Termination</h2>
+          
+          <h3>9.1 Termination by You</h3>
+          <p>You may terminate your account at any time by following the account deletion process in your account settings or by contacting us.</p>
+          
+          <h3>9.2 Termination by Us</h3>
+          <p>We may suspend or terminate your account immediately, without prior notice, if you breach these Terms or engage in conduct that we deem harmful to the Service or other users.</p>
+          
+          <h3>9.3 Effect of Termination</h3>
+          <p>Upon termination, your right to use the Service will immediately cease. We will delete your account and User Content in accordance with our data retention policies, except as required by law.</p>
+        </section>
+        
+        <section class="legal-section" id="disclaimers">
+          <h2>10. Disclaimers</h2>
+          
+          <p><strong>THE SERVICE IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.</strong></p>
+          
+          <p>We do not warrant that:</p>
+          <ul>
+            <li>The Service will be uninterrupted, secure, or error-free</li>
+            <li>Defects will be corrected</li>
+            <li>The Service is free of viruses or other harmful components</li>
+            <li>Results from using the Service will meet your requirements</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="limitation-liability">
+          <h2>11. Limitation of Liability</h2>
+          
+          <p><strong>TO THE MAXIMUM EXTENT PERMITTED BY LAW, IN NO EVENT SHALL COMPANY NAME BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS OR REVENUES, WHETHER INCURRED DIRECTLY OR INDIRECTLY, OR ANY LOSS OF DATA, USE, GOODWILL, OR OTHER INTANGIBLE LOSSES RESULTING FROM:</strong></p>
+          
+          <ul>
+            <li>Your use or inability to use the Service</li>
+            <li>Unauthorized access to or alteration of your data</li>
+            <li>Third-party conduct or content on the Service</li>
+            <li>Any other matter relating to the Service</li>
+          </ul>
+          
+          <p><strong>OUR TOTAL LIABILITY TO YOU FOR ALL CLAIMS ARISING OUT OF OR RELATING TO THESE TERMS OR THE SERVICE SHALL NOT EXCEED THE AMOUNT YOU PAID US IN THE TWELVE (12) MONTHS PRECEDING THE CLAIM, OR $100, WHICHEVER IS GREATER.</strong></p>
+        </section>
+        
+        <section class="legal-section" id="indemnification">
+          <h2>12. Indemnification</h2>
+          
+          <p>You agree to indemnify, defend, and hold harmless Company Name and its officers, directors, employees, and agents from any claims, liabilities, damages, losses, and expenses, including reasonable attorney fees, arising out of or in any way connected with:</p>
+          
+          <ul>
+            <li>Your access to or use of the Service</li>
+            <li>Your User Content</li>
+            <li>Your violation of these Terms</li>
+            <li>Your violation of any third-party rights</li>
+          </ul>
+        </section>
+        
+        <section class="legal-section" id="changes">
+          <h2>13. Changes to Terms</h2>
+          
+          <p>We reserve the right to modify these Terms at any time. We will notify you of material changes by posting the updated Terms on this page and updating the "Last updated" date.</p>
+          
+          <p>Your continued use of the Service after changes become effective constitutes your acceptance of the revised Terms. If you do not agree to the new Terms, you must stop using the Service.</p>
+        </section>
+        
+        <section class="legal-section" id="governing-law">
+          <h2>14. Governing Law and Dispute Resolution</h2>
+          
+          <h3>14.1 Governing Law</h3>
+          <p>These Terms shall be governed by and construed in accordance with the laws of the State of California, United States, without regard to its conflict of law provisions.</p>
+          
+          <h3>14.2 Dispute Resolution</h3>
+          <p>Any dispute arising out of or relating to these Terms or the Service shall be resolved through binding arbitration in accordance with the rules of the American Arbitration Association, except that either party may seek injunctive relief in court.</p>
+          
+          <h3>14.3 Class Action Waiver</h3>
+          <p>You agree that any proceedings to resolve disputes will be conducted on an individual basis and not in a class, consolidated, or representative action.</p>
+        </section>
+        
+        <section class="legal-section" id="contact">
+          <h2>15. Contact Information</h2>
+          
+          <p>If you have questions about these Terms, please contact us:</p>
+          
+          <address>
+            <p>
+              <strong>Company Name, Inc.</strong><br>
+              123 Main Street, Suite 500<br>
+              San Francisco, CA 94105<br>
+              United States
+            </p>
+            <p>
+              Email: <a href="mailto:legal@example.com">legal@example.com</a><br>
+              Phone: <a href="tel:+18005551234">1-800-555-1234</a>
+            </p>
+          </address>
+        </section>
+      </div>
+    </article>
+  </main>
+  
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3>Company</h3>
+          <p>Building innovative solutions</p>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Product</h3>
+          <ul>
+            <li><a href="/features">Features</a></li>
+            <li><a href="/pricing">Pricing</a></li>
+            <li><a href="/updates">Updates</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Support</h3>
+          <ul>
+            <li><a href="/help">Help Center</a></li>
+            <li><a href="/faq">FAQ</a></li>
+            <li><a href="/contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h3>Legal</h3>
+          <ul>
+            <li><a href="/privacy">Privacy Policy</a></li>
+            <li><a href="/terms">Terms of Service</a></li>
+            <li><a href="/cookies">Cookie Policy</a></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p>&copy; 2026 Company Name. All rights reserved.</p>
+        <nav aria-label="Legal">
+          <a href="/privacy">Privacy</a>
+          <a href="/terms">Terms</a>
+        </nav>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/skills/html-coder/references/add-css-style.md b/skills/html-coder/references/add-css-style.md
new file mode 100644
index 000000000..be828ad21
--- /dev/null
+++ b/skills/html-coder/references/add-css-style.md
@@ -0,0 +1,591 @@
+# Adding CSS Styling to HTML
+
+Complete guide to integrating CSS (Cascading Style Sheets) with HTML for presentation and layout.
+
+## Methods of Adding CSS
+
+### 1. External Stylesheet (Recommended)
+
+**Best for**: Production websites, reusable styles, maintainable code
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <h1>Heading</h1>
+  <p>Content</p>
+</body>
+</html>
+```
+
+**Advantages**:
+- ✅ Separates content from presentation
+- ✅ Reusable across multiple pages
+- ✅ Cached by browser (faster page loads)
+- ✅ Easier to maintain
+- ✅ Can be developed separately
+
+**Multiple stylesheets**:
+```html
+<link rel="stylesheet" href="reset.css">
+<link rel="stylesheet" href="layout.css">
+<link rel="stylesheet" href="theme.css">
+```
+
+### 2. Internal Stylesheet
+
+**Best for**: Single-page applications, unique page-specific styles, email HTML
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f0f0f0;
+      margin: 0;
+      padding: 20px;
+    }
+    
+    h1 {
+      color: #333;
+      border-bottom: 2px solid #0066cc;
+    }
+    
+    .highlight {
+      background-color: yellow;
+    }
+  </style>
+</head>
+<body>
+  <h1>Heading</h1>
+  <p class="highlight">Highlighted text</p>
+</body>
+</html>
+```
+
+**Advantages**:
+- ✅ No external HTTP request
+- ✅ Good for critical above-the-fold CSS
+- ✅ Useful for email templates
+
+**Disadvantages**:
+- ❌ Not reusable across pages
+- ❌ Not cached separately
+- ❌ Increases HTML file size
+
+### 3. Inline Styles
+
+**Best for**: Dynamic styles, urgent overrides, email HTML (when required)
+
+```html
+<p style="color: red; font-weight: bold;">Important text</p>
+
+<div style="background-color: #f0f0f0; padding: 20px; border-radius: 8px;">
+  <h2 style="margin-top: 0;">Box Title</h2>
+  <p style="color: #666;">Box content</p>
+</div>
+```
+
+**Advantages**:
+- ✅ Highest specificity (overrides other styles)
+- ✅ No class/ID needed
+- ✅ Works in HTML emails
+
+**Disadvantages**:
+- ❌ Hard to maintain
+- ❌ Not reusable
+- ❌ Mixes content and presentation
+- ❌ Increases HTML file size
+- ❌ Can't use pseudo-classes/elements
+
+**When to use**:
+- Dynamically generated styles via JavaScript
+- Email HTML templates
+- Quick testing (remove before production)
+
+## Link Element Attributes
+
+### Basic Link Element
+
+```html
+<link rel="stylesheet" href="styles.css">
+```
+
+### Complete Link Element
+
+```html
+<link rel="stylesheet" 
+      href="styles.css" 
+      type="text/css"
+      media="screen"
+      title="Main Styles">
+```
+
+### Important Attributes
+
+| Attribute | Purpose | Values |
+|-----------|---------|--------|
+| `rel` | Relationship | `stylesheet` (required) |
+| `href` | File location | URL or path |
+| `type` | MIME type | `text/css` (optional, default) |
+| `media` | Media query | `screen`, `print`, `all`, custom query |
+| `title` | Stylesheet name | Text (for alternate stylesheets) |
+| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
+| `integrity` | SRI hash | Hash value for security |
+
+## Media Queries in HTML
+
+### Responsive Stylesheets
+
+Load different CSS files for different devices:
+
+```html
+<!-- Mobile-first approach -->
+<link rel="stylesheet" href="base.css">
+<link rel="stylesheet" href="tablet.css" media="(min-width: 768px)">
+<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
+
+<!-- Print styles -->
+<link rel="stylesheet" href="print.css" media="print">
+
+<!-- Dark mode support -->
+<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
+```
+
+### Common Media Queries
+
+```html
+<!-- Screen size -->
+<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">
+<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
+
+<!-- Orientation -->
+<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
+<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
+
+<!-- High resolution displays -->
+<link rel="stylesheet" href="retina.css" media="(-webkit-min-device-pixel-ratio: 2)">
+
+<!-- Combined conditions -->
+<link rel="stylesheet" href="tablet-portrait.css" 
+      media="(min-width: 768px) and (max-width: 1023px) and (orientation: portrait)">
+```
+
+## CSS Loading Strategies
+
+### Critical CSS
+
+Inline critical above-the-fold CSS:
+
+```html
+<head>
+  <style>
+    /* Critical CSS for initial render */
+    body { margin: 0; font-family: sans-serif; }
+    .header { background: #333; color: white; padding: 1rem; }
+    .hero { min-height: 400px; background: #f0f0f0; }
+  </style>
+  
+  <!-- Load full stylesheet asynchronously -->
+  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="styles.css"></noscript>
+</head>
+```
+
+### Async CSS Loading
+
+Load non-critical CSS asynchronously:
+
+```html
+<!-- Method 1: Using preload -->
+<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
+
+<!-- Method 2: Using media query trick -->
+<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
+```
+
+### Deferred Loading
+
+Load CSS after page load:
+
+```html
+<script>
+  // Load CSS after page load
+  window.addEventListener('load', function() {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'deferred.css';
+    document.head.appendChild(link);
+  });
+</script>
+```
+
+## CSS with Classes and IDs
+
+### Using Classes
+
+**HTML**:
+```html
+<div class="card">
+  <h2 class="card-title">Card Title</h2>
+  <p class="card-content">Card content goes here.</p>
+  <button class="btn btn-primary">Action</button>
+</div>
+```
+
+**CSS (external file)**:
+```css
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.card-title {
+  font-size: 1.5rem;
+  margin-top: 0;
+}
+
+.card-content {
+  color: #666;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+}
+```
+
+### Using IDs
+
+**HTML**:
+```html
+<header id="main-header">
+  <nav id="primary-nav">
+    <!-- Navigation -->
+  </nav>
+</header>
+```
+
+**CSS**:
+```css
+#main-header {
+  background-color: #333;
+  color: white;
+  padding: 1rem;
+}
+
+#primary-nav {
+  display: flex;
+  gap: 1rem;
+}
+```
+
+**When to use**:
+- **Classes**: Reusable styles (preferred for styling)
+- **IDs**: Unique elements, JavaScript selection, anchor links
+
+## CSS Frameworks Integration
+
+### Bootstrap
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Bootstrap Page</title>
+  
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  
+  <!-- Custom CSS (after Bootstrap) -->
+  <link rel="stylesheet" href="custom.css">
+</head>
+<body>
+  <div class="container">
+    <h1 class="text-primary">Hello Bootstrap</h1>
+    <button class="btn btn-success">Click Me</button>
+  </div>
+  
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
+```
+
+### Tailwind CSS
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tailwind Page</title>
+  
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+  <div class="container mx-auto px-4">
+    <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind</h1>
+    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+      Click Me
+    </button>
+  </div>
+</body>
+</html>
+```
+
+## CSS Variables in HTML
+
+Define CSS custom properties inline:
+
+```html
+<div style="--primary-color: #007bff; --spacing: 20px;">
+  <p style="color: var(--primary-color); padding: var(--spacing);">
+    Text using CSS variables
+  </p>
+</div>
+```
+
+**Better approach** (in `<style>` or external CSS):
+```html
+<style>
+  :root {
+    --primary-color: #007bff;
+    --secondary-color: #6c757d;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+  }
+  
+  .button {
+    background-color: var(--primary-color);
+    padding: var(--spacing-md);
+  }
+</style>
+```
+
+## Import Statements
+
+### @import in HTML
+
+```html
+<style>
+  @import url('reset.css');
+  @import url('typography.css');
+  @import url('layout.css');
+  
+  /* Additional styles */
+  body {
+    background: white;
+  }
+</style>
+```
+
+**Note**: `@import` is slower than `<link>` because it blocks parallel downloads. Prefer multiple `<link>` tags.
+
+## Conditional CSS
+
+### Browser-Specific Styles
+
+```html
+<!--[if IE]>
+  <link rel="stylesheet" href="ie.css">
+<![endif]-->
+
+<!--[if lt IE 9]>
+  <script src="html5shiv.js"></script>
+<![endif]-->
+```
+
+**Note**: Conditional comments only work in IE ≤ 9 (obsolete).
+
+### Modern Feature Detection
+
+Use CSS feature queries in stylesheets:
+
+```css
+/* Modern grid layout */
+@supports (display: grid) {
+  .container {
+    display: grid;
+  }
+}
+
+/* Fallback for older browsers */
+@supports not (display: grid) {
+  .container {
+    display: flex;
+  }
+}
+```
+
+## CSS Reset/Normalize
+
+Include before custom styles:
+
+```html
+<head>
+  <!-- CSS Reset -->
+  <link rel="stylesheet" href="reset.css">
+  
+  <!-- OR Normalize.css -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
+  
+  <!-- Custom styles -->
+  <link rel="stylesheet" href="styles.css">
+</head>
+```
+
+## Performance Optimization
+
+### Resource Hints
+
+```html
+<!-- Preconnect to font/CDN servers -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+<!-- Preload critical CSS -->
+<link rel="preload" href="critical.css" as="style">
+
+<!-- DNS prefetch for later resources -->
+<link rel="dns-prefetch" href="https://cdn.example.com">
+```
+
+### Font Loading
+
+```html
+<!-- Google Fonts optimized -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
+<!-- Self-hosted fonts -->
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
+<style>
+  @font-face {
+    font-family: 'CustomFont';
+    src: url('font.woff2') format('woff2');
+    font-display: swap;
+  }
+</style>
+```
+
+## Best Practices
+
+### ✅ Do
+
+1. **Use external stylesheets** for reusable styles
+2. **Place `<link>` in `<head>`** for proper rendering
+3. **Use meaningful class names** (descriptive, not presentational)
+4. **Group related styles** in separate files
+5. **Minimize CSS file size** (minify for production)
+6. **Use CSS variables** for consistent theming
+7. **Implement mobile-first** responsive design
+8. **Load critical CSS inline** for faster initial render
+9. **Use `preload` for critical resources**
+10. **Version your CSS files** for cache busting (`styles.css?v=1.2`)
+
+### ❌ Don't
+
+1. **Don't use inline styles** extensively (hard to maintain)
+2. **Don't use `@import`** in production (blocks parallel downloads)
+3. **Don't override styles excessively** (indicates poor architecture)
+4. **Don't use !important** unless absolutely necessary
+5. **Don't write non-semantic class names** (`red-text`, `big-margin`)
+6. **Don't load unused CSS** (remove unused framework code)
+7. **Don't forget print styles** if printing is relevant
+8. **Don't mix CSS with HTML** attributes (use classes instead)
+9. **Don't use deprecated CSS** prefixes without autoprefixer
+10. **Don't forget to minify** CSS for production
+
+## Complete Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Complete CSS Integration Example</title>
+  
+  <!-- Preconnect to external resources -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  
+  <!-- Critical CSS inline -->
+  <style>
+    body {
+      margin: 0;
+      font-family: system-ui, -apple-system, sans-serif;
+      line-height: 1.6;
+    }
+    .header {
+      background: #333;
+      color: white;
+      padding: 1rem;
+    }
+  </style>
+  
+  <!-- External stylesheets -->
+  <link rel="stylesheet" href="normalize.css">
+  <link rel="stylesheet" href="layout.css">
+  <link rel="stylesheet" href="components.css">
+  <link rel="stylesheet" href="utilities.css">
+  
+  <!-- Media-specific styles -->
+  <link rel="stylesheet" href="print.css" media="print">
+  
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <header class="header">
+    <h1>Website Title</h1>
+  </header>
+  
+  <main class="container">
+    <article class="card">
+      <h2 class="card-title">Article Title</h2>
+      <p class="card-content">Article content goes here.</p>
+    </article>
+  </main>
+  
+  <footer class="footer">
+    <p>&copy; 2024 Website Name</p>
+  </footer>
+</body>
+</html>
+```
+
+## Resources
+
+- **MDN CSS Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS
+- **CSS Tricks**: https://css-tricks.com/
+- **Can I Use**: https://caniuse.com/ (browser support)
+- **CSS Validator**: https://jigsaw.w3.org/css-validator/
+- **Google Fonts**: https://fonts.google.com/
+- **Normalize.css**: https://necolas.github.io/normalize.css/
diff --git a/skills/html-coder/references/add-javascript.md b/skills/html-coder/references/add-javascript.md
new file mode 100644
index 000000000..c980fcb58
--- /dev/null
+++ b/skills/html-coder/references/add-javascript.md
@@ -0,0 +1,792 @@
+# Adding JavaScript to HTML
+
+Complete guide to integrating JavaScript with HTML for interactivity and dynamic behavior.
+
+## Methods of Adding JavaScript
+
+### 1. External JavaScript File (Recommended)
+
+**Best for**: Production websites, reusable code, maintainable applications
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <h1 id="heading">Hello World</h1>
+  <button id="changeBtn">Change Text</button>
+  
+  <!-- Script at end of body -->
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+**script.js**:
+```javascript
+document.getElementById('changeBtn').addEventListener('click', function() {
+  document.getElementById('heading').textContent = 'Hello JavaScript!';
+});
+```
+
+**Advantages**:
+- ✅ Separates content from behavior
+- ✅ Reusable across multiple pages
+- ✅ Cached by browser (faster page loads)
+- ✅ Easier to maintain and debug
+- ✅ Can be developed separately
+- ✅ Cleaner HTML
+
+### 2. Inline JavaScript
+
+**Best for**: Small scripts, event handlers, quick testing
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Inline JavaScript</title>
+</head>
+<body>
+  <h1 id="heading">Hello World</h1>
+  
+  <button onclick="changeText()">Change Text</button>
+  <button onclick="alert('Button clicked!')">Show Alert</button>
+  
+  <script>
+    function changeText() {
+      document.getElementById('heading').textContent = 'Text Changed!';
+    }
+  </script>
+</body>
+</html>
+```
+
+**Advantages**:
+- ✅ Quick to implement
+- ✅ No external HTTP request
+- ✅ Good for small, page-specific scripts
+
+**Disadvantages**:
+- ❌ Not reusable across pages
+- ❌ Harder to maintain
+- ❌ Violates Content Security Policy (CSP)
+- ❌ Mixes content and behavior
+
+### 3. Inline Event Handlers
+
+**Best for**: Quick prototypes, simple interactions (not recommended for production)
+
+```html
+<!-- Inline onclick -->
+<button onclick="alert('Clicked!')">Click Me</button>
+
+<!-- Inline with parameters -->
+<button onclick="greet('John')">Greet John</button>
+
+<script>
+  function greet(name) {
+    alert('Hello, ' + name + '!');
+  }
+</script>
+
+<!-- Multiple statements (avoid) -->
+<button onclick="console.log('Log'); alert('Alert');">Click</button>
+```
+
+**Better approach** (external event listeners):
+```html
+<button id="myButton">Click Me</button>
+
+<script>
+  document.getElementById('myButton').addEventListener('click', function() {
+    alert('Clicked!');
+  });
+</script>
+```
+
+## Script Element Attributes
+
+### Basic Script Element
+
+```html
+<script src="script.js"></script>
+```
+
+### Important Attributes
+
+| Attribute | Purpose | Values |
+|-----------|---------|--------|
+| `src` | External file path | URL or relative path |
+| `type` | MIME type | `text/javascript` (default), `module` |
+| `async` | Async loading | Boolean (no value needed) |
+| `defer` | Deferred loading | Boolean (no value needed) |
+| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
+| `integrity` | SRI hash | Hash for security verification |
+| `nomodule` | Fallback for old browsers | Boolean |
+| `referrerpolicy` | Referrer header | `no-referrer`, `origin`, etc. |
+
+## Script Loading Strategies
+
+### 1. Default Loading (Blocking)
+
+```html
+<head>
+  <script src="script.js"></script>
+  <!-- Blocks HTML parsing and rendering -->
+</head>
+```
+
+**Behavior**:
+- Stops HTML parsing
+- Downloads script
+- Executes script immediately
+- Resumes HTML parsing
+
+**When to use**: Never (use `defer` or `async` instead)
+
+### 2. Defer Loading (Recommended for Most Scripts)
+
+```html
+<head>
+  <script src="script.js" defer></script>
+  <!-- HTML parsing continues -->
+</head>
+```
+
+**Behavior**:
+1. HTML parsing continues
+2. Script downloads in parallel
+3. Script executes after HTML parsing completes
+4. Maintains script order
+
+**When to use**:
+- ✅ Scripts that manipulate DOM
+- ✅ Scripts that depend on full HTML
+- ✅ Multiple scripts with dependencies
+- ✅ Most common use case
+
+### 3. Async Loading
+
+```html
+<head>
+  <script src="analytics.js" async></script>
+  <!-- HTML parsing continues -->
+</head>
+```
+
+**Behavior**:
+1. HTML parsing continues
+2. Script downloads in parallel
+3. Script executes as soon as downloaded (pauses HTML parsing)
+4. Does NOT maintain script order
+
+**When to use**:
+- ✅ Independent scripts (analytics, ads)
+- ✅ Scripts that don't depend on DOM
+- ✅ Scripts that don't depend on other scripts
+- ❌ NOT for scripts with dependencies
+
+### 4. Script at End of Body (Traditional)
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Page Title</title>
+</head>
+<body>
+  <h1>Content</h1>
+  <p>More content</p>
+  
+  <!-- Scripts at end -->
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+**When to use**:
+- ✅ When `defer` is not available
+- ✅ Ensures DOM is fully loaded
+- ❌ Less efficient than `defer` in `<head>`
+
+### Comparison Table
+
+| Method | Parsing | Download | Execution | Order | Use Case |
+|--------|---------|----------|-----------|-------|----------|
+| Default | Blocks | Immediate | Immediate | Yes | ❌ Avoid |
+| `defer` | Continues | Parallel | After parse | Yes | ✅ DOM manipulation |
+| `async` | Continues | Parallel | ASAP | No | ✅ Independent scripts |
+| End of body | Continues | After parse | Immediate | Yes | ✅ Fallback method |
+
+## ES6 Modules
+
+### Module Script
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ES6 Modules</title>
+</head>
+<body>
+  <div id="app"></div>
+  
+  <!-- ES6 module (automatically deferred) -->
+  <script type="module" src="main.js"></script>
+</body>
+</html>
+```
+
+**main.js**:
+```javascript
+import { greet } from './utils.js';
+import { render } from './render.js';
+
+greet('World');
+render();
+```
+
+**utils.js**:
+```javascript
+export function greet(name) {
+  console.log(`Hello, ${name}!`);
+}
+```
+
+### Module Features
+
+```html
+<!-- Import module -->
+<script type="module" src="app.js"></script>
+
+<!-- Inline module -->
+<script type="module">
+  import { func } from './module.js';
+  func();
+</script>
+
+<!-- Fallback for old browsers -->
+<script type="module" src="modern.js"></script>
+<script nomodule src="legacy.js"></script>
+```
+
+**Module characteristics**:
+- ✅ Automatically in strict mode
+- ✅ Automatically deferred
+- ✅ Have their own scope (not global)
+- ✅ Can use `import` and `export`
+- ✅ Only execute once (even if imported multiple times)
+
+## JavaScript Placement Best Practices
+
+### In `<head>` with `defer`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+  
+  <!-- Recommended: defer in head -->
+  <script src="main.js" defer></script>
+  <script src="utils.js" defer></script>
+</head>
+<body>
+  <h1>Content loads without blocking</h1>
+</body>
+</html>
+```
+
+### Multiple Scripts with Dependencies
+
+```html
+<head>
+  <!-- Load in order (with defer) -->
+  <script src="jquery.min.js" defer></script>
+  <script src="plugin.js" defer></script>
+  <script src="app.js" defer></script>
+</head>
+```
+
+### Critical vs Non-Critical Scripts
+
+```html
+<head>
+  <!-- Critical: defer -->
+  <script src="critical.js" defer></script>
+  
+  <!-- Non-critical: async -->
+  <script src="analytics.js" async></script>
+  <script src="ads.js" async></script>
+</head>
+```
+
+## Data Attributes for JavaScript
+
+### Storing Data in HTML
+
+```html
+<button 
+  id="userBtn" 
+  data-user-id="12345" 
+  data-user-name="John Doe"
+  data-user-role="admin">
+  View Profile
+</button>
+
+<script>
+  const btn = document.getElementById('userBtn');
+  
+  // Access dataset
+  console.log(btn.dataset.userId);    // "12345"
+  console.log(btn.dataset.userName);  // "John Doe"
+  console.log(btn.dataset.userRole);  // "admin"
+  
+  // Modify dataset
+  btn.dataset.userId = '67890';
+</script>
+```
+
+### Complex Data
+
+```html
+<div id="config" data-settings='{"theme":"dark","lang":"en"}'></div>
+
+<script>
+  const config = document.getElementById('config');
+  const settings = JSON.parse(config.dataset.settings);
+  console.log(settings.theme); // "dark"
+</script>
+```
+
+## Common Integration Patterns
+
+### 1. DOM Content Loaded
+
+Wait for HTML to fully load:
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // DOM is ready
+    console.log('DOM loaded');
+    
+    const heading = document.getElementById('heading');
+    heading.textContent = 'DOM is ready!';
+  });
+</script>
+```
+
+### 2. Window Load Event
+
+Wait for everything (including images):
+
+```html
+<script>
+  window.addEventListener('load', function() {
+    // All resources loaded
+    console.log('Page fully loaded');
+  });
+</script>
+```
+
+### 3. Event Delegation
+
+```html
+<ul id="list">
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+
+<script>
+  // Event delegation on parent
+  document.getElementById('list').addEventListener('click', function(e) {
+    if (e.target.tagName === 'LI') {
+      console.log('Clicked:', e.target.textContent);
+    }
+  });
+</script>
+```
+
+### 4. Form Handling
+
+```html
+<form id="myForm">
+  <input type="text" id="name" name="name" required>
+  <input type="email" id="email" name="email" required>
+  <button type="submit">Submit</button>
+</form>
+
+<script>
+  document.getElementById('myForm').addEventListener('submit', function(e) {
+    e.preventDefault(); // Prevent default form submission
+    
+    const formData = new FormData(this);
+    const name = formData.get('name');
+    const email = formData.get('email');
+    
+    console.log('Name:', name);
+    console.log('Email:', email);
+    
+    // Send data via AJAX
+    // fetch('/api/submit', { method: 'POST', body: formData });
+  });
+</script>
+```
+
+## CDN Integration
+
+### Popular Libraries
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CDN JavaScript</title>
+</head>
+<body>
+  <div id="app"></div>
+  
+  <!-- jQuery -->
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
+          integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
+          crossorigin="anonymous"></script>
+  
+  <!-- React -->
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  
+  <!-- Vue.js -->
+  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
+  
+  <!-- Custom script (load after libraries) -->
+  <script src="app.js"></script>
+</body>
+</html>
+```
+
+### CDN Best Practices
+
+```html
+<!-- Always use integrity for security -->
+<script src="https://cdn.example.com/lib.js" 
+        integrity="sha384-HASH" 
+        crossorigin="anonymous"></script>
+
+<!-- Provide fallback -->
+<script src="https://cdn.example.com/jquery.min.js"></script>
+<script>
+  window.jQuery || document.write('<script src="local/jquery.min.js"><\/script>');
+</script>
+```
+
+## Script Loading Performance
+
+### Preloading Scripts
+
+```html
+<head>
+  <!-- Preload critical script -->
+  <link rel="preload" href="critical.js" as="script">
+  
+  <!-- Actual script tag -->
+  <script src="critical.js" defer></script>
+</head>
+```
+
+### DNS Prefetch
+
+```html
+<head>
+  <!-- Resolve DNS early -->
+  <link rel="dns-prefetch" href="https://cdn.example.com">
+  
+  <!-- Later in page -->
+  <script src="https://cdn.example.com/script.js" async></script>
+</head>
+```
+
+### Preconnect
+
+```html
+<head>
+  <!-- Establish connection early -->
+  <link rel="preconnect" href="https://api.example.com">
+  
+  <!-- Script will use this connection -->
+  <script src="https://api.example.com/sdk.js" async></script>
+</head>
+```
+
+## Content Security Policy (CSP)
+
+### Strict CSP
+
+```html
+<head>
+  <!-- Only allow scripts from same origin -->
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
+</head>
+```
+
+### Allowing specific sources
+
+```html
+<meta http-equiv="Content-Security-Policy" 
+      content="script-src 'self' https://cdn.example.com https://analytics.example.com">
+```
+
+### Using nonce
+
+```html
+<head>
+  <meta http-equiv="Content-Security-Policy" 
+        content="script-src 'nonce-r@nd0m'">
+</head>
+<body>
+  <!-- Only scripts with matching nonce execute -->
+  <script nonce="r@nd0m">
+    console.log('This script runs');
+  </script>
+  
+  <script>
+    console.log('This script is blocked');
+  </script>
+</body>
+```
+
+## JavaScript Framework Integration
+
+### React
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React App</title>
+</head>
+<body>
+  <div id="root"></div>
+  
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  
+  <script type="text/babel">
+    function App() {
+      return <h1>Hello React!</h1>;
+    }
+    
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(<App />);
+  </script>
+</body>
+</html>
+```
+
+### Vue.js
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Vue App</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+</head>
+<body>
+  <div id="app">
+    <h1>{{ message }}</h1>
+    <button @click="changeMessage">Click Me</button>
+  </div>
+  
+  <script>
+    const { createApp } = Vue;
+    
+    createApp({
+      data() {
+        return {
+          message: 'Hello Vue!'
+        };
+      },
+      methods: {
+        changeMessage() {
+          this.message = 'Message changed!';
+        }
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>
+```
+
+## Error Handling
+
+### Global Error Handler
+
+```html
+<script>
+  window.addEventListener('error', function(event) {
+    console.error('Error:', event.message);
+    console.error('File:', event.filename);
+    console.error('Line:', event.lineno);
+    
+    // Log to error tracking service
+    // trackError(event);
+  });
+</script>
+```
+
+### Try-Catch Blocks
+
+```html
+<script>
+  try {
+    // Code that might throw error
+    riskyFunction();
+  } catch (error) {
+    console.error('Caught error:', error.message);
+    // Handle error gracefully
+  } finally {
+    console.log('Cleanup code');
+  }
+</script>
+```
+
+## Best Practices
+
+### ✅ Do
+
+1. **Use `defer` for regular scripts** in `<head>`
+2. **Use `async` for independent scripts** (analytics, ads)
+3. **Place scripts before closing `</body>`** if `defer` not supported
+4. **Use external files** for reusable code
+5. **Use event listeners** instead of inline handlers
+6. **Validate user input** on both client and server
+7. **Use `type="module"`** for modern JavaScript
+8. **Implement error handling** for better UX
+9. **Minify JavaScript** for production
+10. **Use SRI** for CDN scripts (`integrity` attribute)
+11. **Separate concerns** (HTML, CSS, JS)
+12. **Use data attributes** for passing data from HTML to JS
+13. **Implement CSP** for security
+14. **Test across browsers** for compatibility
+15. **Use descriptive function/variable names**
+
+### ❌ Don't
+
+1. **Don't use inline event handlers** (violates CSP)
+2. **Don't block HTML parsing** (avoid scripts in `<head>` without `defer`)
+3. **Don't use `document.write()`** (deprecated)
+4. **Don't trust user input** (always validate/sanitize)
+5. **Don't use global variables excessively** (use modules/closures)
+6. **Don't load unnecessary libraries** (increases page size)
+7. **Don't ignore browser console errors**
+8. **Don't use `eval()`** (security risk)
+9. **Don't forget fallbacks** for CDN resources
+10. **Don't mix inline and external code** unnecessarily
+11. **Don't forget to remove `console.log()`** in production
+12. **Don't use deprecated features** (check browser compatibility)
+13. **Don't ignore accessibility** (keyboard navigation, screen readers)
+14. **Don't forget mobile optimization**
+15. **Don't hardcode sensitive data** in JavaScript
+
+## Complete Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Complete JavaScript Integration</title>
+  
+  <!-- Content Security Policy -->
+  <meta http-equiv="Content-Security-Policy" 
+        content="script-src 'self' https://cdn.example.com">
+  
+  <!-- Preconnect to CDN -->
+  <link rel="preconnect" href="https://cdn.example.com">
+  
+  <!-- Preload critical script -->
+  <link rel="preload" href="app.js" as="script">
+  
+  <!-- Critical scripts with defer -->
+  <script src="app.js" defer></script>
+  <script src="utils.js" defer></script>
+  
+  <!-- Analytics with async -->
+  <script src="https://cdn.example.com/analytics.js" async></script>
+</head>
+<body>
+  <header>
+    <h1 id="heading">Hello World</h1>
+  </header>
+  
+  <main>
+    <button id="changeBtn" data-text="Hello JavaScript!">
+      Change Text
+    </button>
+    
+    <form id="contactForm">
+      <input type="text" id="name" name="name" required>
+      <input type="email" id="email" name="email" required>
+      <button type="submit">Submit</button>
+    </form>
+  </main>
+  
+  <!-- Inline script for critical functionality -->
+  <script>
+    // Global error handler
+    window.addEventListener('error', function(event) {
+      console.error('Error:', event.message);
+    });
+  </script>
+</body>
+</html>
+```
+
+**app.js**:
+```javascript
+// Wait for DOM to be ready (note: defer already ensures this)
+document.addEventListener('DOMContentLoaded', function() {
+  // Button click handler
+  const btn = document.getElementById('changeBtn');
+  btn.addEventListener('click', function() {
+    const newText = this.dataset.text;
+    document.getElementById('heading').textContent = newText;
+  });
+  
+  // Form submission handler
+  const form = document.getElementById('contactForm');
+  form.addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    const formData = new FormData(this);
+    console.log('Form submitted:', Object.fromEntries(formData));
+    
+    // Process form data
+    // submitForm(formData);
+  });
+});
+```
+
+## Resources
+
+- **MDN JavaScript Guide**: https://developer.mozilla.org/en-US/docs/Web/JavaScript
+- **JavaScript.info**: https://javascript.info/
+- **Can I Use**: https://caniuse.com/ (browser support)
+- **JSHint**: https://jshint.com/ (code quality)
+- **ESLint**: https://eslint.org/ (linting)
+- **Babel**: https://babeljs.io/ (transpiler)
+- **SRI Hash Generator**: https://www.srihash.org/
diff --git a/skills/html-coder/references/attributes.md b/skills/html-coder/references/attributes.md
new file mode 100644
index 000000000..2cd9347d4
--- /dev/null
+++ b/skills/html-coder/references/attributes.md
@@ -0,0 +1,368 @@
+# HTML Attributes Reference
+
+Comprehensive guide to common HTML attributes, input types, script configurations, and meta element usage.
+
+## Input Types (`<input type="...">`)
+
+The `type` attribute determines the behavior and appearance of input controls.
+
+### Text-Based Input Types
+
+| Type | Purpose | Key Attributes |
+|------|---------|----------------|
+| `text` | Single-line text (default) | `maxlength`, `minlength`, `pattern`, `placeholder`, `size` |
+| `password` | Obscured text for passwords | `maxlength`, `minlength`, `pattern` |
+| `email` | Email address validation | `multiple`, `pattern`, `placeholder` |
+| `url` | URL validation | `pattern`, `placeholder` |
+| `tel` | Telephone number input | `pattern`, `placeholder` |
+| `search` | Search field with clear button | `placeholder`, `list` |
+| `textarea` | Multi-line text (separate element) | `rows`, `cols`, `maxlength`, `wrap` |
+
+### Date and Time Input Types
+
+| Type | Format | Example |
+|------|--------|---------|
+| `date` | Year-month-day | 2024-01-15 |
+| `datetime-local` | Date and time, no timezone | 2024-01-15T14:30 |
+| `month` | Year and month | 2024-01 |
+| `week` | Year and week number | 2024-W03 |
+| `time` | Hours and minutes | 14:30 |
+
+**Common attributes**: `min`, `max`, `step`
+
+### Numeric Input Types
+
+| Type | Purpose | Attributes |
+|------|---------|------------|
+| `number` | Numeric input with spinner | `min`, `max`, `step` |
+| `range` | Slider control | `min`, `max`, `step` |
+
+### Selection Input Types
+
+| Type | Purpose | Usage |
+|------|---------|-------|
+| `checkbox` | Toggle option on/off | Groups by `name`, checked individually |
+| `radio` | Select one from group | Same `name` required for grouping |
+| `select` | Dropdown menu (separate element) | Contains `<option>` elements |
+
+### File and Media Input Types
+
+| Type | Purpose | Attributes |
+|------|---------|------------|
+| `file` | File upload | `accept`, `multiple`, `capture` |
+| `color` | Color picker | `value` (hex color) |
+| `image` | Graphical submit button | `src`, `alt`, `width`, `height` |
+
+### Button Input Types
+
+| Type | Purpose | Default Behavior |
+|------|---------|-----------------|
+| `button` | Generic button | None (requires JavaScript) |
+| `submit` | Form submission | Submits form to `action` URL |
+| `reset` | Form reset (not recommended) | Resets all fields to default |
+
+### Special Input Types
+
+| Type | Purpose |
+|------|---------|
+| `hidden` | Invisible data field |
+
+### Deprecated Input Type
+
+| Type | Status | Alternative |
+|------|--------|-------------|
+| `datetime` | Deprecated | Use `datetime-local` |
+
+## Common Input Attributes
+
+### Form Control Attributes
+
+| Attribute | Valid For | Purpose |
+|-----------|-----------|---------|
+| `name` | All except image/button without form | Identifies field in form submission |
+| `value` | All | Initial/current value of control |
+| `id` | All | Unique identifier for labeling |
+| `required` | Most types | Field must be filled before submission |
+| `disabled` | All | Prevents interaction and submission |
+| `readonly` | Text-based types | Prevents editing but allows submission |
+| `autofocus` | All | Automatically focused on page load |
+| `placeholder` | Text-based types | Hint text displayed when empty |
+
+### Validation Attributes
+
+| Attribute | Valid For | Purpose |
+|-----------|-----------|---------|
+| `pattern` | Text-based types | Regular expression for validation |
+| `min` | Numeric, date/time | Minimum value |
+| `max` | Numeric, date/time | Maximum value |
+| `minlength` | Text-based types | Minimum character count |
+| `maxlength` | Text-based types | Maximum character count |
+| `step` | Numeric, date/time | Increment value (`any` allows decimals) |
+
+### Autocomplete Attributes
+
+| Attribute | Purpose | Values |
+|-----------|---------|--------|
+| `autocomplete` | Browser autofill behavior | `on`, `off`, or specific values (e.g., `name`, `email`, `tel`) |
+| `list` | Links to `<datalist>` | ID of datalist element |
+| `multiple` | Multiple values | For `email` and `file` types |
+
+### Form Override Attributes
+
+Valid only for `submit` and `image` types:
+
+| Attribute | Overrides |
+|-----------|-----------|
+| `formaction` | Form's `action` |
+| `formenctype` | Form's `enctype` |
+| `formmethod` | Form's `method` |
+| `formnovalidate` | Form's validation |
+| `formtarget` | Form's `target` |
+
+### Other Input Attributes
+
+| Attribute | Valid For | Purpose |
+|-----------|-----------|---------|
+| `checked` | `checkbox`, `radio` | Initially checked state |
+| `accept` | `file` | Allowed file types (e.g., `image/*`, `.pdf`) |
+| `capture` | `file` | Media capture method (`user`, `environment`) |
+| `size` | Text-based types | Visual width in characters |
+| `src` | `image` | Image URL |
+| `alt` | `image` | Alternative text |
+| `width`, `height` | `image` | Image dimensions |
+| `dirname` | Text types | Submits text directionality (`ltr`/`rtl`) |
+
+## Script Types (`<script type="...">`)
+
+### Standard Script Types
+
+| Type | Purpose | Behavior |
+|------|---------|----------|
+| **(default)** | Classic JavaScript | Blocks parsing, executes immediately |
+| `text/javascript` | Classic JavaScript (explicit) | Same as default (optional to specify) |
+| `module` | ES6 module script | Deferred, strict mode, separate scope |
+| `importmap` | Import map for modules | JSON configuration for module imports |
+| `speculationrules` | Speculation rules (experimental) | JSON for prefetch/prerender configuration |
+
+### Data Block Types
+
+Any non-JavaScript MIME type creates a data block:
+
+```html
+<script type="application/json" id="data">
+  {"key": "value"}
+</script>
+```
+
+Access via: `JSON.parse(document.getElementById('data').textContent)`
+
+### Script Attributes
+
+| Attribute | Purpose | Compatible With |
+|-----------|---------|-----------------|
+| `async` | Load asynchronously, execute when ready | Classic scripts, external files |
+| `defer` | Load asynchronously, execute after parsing | Classic scripts, external files |
+| `src` | External script URL | All types |
+| `integrity` | SRI hash for security verification | External files |
+| `crossorigin` | CORS mode | External files (`anonymous`, `use-credentials`) |
+| `referrerpolicy` | Referrer policy | External files |
+| `nomodule` | Skip in module-supporting browsers | Fallback scripts |
+| `blocking="render"` | Blocks rendering until loaded | Scripts in `<head>` |
+
+**Loading Behavior Comparison**:
+
+- **No attributes**: Blocks parsing, executes immediately
+- **`async`**: Loads in parallel, executes as soon as loaded (order not guaranteed)
+- **`defer`**: Loads in parallel, executes after DOM parsing in document order
+- **`type="module"`**: Deferred by default
+
+## Meta Element Attributes
+
+### Meta Charset
+
+Specifies character encoding (must be UTF-8):
+
+```html
+<meta charset="UTF-8">
+```
+
+### Meta Name/Content Pairs
+
+Common `name` values:
+
+| Name | Purpose | Content Examples |
+|------|---------|------------------|
+| `description` | Page description for search engines | Max 155 characters |
+| `keywords` | Keywords (largely ignored by search engines) | Comma-separated list |
+| `author` | Document author | Name or organization |
+| `viewport` | Mobile viewport configuration | `width=device-width, initial-scale=1` |
+| `theme-color` | Browser UI color | Hex color (`#4285f4`) |
+| `color-scheme` | Preferred color scheme | `light`, `dark`, `light dark` |
+| `referrer` | Referrer policy | `no-referrer`, `origin`, etc. |
+| `robots` | Search engine indexing instructions | `index,follow`, `noindex`, etc. |
+| `generator` | Software that generated the page | Application name |
+
+### Meta HTTP-Equiv
+
+Simulates HTTP headers:
+
+| http-equiv | Purpose | Content Examples |
+|------------|---------|------------------|
+| `content-type` | MIME type and charset (deprecated, use `<meta charset>`) | `text/html; charset=UTF-8` |
+| `refresh` | Auto-refresh or redirect | `5`, `3;url=https://example.com` |
+| `content-security-policy` | CSP directives | `default-src 'self'` |
+| `x-ua-compatible` | IE compatibility mode | `IE=edge` |
+
+### Viewport Configuration
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+
+**Viewport Properties**:
+
+| Property | Values | Purpose |
+|----------|--------|---------|
+| `width` | Pixels or `device-width` | Viewport width |
+| `height` | Pixels or `device-height` | Viewport height |
+| `initial-scale` | 0-10 | Initial zoom level |
+| `minimum-scale` | 0-10 | Minimum zoom level |
+| `maximum-scale` | 0-10 | Maximum zoom level |
+| `user-scalable` | `yes`, `no` | Allow pinch zoom |
+| `viewport-fit` | `auto`, `contain`, `cover` | Safe area insets (notches) |
+| `interactive-widget` | `resizes-visual`, `resizes-content`, `overlays-content` | On-screen keyboard behavior |
+
+## Link Relationship Types (`<link rel="...">`)
+
+| rel Value | Purpose | Example |
+|-----------|---------|---------|
+| `stylesheet` | External CSS file | `<link rel="stylesheet" href="style.css">` |
+| `icon` | Favicon | `<link rel="icon" href="favicon.ico">` |
+| `apple-touch-icon` | iOS home screen icon | `<link rel="apple-touch-icon" href="icon.png">` |
+| `manifest` | Web app manifest | `<link rel="manifest" href="manifest.json">` |
+| `alternate` | Alternate version | `<link rel="alternate" hreflang="es" href="/es/">` |
+| `canonical` | Preferred URL | `<link rel="canonical" href="https://example.com/page">` |
+| `preload` | Priority resource loading | `<link rel="preload" href="font.woff2" as="font">` |
+| `prefetch` | Low-priority future resource | `<link rel="prefetch" href="next-page.html">` |
+| `preconnect` | Early connection to origin | `<link rel="preconnect" href="https://cdn.example.com">` |
+| `dns-prefetch` | Early DNS lookup | `<link rel="dns-prefetch" href="https://cdn.example.com">` |
+| `modulepreload` | Preload ES module | `<link rel="modulepreload" href="module.js">` |
+| `author` | Author information | `<link rel="author" href="/about">` |
+| `license` | License information | `<link rel="license" href="/license">` |
+| `next` | Next page in series | `<link rel="next" href="/page2">` |
+| `prev` | Previous page in series | `<link rel="prev" href="/page1">` |
+
+## Form Attributes
+
+### Form Element Attributes
+
+| Attribute | Purpose | Values |
+|-----------|---------|--------|
+| `action` | Submission URL | URL |
+| `method` | HTTP method | `get`, `post` |
+| `enctype` | Encoding type | `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain` |
+| `target` | Where to display response | `_self`, `_blank`, `_parent`, `_top`, frame name |
+| `autocomplete` | Form autofill | `on`, `off` |
+| `novalidate` | Skip validation | Boolean |
+| `accept-charset` | Character encodings | `UTF-8` |
+
+## Autocomplete Values
+
+Detailed autocomplete tokens for better autofill:
+
+**Personal Information**:
+- `name`, `given-name`, `family-name`, `additional-name`, `honorific-prefix`, `honorific-suffix`, `nickname`
+
+**Contact Information**:
+- `email`, `tel`, `tel-country-code`, `tel-national`, `tel-area-code`, `tel-local`
+
+**Address Information**:
+- `street-address`, `address-line1`, `address-line2`, `address-level1` (state/province), `address-level2` (city), `postal-code`, `country`, `country-name`
+
+**Payment Information**:
+- `cc-name`, `cc-number`, `cc-exp`, `cc-exp-month`, `cc-exp-year`, `cc-csc`, `cc-type`
+- `transaction-currency`, `transaction-amount`
+
+**Account Information**:
+- `username`, `new-password`, `current-password`, `one-time-code`
+
+**Other**:
+- `bday`, `bday-day`, `bday-month`, `bday-year`, `sex`, `url`, `photo`, `organization`, `job-title`
+
+**Section and Shipping**:
+- Prefix with `shipping` or `billing` (e.g., `shipping email`, `billing address-line1`)
+
+## Global Attributes
+
+Applicable to all HTML elements:
+
+| Attribute | Purpose |
+|-----------|---------|
+| `id` | Unique identifier |
+| `class` | CSS class name(s) |
+| `style` | Inline CSS styles |
+| `title` | Advisory tooltip text |
+| `lang` | Language code |
+| `dir` | Text direction (`ltr`, `rtl`, `auto`) |
+| `hidden` | Element hidden from display |
+| `tabindex` | Tab navigation order |
+| `accesskey` | Keyboard shortcut |
+| `contenteditable` | Editable content (`true`, `false`) |
+| `draggable` | Draggable element (`true`, `false`) |
+| `spellcheck` | Spell checking (`true`, `false`) |
+| `translate` | Translation hint (`yes`, `no`) |
+| `data-*` | Custom data attributes |
+
+## ARIA Attributes
+
+Improve accessibility (prefix with `aria-`):
+
+**Roles**: `role="navigation"`, `role="main"`, `role="complementary"`, `role="button"`, `role="alert"`
+
+**States/Properties**:
+- `aria-label` - Accessible name
+- `aria-describedby` - Description reference
+- `aria-labelledby` - Label reference
+- `aria-hidden` - Hide from screen readers
+- `aria-live` - Live region announcements
+- `aria-expanded` - Expanded state
+- `aria-checked` - Checked state
+- `aria-selected` - Selected state
+- `aria-disabled` - Disabled state
+
+## Event Attributes
+
+JavaScript event handlers (use cautiously, prefer addEventListener):
+
+**Mouse Events**: `onclick`, `ondblclick`, `onmousedown`, `onmouseup`, `onmouseover`, `onmouseout`, `onmousemove`
+
+**Keyboard Events**: `onkeydown`, `onkeyup`, `onkeypress`
+
+**Form Events**: `onsubmit`, `onchange`, `oninput`, `onfocus`, `onblur`, `onreset`
+
+**Media Events**: `onplay`, `onpause`, `onended`, `onvolumechange`
+
+**Window Events**: `onload`, `onunload`, `onresize`, `onscroll`, `onerror`
+
+## Best Practices
+
+1. **Use semantic attributes**: Choose `type="email"` over `type="text"` with pattern
+2. **Always include labels**: Use `<label for="id">` with form controls
+3. **Validate appropriately**: Use HTML5 validation before JavaScript
+4. **Provide accessible names**: Use `aria-label` when labels aren't visible
+5. **Be specific with autocomplete**: Use detailed tokens for better UX
+6. **Avoid inline event handlers**: Use `addEventListener()` instead
+7. **Use `defer` for scripts**: Better performance than blocking scripts
+8. **Set proper viewport**: Essential for responsive mobile design
+9. **Include meta description**: Improves SEO and search result display
+10. **Use data attributes wisely**: For JavaScript-only data, not visible content
+
+## Resources
+
+- [MDN: Input Types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+- [MDN: Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
+- [MDN: Script Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+- [MDN: Meta Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+- [MDN: Link Types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
+- [MDN: Autocomplete Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+- [MDN: Global Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)
diff --git a/skills/html-coder/references/essentials.md b/skills/html-coder/references/essentials.md
new file mode 100644
index 000000000..1fe65c9d0
--- /dev/null
+++ b/skills/html-coder/references/essentials.md
@@ -0,0 +1,414 @@
+# HTML Essentials
+
+Essential HTML concepts, techniques, and best practices for modern web development.
+
+## HTML Comments
+
+Comments add notes to code without affecting display. Browsers ignore comments.
+
+**Syntax**:
+```html
+<!-- Single line comment -->
+
+<!--
+  Multi-line comment
+  spanning several lines
+-->
+```
+
+**Usage**:
+- Add explanatory notes about code
+- Temporarily disable HTML without deleting it
+- Document complex sections
+- Leave notes for collaborators
+
+**Rules**:
+- Can be placed before/after DOCTYPE and `<html>`
+- Can be used as content in most elements
+- **Cannot** be used inside tags (e.g., within attributes)
+- **Cannot** be nested
+- Not allowed in `<script>`, `<style>`, `<title>`, `<textarea>` (raw text elements)
+- First `-->` after `<!--` closes the comment
+
+**Example**:
+```html
+<!-- Navigation section -->
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <!-- <li><a href="/old">Old Page</a></li> Disabled temporarily -->
+    <li><a href="/contact">Contact</a></li>
+  </ul>
+</nav>
+```
+
+## Content Categories
+
+HTML elements belong to content categories that define what they can contain and where they can be used.
+
+### Main Categories
+
+**1. Metadata Content**
+- Elements in `<head>` that modify presentation or link to resources
+- Examples: `<base>`, `<link>`, `<meta>`, `<noscript>`, `<script>`, `<style>`, `<template>`, `<title>`
+
+**2. Flow Content**
+- Broad category of most elements that can go in `<body>`
+- Includes headings, sections, text, embedded content, interactive elements, forms
+- Most common elements are flow content
+
+**3. Sectioning Content**
+- Defines document sections and creates outline structure
+- Elements: `<article>`, `<aside>`, `<nav>`, `<section>`
+- Defines scope of `<header>` and `<footer>`
+
+**4. Heading Content**
+- Defines section titles
+- Elements: `<h1>` through `<h6>`, `<hgroup>`
+
+**5. Phrasing Content**
+- Text and inline markup within a document
+- Examples: `<a>`, `<abbr>`, `<audio>`, `<b>`, `<bdi>`,  `<bdo>`, `<br>`, `<button>`, `<cite>`, `<code>`, `<data>`, `<em>`, `<i>`, `<img>`, `<input>`, `<kbd>`, `<label>`, `<mark>`, `<q>`, `<s>`, `<small>`, `<span>`, `<strong>`, `<sub>`, `<sup>`, `<time>`, `<u>`, `<var>`, `<video>`
+
+**6. Embedded Content**
+- Imports resources or inserts content from other sources
+- Elements: `<audio>`, `<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<picture>`, `<svg>`, `<video>`
+
+**7. Interactive Content**
+- Elements designed for user interaction
+- Examples: `<button>`, `<details>`, `<embed>`, `<iframe>`, `<label>`, `<select>`, `<textarea>`
+- Conditional: `<a>` (with href), `<audio>`/`<video>` (with controls), `<input>` (not hidden type)
+
+**8. Palpable Content**
+- Content that is rendered and substantial (not empty or hidden)
+- Must contain at least one node that is not hidden
+
+### Form-Associated Content
+
+Elements with a form owner (containing `<form>` or linked via `form` attribute):
+
+- **Listed**: In form element collections (`<button>`, `<fieldset>`, `<input>`, `<object>`, `<output>`, `<select>`, `<textarea>`)
+- **Submittable**: Used in form data (`<button>`, `<input>`, `<select>`, `<textarea>`)  
+- **Resettable**: Affected by form reset (`<input>`, `<output>`, `<select>`, `<textarea>`)
+- **Labelable**: Can associate with `<label>` (most form elements except hidden inputs)
+
+### Transparent Content Model
+
+Some elements have "transparent" content - their permitted content is determined by their parent element. Examples: `<a>`, `<ins>`, `<del>`, `<map>`
+
+## Responsive Images
+
+Techniques for serving appropriate images based on device capabilities.
+
+### The Problem
+
+- **Resolution switching**: Smaller images for mobile, larger for desktop
+- **Art direction**: Different cropped/composed images for different layouts
+- **Pixel density**: Higher resolution images for Retina/high-DPI displays
+
+### Solution 1: srcset and sizes
+
+For serving different image sizes/resolutions:
+
+```html
+<img 
+  srcset="small.jpg 480w,
+          medium.jpg 800w,
+          large.jpg 1200w"
+  sizes="(max-width: 600px) 480px,
+         (max-width: 900px) 800px,
+         1200px"
+  src="medium.jpg"
+  alt="Description"
+/>
+```
+
+**How it works**:
+1. Browser checks screen size, pixel density, zoom, orientation, network speed
+2. Finds first true media condition in `sizes`
+3. Loads image from `srcset` matching that slot size
+4. Falls back to `src` for older browsers
+
+**`srcset` syntax**: `filename width`, e.g., `photo.jpg 800w`
+**`sizes` syntax**: `(media-condition) slot-width`, last value is default
+
+### Solution 2: x-descriptors for Pixel Density
+
+For same size, different resolutions:
+
+```html
+<img
+  srcset="image.jpg,
+          image-1.5x.jpg 1.5x,
+          image-2x.jpg 2x"
+  src="image.jpg"
+  alt="Description"
+  width="320"
+/>
+```
+
+Browser picks appropriate resolution based on device pixel ratio.
+
+### Solution 3: Picture Element for Art Direction
+
+Different images for different layouts:
+
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="portrait-crop.jpg">
+  <source media="(min-width: 800px)" srcset="landscape.jpg">
+  <img src="landscape.jpg" alt="Description">
+</picture>
+```
+
+**Rules**:
+- `<source>` elements test media conditions
+- First matching condition's image is used  
+- `<img>` is required as fallback
+- Can combine with `srcset` and `sizes` on `<source>`
+
+### Why Not CSS or JavaScript?
+
+Browsers preload images before CSS/JavaScript parse, so responsive image solutions must be in HTML.
+
+## Media Formats
+
+### Image Formats
+
+- **JPEG**: Photos, complex images, good compression
+- **PNG**: Images needing transparency, sharp edges
+- **GIF**: Simple animations, limited colors
+- **SVG**: Vector graphics, logos, icons, scales perfectly
+- **WebP**: Modern format, better compression, good browser support
+- **AVIF**: Newest format, excellent compression, growing support
+
+### Audio Formats
+
+- **MP3**: Universal support, good compression
+- **AAC**: Better quality than MP3 at same bitrate
+- **OGG Vorbis**: Open format, good quality
+- **WAV**: Uncompressed, large files, best quality
+- **FLAC**: Lossless compression, better than WAV size
+
+### Video Formats
+
+- **MP4 (H.264)**: Universal support, good quality
+- **WebM (VP8/VP9)**: Open format, good compression
+- **OGG (Theora)**: Open format, older
+- **MP4 (H.265/HEVC)**: Better compression than H.264
+- **AV1**: Newest, best compression, growing support
+
+**Always provide multiple formats for compatibility**:
+
+```html
+<audio controls>
+  <source src="audio.mp3" type="audio/mpeg">
+  <source src="audio.ogg" type="audio/ogg">
+  Fallback text for unsupported browsers
+</audio>
+
+<video controls width="640">
+  <source src="video.mp4" type="video/mp4">
+  <source src="video.webm" type="video/webm">
+  Fallback text
+</video>
+```
+
+## Audio and Video Elements
+
+### Audio Element
+
+```html
+<audio controls>
+  <source src="song.mp3" type="audio/mpeg">
+  <source src="song.ogg" type="audio/ogg">
+  Your browser doesn't support audio.
+</audio>
+```
+
+**Attributes**:
+- `controls` - Show playback controls
+- `autoplay` - Start automatically (usually blocked by browsers)
+- `loop` - Repeat playback
+- `muted` - Start muted
+- `preload` - none, metadata, auto
+
+### Video Element
+
+```html
+<video controls width="640" height="360" poster="thumbnail.jpg">
+  <source src="video.mp4" type="video/mp4">
+  <source src="video.webm" type="video/webm">
+  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English">
+  Your browser doesn't support video.
+</video>
+```
+
+**Attributes**:
+- `controls` - Show playback controls
+- `width`, `height` - Dimensions (maintain aspect ratio)
+- `poster` - Image shown before playback
+- `autoplay` - Auto-start (use with `muted`)
+- `loop` - Repeat playback
+- `muted` - Start muted
+- `preload` - none, metadata, auto
+
+**Tracks** (captions/subtitles):
+```html
+<track kind="subtitles" src="subs.vtt" srclang="en" label="English" default>
+```
+
+Kinds: `subtitles`, `captions`, `descriptions`, `chapters`, `metadata`
+
+## Form Validation
+
+HTML5 provides built-in validation before JavaScript.
+
+### Validation Attributes
+
+```html
+<input type="email" required>
+<input type="url" required>
+<input type="number" min="0" max="100" step="5">
+<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">
+<input type="text" minlength="3" maxlength="20">
+```
+
+**Common validation attributes**:
+- `required` - Field must be filled
+- `pattern` - Regex pattern to match
+- `min`, `max` - Numeric/date range
+- `minlength`, `maxlength` - String length
+- `step` - Increment for numbers
+- `type` - Built-in validation (email, url, tel, etc.)
+
+### Input Types with Validation
+
+- `email` - Validates email format
+- `url` - Validates URL format
+- `tel` - Telephone number
+- `number` - Numeric input
+- `range` - Slider
+- `date`, `time`, `datetime-local` - Date/time pickers
+- `color` - Color picker
+
+### Constraint Validation API
+
+Check validation via JavaScript:
+
+```javascript
+const input = document.querySelector('input');
+if (input.checkValidity()) {
+  // Valid
+} else {
+  console.log(input.validationMessage);
+}
+```
+
+## Date and Time Formats
+
+The `<time>` element and datetime attributes use ISO 8601 format.
+
+```html
+<!-- Date only -->
+<time datetime="2026-03-08">March 8, 2026</time>
+
+<!-- Time only -->
+<time datetime="14:30">2:30 PM</time>
+
+<!-- Date and time -->
+<time datetime="2026-03-08T14:30">March 8, 2026 at 2:30 PM</time>
+
+<!-- With timezone -->
+<time datetime="2026-03-08T14:30:00-05:00">2:30 PM EST</time>
+
+<!-- Duration -->
+<time datetime="PT2H30M">2 hours 30 minutes</time>
+```
+
+**Format patterns**:
+- Date: `YYYY-MM-DD`
+- Time: `HH:MM` or `HH:MM:SS`
+- Combined: `YYYY-MM-DDTHH:MM:SS`
+- Timezone: `+HH:MM` or `-HH:MM` or `Z` (UTC)
+- Duration: `P` prefix, e.g., `PT2H` (2 hours)
+
+## Quirks Mode and Standards Mode
+
+Browsers render pages in different  modes based on DOCTYPE:
+
+**Standards Mode** (recommended):
+```html
+<!DOCTYPE html>
+```
+- Follows modern web standards
+- Consistent, predictable rendering
+
+**Quirks Mode**:
+- No DOCTYPE or old DOCTYPE
+- Emulates old browser bugs for legacy sites
+- **Avoid this!**
+
+**Limited Quirks Mode**:
+- Some old DOCTYPEs trigger this
+- Between standards and quirks
+
+**Always use `<!DOCTYPE html>` for standards mode.**
+
+## Microdata
+
+Add machine-readable data to HTML:
+
+```html
+<div itemscope itemtype="https://schema.org/Person">
+  <h1 itemprop="name">John Doe</h1>
+  <img itemprop="image" src="photo.jpg" alt="John">
+  <p itemprop="jobTitle">Software Engineer</p>
+  <a itemprop="url" href="https://example.com">Website</a>
+</div>
+```
+
+**Attributes**:
+- `itemscope` - Creates item
+- `itemtype` - Defines type (URL to vocabulary)
+- `itemprop` - Names property
+
+Common vocabularies at [Schema.org](https://schema.org)
+
+## Microformats
+
+Simpler alternative to microdata using class names:
+
+```html
+<div class="h-card">
+  <span class="p-name">John Doe</span>
+  <span class="p-org">Company Inc</span>
+  <a class="u-email" href="mailto:john@example.com">Email</a>
+</div>
+```
+
+Common microformats: `h-card` (person), `h-entry` (blog post), `h-event` (event)
+
+## Best Practices
+
+1. **Always use `<!DOCTYPE html>`** - Ensures standards mode
+2. **Provide multiple media formats** - For cross-browser support
+3. **Use responsive images** - Optimize for device and bandwidth
+4. **Leverage HTML5 validation** - Before adding JavaScript
+5. **Add meaningful metadata** - Microdata/microformats for SEO
+6. **Comment complex sections** - Help future maintainers
+7. **Test different devices** - Responsive images and media
+8. **Include fallback content** - For unsupported features
+9. **Use semantic elements** - Follow content categories
+10. **Validate regularly** - Check with W3C validator
+
+## Resources
+
+- [MDN: HTML Comments](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Comments)
+- [MDN: Content Categories](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories)
+- [MDN: Responsive Images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
+- [MDN: Constraint Validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation)
+- [MDN: Date and Time Formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
+- [MDN: Media Formats](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats)
+- [Schema.org](https://schema.org)
+- [Microformats Wiki](http://microformats.org/wiki/)
diff --git a/skills/html-coder/references/getting-started.md b/skills/html-coder/references/getting-started.md
new file mode 100644
index 000000000..261f8c2ec
--- /dev/null
+++ b/skills/html-coder/references/getting-started.md
@@ -0,0 +1,157 @@
+# Getting Started with HTML
+
+This guide introduces HTML fundamentals and helps you create your first web pages.
+
+## What is HTML?
+
+HTML (HyperText Markup Language) is a markup language that uses elements to structure and define content on web pages. Elements consist of tags that wrap content to control how it displays and behaves.
+
+**Basic concept**: Unstructured text appears on one line. Adding HTML elements like `<p>` for paragraphs and `<ul>`/`<li>` for lists structures content appropriately.
+
+## Document Structure
+
+Every HTML document follows this basic structure:
+
+```html
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>My Page Title</title>
+  </head>
+  <body>
+    <!-- Your content here -->
+  </body>
+</html>
+```
+
+### Key Components
+
+- **`<!DOCTYPE html>`** - Required declaration that ensures browsers display the page correctly
+- **`<html>`** - Root element that wraps all content; includes `lang` attribute for language
+- **`<head>`** - Container for metadata (not visible on page): keywords, descriptions, CSS links, character sets
+- **`<meta charset="utf-8">`** - Sets character encoding to UTF-8 for international text support
+- **`<meta name="viewport">`** - Ensures responsive display on mobile devices
+- **`<title>`** - Page title shown in browser tab and bookmarks
+- **`<body>`** - Contains all visible content displayed to users
+
+## Essential HTML Elements
+
+### Headings
+
+Six heading levels organize content hierarchy:
+
+```html
+<h1>Main Title</h1>
+<h2>Section Heading</h2>
+<h3>Subsection</h3>
+<h4>Sub-subsection</h4>
+```
+
+Use `<h1>` for main titles, `<h2>`-`<h6>` for nested subsections. Don't skip levels.
+
+### Paragraphs
+
+Wrap text in paragraph tags:
+
+```html
+<p>This is a paragraph of text.</p>
+<p>This is another paragraph.</p>
+```
+
+### Lists
+
+**Unordered lists** (bullets) for items where order doesn't matter:
+
+```html
+<ul>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ul>
+```
+
+**Ordered lists** (numbered) for sequential items:
+
+```html
+<ol>
+  <li>Step one</li>
+  <li>Step two</li>
+  <li>Step three</li>
+</ol>
+```
+
+### Links
+
+Create hyperlinks with the anchor element:
+
+```html
+<a href="https://example.com">Link Text</a>
+```
+
+- `href` attribute specifies the destination URL
+- Always include the protocol (`https://` or `http://`)
+- Link text should be descriptive
+
+### Images
+
+Embed images with proper attributes:
+
+```html
+<img src="images/photo.jpg" alt="Description of image" />
+```
+
+- `src` - Path to image file
+- `alt` - Alternative text for accessibility and when images don't load
+- Images are "empty elements" (no closing tag)
+- Alt text should meaningfully describe the image content
+
+### Nesting Elements
+
+Elements can contain other elements:
+
+```html
+<html>
+  <body>
+    <h1>My Heading</h1>
+    <p>My paragraph with <strong>bold text</strong>.</p>
+  </body>
+</html>
+```
+
+All elements must be properly nested - if you open element A, then B, you must close B before closing A.
+
+## HTML Syntax Rules
+
+1. **Tags**: Most elements have opening `<tag>` and closing `</tag>` tags
+2. **Empty elements**: Some elements like `<img>`, `<br>`, `<meta>` have no closing tag
+3. **Case insensitivity**: `<P>` and `<p>` are equivalent, but lowercase is standard practice
+4. **Attributes**: Provide additional information about elements (e.g., `href`, `src`, `alt`)
+5. **Comments**: Add notes with `<!-- comment text -->` - not displayed in browser
+
+## Creating Your First Page
+
+1. Create a new file named `index.html`
+2. Add the basic document structure
+3. Add a title in the `<head>`
+4. Add content in the `<body>`: headings, paragraphs, images, lists, links
+5. Open the file in a web browser to view
+
+## Best Practices
+
+- Always include `<!DOCTYPE html>` at the top
+- Use semantic elements that describe content meaning
+- Always close tags (except empty elements)
+- Use lowercase for tag names and attributes
+- Quote attribute values
+- Include `alt` text for all images
+- Use proper heading hierarchy
+- Validate your HTML regularly
+
+## Resources
+
+- [MDN: Creating Your First Website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content)
+- [MDN: Structuring Content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
+- [W3Schools: HTML Basics](https://www.w3schools.com/html/html_basic.asp)
+- [W3Schools: HTML Elements](https://www.w3schools.com/html/html_elements.asp)
diff --git a/skills/html-coder/references/glossary-attributes.md b/skills/html-coder/references/glossary-attributes.md
new file mode 100644
index 000000000..370ed2df6
--- /dev/null
+++ b/skills/html-coder/references/glossary-attributes.md
@@ -0,0 +1,527 @@
+# HTML Attributes Glossary
+
+Complete reference of HTML attributes organized by category and element.
+
+## Global Attributes
+
+Attributes that can be used on **any** HTML element:
+
+| Attribute | Description | Values | Example |
+|-----------|-------------|--------|---------|
+| `accesskey` | Keyboard shortcut | Character | `accesskey="s"` |
+| `class` | CSS class(es) | Space-separated classes | `class="btn primary"` |
+| `contenteditable` | Editable content | `true`, `false` | `contenteditable="true"` |
+| `data-*` | Custom data | Any value | `data-user-id="123"` |
+| `dir` | Text direction | `ltr`, `rtl`, `auto` | `dir="rtl"` |
+| `draggable` | Draggable element | `true`, `false` | `draggable="true"` |
+| `hidden` | Hide element | Boolean | `hidden` |
+| `id` | Unique identifier | Unique string | `id="header"` |
+| `inert` | Inert subtree | Boolean | `inert` |
+| `inputmode` | Virtual keyboard type | See table below | `inputmode="numeric"` |
+| `is` | Custom element | Element name | `is="my-element"` |
+| `itemid` | Microdata item ID | URL | `itemid="urn:isbn:123"` |
+| `itemprop` | Microdata property | Property name | `itemprop="name"` |
+| `itemref` | Microdata reference | ID references | `itemref="ref1 ref2"` |
+| `itemscope` | Microdata scope | Boolean | `itemscope` |
+| `itemtype` | Microdata type | URL | `itemtype="https://schema.org/Person"` |
+| `lang` | Language | Language code | `lang="en"`, `lang="es"` |
+| `nonce` | CSP nonce | Random string | `nonce="r@nd0m"` |
+| `part` | Shadow part name | Part name | `part="button"` |
+| `slot` | Slot name | Slot identifier | `slot="header"` |
+| `spellcheck` | Spell checking | `true`, `false` | `spellcheck="false"` |
+| `style` | Inline CSS | CSS declarations | `style="color: red;"` |
+| `tabindex` | Tab order | Integer | `tabindex="0"`, `tabindex="-1"` |
+| `title` | Advisory information | Text | `title="Click for more info"` |
+| `translate` | Translation support | `yes`, `no` | `translate="no"` |
+
+### Inputmode Values
+
+| Value | Description | Keyboard Type |
+|-------|-------------|---------------|
+| `none` | No virtual keyboard | N/A |
+| `text` | Standard text | Full keyboard |
+| `decimal` | Decimal numbers | Numeric with decimal |
+| `numeric` | Numeric only | Number pad |
+| `tel` | Telephone | Phone number pad |
+| `search` | Search | Search-optimized |
+| `email` | Email address | Email keyboard |
+| `url` | URL | URL keyboard |
+
+## ARIA Attributes
+
+Accessibility attributes (prefix `aria-`):
+
+### ARIA Roles
+| Attribute | Description | Example |
+|-----------|-------------|---------|
+| `role` | Element role | `role="button"`, `role="navigation"` |
+
+### ARIA States and Properties
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `aria-activedescendant` | Active child element | ID |
+| `aria-atomic` | Entire region announced | `true`, `false` |
+| `aria-autocomplete` | Autocomplete type | `none`, `inline`, `list`, `both` |
+| `aria-busy` | Loading state | `true`, `false` |
+| `aria-checked` | Checkbox/radio state | `true`, `false`, `mixed` |
+| `aria-colcount` | Total columns | Integer |
+| `aria-colindex` | Column index | Integer |
+| `aria-colspan` | Column span | Integer |
+| `aria-controls` | Controlled elements | ID references |
+| `aria-current` | Current item | `page`, `step`, `location`, `date`, `time`, `true`, `false` |
+| `aria-describedby` | Description reference | ID references |
+| `aria-details` | Details reference | ID reference |
+| `aria-disabled` | Disabled state | `true`, `false` |
+| `aria-dropeffect` | Drag-drop operation | `copy`, `move`, `link`, `execute`, `popup`, `none` |
+| `aria-errormessage` | Error message reference | ID reference |
+| `aria-expanded` | Expanded state | `true`, `false` |
+| `aria-flowto` | Reading order | ID references |
+| `aria-grabbed` | Grabbed state | `true`, `false` |
+| `aria-haspopup` | Popup type | `true`, `false`, `menu`, `listbox`, `tree`, `grid`, `dialog` |
+| `aria-hidden` | Hidden from screen readers | `true`, `false` |
+| `aria-invalid` | Validation state | `true`, `false`, `grammar`, `spelling` |
+| `aria-keyshortcuts` | Keyboard shortcuts | Text |
+| `aria-label` | Accessible label | Text |
+| `aria-labelledby` | Label reference | ID references |
+| `aria-level` | Hierarchical level | Integer |
+| `aria-live` | Live region | `off`, `polite`, `assertive` |
+| `aria-modal` | Modal dialog | `true`, `false` |
+| `aria-multiline` | Multi-line input | `true`, `false` |
+| `aria-multiselectable` | Multi-selection | `true`, `false` |
+| `aria-orientation` | Orientation | `horizontal`, `vertical` |
+| `aria-owns` | Owned elements | ID references |
+| `aria-placeholder` | Placeholder text | Text |
+| `aria-posinset` | Position in set | Integer |
+| `aria-pressed` | Pressed state | `true`, `false`, `mixed` |
+| `aria-readonly` | Read-only state | `true`, `false` |
+| `aria-relevant` | Relevant changes | `additions`, `removals`, `text`, `all` |
+| `aria-required` | Required field | `true`, `false` |
+| `aria-roledescription` | Role description | Text |
+| `aria-rowcount` | Total rows | Integer |
+| `aria-rowindex` | Row index | Integer |
+| `aria-rowspan` | Row span | Integer |
+| `aria-selected` | Selected state | `true`, `false` |
+| `aria-setsize` | Set size | Integer |
+| `aria-sort` | Sort order | `ascending`, `descending`, `none`, `other` |
+| `aria-valuemax` | Maximum value | Number |
+| `aria-valuemin` | Minimum value | Number |
+| `aria-valuenow` | Current value | Number |
+| `aria-valuetext` | Value as text | Text |
+
+## Link Attributes (`<a>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `href` | Target URL | URL |
+| `target` | Where to open | `_self`, `_blank`, `_parent`, `_top`, frame name |
+| `download` | Download filename | Filename (optional) |
+| `rel` | Relationship | See Link Relationships below |
+| `hreflang` | Target language | Language code |
+| `type` | MIME type | MIME type |
+| `ping` | Ping URLs | Space-separated URLs |
+| `referrerpolicy` | Referrer policy | See Referrer Policy below |
+
+### Link Relationships (`rel`)
+
+| Value | Description | Usage |
+|-------|-------------|-------|
+| `alternate` | Alternate version | RSS feed, translations |
+| `author` | Author page | `<link rel="author">` |
+| `bookmark` | Permalink | Bookmark for section |
+| `canonical` | Canonical URL | Preferred version |
+| `dns-prefetch` | DNS prefetch | `<link rel="dns-prefetch">` |
+| `external` | External site | Links to other domains |
+| `help` | Help document | Help/support page |
+| `icon` | Favicon | `<link rel="icon">` |
+| `license` | License | Copyright/license page |
+| `manifest` | Web manifest | PWA manifest file |
+| `modulepreload` | Module preload | ES6 module preload |
+| `next` | Next page | Pagination |
+| `nofollow` | Don't follow | SEO: don't follow link |
+| `noopener` | No opener reference | Security for `_blank` |
+| `noreferrer` | No referrer | Don't send referrer |
+| `opener` | Has opener | Opposite of noopener |
+| `pingback` | Pingback URL | Blog pingbacks |
+| `preconnect` | Preconnect | Early connection |
+| `prefetch` | Prefetch resource | Future navigation |
+| `preload` | Preload resource | Current page resource |
+| `prerender` | Prerender page | Next page prerender |
+| `prev` | Previous page | Pagination |
+| `search` | Search tool | Search functionality |
+| `stylesheet` | CSS stylesheet | `<link rel="stylesheet">` |
+| `tag` | Tag/keyword | Tag for content |
+
+### Referrer Policy
+
+| Value | Description |
+|-------|-------------|
+| `no-referrer` | Never send referrer |
+| `no-referrer-when-downgrade` | Don't send on HTTPS→HTTP (default) |
+| `origin` | Send origin only |
+| `origin-when-cross-origin` | Full URL same-origin, origin only cross-origin |
+| `same-origin` | Send only same-origin |
+| `strict-origin` | Origin only, not on downgrade |
+| `strict-origin-when-cross-origin` | Full same-origin, origin cross-origin, none downgrade |
+| `unsafe-url` | Always send full URL |
+
+## Image Attributes (`<img>`)
+
+| Attribute | Description | Required | Example |
+|-----------|-------------|----------|---------|
+| `src` | Image URL | Yes | `src="image.jpg"` |
+| `alt` | Alternative text | Yes | `alt="Description"` |
+| `width` | Image width | No | `width="800"` |
+| `height` | Image height | No | `height="600"` |
+| `srcset` | Responsive sources | No | `srcset="img-400.jpg 400w, img-800.jpg 800w"` |
+| `sizes` | Image sizes | No | `sizes="(max-width: 600px) 400px, 800px"` |
+| `loading` | Loading strategy | No | `loading="lazy"`, `loading="eager"` |
+| `decoding` | Decode strategy | No | `decoding="async"`, `decoding="sync"`, `decoding="auto"` |
+| `crossorigin` | CORS mode | No | `crossorigin="anonymous"` |
+| `ismap` | Server-side map | No | `ismap` (boolean) |
+| `usemap` | Client-side map | No | `usemap="#mapname"` |
+| `referrerpolicy` | Referrer policy | No | See Referrer Policy above |
+
+## Form Attributes (`<form>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `action` | Submit URL | URL |
+| `method` | HTTP method | `GET`, `POST` |
+| `enctype` | Encoding type | `application/x-www-form-urlencoded` (default), `multipart/form-data`, `text/plain` |
+| `accept-charset` | Character encodings | Space-separated encodings |
+| `autocomplete` | Autocomplete | `on`, `off` |
+| `name` | Form name | String |
+| `novalidate` | Skip validation | Boolean |
+| `target` | Response target | `_self`, `_blank`, `_parent`, `_top` |
+| `rel` | Link relationship | See Link Relationships |
+
+## Input Attributes (`<input>`)
+
+### Universal Input Attributes
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `type` | Input type | See Input Types below |
+| `name` | Field name | String |
+| `value` | Initial value | String |
+| `id` | Unique ID | String |
+| `required` | Required field | Boolean |
+| `disabled` | Disabled field | Boolean |
+| `readonly` | Read-only | Boolean |
+| `autofocus` | Auto focus | Boolean |
+| `autocomplete` | Autocomplete | See Autocomplete Values below |
+| `placeholder` | Placeholder text | String |
+| `form` | Associated form | Form ID |
+
+### Input Types
+
+| Type | Description | Additional Attributes |
+|------|-------------|----------------------|
+| `text` | Single-line text | `maxlength`, `minlength`, `pattern`, `size` |
+| `password` | Password field | `maxlength`, `minlength`, `pattern`, `size` |
+| `email` | Email address | `maxlength`, `minlength`, `multiple`, `pattern`, `size` |
+| `tel` | Telephone | `maxlength`, `minlength`, `pattern`, `size` |
+| `url` | URL | `maxlength`, `minlength`, `pattern`, `size` |
+| `search` | Search field | `maxlength`, `minlength`, `pattern`, `size` |
+| `number` | Numeric input | `min`, `max`, `step` |
+| `range` | Slider | `min`, `max`, `step` |
+| `date` | Date picker | `min`, `max`, `step` |
+| `time` | Time picker | `min`, `max`, `step` |
+| `datetime-local` | Date and time | `min`, `max`, `step` |
+| `month` | Month picker | `min`, `max`, `step` |
+| `week` | Week picker | `min`, `max`, `step` |
+| `color` | Color picker | N/A |
+| `checkbox` | Checkbox | `checked` |
+| `radio` | Radio button | `checked` |
+| `file` | File upload | `accept`, `multiple`, `capture` |
+| `submit` | Submit button | `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget` |
+| `reset` | Reset button | N/A |
+| `button` | Generic button | N/A |
+| `image` | Image button | `src`, `alt`, `width`, `height`, `formaction`, etc. |
+| `hidden` | Hidden field | N/A |
+
+### Type-Specific Attributes
+
+| Attribute | Applies To | Description |
+|-----------|------------|-------------|
+| `accept` | `file` | File types accepted | 
+| `capture` | `file` | Camera capture |
+| `checked` | `checkbox`, `radio` | Pre-checked state |
+| `max` | `number`, `range`, date/time | Maximum value |
+| `maxlength` | `text`, `password`, `email`, etc. | Maximum length |
+| `min` | `number`, `range`, date/time | Minimum value |
+| `minlength` | `text`, `password`, `email`, etc. | Minimum length |
+| `multiple` | `email`, `file` | Accept multiple values |
+| `pattern` | `text`, `password`, `email`, etc. | Regex validation |
+| `size` | `text`, `password`, `email`, etc. | Visible width |
+| `step` | `number`, `range`, date/time | Step increment |
+| `list` | Most types | Datalist reference |
+
+### Autocomplete Values
+
+Common values for `autocomplete` attribute:
+
+| Value | Description |
+|-------|-------------|
+| `off` | Disable autocomplete |
+| `on` | Enable autocomplete |
+| `name` | Full name |
+| `given-name` | First name |
+| `additional-name` | Middle name |
+| `family-name` | Last name |
+| `nickname` | Nickname |
+| `email` | Email address |
+| `username` | Username |
+| `new-password` | New password |
+| `current-password` | Current password |
+| `tel` | Phone number |
+| `tel-country-code` | Country code |
+| `tel-national` | National number |
+| `street-address` | Street address |
+| `address-line1` | Address line 1 |
+| `address-line2` | Address line 2 |
+| `address-level1` | State/province |
+| `address-level2` | City |
+| `postal-code` | Postal/ZIP code |
+| `country` | Country code |
+| `country-name` | Country name |
+| `cc-name` | Cardholder name |
+| `cc-number` | Credit card number |
+| `cc-exp` | Expiration date |
+| `cc-exp-month` | Expiration month |
+| `cc-exp-year` | Expiration year |
+| `cc-csc` | Security code |
+| `cc-type` | Card type |
+| `bday` | Birthday |
+| `bday-day` | Birth day |
+| `bday-month` | Birth month |
+| `bday-year` | Birth year |
+| `sex` | Gender |
+| `url` | Website URL |
+| `photo` | Photo URL |
+
+## Button Attributes (`<button>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `type` | Button type | `submit`, `reset`, `button` |
+| `name` | Button name | String |
+| `value` | Button value | String |
+| `disabled` | Disabled state | Boolean |
+| `form` | Associated form | Form ID |
+| `formaction` | Submit URL override | URL |
+| `formenctype` | Encoding override | See Form `enctype` |
+| `formmethod` | Method override | `GET`, `POST` |
+| `formnovalidate` | Skip validation | Boolean |
+| `formtarget` | Target override | See Form `target` |
+
+## Select Attributes (`<select>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `name` | Field name | String |
+| `size` | Visible options | Integer |
+| `multiple` | Multiple selection | Boolean |
+| `required` | Required field | Boolean |
+| `disabled` | Disabled state | Boolean |
+| `autofocus` | Auto focus | Boolean |
+| `form` | Associated form | Form ID |
+
+## Option Attributes (`<option>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `value` | Option value | String |
+| `label` | Option label | String |
+| `selected` | Pre-selected | Boolean |
+| `disabled` | Disabled option | Boolean |
+
+## Textarea Attributes (`<textarea>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `name` | Field name | String |
+| `rows` | Visible rows | Integer |
+| `cols` | Visible columns | Integer |
+| `maxlength` | Maximum length | Integer |
+| `minlength` | Minimum length | Integer |
+| `placeholder` | Placeholder text | String |
+| `required` | Required field | Boolean |
+| `disabled` | Disabled state | Boolean |
+| `readonly` | Read-only | Boolean |
+| `autofocus` | Auto focus | Boolean |
+| `autocomplete` | Autocomplete | `on`, `off` |
+| `spellcheck` | Spell check | `true`, `false` |
+| `wrap` | Text wrapping | `soft`, `hard` |
+| `form` | Associated form | Form ID |
+
+## Media Attributes (`<audio>`, `<video>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `src` | Media source | URL |
+| `controls` | Show controls | Boolean |
+| `autoplay` | Auto play | Boolean |
+| `loop` | Loop playback | Boolean |
+| `muted` | Muted audio | Boolean |
+| `preload` | Preload strategy | `none`, `metadata`, `auto` |
+| `poster` | Poster image (video only) | URL |
+| `width` | Width (video only) | Integer |
+| `height` | Height (video only) | Integer |
+| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
+| `playsinline` | Inline playback (mobile) | Boolean |
+
+## Script Attributes (`<script>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `src` | Script URL | URL |
+| `type` | MIME type | `text/javascript` (default), `module` |
+| `async` | Async loading | Boolean |
+| `defer` | Deferred loading | Boolean |
+| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
+| `integrity` | SRI hash | Hash string |
+| `nomodule` | Fallback for old browsers | Boolean |
+| `nonce` | CSP nonce | Random string |
+| `referrerpolicy` | Referrer policy | See Referrer Policy |
+
+## Table Attributes
+
+### Table (`<table>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `border` | Border (deprecated) | Integer (use CSS) |
+| `cellspacing` | Cell spacing (deprecated) | Integer (use CSS) |
+| `cellpadding` | Cell padding (deprecated) | Integer (use CSS) |
+
+### Table Cell (`<td>`, `<th>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `colspan` | Column span | Integer |
+| `rowspan` | Row span | Integer |
+| `headers` | Header references | Space-separated IDs |
+| `scope` | Header scope (`<th>` only) | `row`, `col`, `rowgroup`, `colgroup` |
+
+## Iframe Attributes (`<iframe>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `src` | Frame URL | URL |
+| `srcdoc` | Inline HTML | HTML string |
+| `name` | Frame name | String |
+| `width` | Frame width | Integer or percentage |
+| `height` | Frame height | Integer or percentage |
+| `sandbox` | Security restrictions | See Sandbox below |
+| `allow` | Feature policy | Semicolon-separated policies |
+| `allowfullscreen` | Allow fullscreen | Boolean |
+| `allowpaymentrequest` | Allow payment | Boolean |
+| `loading` | Loading strategy | `lazy`, `eager` |
+| `referrerpolicy` | Referrer policy | See Referrer Policy |
+
+### Sandbox Values
+
+| Value | Description |
+|-------|-------------|
+| (empty) | All restrictions |
+| `allow-forms` | Allow form submission |
+| `allow-modals` | Allow modals |
+| `allow-orientation-lock` | Allow screen orientation |
+| `allow-pointer-lock` | Allow pointer lock |
+| `allow-popups` | Allow popups |
+| `allow-popups-to-escape-sandbox` | Popups inherit sandbox |
+| `allow-presentation` | Allow presentation API |
+| `allow-same-origin` | Treat as same origin |
+| `allow-scripts` | Allow scripts |
+| `allow-top-navigation` | Allow top navigation |
+| `allow-top-navigation-by-user-activation` | Allow with user action |
+
+## Meta Attributes (`<meta>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `charset` | Character encoding | `UTF-8` (most common) |
+| `name` | Metadata name | `description`, `keywords`, `author`, `viewport`, etc. |
+| `content` | Metadata content | String |
+| `http-equiv` | HTTP header | `content-type`, `refresh`, `content-security-policy`, etc. |
+| `property` | Property name (Open Graph) | `og:title`, `og:image`, etc. |
+
+## Progress/Meter Attributes
+
+### Progress (`<progress>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `value` | Current value | Number |
+| `max` | Maximum value | Number |
+
+### Meter (`<meter>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `value` | Current value | Number |
+| `min` | Minimum value | Number |
+| `max` | Maximum value | Number |
+| `low` | Low threshold | Number |
+| `high` | High threshold | Number |
+| `optimum` | Optimum value | Number |
+
+## Details Attributes (`<details>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `open` | Initially open | Boolean |
+
+## Dialog Attributes (`<dialog>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `open` | Visible dialog | Boolean |
+
+## Canvas Attributes (`<canvas>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `width` | Canvas width | Integer (pixels) |
+| `height` | Canvas height | Integer (pixels) |
+
+## Quick Reference
+
+### Most Common Attributes
+
+```html
+<!-- Links -->
+<a href="url" target="_blank" rel="noopener">Link</a>
+
+<!-- Images -->
+<img src="image.jpg" alt="Description" width="800" height="600" loading="lazy">
+
+<!-- Forms -->
+<form action="/submit" method="POST">
+  <input type="text" name="username" required>
+  <button type="submit">Submit</button>
+</form>
+
+<!-- Containers -->
+<div id="container" class="wrapper" data-role="main"></div>
+
+<!-- Media -->
+<video src="video.mp4" controls poster="poster.jpg" preload="metadata"></video>
+
+<!-- Scripts -->
+<script src="app.js" defer></script>
+
+<!-- Metadata -->
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
+
+## Notes
+
+- **Boolean attributes**: Presence = true, absence = false (e.g., `disabled`, `required`)
+- **Global attributes**: Can be used on any element
+- **Deprecated attributes**: Many presentational attributes deprecated (use CSS instead)
+- **Validation**: Use W3C Validator to check attribute usage
+- **Accessibility**: ARIA attributes enhance accessibility for screen readers
diff --git a/skills/html-coder/references/glossary-events.md b/skills/html-coder/references/glossary-events.md
new file mode 100644
index 000000000..a456c0e44
--- /dev/null
+++ b/skills/html-coder/references/glossary-events.md
@@ -0,0 +1,495 @@
+# HTML Event Attributes Glossary
+
+Complete reference for HTML event handler attributes (inline event handlers).
+
+## What Are Event Attributes?
+
+Event attributes (also called inline event handlers) are HTML attributes that execute JavaScript code when specific events occur. They all start with `on` followed by the event name (e.g., `onclick`, `onload`, `onsubmit`).
+
+## ⚠️ Important Note
+
+**Modern best practice**: Use JavaScript `.addEventListener()` instead of inline event attributes for better:
+- **Separation of concerns** (HTML structure vs behavior)
+- **Multiple handlers** per event
+- **Easier maintenance**
+- **Content Security Policy (CSP) compatibility**
+
+```html
+<!-- ❌ Avoid: Inline handler -->
+<button onclick="alert('Clicked')">Click</button>
+
+<!-- ✅ Prefer: Event listener -->
+<button id="myBtn">Click</button>
+<script>
+  document.getElementById('myBtn').addEventListener('click', function() {
+    alert('Clicked');
+  });
+</script>
+```
+
+## Window Events
+
+Events that occur on the window object:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `onafterprint` | After print dialog closes | `<body onafterprint="handleAfterPrint()">` |
+| `onbeforeprint` | Before print dialog opens | `<body onbeforeprint="handleBeforePrint()">` |
+| `onbeforeunload` | Before page unload | `<body onbeforeunload="return 'Leave page?'">` |
+| `onerror` | When error occurs | `<body onerror="handleError()">` |
+| `onhashchange` | When URL hash changes | `<body onhashchange="handleHashChange()">` |
+| `onload` | When page/element loads | `<body onload="init()">` |
+| `onmessage` | When message received (postMessage) | `<body onmessage="handleMessage()">` |
+| `onoffline` | When browser goes offline | `<body onoffline="handleOffline()">` |
+| `ononline` | When browser goes online | `<body ononline="handleOnline()">` |
+| `onpagehide` | When navigating away | `<body onpagehide="handlePageHide()">` |
+| `onpageshow` | When navigating to page | `<body onpageshow="handlePageShow()">` |
+| `onpopstate` | When history state changes | `<body onpopstate="handlePopState()">` |
+| `onresize` | When window is resized | `<body onresize="handleResize()">` |
+| `onstorage` | When storage changes | `<body onstorage="handleStorage()">` |
+| `onunload` | When page is unloaded | `<body onunload="cleanup()">` |
+
+**Example**:
+```html
+<body onload="console.log('Page loaded')" onresize="console.log('Window resized')">
+  <h1>Welcome</h1>
+</body>
+```
+
+## Mouse Events
+
+Events triggered by mouse actions:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `onclick` | Element is clicked | `<button onclick="handleClick()">Click</button>` |
+| `oncontextmenu` | Right-click (context menu) | `<div oncontextmenu="return false">No right-click</div>` |
+| `ondblclick` | Element is double-clicked | `<div ondblclick="handleDoubleClick()">Double-click</div>` |
+| `onmousedown` | Mouse button pressed down | `<button onmousedown="handleMouseDown()">Press</button>` |
+| `onmouseenter` | Mouse enters element | `<div onmouseenter="highlight()">Hover</div>` |
+| `onmouseleave` | Mouse leaves element | `<div onmouseleave="unhighlight()">Hover</div>` |
+| `onmousemove` | Mouse moves over element | `<div onmousemove="trackMouse()">Move mouse</div>` |
+| `onmouseout` | Mouse moves out (bubbles) | `<div onmouseout="handleOut()">Hover out</div>` |
+| `onmouseover` | Mouse moves over (bubbles) | `<div onmouseover="handleOver()">Hover over</div>` |
+| `onmouseup` | Mouse button released | `<button onmouseup="handleMouseUp()">Release</button>` |
+
+**Mouse Event Differences**:
+- **`onmouseenter` vs `onmouseover`**: `enter` doesn't bubble, `over` does
+- **`onmouseleave` vs `onmouseout`**: `leave` doesn't bubble, `out` does
+- **`onclick`**: Fires on mousedown + mouseup
+
+**Example**:
+```html
+<button 
+  onmouseenter="this.style.backgroundColor='blue'"
+  onmouseleave="this.style.backgroundColor=''">
+  Hover me
+</button>
+```
+
+## Keyboard Events
+
+Events triggered by keyboard actions:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `onkeydown` | Key is pressed down | `<input onkeydown="handleKeyDown(event)">` |
+| `onkeypress` | Key is pressed (deprecated) | `<input onkeypress="handleKeyPress(event)">` |
+| `onkeyup` | Key is released | `<input onkeyup="handleKeyUp(event)">` |
+
+**Note**: `onkeypress` is deprecated. Use `onkeydown` instead.
+
+**Example**:
+```html
+<input 
+  type="text" 
+  onkeydown="if(event.key === 'Enter') submitForm()"
+  placeholder="Press Enter to submit">
+```
+
+## Form Events
+
+Events related to forms and form controls:
+
+| Event Attribute | When It Fires | Applies To |
+|-----------------|---------------|------------|
+| `onblur` | Element loses focus | Input, textarea, select |
+| `onchange` | Value changes and loses focus | Input, textarea, select |
+| `onfocus` | Element gains focus | Input, textarea, select |
+| `onfocusin` | Element about to gain focus (bubbles) | Input, textarea, select |
+| `onfocusout` | Element about to lose focus (bubbles) | Input, textarea, select |
+| `oninput` | Value changes (immediately) | Input, textarea |
+| `oninvalid` | Input validation fails | Input, textarea, select |
+| `onreset` | Form is reset | Form |
+| `onsearch` | User initiates search | Input type="search" |
+| `onselect` | Text is selected | Input, textarea |
+| `onsubmit` | Form is submitted | Form |
+
+**Event Differences**:
+- **`oninput`**: Fires immediately on every change
+- **`onchange`**: Fires when value changes AND element loses focus
+- **`onblur` vs `onfocusout`**: `blur` doesn't bubble, `focusout` does
+- **`onfocus` vs `onfocusin`**: `focus` doesn't bubble, `focusin` does
+
+**Example**:
+```html
+<form onsubmit="return validateForm()">
+  <input 
+    type="text" 
+    name="username"
+    oninput="checkAvailability(this.value)"
+    onblur="validateUsername(this.value)"
+    onfocus="showHint()"
+    required>
+  <button type="submit">Submit</button>
+</form>
+
+<input 
+  type="search" 
+  onsearch="performSearch(this.value)"
+  placeholder="Search...">
+```
+
+## Clipboard Events
+
+Events triggered by clipboard operations:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `oncopy` | Content is copied | `<p oncopy="alert('Copied!')">Copy this</p>` |
+| `oncut` | Content is cut | `<input oncut="handleCut()">` |
+| `onpaste` | Content is pasted | `<input onpaste="handlePaste(event)">` |
+
+**Example**:
+```html
+<input 
+  type="text" 
+  onpaste="event.preventDefault(); alert('Paste disabled')"
+  placeholder="Cannot paste here">
+```
+
+## Drag Events
+
+Events for drag-and-drop operations:
+
+| Event Attribute | When It Fires | Target |
+|-----------------|---------------|--------|
+| `ondrag` | Element is being dragged | Draggable element |
+| `ondragend` | Drag operation ends | Draggable element |
+| `ondragenter` | Dragged element enters drop target | Drop target |
+| `ondragleave` | Dragged element leaves drop target | Drop target |
+| `ondragover` | Dragged element is over drop target | Drop target |
+| `ondragstart` | Drag operation starts | Draggable element |
+| `ondrop` | Element is dropped | Drop target |
+
+**Example**:
+```html
+<div 
+  draggable="true" 
+  ondragstart="event.dataTransfer.setData('text', this.id)">
+  Drag me
+</div>
+
+<div 
+  ondragover="event.preventDefault()"
+  ondrop="handleDrop(event)">
+  Drop here
+</div>
+```
+
+## Media Events
+
+Events for audio and video elements:
+
+| Event Attribute | When It Fires |
+|-----------------|---------------|
+| `onabort` | Media loading aborted |
+| `oncanplay` | Media can start playing |
+| `oncanplaythrough` | Media can play without buffering |
+| `ondurationchange` | Duration changes |
+| `onemptied` | Media becomes empty |
+| `onended` | Media playback ends |
+| `onerror` | Error loading media |
+| `onloadeddata` | Media data loaded |
+| `onloadedmetadata` | Metadata loaded |
+| `onloadstart` | Browser starts loading |
+| `onpause` | Media is paused |
+| `onplay` | Media starts playing |
+| `onplaying` | Media is playing after pause/buffer |
+| `onprogress` | Browser is downloading media |
+| `onratechange` | Playback speed changes |
+| `onseeked` | Seeking completes |
+| `onseeking` | Seeking starts |
+| `onstalled` | Browser trying to get media data |
+| `onsuspend` | Browser stops getting media data |
+| `ontimeupdate` | Current playback time changes |
+| `onvolumechange` | Volume changes |
+| `onwaiting` | Media paused waiting for data |
+
+**Example**:
+```html
+<video 
+  src="video.mp4" 
+  controls
+  onplay="console.log('Playing')"
+  onpause="console.log('Paused')"
+  onended="console.log('Finished')">
+</video>
+
+<audio 
+  src="audio.mp3"
+  onloadedmetadata="showDuration()"
+  ontimeupdate="updateProgress()">
+</audio>
+```
+
+## Miscellaneous Events
+
+Other useful event attributes:
+
+| Event Attribute | When It Fires | Applies To |
+|-----------------|---------------|------------|
+| `onscroll` | Element is scrolled | Scrollable elements |
+| `ontoggle` | Details element toggled | `<details>` |
+| `onwheel` | Mouse wheel scrolled | Any element |
+
+**Example**:
+```html
+<div onscroll="handleScroll()" style="height: 200px; overflow: auto;">
+  <p>Scrollable content...</p>
+</div>
+
+<details ontoggle="console.log('Toggled')">
+  <summary>Click to toggle</summary>
+  <p>Hidden content</p>
+</details>
+```
+
+## Animation and Transition Events
+
+CSS animation and transition events:
+
+| Event Attribute | When It Fires |
+|-----------------|---------------|
+| `onanimationend` | CSS animation completes |
+| `onanimationiteration` | CSS animation repeats |
+| `onanimationstart` | CSS animation starts |
+| `ontransitionend` | CSS transition completes |
+| `ontransitioncancel` | CSS transition cancelled |
+| `ontransitionrun` | CSS transition starts |
+
+**Example**:
+```html
+<div 
+  class="animated"
+  onanimationend="console.log('Animation finished')"
+  onanimationstart="console.log('Animation started')">
+  Animated element
+</div>
+```
+
+## Touch Events (Mobile)
+
+Touch events for mobile devices:
+
+| Event Attribute | When It Fires |
+|-----------------|---------------|
+| `ontouchcancel` | Touch interrupted |
+| `ontouchend` | Touch ends |
+| `ontouchmove` | Touch moves |
+| `ontouchstart` | Touch starts |
+
+**Example**:
+```html
+<div 
+  ontouchstart="handleTouchStart(event)"
+  ontouchmove="handleTouchMove(event)"
+  ontouchend="handleTouchEnd(event)">
+  Touch me (mobile)
+</div>
+```
+
+## Event Object
+
+All event handlers receive an event object with useful properties:
+
+```html
+<button onclick="handleClick(event)">Click</button>
+
+<script>
+function handleClick(event) {
+  console.log('Event type:', event.type);           // 'click'
+  console.log('Target element:', event.target);     // <button>
+  console.log('Mouse X:', event.clientX);           // X coordinate
+  console.log('Mouse Y:', event.clientY);           // Y coordinate
+  
+  event.preventDefault();  // Prevent default action
+  event.stopPropagation(); // Stop event bubbling
+}
+</script>
+```
+
+## Common Patterns
+
+### Prevent Default Behavior
+
+```html
+<!-- Prevent form submission -->
+<form onsubmit="return false">...</form>
+<form onsubmit="event.preventDefault()">...</form>
+
+<!-- Prevent link navigation -->
+<a href="#" onclick="return false">Don't navigate</a>
+
+<!-- Prevent right-click menu -->
+<div oncontextmenu="return false">No right-click</div>
+```
+
+### Access Element
+
+```html
+<!-- Using 'this' keyword -->
+<button onclick="console.log(this.textContent)">Click</button>
+
+<!-- Using event.target -->
+<button onclick="console.log(event.target.textContent)">Click</button>
+
+<!-- Passing 'this' explicitly -->
+<button onclick="handleClick(this)">Click</button>
+```
+
+### Conditional Execution
+
+```html
+<!-- Check key pressed -->
+<input onkeydown="if(event.key === 'Enter') submitForm()">
+
+<!-- Check Ctrl key -->
+<div onclick="if(event.ctrlKey) console.log('Ctrl + Click')">Click</div>
+
+<!-- Check button (0=left, 1=middle, 2=right) -->
+<div onmousedown="if(event.button === 2) console.log('Right click')">Click</div>
+```
+
+## Best Practices
+
+### ✅ Do
+
+1. **Use `addEventListener()` instead** of inline handlers
+2. **Call `preventDefault()`** to stop default behavior
+3. **Call `stopPropagation()`** to prevent bubbling when needed
+4. **Pass `event` object** to handlers for access to event details
+5. **Return false** to prevent default (works for some events)
+6. **Use semantic events** (onclick for clickable, onsubmit for forms)
+
+### ❌ Don't
+
+1. **Don't use inline handlers in production** (violates CSP, hard to maintain)
+2. **Don't use `onkeypress`** (deprecated, use `onkeydown`)
+3. **Don't forget to prevent default** when needed (links, forms)
+4. **Don't mix inline and addEventListener** (confusing)
+5. **Don't put complex logic inline** (use external functions)
+6. **Don't use `onclick` on non-interactive elements** (use buttons/links)
+
+## Modern Alternative: addEventListener()
+
+**Why addEventListener is better**:
+
+```html
+<!-- ❌ Inline: Limited to one handler -->
+<button onclick="doA()">Click</button>
+
+<!-- ✅ addEventListener: Multiple handlers -->
+<button id="btn">Click</button>
+<script>
+  const btn = document.getElementById('btn');
+  btn.addEventListener('click', doA);
+  btn.addEventListener('click', doB);  // Both run!
+  btn.addEventListener('click', doC);  // All three run!
+</script>
+```
+
+**Separation of concerns**:
+
+```html
+<!-- ❌ Inline: Mixed HTML and JavaScript -->
+<button onclick="alert('Clicked')">Click</button>
+
+<!-- ✅ Separate: Clean HTML, JS in script -->
+<button id="myBtn">Click</button>
+<script>
+  document.getElementById('myBtn').addEventListener('click', function() {
+    alert('Clicked');
+  });
+</script>
+```
+
+**CSP compatibility**:
+
+```html
+<!-- ❌ Inline: Blocked by strict CSP -->
+<button onclick="alert('Blocked')">Click</button>
+
+<!-- ✅ External: Allowed by CSP -->
+<button id="btn">Click</button>
+<script src="app.js"></script>
+<!-- app.js: document.getElementById('btn').addEventListener('click', ...) -->
+```
+
+## Quick Reference Table
+
+### Most Common Events
+
+| Event | Use For | Example |
+|-------|---------|---------|
+| `onclick` | Click actions | Buttons, links |
+| `onsubmit` | Form submission | Forms |
+| `oninput` | Real-time input | Search, validation |
+| `onchange` | Final value change | Select, checkbox |
+| `onload` | Page/image load | Body, images |
+| `onkeydown` | Keyboard shortcuts | Inputs, body |
+| `onmouseenter` | Hover effects | Any element |
+| `onfocus` | Input focus | Form fields |
+| `onblur` | Input unfocus | Form fields |
+
+### Event Order
+
+**Mouse Click**:
+1. `onmousedown`
+2. `onmouseup`
+3. `onclick`
+
+**Form Submission**:
+1. `onsubmit` (can prevent)
+2. Form submits
+
+**Input Change**:
+1. `oninput` (every keystroke)
+2. `onchange` (on blur)
+
+**Page Load**:
+1. `DOMContentLoaded` (not an attribute)
+2. `onload`
+
+## Debugging Events
+
+```html
+<!-- Log all event details -->
+<button onclick="console.log(event)">Debug Event</button>
+
+<!-- See event properties -->
+<div onclick="console.table({
+  type: event.type,
+  target: event.target.tagName,
+  x: event.clientX,
+  y: event.clientY,
+  ctrlKey: event.ctrlKey,
+  shiftKey: event.shiftKey
+})">Click to inspect</div>
+```
+
+## Resource
+
+For complete reference, see:
+- **MDN Event Reference**: https://developer.mozilla.org/en-US/docs/Web/Events
+- **addEventListener()**: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
diff --git a/skills/html-coder/references/glossary-global-attributes.md b/skills/html-coder/references/glossary-global-attributes.md
new file mode 100644
index 000000000..235b5f326
--- /dev/null
+++ b/skills/html-coder/references/glossary-global-attributes.md
@@ -0,0 +1,701 @@
+# Global Attributes Reference
+
+Detailed guide to HTML global attributes that can be used on any element.
+
+## What Are Global Attributes?
+
+Global attributes are attributes that can be applied to **any HTML element**, regardless of the element type. They provide common functionality like styling hooks, accessibility features, custom data storage, and user interaction controls.
+
+## Complete Global Attributes List
+
+### `accesskey`
+
+**Purpose**: Keyboard shortcut to activate or focus element
+
+**Values**: Single character (letter, number, symbol)
+
+**Example**:
+```html
+<button accesskey="s">Save</button>
+<a href="#content" accesskey="c">Skip to Content</a>
+```
+
+**Usage**:
+- Activated by browser-specific key combination:
+  - Windows: `Alt + key`
+  - Mac: `Ctrl + Option + key`
+  - Linux: `Alt + key`
+- Avoid conflicts with browser shortcuts
+- Not widely used due to inconsistent browser support
+
+---
+
+### `autocapitalize`
+
+**Purpose**: Control text capitalization on mobile devices
+
+**Values**:
+- `off` or `none` - No autocapitalization
+- `on` or `sentences` - Capitalize first letter of sentences (default)
+- `words` - Capitalize first letter of each word
+- `characters` - Capitalize all characters
+
+**Example**:
+```html
+<input type="text" autocapitalize="words" placeholder="Enter your name">
+<textarea autocapitalize="sentences"></textarea>
+```
+
+**Usage**: Primarily affects mobile virtual keyboards
+
+---
+
+### `autofocus`
+
+**Purpose**: Automatically focus element when page loads
+
+**Values**: Boolean (no value needed)
+
+**Example**:
+```html
+<input type="search" autofocus placeholder="Search...">
+```
+
+**Usage**:
+- Only one element per page should have `autofocus`
+- Be cautious with accessibility (can disorient users)
+- Avoid on login pages (security risk)
+
+---
+
+### `class`
+
+**Purpose**: Assign CSS class(es) to element
+
+**Values**: Space-separated class names
+
+**Example**:
+```html
+<div class="container">Single class</div>
+<button class="btn btn-primary btn-large">Multiple classes</button>
+<article class="card featured">Card with modifier</article>
+```
+
+**Usage**:
+- Most commonly used global attribute
+- Multiple classes separated by spaces
+- Class names are case-sensitive
+- Use descriptive, semantic names
+- Convention: lowercase with hyphens (`btn-primary`) or camelCase (`btnPrimary`)
+
+---
+
+### `contenteditable`
+
+**Purpose**: Make element content editable by user
+
+**Values**:
+- `true` - Element is editable
+- `false` - Element is not editable
+- `plaintext-only` - Only plain text (no formatting)
+
+**Example**:
+```html
+<div contenteditable="true">
+  You can edit this text directly!
+</div>
+
+<p contenteditable="false">This cannot be edited</p>
+
+<article contenteditable="plaintext-only">
+  Plain text only - no rich formatting
+</article>
+```
+
+**Usage**:
+- Inherits to child elements (unless overridden)
+- Use with JavaScript to capture changes
+- WYSIWYG editors use this feature
+- Accessibility: ensure keyboard navigation works
+
+---
+
+### `data-*`
+
+**Purpose**: Store custom data attributes
+
+**Values**: Any string value
+
+**Example**:
+```html
+<button data-user-id="12345" data-action="delete">Delete User</button>
+
+<article 
+  data-post-id="789" 
+  data-author="John Doe"
+  data-published="2024-01-15"
+  data-category="Technology">
+  Article content
+</article>
+
+<div data-config='{"theme":"dark","lang":"en"}'>Settings</div>
+```
+
+**JavaScript Access**:
+```html
+<button id="btn" data-user-id="123" data-user-name="John">Click</button>
+
+<script>
+  const btn = document.getElementById('btn');
+  
+  // Access via dataset
+  console.log(btn.dataset.userId);    // "123"
+  console.log(btn.dataset.userName);  // "John"
+  
+  // Modify dataset
+  btn.dataset.userId = '456';
+  
+  // Add new data attribute
+  btn.dataset.role = 'admin';
+</script>
+```
+
+**Usage**:
+- Must start with `data-`
+- Followed by at least one character (no uppercase)
+- CamelCase in JavaScript (data-user-id → dataset.userId)
+- Ideal for passing data from HTML to JavaScript
+- Better than using class names for data storage
+
+---
+
+### `dir`
+
+**Purpose**: Text directionality
+
+**Values**:
+- `ltr` - Left-to-right (default for most languages)
+- `rtl` - Right-to-left (Arabic, Hebrew)
+- `auto` - Browser determines based on content
+
+**Example**:
+```html
+<p dir="ltr">English text (left to right)</p>
+<p dir="rtl">مرحبا (right to left)</p>
+<p dir="auto">Mixed content: Hello مرحبا</p>
+```
+
+**Usage**:
+- Inherit to all child elements
+- Set on `<html>` for entire document
+- Use `auto` for user-generated content with unknown direction
+
+---
+
+### `draggable`
+
+**Purpose**: Enable drag-and-drop functionality
+
+**Values**:
+- `true` - Element is draggable
+- `false` - Element is not draggable
+- `auto` - Browser default (images and links draggable)
+
+**Example**:
+```html
+<div draggable="true">Drag me!</div>
+<img src="image.jpg" alt="Image" draggable="false">
+```
+
+**Usage**:
+- Requires JavaScript drag-and-drop event handlers
+- Events: `dragstart`, `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `drop`
+
+---
+
+### `enterkeyhint`
+
+**Purpose**: Customize Enter key label on virtual keyboards
+
+**Values**:
+- `enter` - Default Enter key
+- `done` - "Done" label
+- `go` - "Go" label
+- `next` - "Next" label
+- `previous` - "Previous" label
+- `search` - "Search" label
+- `send` - "Send" label
+
+**Example**:
+```html
+<input type="text" enterkeyhint="next">
+<input type="search" enterkeyhint="search">
+<textarea enterkeyhint="send"></textarea>
+```
+
+**Usage**: Mobile-specific, affects virtual keyboard appearance
+
+---
+
+### `hidden`
+
+**Purpose**: Hide element from display
+
+**Values**: Boolean (no value needed)
+
+**Example**:
+```html
+<div hidden>This is hidden</div>
+<p hidden>Not displayed on page</p>
+```
+
+**Usage**:
+- Equivalent to `display: none` in CSS
+- Element not rendered and not accessible
+- Screen readers ignore hidden content
+- Use `aria-hidden="true"` to hide from screen readers but keep visible
+- Can be toggled with JavaScript
+
+---
+
+### `id`
+
+**Purpose**: Unique identifier for element
+
+**Values**: Unique string (must be unique per document)
+
+**Example**:
+```html
+<header id="main-header">Header</header>
+<button id="submit-btn">Submit</button>
+<article id="post-123">Article content</article>
+```
+
+**Usage**:
+- Must be unique within the document
+- Can be referenced by CSS (`#main-header`) and JavaScript
+- Used for fragment identifiers (`#main-header` in URLs)
+- Used with `<label for="id">` to associate labels with inputs
+- Convention: lowercase with hyphens or camelCase
+- Cannot start with a number
+
+---
+
+### `inert`
+
+**Purpose**: Make element non-interactive
+
+**Values**: Boolean (no value needed)
+
+**Example**:
+```html
+<div inert>
+  <button>Cannot be clicked</button>
+  <a href="#">Cannot be focused</a>
+  <input type="text">Cannot be edited</input>
+</div>
+```
+
+**Usage**:
+- Element and descendants cannot receive focus
+- Element and descendants removed from tab order
+- Element and descendants ignored by screen readers
+- Useful for modals (inert background content)
+- Relatively new attribute (check browser support)
+
+---
+
+### `inputmode`
+
+**Purpose**: Hint for virtual keyboard type
+
+**Values**:
+- `none` - No virtual keyboard
+- `text` - Standard text keyboard (default)
+- `decimal` - Numeric keyboard with decimal
+- `numeric` - Numeric keyboard
+- `tel` - Telephone number pad
+- `search` - Search-optimized keyboard
+- `email` - Email keyboard (@ symbol)
+- `url` - URL keyboard (/ and .com)
+
+**Example**:
+```html
+<input type="text" inputmode="numeric" placeholder="Enter PIN">
+<input type="text" inputmode="email" placeholder="Email">
+<input type="text" inputmode="tel" placeholder="Phone">
+```
+
+**Usage**:
+- Mobile-specific optimization
+- Use with `type="text"` to get specific keyboards without validation
+- Better UX than wrong keyboard type
+
+---
+
+### `is`
+
+**Purpose**: Specify custom element name (Web Components)
+
+**Values**: Custom element name
+
+**Example**:
+```html
+<button is="fancy-button">Click Me</button>
+<ul is="expanding-list">
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+```
+
+**Usage**:
+- Used with Web Components
+- Extends built-in elements
+- Requires JavaScript custom element definition
+
+---
+
+### `itemid`, `itemprop`, `itemref`, `itemscope`, `itemtype`
+
+**Purpose**: Microdata attributes for structured data
+
+**Example**:
+```html
+<div itemscope itemtype="https://schema.org/Person">
+  <span itemprop="name">John Doe</span>
+  <span itemprop="jobTitle">Software Engineer</span>
+  <a href="mailto:john@example.com" itemprop="email">Email</a>
+</div>
+
+<div itemscope itemtype="https://schema.org/Product" itemid="urn:isbn:978-0-12-345678-9">
+  <span itemprop="name">Product Name</span>
+  <span itemprop="price" content="29.99">$29.99</span>
+</div>
+```
+
+**Usage**:
+- SEO: helps search engines understand content
+- Use with Schema.org types
+- Alternative to JSON-LD for structured data
+
+---
+
+### `lang`
+
+**Purpose**: Specify language of element content
+
+**Values**: Language code (ISO 639-1)
+
+**Example**:
+```html
+<html lang="en">
+<p lang="es">Hola, ¿cómo estás?</p>
+<p lang="fr">Bonjour, comment ça va?</p>
+<blockquote lang="de">Guten Tag!</blockquote>
+```
+
+**Common Language Codes**:
+- `en` - English
+- `en-US` - English (United States)
+- `en-GB` - English (United Kingdom)
+- `es` - Spanish
+- `fr` - French
+- `de` - German
+- `it` - Italian
+- `pt` - Portuguese
+- `ja` - Japanese
+- `zh` - Chinese
+- `ar` - Arabic
+- `ru` - Russian
+
+**Usage**:
+- Set on `<html>` for primary page language
+- Override for sections in different languages
+- Helps screen readers with pronunciation
+- Assists search engines and translation tools
+
+---
+
+### `nonce`
+
+**Purpose**: Cryptographic nonce for Content Security Policy (CSP)
+
+**Values**: Random string (unique per page load)
+
+**Example**:
+```html
+<!-- In HTML head -->
+<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-r@nd0mStr1ng'">
+
+<!-- Script with matching nonce -->
+<script nonce="r@nd0mStr1ng">
+  console.log('This script is allowed');
+</script>
+
+<!-- This script without nonce is blocked -->
+<script>
+  console.log('This script is blocked');
+</script>
+```
+
+**Usage**:
+- Security feature for CSP
+- Server must generate random nonce per page load
+- Only scripts/styles with matching nonce execute
+- Prevents XSS attacks
+
+---
+
+### `part`
+
+**Purpose**: Expose shadow DOM parts for styling (Web Components)
+
+**Values**: Space-separated part names
+
+**Example**:
+```html
+<custom-button>
+  <button part="button">Click Me</button>
+  <span part="icon">🔔</span>
+</custom-button>
+
+<style>
+  custom-button::part(button) {
+    background: blue;
+  }
+  custom-button::part(icon) {
+    font-size: 2em;
+  }
+</style>
+```
+
+**Usage**: Advanced feature for Web Components
+
+---
+
+### `slot`
+
+**Purpose**: Assign content to named slot in Web Components
+
+**Values**: Slot name
+
+**Example**:
+```html
+<custom-card>
+  <h2 slot="title">Card Title</h2>
+  <p slot="content">Card content goes here.</p>
+  <button slot="actions">Action</button>
+</custom-card>
+```
+
+**Usage**: Used with Shadow DOM and Web Components
+
+---
+
+### `spellcheck`
+
+**Purpose**: Enable/disable spell checking
+
+**Values**:
+- `true` - Enable spell checking
+- `false` - Disable spell checking
+
+**Example**:
+```html
+<input type="text" spellcheck="true" placeholder="Spell checked">
+<textarea spellcheck="false">No spell check here</textarea>
+<div contenteditable="true" spellcheck="true">Editable with spellcheck</div>
+```
+
+**Usage**:
+- Works on editable content
+- Applies to `<input>`, `<textarea>`, and `contenteditable` elements
+- Default behavior varies by browser and element type
+
+---
+
+### `style`
+
+**Purpose**: Inline CSS styles
+
+**Values**: CSS declarations
+
+**Example**:
+```html
+<p style="color: red; font-weight: bold;">Red and bold text</p>
+<div style="background-color: #f0f0f0; padding: 20px; border-radius: 8px;">
+  Styled container
+</div>
+```
+
+**Usage**:
+- Highest CSS specificity (overrides external/internal styles)
+- Not recommended for production (hard to maintain)
+- Useful for dynamic styles via JavaScript
+- Avoid when possible (use CSS classes instead)
+
+---
+
+### `tabindex`
+
+**Purpose**: Control tab order and focusability
+
+**Values**:
+- Positive number - Explicit tab order (not recommended)
+- `0` - Natural tab order, element focusable
+- `-1` - Programmatically focusable, not in tab order
+
+**Example**:
+```html
+<!-- Natural tab order -->
+<button tabindex="0">First</button>
+<button tabindex="0">Second</button>
+
+<!-- Remove from tab order -->
+<div tabindex="-1">Focusable via JavaScript only</div>
+
+<!-- Avoid explicit order (anti-pattern) -->
+<button tabindex="3">Third</button>
+<button tabindex="1">First</button>
+<button tabindex="2">Second</button>
+```
+
+**Usage**:
+- `0` - Add focusability to non-interactive elements
+- `-1` - Remove from tab order (still focusable via JS)
+- Positive values - Avoid (confusing for users)
+- Essential for custom interactive components
+
+---
+
+### `title`
+
+**Purpose**: Advisory information (tooltip)
+
+**Values**: Text string
+
+**Example**:
+```html
+<button title="Save your changes">💾</button>
+<abbr title="HyperText Markup Language">HTML</abbr>
+<a href="#" title="Go to homepage">Home</a>
+<img src="icon.svg" alt="Icon" title="Additional info about icon">
+```
+
+**Usage**:
+- Displays as tooltip on hover
+- Should not contain essential information (not accessible on mobile)
+- Good for abbreviations and supplementary info
+- Not a substitute for proper labels or alt text
+- Screen readers may announce title, but inconsistently
+
+---
+
+### `translate`
+
+**Purpose**: Specify if content should be translated
+
+**Values**:
+- `yes` - Content should be translated (default)
+- `no` - Content should not be translated
+
+**Example**:
+```html
+<p translate="yes">This text can be translated.</p>
+<p translate="no">Brand Name™</p>
+<code translate="no">console.log('hello');</code>
+```
+
+**Usage**:
+- Hint for translation tools
+- Use for proper nouns, brand names, code
+- Not widely supported
+
+---
+
+## Global Attributes Usage Patterns
+
+### Styling Hooks
+```html
+<div id="app" class="container dark-theme">
+  <h1 class="title">Page Title</h1>
+  <p class="description">Description text</p>
+</div>
+```
+
+### JavaScript Interaction
+```html
+<button 
+  id="submit-btn"
+  data-user-id="123"
+  data-action="submit"
+  onclick="handleClick()">
+  Submit
+</button>
+```
+
+### Accessibility
+```html
+<div 
+  role="dialog"
+  aria-labelledby="dialog-title"
+  aria-describedby="dialog-desc"
+  tabindex="-1">
+  <h2 id="dialog-title">Dialog Title</h2>
+  <p id="dialog-desc">Dialog description</p>
+</div>
+```
+
+### Internationalization
+```html
+<html lang="en" dir="ltr">
+  <p lang="es">Hola</p>
+  <p lang="ar" dir="rtl">مرحبا</p>
+</html>
+```
+
+### Custom Data Storage
+```html
+<article
+  data-post-id="789"
+  data-author="John Doe"
+  data-published="2024-01-15"
+  data-tags='["tech","web","html"]'>
+  Article content
+</article>
+```
+
+## Best Practices
+
+### ✅ Do
+
+1. **Use semantic `class` names** (`.btn-primary` not `.blue-button`)
+2. **Keep `id` unique** within document
+3. **Prefer CSS classes over inline `style`**
+4. **Use `data-*` for custom data** (not `class` or `id`)
+5. **Set `lang` on `<html>`** for accessibility
+6. **Use `tabindex="0"`** to make custom components focusable
+7. **Use `hidden`** to hide content completely
+8. **Provide descriptive `title`** for abbreviations
+
+### ❌ Don't
+
+1. **Don't use positive `tabindex`** values (confusing order)
+2. **Don't rely on `title` for essential info** (inaccessible on mobile)
+3. **Don't use `accesskey`** (conflicts with browser shortcuts)
+4. **Don't use multiple `autofocus`** on one page
+5. **Don't use inline `style`** extensively (hard to maintain)
+6. **Don't use `id` for styling multiple elements** (use `class`)
+7. **Don't forget to make `contenteditable` keyboard accessible**
+8. **Don't use `hidden` with CSS `display`** (creates conflicts)
+
+## Browser Support
+
+Most global attributes have excellent browser support. Notable exceptions:
+
+- **`inert`**: Limited support (newer attribute)
+- **`enterkeyhint`**: Mobile browsers only
+- **`part`** and **`slot`**: Require Web Components support
+- **`inputmode`**: Mobile browsers primarily
+
+Always check [Can I Use](https://caniuse.com/) for current browser support.
diff --git a/skills/html-coder/references/glossary-tags.md b/skills/html-coder/references/glossary-tags.md
new file mode 100644
index 000000000..da263e343
--- /dev/null
+++ b/skills/html-coder/references/glossary-tags.md
@@ -0,0 +1,383 @@
+# HTML Tags Glossary
+
+Quick reference for all HTML elements organized by category.
+
+## Document Structure
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<!DOCTYPE>` | Document type declaration | `<!DOCTYPE html>` |
+| `<html>` | Root element | Contains entire HTML document |
+| `<head>` | Document metadata container | Information about the document |
+| `<title>` | Document title | Shown in browser tab/title bar |
+| `<body>` | Document body | Visible page content |
+| `<base>` | Base URL for relative URLs | `<base href="https://example.com/">` |
+| `<link>` | External resource link | CSS files, favicons, etc. |
+| `<meta>` | Metadata | Charset, viewport, description, etc. |
+| `<style>` | Internal CSS | Embedded stylesheets |
+
+## Metadata Elements
+
+| Tag | Description | Common Use |
+|-----|-------------|------------|
+| `<meta charset>` | Character encoding | `<meta charset="UTF-8">` |
+| `<meta name>` | Named metadata | Description, keywords, author |
+| `<meta property>` | Property metadata | Open Graph, Twitter Cards |
+| `<meta http-equiv>` | HTTP header equivalent | Content-Type, refresh, CSP |
+| `<meta viewport>` | Viewport settings | Mobile responsive design |
+
+## Content Sectioning
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<header>` | Header section | Site/page/article header |
+| `<nav>` | Navigation section | Navigation links |
+| `<main>` | Main content | Primary page content (unique) |
+| `<section>` | Generic section | Thematic grouping of content |
+| `<article>` | Self-contained content | Blog post, news article, forum post |
+| `<aside>` | Tangential content | Sidebars, pull quotes, ads |
+| `<footer>` | Footer section | Site/page/article footer |
+| `<h1>` to `<h6>` | Headings | Content hierarchy (H1 most important) |
+| `<address>` | Contact information | Author/owner contact details |
+
+## Text Content
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<div>` | Generic container | Block-level grouping (no semantic meaning) |
+| `<p>` | Paragraph | Text paragraphs |
+| `<hr>` | Thematic break | Horizontal rule/separator |
+| `<pre>` | Preformatted text | Code blocks, ASCII art |
+| `<blockquote>` | Block quotation | Long quotes with optional `cite` |
+| `<ol>` | Ordered list | Numbered list |
+| `<ul>` | Unordered list | Bulleted list |
+| `<li>` | List item | Item in `<ol>`, `<ul>`, or `<menu>` |
+| `<dl>` | Description list | Term-definition pairs |
+| `<dt>` | Description term | Term in description list |
+| `<dd>` | Description details | Definition in description list |
+| `<figure>` | Self-contained content | Images, diagrams, code with caption |
+| `<figcaption>` | Figure caption | Caption for `<figure>` |
+
+## Inline Text Semantics
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<a>` | Anchor/hyperlink | Links to other pages/resources |
+| `<span>` | Generic inline container | Inline grouping (no semantic meaning) |
+| `<strong>` | Strong importance | Bold text (semantic) |
+| `<em>` | Emphasis | Italic text (semantic) |
+| `<b>` | Bold text | Bold (presentational, use CSS instead) |
+| `<i>` | Italic text | Italic (presentational, use CSS instead) |
+| `<u>` | Underlined text | Underline (avoid, looks like link) |
+| `<s>` | Strikethrough | Incorrect/irrelevant text |
+| `<mark>` | Highlighted text | Marked/highlighted for reference |
+| `<small>` | Fine print | Side comments, legal text |
+| `<abbr>` | Abbreviation | Abbreviations with `title` |
+| `<cite>` | Citation | Title of creative work |
+| `<code>` | Inline code | Code snippets |
+| `<kbd>` | Keyboard input | Keyboard keys to press |
+| `<samp>` | Sample output | Computer program output |
+| `<var>` | Variable | Mathematical/programming variable |
+| `<time>` | Date/time | Machine-readable date/time |
+| `<data>` | Machine-readable content | Data with value attribute |
+| `<q>` | Inline quotation | Short inline quotes |
+| `<dfn>` | Definition term | Term being defined |
+| `<sub>` | Subscript | H₂O |
+| `<sup>` | Superscript | x² |
+| `<del>` | Deleted text | Removed content (with `<ins>`) |
+| `<ins>` | Inserted text | Added content (with `<del>`) |
+| `<br>` | Line break | Force line break |
+| `<wbr>` | Word break opportunity | Suggest line break point |
+| `<bdi>` | Bidirectional isolate | Text with different direction |
+| `<bdo>` | Bidirectional override | Override text direction |
+| `<ruby>` | Ruby annotation | East Asian typography |
+| `<rt>` | Ruby text | Pronunciation guide in `<ruby>` |
+| `<rp>` | Ruby parenthesis | Fallback for browsers without ruby |
+
+## Images and Multimedia
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<img>` | Image | Embed raster images |
+| `<picture>` | Responsive image container | Art direction, multiple formats |
+| `<source>` | Media source | Source for `<picture>`, `<audio>`, `<video>` |
+| `<audio>` | Audio content | Embed audio files |
+| `<video>` | Video content | Embed video files |
+| `<track>` | Text track | Subtitles, captions for video/audio |
+| `<map>` | Image map | Define clickable areas in image |
+| `<area>` | Image map area | Clickable region in `<map>` |
+| `<svg>` | Scalable Vector Graphics | Inline vector graphics |
+| `<canvas>` | Graphics canvas | Drawing surface for JavaScript |
+
+## Embedded Content
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<iframe>` | Inline frame | Embed external content |
+| `<embed>` | External content | Embed plugins (legacy) |
+| `<object>` | External object | Embed multimedia, PDFs |
+| `<param>` | Object parameters | Parameters for `<object>` |
+| `<portal>` | Portal element | Preview/navigate to other pages |
+
+## Scripting
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<script>` | JavaScript | Embed or link JavaScript |
+| `<noscript>` | No script fallback | Content when JavaScript disabled |
+| `<template>` | Content template | HTML template for cloning |
+| `<slot>` | Web component slot | Placeholder in web components |
+
+## Tables
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<table>` | Table | Tabular data |
+| `<caption>` | Table caption | Table title/description |
+| `<thead>` | Table header | Header rows |
+| `<tbody>` | Table body | Main table content |
+| `<tfoot>` | Table footer | Footer rows |
+| `<tr>` | Table row | Row of cells |
+| `<th>` | Header cell | Column/row header |
+| `<td>` | Data cell | Table data |
+| `<col>` | Column | Column properties |
+| `<colgroup>` | Column group | Group of columns |
+
+## Forms
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<form>` | Form | User input form |
+| `<input>` | Input field | Various input types |
+| `<label>` | Input label | Label for form control |
+| `<button>` | Button | Clickable button |
+| `<select>` | Dropdown | Selection list |
+| `<option>` | Select option | Option in `<select>` |
+| `<optgroup>` | Option group | Group options in `<select>` |
+| `<textarea>` | Multi-line text | Large text input |
+| `<fieldset>` | Field grouping | Group related form fields |
+| `<legend>` | Fieldset caption | Title for `<fieldset>` |
+| `<datalist>` | Input suggestions | Predefined options for input |
+| `<output>` | Calculation result | Result of calculation |
+| `<progress>` | Progress bar | Task progress indicator |
+| `<meter>` | Measurement gauge | Scalar measurement |
+
+## Interactive Elements
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<details>` | Disclosure widget | Expandable content |
+| `<summary>` | Details summary | Title for `<details>` |
+| `<dialog>` | Dialog box | Modal or non-modal dialog |
+| `<menu>` | Menu | List of commands (experimental) |
+
+## Web Components
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<template>` | Content template | Reusable HTML template |
+| `<slot>` | Content slot | Placeholder in shadow DOM |
+| Custom elements | User-defined elements | `<my-component>` |
+
+## Deprecated/Obsolete Elements
+
+❌ **Do not use these elements** (use CSS or semantic alternatives instead):
+
+| Tag | Reason | Alternative |
+|-----|--------|-------------|
+| `<acronym>` | Obsolete | Use `<abbr>` |
+| `<applet>` | Obsolete | Use `<object>` or `<embed>` |
+| `<basefont>` | Obsolete | Use CSS `font` properties |
+| `<big>` | Obsolete | Use CSS `font-size` |
+| `<blink>` | Obsolete | Use CSS `animation` |
+| `<center>` | Obsolete | Use CSS `text-align: center` |
+| `<dir>` | Obsolete | Use `<ul>` |
+| `<font>` | Obsolete | Use CSS `color`, `font-family`, `font-size` |
+| `<frame>` | Obsolete | Use `<iframe>` or CSS layout |
+| `<frameset>` | Obsolete | Use CSS layout |
+| `<marquee>` | Obsolete | Use CSS `animation` |
+| `<nobr>` | Obsolete | Use CSS `white-space: nowrap` |
+| `<noframes>` | Obsolete | N/A (frames obsolete) |
+| `<plaintext>` | Obsolete | Use `<pre>` or `<code>` |
+| `<spacer>` | Obsolete | Use CSS `margin`, `padding` |
+| `<strike>` | Obsolete | Use `<del>` or `<s>` |
+| `<tt>` | Obsolete | Use `<code>` or `<kbd>` |
+| `<xmp>` | Obsolete | Use `<pre>` or `<code>` |
+
+## Elements by Display Type
+
+### Block-Level Elements (Default)
+
+Display as block (full width, new line):
+
+```
+<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, 
+<dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, 
+<h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <pre>, 
+<section>, <table>, <ul>, <video>
+```
+
+### Inline Elements (Default)
+
+Display inline (no line break):
+
+```
+<a>, <abbr>, <b>, <bdi>, <bdo>, <br>, <button>, <cite>, <code>, 
+<data>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <mark>, 
+<q>, <s>, <samp>, <select>, <small>, <span>, <strong>, <sub>, 
+<sup>, <textarea>, <time>, <u>, <var>, <wbr>
+```
+
+### Void Elements (Self-Closing)
+
+Cannot have content:
+
+```
+<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, 
+<meta>, <param>, <source>, <track>, <wbr>
+```
+
+## Elements by Purpose
+
+### Navigation
+```
+<nav>, <a>, <menu>
+```
+
+### Grouping Content
+```
+<div>, <section>, <article>, <aside>, <header>, <footer>, <main>
+```
+
+### Text Formatting
+```
+<p>, <h1>-<h6>, <strong>, <em>, <mark>, <del>, <ins>
+```
+
+### Lists
+```
+<ul>, <ol>, <li>, <dl>, <dt>, <dd>
+```
+
+### Forms
+```
+<form>, <input>, <textarea>, <select>, <button>, <label>, <fieldset>, <legend>
+```
+
+### Media
+```
+<img>, <audio>, <video>, <picture>, <source>, <track>
+```
+
+### Tables
+```
+<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <caption>
+```
+
+### Code/Programming
+```
+<code>, <pre>, <kbd>, <samp>, <var>
+```
+
+## Quick Reference by Use Case
+
+### Basic Page Structure
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Page Title</title>
+  </head>
+  <body>
+    <header>Header</header>
+    <nav>Navigation</nav>
+    <main>Main Content</main>
+    <footer>Footer</footer>
+  </body>
+</html>
+```
+
+### Content Organization
+```html
+<article>
+  <header>
+    <h1>Article Title</h1>
+    <time>Date</time>
+  </header>
+  <section>
+    <h2>Section</h2>
+    <p>Content</p>
+  </section>
+  <footer>Article footer</footer>
+</article>
+```
+
+### Text Semantics
+```html
+<p>Normal text with <strong>important</strong> and <em>emphasized</em> parts.</p>
+<p>Use <code>code</code> for inline code and <pre> for blocks.</p>
+<p><abbr title="HyperText Markup Language">HTML</abbr> example.</p>
+```
+
+### Forms
+```html
+<form>
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name">
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Media
+```html
+<img src="image.jpg" alt="Description">
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+</video>
+<audio controls>
+  <source src="audio.mp3" type="audio/mpeg">
+</audio>
+```
+
+### Lists
+```html
+<!-- Unordered -->
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+<!-- Ordered -->
+<ol>
+  <li>First</li>
+  <li>Second</li>
+</ol>
+
+<!-- Description -->
+<dl>
+  <dt>Term</dt>
+  <dd>Definition</dd>
+</dl>
+```
+
+### Tables
+```html
+<table>
+  <caption>Table Title</caption>
+  <thead>
+    <tr><th>Header</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Data</td></tr>
+  </tbody>
+</table>
+```
+
+## Notes
+
+- **Semantic HTML**: Prefer semantic elements (`<article>`, `<nav>`, etc.) over generic `<div>` and `<span>`
+- **Accessibility**: Use proper structure and attributes (alt, labels, ARIA)
+- **Void elements**: Self-closing tags like `<img>`, `<br>`, `<input>` don't need closing tags
+- **Block vs Inline**: Can be changed with CSS `display` property
+- **Nesting rules**: Some elements cannot contain others (e.g., `<p>` cannot contain `<div>`)
diff --git a/skills/html-coder/references/glossary-ui-ux.md b/skills/html-coder/references/glossary-ui-ux.md
new file mode 100644
index 000000000..ce46f2c9e
--- /dev/null
+++ b/skills/html-coder/references/glossary-ui-ux.md
@@ -0,0 +1,461 @@
+# UI/UX Terminology Glossary
+
+Quick reference for user interface and user experience terms in HTML context.
+
+## A
+
+**Accessibility (a11y)**  
+Design practice ensuring websites are usable by people with disabilities. Includes screen reader support, keyboard navigation, sufficient color contrast, and semantic HTML.
+
+**Accordion**  
+Collapsible content sections where clicking one section expands it while collapsing others. Often built with `<details>` and `<summary>`.
+
+**Active State**  
+Visual indication when an element is being interacted with (e.g., button being pressed). CSS: `:active` pseudo-class.
+
+**ARIA (Accessible Rich Internet Applications)**  
+Set of attributes (`aria-*`) that make web content more accessible to assistive technologies.
+
+**Alt Text**  
+Alternative text for images (`alt` attribute) read by screen readers and shown when image fails to load.
+
+**Anchor**  
+Link element (`<a>`) that navigates to another location, either on same page or different URL.
+
+**Above the Fold**  
+Content visible without scrolling when page first loads. Critical for first impressions and performance.
+
+## B
+
+**Breadcrumb Navigation**  
+Secondary navigation showing user's location in site hierarchy (Home > Products > Electronics > Laptops).
+
+**Button**  
+Interactive element (`<button>`) that triggers an action. Should be keyboard accessible.
+
+**Baseline Grid**  
+Vertical rhythm system for consistent spacing and alignment of text and elements.
+
+## C
+
+**Call-to-Action (CTA)**  
+Element (usually button) prompting user to take specific action (e.g., "Sign Up", "Buy Now").
+
+**Caption**  
+Descriptive text for tables (`<caption>`) or figures (`<figcaption>`). Important for accessibility.
+
+**Card**  
+Self-contained content block (article preview, product) typically using `<article>` or `<div>`.
+
+**Checkbox**  
+Input allowing multiple selections from options. HTML: `<input type="checkbox">`.
+
+**Click Area**  
+Interactive region of an element. Should be minimum 44×44px for touch targets per accessibility guidelines.
+
+**Contrast Ratio**  
+Difference in luminance between text and background. WCAG requires 4.5:1 for normal text, 3:1 for large text.
+
+**Content Hierarchy**  
+Organization of content by importance using headings (`<h1>`-`<h6>`), visual weight, and spacing.
+
+**Cursor**  
+Mouse pointer appearance. Changed with CSS `cursor` property (pointer for clickable, text for editable, etc.).
+
+## D
+
+**Dialog**  
+Modal or non-modal overlay window. HTML: `<dialog>` element or custom implementation.
+
+**Disabled State**  
+Non-interactive state of form element. HTML: `disabled` attribute. Should be visually distinct.
+
+**Disclosure Widget**  
+Collapsible content section. HTML: `<details>` with `<summary>`.
+
+**Dropdown**  
+Selection list that expands to show options. HTML: `<select>` or custom with `<ul>`.
+
+## E
+
+**Empty State**  
+UI shown when no content is available (e.g., empty shopping cart, no search results).
+
+**Error Message**  
+Feedback indicating problem with user input. Should be clear, specific, and suggest solution.
+
+**Error State**  
+Visual indication of invalid input. Often uses red color and error icon with descriptive message.
+
+## F
+
+**Favicon**  
+Small icon displayed in browser tab. HTML: `<link rel="icon" href="favicon.ico">`.
+
+**Fieldset**  
+Group of related form fields. HTML: `<fieldset>` with `<legend>` for group label.
+
+**Focus State**  
+Visual indication of keyboard-focused element. CSS: `:focus` pseudo-class. Essential for accessibility.
+
+**Focus Trap**  
+Constraint keeping keyboard focus within modal or dialog. Prevents tabbing to background content.
+
+**Footer**  
+Bottom section of page or article. HTML: `<footer>`. Typically contains copyright, links, contact info.
+
+**Form**  
+Collection of input fields for user data entry. HTML: `<form>`.
+
+**Form Validation**  
+Checking user input for correctness. Can be HTML5 attributes (`required`, `pattern`) or JavaScript.
+
+## G
+
+**Global Navigation**  
+Primary site-wide navigation menu. HTML: `<nav>` element.
+
+**Grid**  
+Layout system organizing content in rows and columns. HTML: `<table>` for data, CSS Grid for layout.
+
+**Grouping**  
+Organizing related elements together visually and semantically for better understanding.
+
+## H
+
+**Hamburger Menu**  
+Three-line icon (☰) revealing mobile navigation menu when clicked. Common mobile pattern.
+
+**Header**  
+Top section of page or article. HTML: `<header>`. Contains branding, navigation, titles.
+
+**Heading**  
+Content title indicating hierarchy. HTML: `<h1>` (most important) to `<h6>` (least important).
+
+**Hero Section**  
+Prominent banner at page top, typically with large image, headline, and CTA.
+
+**Hidden Content**  
+Content not displayed but present in HTML. Can be conditionally shown. HTML: `hidden` attribute.
+
+**Hover State**  
+Visual change when mouse cursor is over element. CSS: `:hover` pseudo-class.
+
+**Hyperlink**  
+Clickable link to another page or resource. HTML: `<a href="url">`.
+
+## I
+
+**Icon**  
+Small graphic representing action or concept. Can be image, SVG, or icon font.
+
+**Input**  
+Form field for user data entry. HTML: `<input>` with various types.
+
+**Input Mask**  
+Format constraint on input (e.g., phone number: (555) 123-4567).
+
+**Interactive Element**  
+Element user can interact with (buttons, links, form fields). Must be keyboard accessible.
+
+**Invalid State**  
+Indication that form field contains invalid data. Use `aria-invalid="true"`.
+
+## J
+
+**Jump Link**  
+Link navigating to specific section on same page using fragment identifier (`href="#section-id"`).
+
+## K
+
+**Keyboard Navigation**  
+Navigating website using keyboard only (Tab, Enter, Space, Arrows). Essential for accessibility.
+
+**Keyboard Shortcut**  
+Key combination triggering action. HTML: `accesskey` attribute (limited browser support).
+
+## L
+
+**Label**  
+Text describing form field. HTML: `<label for="field-id">`. Essential for accessibility.
+
+**Landmark**  
+Major page region identified by semantic HTML or ARIA roles (navigation, main, complementary).
+
+**Landing Page**  
+Entry page designed for specific purpose (product launch, campaign, lead generation).
+
+**Layout**  
+Arrangement of elements on page. Use semantic HTML and CSS (Flexbox, Grid).
+
+**Legend**  
+Caption for fieldset. HTML: `<legend>`. Describes group of form fields.
+
+**Link**  
+Navigational element. HTML: `<a>`. Should have descriptive text, not "click here".
+
+**List**  
+Collection of items. HTML: `<ul>` (unordered), `<ol>` (ordered), `<dl>` (description).
+
+**Loading State**  
+Visual indication of background process (spinner, progress bar, skeleton screen).
+
+**Logo**  
+Brand identifier, typically image in header. Should link to homepage.
+
+## M
+
+**Main Content**  
+Primary unique content of page. HTML: `<main>`. One per page, excludes repeated content.
+
+**Menu**  
+List of navigation links or actions. HTML: `<nav>` with `<ul>` or `<menu>`.
+
+**Meta Description**  
+Page summary for search engines. HTML: `<meta name="description" content="...">`.
+
+**Microdata**  
+Structured data markup using `itemscope`, `itemprop` attributes for SEO.
+
+**Mobile-First**  
+Design approach starting with mobile layout, then enhancing for larger screens.
+
+**Modal**  
+Overlay dialog requiring interaction before returning to main content. Use `<dialog>` or custom.
+
+**Multi-Step Form**  
+Form split across multiple pages or sections (wizard pattern). Show progress indicator.
+
+## N
+
+**Navigation**  
+System for moving through website. HTML: `<nav>`. Should be consistent and predictable.
+
+**Notification**  
+Message alerting user to event or status change. Use `role="alert"` for urgent messages.
+
+## O
+
+**Onboarding**  
+Process introducing new users to product/service through tutorials or walkthroughs.
+
+**Option**  
+Choice in select dropdown. HTML: `<option>` within `<select>`.
+
+**Overlay**  
+Content layer displayed over main page (modal, tooltip, dropdown).
+
+## P
+
+**Pagination**  
+Breaking content across multiple pages with navigation controls (Previous, Next, page numbers).
+
+**Placeholder**  
+Example text in empty form field. HTML: `placeholder` attribute. Should NOT replace label.
+
+**Primary Action**  
+Most important action on page (e.g., "Submit", "Buy Now"). Should be visually prominent.
+
+**Progress Indicator**  
+Visual representation of task completion. HTML: `<progress>` or custom implementation.
+
+**Prototype**  
+Early version of design/feature for testing concepts before full development.
+
+## R
+
+**Radio Button**  
+Input allowing single selection from options. HTML: `<input type="radio" name="group">`.
+
+**Readability**  
+How easily text can be read and understood. Affected by font, size, spacing, contrast, line length.
+
+**Responsive Design**  
+Adapting layout to different screen sizes. Use `<meta name="viewport">` and CSS media queries.
+
+**Required Field**  
+Form field that must be completed. HTML: `required` attribute. Mark visually (asterisk).
+
+## S
+
+**Screen Reader**  
+Assistive technology reading page content aloud for visually impaired users.
+
+**Scrollbar**  
+Interface for scrolling through content. Avoid hiding unless providing alternative.
+
+**Search**  
+Functionality for finding content. HTML: `<input type="search">` in form with `role="search"`.
+
+**Section**  
+Thematic content grouping. HTML: `<section>` or `<article>`.
+
+**Select**  
+Dropdown menu for choosing option(s). HTML: `<select>` with `<option>` elements.
+
+**Semantic HTML**  
+Using HTML elements that convey meaning (e.g., `<nav>`, `<article>`) rather than generic `<div>`.
+
+**Sidebar**  
+Secondary content area alongside main content. HTML: `<aside>`.
+
+**Skip Link**  
+Link allowing keyboard users to jump past navigation to main content. Essential for accessibility.
+
+**Slider**  
+Input for selecting value from range. HTML: `<input type="range">` or custom carousel.
+
+**Sticky Navigation**  
+Navigation that remains visible while scrolling. CSS: `position: sticky`.
+
+**Submit Button**  
+Button submitting form data. HTML: `<button type="submit">` or `<input type="submit">`.
+
+**Success State**  
+Positive feedback indicating successful action (green checkmark, success message).
+
+## T
+
+**Tab Order**  
+Sequence keyboard focus moves when pressing Tab key. Control with `tabindex`.
+
+**Tabindex**  
+Attribute controlling keyboard focus order. Use `0` for natural order, `-1` to exclude from tab order.
+
+**Table**  
+Structured data in rows and columns. HTML: `<table>`. Use `<th scope>` for accessibility.
+
+**Textarea**  
+Multi-line text input. HTML: `<textarea>`.
+
+**Toast Notification**  
+Temporary message appearing briefly then disappearing. Announce with `aria-live="polite"`.
+
+**Toggle**  
+Control switching between two states (on/off, show/hide). Often checkbox styled as switch.
+
+**Tooltip**  
+Small popup showing additional info on hover. Use `title` attribute or custom ARIA implementation.
+
+**Touch Target**  
+Interactive area for touch input. Minimum 44×44px per WCAG guidelines.
+
+## U
+
+**User Flow**  
+Path users take through website to complete task. Optimize for common goals.
+
+**User Testing**  
+Observing real users interacting with website to identify usability issues.
+
+## V
+
+**Validation**  
+Checking user input correctness. HTML5: `required`, `pattern`, `type`. Show clear error messages.
+
+**Viewport**  
+Visible area of webpage. Set with `<meta name="viewport" content="width=device-width, initial-scale=1">`.
+
+**Visual Hierarchy**  
+Organizing content by visual importance using size, color, spacing, contrast.
+
+**Visually Hidden**  
+Content hidden visually but available to screen readers. Important for accessibility.
+
+## W
+
+**WCAG (Web Content Accessibility Guidelines)**  
+International standard for web accessibility. Levels: A (minimum), AA (recommended), AAA (enhanced).
+
+**Web Form**  
+Interactive form collecting user input. Use proper labels, validation, error messages.
+
+**White Space**  
+Empty space around elements. Essential for readability and visual hierarchy. Don't fear it.
+
+**Widget**  
+Interactive UI component (calendar picker, autocomplete, color picker).
+
+**Wireframe**  
+Low-fidelity sketch showing page layout and content structure without detailed design.
+
+**Wizard**  
+Multi-step process guiding user through complex task. Show progress and allow back navigation.
+
+## Z
+
+**Z-Index**  
+CSS property controlling stacking order of overlapping elements (modals, dropdowns).
+
+---
+
+## Common UX Patterns in HTML
+
+### Navigation Patterns
+- **Primary Navigation**: Main site menu in `<nav>`
+- **Breadcrumbs**: Showing current location in hierarchy
+- **Pagination**: Navigating through lists or search results
+- **Tabs**: Switching between related content sections
+- **Hamburger Menu**: Mobile-friendly collapsible navigation
+
+### Form Patterns
+- **Single-Column Layout**: Easier to scan and complete
+- **Field Labels**: Above or beside fields, not as placeholders only
+- **Inline Validation**: Real-time feedback as user types
+- **Required Fields**: Clearly marked with asterisk or "required"
+- **Error Messages**: Specific, helpful, near relevant field
+- **Success Confirmation**: Clear feedback after submission
+
+### Content Patterns
+- **Cards**: Contained content previews
+- **Hero Section**: Prominent banner with key message and CTA
+- **F-Pattern**: Users scan in F-shape, place important content accordingly
+- **Accordion**: Expandable/collapsible content sections
+- **Modal**: Focus attention on specific task or information
+
+### Feedback Patterns
+- **Loading Indicators**: Show progress during wait times
+- **Toast Notifications**: Brief temporary messages
+- **Inline Messages**: Success/error feedback near relevant content
+- **Empty States**: Guidance when no content available
+- **Confirmation Dialogs**: Prevent accidental destructive actions
+
+## Accessibility Quick Reference
+
+### Must-Have Features
+- ✅ All images have `alt` text
+- ✅ Form inputs have associated `<label>`
+- ✅ Proper heading hierarchy (`<h1>` → `<h2>` → `<h3>`)
+- ✅ Sufficient color contrast (4.5:1 minimum)
+- ✅ Keyboard navigation works (test with Tab key)
+- ✅ Focus indicators visible
+- ✅ Skip navigation link provided
+- ✅ Language declared (`<html lang="en">`)
+
+### ARIA Essentials
+- `role` - Define element purpose
+- `aria-label` - Provide accessible name
+- `aria-labelledby` - Reference label by ID
+- `aria-describedby` - Reference description by ID
+- `aria-hidden` - Hide from screen readers
+- `aria-live` - Announce dynamic content changes
+- `aria-expanded` - Indicate expanded/collapsed state
+- `aria-current` - Indicate current page/step
+
+## Mobile UX Considerations
+
+- **Viewport Meta Tag**: `<meta name="viewport" content="width=device-width, initial-scale=1">`
+- **Touch Targets**: Minimum 44×44px clickable areas
+- **Readable Text**: Minimum 16px font size
+- **Thumb-Friendly**: Place important actions within reach
+- **Minimize Input**: Use appropriate input types (`tel`, `email`, `date`)
+- **Responsive Images**: Use `srcset` and `<picture>` for different screen sizes
+
+## Resources
+
+- **WCAG Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
+- **A11y Project**: https://www.a11yproject.com/
+- **Nielsen Norman Group**: https://www.nngroup.com/
+- **Material Design**: https://material.io/design
+- **Inclusive Components**: https://inclusive-components.design/
+- **WebAIM**: https://webaim.org/
diff --git a/skills/html-coder/references/how-to.md b/skills/html-coder/references/how-to.md
new file mode 100644
index 000000000..162e467a3
--- /dev/null
+++ b/skills/html-coder/references/how-to.md
@@ -0,0 +1,652 @@
+# HTML How-To Guides
+
+Practical guides for specific HTML tasks and techniques.
+
+## Define Terms with HTML
+
+HTML provides semantic elements for defining keywords and creating glossaries.
+
+### Inline Definitions with `<dfn>`
+
+Mark the first occurrence of a keyword being defined:
+
+```html
+<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>
+```
+
+The `<dfn>` element wraps the term being defined, not the definition itself. The paragraph containing it provides the definition.
+
+### Defining Abbreviations
+
+Combine `<dfn>` with `<abbr>` for abbreviations:
+
+```html
+<p>
+  <dfn><abbr>HTML</abbr> (HyperText Markup Language)</dfn>
+  is a markup language used to structure documents on the web.
+</p>
+```
+
+**Note**: Don't rely on the `title` attribute for expanding abbreviations - it's not accessible. Always provide the expansion inline.
+
+### Improve Accessibility
+
+Link terms to definitions explicitly using `aria-describedby`:
+
+```html
+<p>
+  <span id="firefox-def">
+    <dfn aria-describedby="firefox-def">Firefox</dfn>
+    is the web browser created by the Mozilla Foundation.
+  </span>
+</p>
+```
+
+### Description Lists
+
+For glossaries, dictionaries, FAQs, or key-value pairs, use description lists:
+
+```html
+<dl>
+  <dt>HTML</dt>
+  <dd>HyperText Markup Language - structures web documents</dd>
+  
+  <dt>CSS</dt>
+  <dd>Cascading Style Sheets - styles web documents</dd>
+  
+  <dt>JavaScript</dt>
+  <dd>Programming language for web interactivity</dd>
+</dl>
+```
+
+**Structure**:
+- `<dl>` - Description list wrapper
+- `<dt>` - Term being described
+- `<dd>` - Description of the term
+
+**Patterns**:
+- Multiple `<dt>` in a row: following `<dd>` applies to all
+- Multiple `<dd>` in a row: all apply to the last `<dt>`
+
+**Style with CSS**:
+```css
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 2em;
+  margin-bottom: 0.5em;
+}
+```
+
+**Not suitable for**: Dialog or conversation markup (speakers don't describe each other).
+
+## Use Data Attributes
+
+Custom data attributes (`data-*`) store extra information on HTML elements without hacks.
+
+### HTML Syntax
+
+Any attribute starting with `data-` is a data attribute:
+
+```html
+<article 
+  id="electric-cars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+  <!-- Content -->
+</article>
+```
+
+### JavaScript Access
+
+Access via the `dataset` property (dashes become camelCase):
+
+```javascript
+const article = document.querySelector('#electric-cars');
+
+// Read
+console.log(article.dataset.columns);      // "3"
+console.log(article.dataset.indexNumber);  // "12314" (camelCase)
+console.log(article.dataset.parent);       // "cars"
+
+// Write
+article.dataset.columns = "4";
+
+// Query with data attributes
+const articles = document.querySelectorAll('[data-columns]');
+const threeCol = document.querySelectorAll('[data-columns="3"]');
+```
+
+### CSS Access
+
+Use data attributes in CSS selectors and generated content:
+
+```css
+/* Style based on data attribute */
+article[data-columns="3"] {
+  width: 400px;
+}
+
+article[data-columns="4"] {
+  width: 600px;
+}
+
+/* Display data value */
+article::before {
+  content: attr(data-parent);
+}
+```
+
+### Style Variants Pattern
+
+Instead of multiple classes:
+
+```html
+<!-- Traditional approach -->
+<div class="callout callout--note">...</div>
+<div class="callout callout--warning">...</div>
+
+<!-- Data attribute approach -->
+<div class="callout" data-variant="note">...</div>
+<div class="callout" data-variant="warning">...</div>
+```
+
+```css
+.callout {
+  margin: 0.5em 0;
+  padding: 0.5em;
+  border-radius: 4px;
+  border: 2px solid;
+}
+
+.callout:not([data-variant]) {
+  border-color: rgb(15 15 15);
+  background-color: rgb(15 15 15 / 0.2);
+}
+
+.callout[data-variant="note"] {
+  border-color: rgb(15 15 235);
+  background-color: rgb(15 15 235 / 0.2);
+}
+
+.callout[data-variant="warning"] {
+  border-color: rgb(235 15 15);
+  background-color: rgb(235 15 15 / 0.2);
+}
+```
+
+**Benefits**:
+- Eliminates invalid states (multiple variants simultaneously)
+- Better for static analysis and type checking
+- Intuitive toggling: `element.dataset.variant = "warning"`
+
+### Lazy Loading Pattern
+
+Store initial data in `data-*` attributes, load on demand:
+
+```html
+<img data-src="large-image.jpg" alt="Description">
+```
+
+```javascript
+const images = document.querySelectorAll('img[data-src]');
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      const img = entry.target;
+      img.src = img.dataset.src;
+      delete img.dataset.src;
+      observer.unobserve(img);
+    }
+  });
+});
+
+images.forEach(img => observer.observe(img));
+```
+
+### Important Cautions
+
+**Don't use data attributes for**:
+- Content that should be visible and accessible
+- Content that search engines should index
+
+Data attributes are for:
+- Storing configuration or state
+- JavaScript-only data
+- Associating non-visible metadata
+
+## Author Fast-Loading HTML Pages
+
+Optimize page load performance for better user experience and reduced server load.
+
+### Reduce Page Weight
+
+**Minimize files**:
+- Remove unnecessary whitespace and comments
+- Move inline CSS to external stylesheets
+- Move inline scripts to external files
+- Use minification tools (HTML Tidy, Terser, etc.)
+
+**Compress assets**:
+- Enable gzip/brotli compression on server
+- Minify and compress images
+- Optimize and compress SVG files
+
+### Minimize HTTP Requests
+
+**Reduce file count**:
+- Combine CSS files where possible
+- Combine JavaScript files
+- Use CSS sprites for multiple background images
+- Inline critical CSS for above-the-fold content
+
+**Each file requires**:
+- DNS lookup
+- TCP connection
+- HTTP request/response
+- Parsing and execution time
+
+### Use a Content Delivery Network (CDN)
+
+**Benefits**:
+- Reduced latency through geographic distribution
+- Cached content served from nearest node
+- Offloads traffic from origin server
+- Often includes automatic optimization
+
+### Reduce Domain Lookups
+
+Each unique domain requires DNS lookup time. Minimize different domains for:
+- CSS files
+- JavaScript files
+- Image sources
+- External resources
+
+Balance with parallel download limits (browsers typically allow 6 connections per domain).
+
+### Cache Reused Content
+
+**Set proper cache headers**:
+- `Last-Modified` - File modification timestamp
+- `ETag` - Resource version identifier
+- `Cache-Control` - Caching directives
+- `Expires` - Expiration date
+
+```http
+Cache-Control: public, max-age=31536000
+ETag: "abc123"
+Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT
+```
+
+**For static files**: Server usually handles automatically
+**For dynamic pages**: Manually set caching headers when appropriate
+
+### Optimize Loading Order
+
+**Page structure**:
+1. HTML content (above-the-fold first)
+2. Critical CSS required for initial display
+3. Deferred JavaScript after content
+4. Additional resources loaded progressively
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+  <!-- Critical CSS inline or linked -->
+  <link rel="stylesheet" href="critical.css">
+</head>
+<body>
+  <!-- Main content here -->
+  <main>
+    <h1>Content</h1>
+    <p>Visible content loads first...</p>
+  </main>
+  
+  <!-- Scripts at end of body -->
+  <script src="script.js" defer></script>
+</body>
+</html>
+```
+
+### Reduce Inline Scripts
+
+**Problems with inline scripts**:
+- Block HTML parsing
+- Can't be cached
+- `document.write()` is particularly harmful
+
+**Better approach**:
+```html
+<!-- Bad: Inline script blocks parsing -->
+<script>
+  document.write('<div>Content</div>');
+</script>
+
+<!-- Good: External script with async/defer -->
+<script src="script.js" defer></script>
+
+<!-- Good: Modern DOM manipulation -->
+<script>
+  const div = document.createElement('div');
+  div.textContent = 'Content';
+  document.body.appendChild(div);
+</script>
+```
+
+### Use Async and Defer
+
+**Script loading attributes**:
+
+```html
+<!-- Defer: Load in parallel, execute after HTML parsing -->
+<script src="script.js" defer></script>
+
+<!-- Async: Load and execute independently, don't block -->
+<script src="analytics.js" async></script>
+
+<!-- Regular: Blocks parsing (avoid) -->
+<script src="script.js"></script>
+```
+
+**When to use**:
+- `defer` - Scripts that need DOM or maintain order
+- `async` - Independent scripts (analytics, ads)
+- Neither - Only if script must run immediately
+
+### Use Modern CSS and Valid Markup
+
+**Benefits of valid HTML**:
+- No browser error correction needed
+- Faster parsing
+- Tools can pre-process reliably
+- Better for minification
+
+**Valid markup allows**:
+- HTML Tidy whitespace removal
+- Tree shaking unused code
+- Better compression ratios
+
+### Avoid Layout Tables
+
+**Don't use tables for layout** (legacy method):
+```html
+<!-- Bad: Table layout -->
+<table>
+  <tr>
+    <td>Sidebar</td>
+    <td>Main content</td>
+  </tr>
+</table>
+```
+
+**Use modern CSS layout**:
+```css
+/* Good: Flexbox layout */
+.container {
+  display: flex;
+}
+
+/* Good: Grid layout */
+.container {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+}
+```
+
+**Tables are for tabular data only.**
+
+### Specify Image and Table Dimensions
+
+**Improves loading**:
+- Browser reserves space immediately
+- No reflow when content loads
+- Smoother page appearance
+
+```html
+<!-- Specify dimensions -->
+<img src="photo.jpg" width="800" height="600" alt="Photo">
+
+<!-- For tables -->
+<table style="table-layout: fixed; width: 100%;">
+  <colgroup>
+    <col style="width: 200px;">
+    <col style="width: 400px;">
+  </colgroup>
+  <!-- table content -->
+</table>
+```
+
+### Use Lazy Loading
+
+**Defer image loading until needed**:
+
+```html
+<!-- Lazy load images -->
+<img src="photo.jpg" loading="lazy" alt="Description">
+
+<!-- Eager loading (default) -->
+<img src="hero.jpg" loading="eager" alt="Hero image">
+```
+
+**How it works**:
+- `loading="eager"` - Load immediately (default)
+- `loading="lazy"` - Load when near viewport
+- Reduces initial page load time
+- Saves bandwidth for images never seen
+
+**Check if loaded**:
+```javascript
+const img = document.querySelector('img');
+if (img.complete) {
+  console.log('Image loaded');
+}
+```
+
+### Optimize Images and SVGs
+
+**Image optimization**:
+- Compress before uploading (Photoshop, TinyPNG, etc.)
+- Use appropriate format (JPEG for photos, PNG for graphics, WebP for modern browsers)
+- Serve scaled images (don't send 2000px image for 300px display)
+- Use responsive images (`srcset`, `<picture>`)
+
+**SVG optimization**:
+- Remove unnecessary metadata
+- Enable gzip compression on server
+- Use SVGO or similar tools
+- Inline small SVGs to avoid HTTP request
+
+## Use Cross-Origin Images
+
+Enable cross-origin image use in `<canvas>` elements.
+
+### The Problem
+
+Canvas tainted by cross-origin images cannot be read:
+
+```javascript
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+const img = new Image();
+img.src = 'https://other-domain.com/image.jpg';
+img.onload = () => {
+  ctx.drawImage(img, 0, 0);
+  // This will throw security error:
+  canvas.toDataURL();  // Error: canvas is tainted
+};
+```
+
+### The Solution
+
+Use CORS-enabled images:
+
+```javascript
+const img = new Image();
+img.crossOrigin = 'anonymous';  // or 'use-credentials'
+img.src = 'https://other-domain.com/image.jpg';
+```
+
+```html
+<img src="https://other-domain.com/image.jpg" crossorigin="anonymous">
+```
+
+### Server Requirements
+
+Server must send CORS headers:
+
+```http
+Access-Control-Allow-Origin: *
+```
+
+Or specific origin:
+
+```http
+Access-Control-Allow-Origin: https://your-domain.com
+```
+
+## Add Image Maps
+
+Create clickable regions on images.
+
+### Basic Image Map
+
+```html
+<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
+
+<map name="workmap">
+  <area shape="rect" coords="34,44,270,350" 
+        href="computer.html" alt="Computer">
+  <area shape="rect" coords="290,172,333,250" 
+        href="phone.html" alt="Phone">
+  <area shape="circle" coords="337,300,44" 
+        href="coffee.html" alt="Coffee">
+</map>
+```
+
+### Shape Types
+
+**Rectangle**: `shape="rect" coords="x1,y1,x2,y2"`
+- x1,y1 = top-left corner
+- x2,y2 = bottom-right corner
+
+**Circle**: `shape="circle" coords="x,y,radius"`
+- x,y = center point
+- radius = circle radius
+
+**Polygon**: `shape="poly" coords="x1,y1,x2,y2,x3,y3,..."`
+- Each pair is a vertex point
+
+**Default**: `shape="default"` - entire image
+
+### JavaScript Interaction
+
+```javascript
+const areas = document.querySelectorAll('area');
+areas.forEach(area => {
+  area.addEventListener('click', (e) => {
+    e.preventDefault();
+    console.log('Clicked:', area.alt);
+    // Custom behavior
+  });
+});
+```
+
+## Add JavaScript to Your Web Page
+
+Multiple ways to include JavaScript in HTML.
+
+### Inline JavaScript
+
+```html
+<button onclick="alert('Clicked!')">Click Me</button>
+```
+
+**Pros**: Quick for tiny scripts
+**Cons**: Not maintainable, no caching, violates separation of concerns
+
+### Internal Script
+
+```html
+<script>
+  function doSomething() {
+    console.log('Doing something');
+  }
+  
+  document.addEventListener('DOMContentLoaded', () => {
+    doSomething();
+  });
+</script>
+```
+
+**Pros**: No external request
+**Cons**: Not cached, not reusable
+
+### External Script (Recommended)
+
+```html
+<script src="script.js"></script>
+```
+
+**Pros**: Cached, reusable, maintainable, separates concerns
+**Cons**: Additional HTTP request (minimal with caching)
+
+### Script Placement
+
+**End of body** (traditional):
+```html
+<body>
+  <!-- content -->
+  <script src="script.js"></script>
+</body>
+```
+
+**Head with defer** (modern):
+```html
+<head>
+  <script src="script.js" defer></script>
+</head>
+```
+
+**Head with async** (independent scripts):
+```html
+<head>
+  <script src="analytics.js" async></script>
+</head>
+```
+
+### Module Scripts
+
+```html
+<script type="module" src="module.js"></script>
+```
+
+**Features**:
+- Deferred by default
+- Strict mode enabled
+- Can use import/export
+- Separate scope
+
+## Best Practices
+
+1. **Semantic HTML**: Use elements that convey meaning (`<dfn>`, `<dl>`, `<abbr>`)
+2. **Data attributes**: Store JavaScript-only data, not visible content
+3. **Performance**: Minimize requests, optimize images, use lazy loading
+4. **Valid markup**: Enables optimization tools and faster parsing
+5. **External resources**: Use external CSS/JS files for caching
+6. **Async loading**: Use `async`/`defer` for non-critical scripts
+7. **Accessibility**: Keep visible content in HTML, not data attributes
+8. **Progressive enhancement**: Content loads first, enhancement after
+
+## Resources
+
+- [MDN: Define Terms](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Define_terms_with_HTML)
+- [MDN: Use Data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes)
+- [MDN: Fast-Loading Pages](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Author_fast-loading_HTML_pages)
+- [MDN: CORS Enabled Images](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/CORS_enabled_image)
+- [MDN: Add JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page)
diff --git a/skills/html-coder/references/quickstart.md b/skills/html-coder/references/quickstart.md
new file mode 100644
index 000000000..546b7f015
--- /dev/null
+++ b/skills/html-coder/references/quickstart.md
@@ -0,0 +1,273 @@
+# HTML Quickstart Cheatsheet
+
+A quick reference guide for HTML syntax and common element patterns. Use semantic HTML tags for their meaning, not their appearance - styling should be handled with CSS.
+
+## Inline Elements
+
+Inline elements appear side-by-side horizontally and only take up as much width as needed. They fit together like words in a sentence.
+
+| Purpose | Element | Example |
+|---------|---------|---------|
+| **Link** | `<a>` | `<a href="https://example.com">Link text</a>` |
+| **Image** | `<img>` | `<img src="photo.jpg" alt="Description" width="250" />` |
+| **Inline container** | `<span>` | `<span class="highlight">grouped text</span>` |
+| **Emphasized text** | `<em>` | `<em>Emphasized text</em>` (semantic emphasis) |
+| **Italic text** | `<i>` | `<i>Italic styling</i>` (visual only) |
+| **Strong importance** | `<strong>` | `<strong>Important text</strong>` (semantic) |
+| **Bold text** | `<b>` | `<b>Bold styling</b>` (visual only) |
+| **Highlighted text** | `<mark>` | `<mark>Highlighted content</mark>` |
+| **Strikethrough** | `<s>` | `<s>Struck through text</s>` |
+| **Subscript** | `<sub>` | `H<sub>2</sub>O` |
+| **Superscript** | `<sup>` | `x<sup>2</sup>` |
+| **Small text** | `<small>` | `<small>Fine print</small>` |
+| **Code** | `<code>` | `<code>console.log()</code>` |
+| **Inline quote** | `<q>` | `<q>Short quote</q>` (adds quotes automatically) |
+| **Citation** | `<cite>` | `<cite>Book Title</cite>` |
+| **Address** | `<address>` | `<address>123 Main St</address>` |
+| **Time/Date** | `<time>` | `<time datetime="2026-03-08">March 8, 2026</time>` |
+| **Line break** | `<br>` | `Line 1<br>Line 2` |
+| **Word break opportunity** | `<wbr>` | `Long<wbr>word<wbr>here` |
+| **Audio** | `<audio>` | `<audio controls><source src="file.mp3"></audio>` |
+| **Video** | `<video>` | `<video controls src="file.mp4"></video>` |
+
+### Semantic vs Visual Elements
+
+**Use semantic elements when the meaning matters:**
+- `<em>` for emphasis (screen readers will stress it)
+- `<strong>` for importance
+- `<code>` for code snippets
+- `<cite>` for titles of works
+
+**Use visual elements for pure styling:**
+- `<i>` for italic styling without semantic meaning
+- `<b>` for bold styling without semantic importance
+
+## Block Elements
+
+Block elements take up the full width of their container and stack vertically like paragraphs or building blocks.
+
+| Purpose | Element | Example |
+|---------|---------|---------|
+| **Paragraph** | `<p>` | `<p>Paragraph text</p>` |
+| **Headings** | `<h1>`-`<h6>` | `<h1>Main Title</h1>` through `<h6>` |
+| **Horizontal rule** | `<hr>` | `<hr>` (creates dividing line) |
+| **Block quote** | `<blockquote>` | `<blockquote>Long quoted text</blockquote>` |
+| **Unordered list** | `<ul>` + `<li>` | `<ul><li>Item</li><li>Item</li></ul>` |
+| **Ordered list** | `<ol>` + `<li>` | `<ol><li>First</li><li>Second</li></ol>` |
+| **Definition list** | `<dl>`, `<dt>`, `<dd>` | `<dl><dt>Term</dt><dd>Definition</dd></dl>` |
+| **Collapsible details** | `<details>` + `<summary>` | `<details><summary>Title</summary>Content</details>` |
+
+### Heading Hierarchy
+
+Always maintain proper heading structure:
+
+```html
+<h1>Page Title</h1>
+  <h2>Section</h2>
+    <h3>Subsection</h3>
+    <h3>Another Subsection</h3>
+  <h2>Another Section</h2>
+```
+
+**Rules:**
+- Use only one `<h1>` per page
+- Don't skip levels (h1 → h3)
+- Headings represent document structure, not font size
+
+### List Types
+
+**Unordered (bulleted)** - Order doesn't matter:
+```html
+<ul>
+  <li>Apples</li>
+  <li>Oranges</li>
+  <li>Bananas</li>
+</ul>
+```
+
+**Ordered (numbered)** - Order is significant:
+```html
+<ol>
+  <li>Mix ingredients</li>
+  <li>Bake at 350°F</li>
+  <li>Cool before serving</li>
+</ol>
+```
+
+**Definition list** - Term and definition pairs:
+```html
+<dl>
+  <dt>HTML</dt>
+  <dd>HyperText Markup Language</dd>
+  <dt>CSS</dt>
+  <dd>Cascading Style Sheets</dd>
+</dl>
+```
+
+## Common Patterns
+
+### Link Patterns
+
+```html
+<!-- External link -->
+<a href="https://example.com">External Site</a>
+
+<!-- Internal link -->
+<a href="/about.html">About Page</a>
+
+<!-- Email link -->
+<a href="mailto:email@example.com">Email Us</a>
+
+<!-- Phone link -->
+<a href="tel:+1234567890">Call Us</a>
+
+<!-- Download link -->
+<a href="document.pdf" download>Download PDF</a>
+
+<!-- Open in new tab -->
+<a href="https://example.com" target="_blank" rel="noopener">New Tab</a>
+```
+
+### Image Patterns
+
+```html
+<!-- Basic image -->
+<img src="photo.jpg" alt="Description">
+
+<!-- Image with dimensions -->
+<img src="photo.jpg" alt="Description" width="300" height="200">
+
+<!-- Lazy loading -->
+<img src="photo.jpg" alt="Description" loading="lazy">
+
+<!-- Responsive image -->
+<picture>
+  <source media="(min-width: 800px)" srcset="large.jpg">
+  <source media="(min-width: 400px)" srcset="medium.jpg">
+  <img src="small.jpg" alt="Description">
+</picture>
+```
+
+### Multimedia
+
+```html
+<!-- Audio player -->
+<audio controls>
+  <source src="audio.mp3" type="audio/mpeg">
+  <source src="audio.ogg" type="audio/ogg">
+  Your browser doesn't support audio.
+</audio>
+
+<!-- Video player -->
+<video controls width="640" height="360">
+  <source src="video.mp4" type="video/mp4">
+  <source src="video.webm" type="video/webm">
+  Your browser doesn't support video.
+</video>
+```
+
+## Document Structure Template
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Page description">
+  <title>Page Title</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header>
+    <h1>Site Title</h1>
+    <nav>
+      <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+      </ul>
+    </nav>
+  </header>
+  
+  <main>
+    <article>
+      <h2>Article Title</h2>
+      <p>Content here...</p>
+    </article>
+  </main>
+  
+  <aside>
+    <h3>Sidebar</h3>
+  </aside>
+  
+  <footer>
+    <p>&copy; 2026 Company Name</p>
+  </footer>
+  
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+## Accessibility Quick Tips
+
+1. **Always include `alt` text** for images
+2. **Use semantic elements** (`<nav>`, `<article>`, `<aside>`)
+3. **Maintain heading hierarchy** (h1 → h2 → h3)
+4. **Label form inputs** with `<label for="id">`
+5. **Use `<button>` for buttons**, not `<div>` or `<a>`
+6. **Provide text alternatives** for non-text content
+7. **Ensure sufficient color contrast**
+8. **Make interactive elements keyboard accessible**
+
+## Common Attributes
+
+### Global Attributes (work on all elements)
+
+- `id="unique-id"` - Unique identifier
+- `class="class-name"` - CSS class name(s)
+- `style="color: red;"` - Inline styles (avoid when possible)
+- `title="Tooltip text"` - Tooltip on hover
+- `lang="en"` - Language of content
+- `hidden` - Hide element
+- `data-*="value"` - Custom data attributes
+- `aria-*="value"` - Accessibility attributes
+
+### Common Element-Specific Attributes
+
+**Links (`<a>`)**:
+- `href` - Destination URL
+- `target` - Where to open link (_blank, _self)
+- `rel` - Relationship (noopener, nofollow, etc.)
+
+**Images (`<img>`)**:
+- `src` - Image source path
+- `alt` - Alternative text (required!)
+- `width`, `height` - Dimensions
+- `loading` - lazy, eager
+
+**Forms**:
+- `action` - Form submission URL
+- `method` - HTTP method (get, post)
+- `name` - Field name
+- `value` - Field value
+- `required` - Field is required
+- `placeholder` - Hint text
+
+## Quick Reference
+
+**Empty/void elements** (no closing tag needed):
+`<img>`, `<br>`, `<hr>`, `<input>`, `<meta>`, `<link>`
+
+**Always lowercase** tag names and attributes (best practice)
+
+**Quote attribute values**: `<a href="link">` not `<a href=link>`
+
+**Nest properly**: If you open A then B, close B before A
+
+**Comments**: `<!-- This is a comment -->`
+
+## Resources
+
+- [MDN HTML Cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
+- [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
diff --git a/skills/html-coder/references/reference.md b/skills/html-coder/references/reference.md
new file mode 100644
index 000000000..e2b5ffce9
--- /dev/null
+++ b/skills/html-coder/references/reference.md
@@ -0,0 +1,290 @@
+# HTML Element Reference
+
+Comprehensive reference of all HTML elements organized by category.
+
+## Main Root
+
+**`<html>`**  
+Top-level container for an HTML document. All other elements must be nested within it. Also called the root element.
+
+## Document Metadata
+
+Metadata provides information about the page for browsers, search engines, and other software.
+
+| Element | Purpose |
+|---------|---------|
+| `<base>` | Sets the base URL for all relative URLs in the document (only one per document) |
+| `<head>` | Container for document metadata like title, scripts, and stylesheets |
+| `<link>` | Links to external resources (commonly CSS files, favicons, mobile icons) |
+| `<meta>` | Defines metadata not representable by other meta elements |
+| `<style>` | Contains CSS styling information for the document |
+| `<title>` | Specifies the document title shown in browser tabs (text only, no HTML) |
+
+## Sectioning Root
+
+**`<body>`**  
+Contains the main content of the HTML document. Only one per document.
+
+## Content Sectioning
+
+Organize document content into logical sections with clear structure and hierarchy.
+
+| Element | Purpose |
+|---------|---------|
+| `<address>` | Marks contact information for a person, people, or organization |
+| `<article>` | Self-contained content suitable for independent distribution (blog post, forum post, news article) |
+| `<aside>` | Content indirectly related to main content (sidebars, call-out boxes) |
+| `<footer>` | Footer section containing authorship, copyright, or related document links |
+| `<header>` | Introductory content, navigation aids, logos, search forms |
+| `<h1>` to `<h6>` | Six levels of section headings (h1 highest, h6 lowest) |
+| `<hgroup>` | Groups heading with secondary content like subheadings or taglines |
+| `<main>` | Dominant content of the document body (central topic or functionality) |
+| `<nav>` | Navigation links section (menus, tables of contents, indexes) |
+| `<section>` | Standalone thematic section (should typically have a heading) |
+| `<search>` | Container for search or filtering controls |
+
+## Text Content
+
+Structure blocks or sections of text content within the body.
+
+| Element | Purpose |
+|---------|---------|
+| `<blockquote>` | Extended quotation from another source (use `cite` attribute for URL) |
+| `<dd>` | Description or value for preceding term in a description list |
+| `<div>` | Generic container with no semantic meaning (style with CSS or layout parent) |
+| `<dl>` | Description list wrapper for term-definition pairs |
+| `<dt>` | Term being described in a description list |
+| `<figcaption>` | Caption or legend for parent `<figure>` |
+| `<figure>` | Self-contained content with optional caption |
+| `<hr>` | Thematic break between content (scene change, topic shift) |
+| `<li>` | List item within `<ol>`, `<ul>`, or `<menu>` |
+| `<menu>` | Semantic alternative to `<ul>` (treated identically by browsers) |
+| `<ol>` | Ordered (numbered) list |
+| `<p>` | Paragraph of text or related content grouping |
+| `<pre>` | Preformatted text preserving whitespace exactly as written |
+| `<ul>` | Unordered (bulleted) list |
+
+## Inline Text Semantics
+
+Define meaning, structure, or styling for words, lines, or text portions.
+
+| Element | Purpose |
+|---------|---------|
+| `<a>` | Hyperlink to URLs, files, email addresses, page locations (requires `href`) |
+| `<abbr>` | Abbreviation or acronym (expand inline, not via `title`) |
+| `<b>` | Draws attention without special importance (typically bold) |
+| `<bdi>` | Isolates text from surrounding bidirectional algorithm |
+| `<bdo>` | Overrides text directionality |
+| `<br>` | Line break (for addresses, poems where line division matters) |
+| `<cite>` | Title of a creative work |
+| `<code>` | Inline code fragment (monospace by default) |
+| `<data>` | Links content with machine-readable translation |
+| `<dfn>` | Term being defined in current context |
+| `<em>` | Stress emphasis (can nest for stronger emphasis) |
+| `<i>` | Text set off for technical terms, idiomatic phrases, thoughts |
+| `<kbd>` | User input from keyboard or other input device |
+| `<mark>` | Highlighted text for reference or notation |
+| `<q>` | Short inline quotation (browsers add quotation marks) |
+| `<rp>` | Fallback parentheses for browsers not supporting ruby annotations |
+| `<rt>` | Ruby text component (pronunciation, translation for East Asian typography) |
+| `<ruby>` | Small annotations rendered near base text (usually pronunciation) |
+| `<s>` | Strikethrough for no-longer-relevant or inaccurate content |
+| `<samp>` | Sample or quoted output from computer program |
+| `<small>` | Side comments, fine print, copyright, legal text |
+| `<span>` | Generic inline container with no semantic meaning |
+| `<strong>` | Strong importance, seriousness, or urgency (typically bold) |
+| `<sub>` | Subscript text |
+| `<sup>` | Superscript text |
+| `<time>` | Specific time period (use `datetime` for machine-readable format) |
+| `<u>` | Non-textual annotation indicated by underline |
+| `<var>` | Variable name in mathematical or programming context |
+| `<wbr>` | Optional line break opportunity |
+
+## Image and Multimedia
+
+Embed images, audio, video, and other multimedia resources.
+
+| Element | Purpose |
+|---------|---------|
+| `<area>` | Clickable area within image map |
+| `<audio>` | Embeds sound content (supports multiple sources via `<source>`) |
+| `<img>` | Embeds an image |
+| `<map>` | Defines image map with clickable regions |
+| `<track>` | Text tracks for media elements (subtitles, captions in WebVTT format) |
+| `<video>` | Embeds video content (supports multiple sources) |
+
+## Embedded Content
+
+Embed external content beyond standard multimedia.
+
+| Element | Purpose |
+|---------|---------|
+| `<embed>` | Embeds external content from plugins or applications |
+| `<fencedframe>` | Nested browsing context with enhanced privacy (like `<iframe>` with more features) |
+| `<iframe>` | Embeds another HTML page within current page |
+| `<object>` | External resource treated as image, nested context, or plugin content |
+| `<picture>` | Container for multiple image sources for responsive images |
+| `<source>` | Multiple media resources for `<picture>`, `<audio>`, or `<video>` |
+
+## SVG and MathML
+
+**`<svg>`**  
+Container for SVG graphics (vector images, charts, diagrams).
+
+**`<math>`**  
+Top-level element for MathML mathematical notation.
+
+## Scripting
+
+Enable dynamic content and web applications.
+
+| Element | Purpose |
+|---------|---------|
+| `<canvas>` | Container for drawing graphics via JavaScript or WebGL |
+| `<noscript>` | Content displayed when scripts are disabled or unsupported |
+| `<script>` | Embeds or references executable code (typically JavaScript) |
+
+## Demarcating Edits
+
+Indicate document changes or revisions.
+
+| Element | Purpose |
+|---------|---------|
+| `<del>` | Text deleted from document (track changes, diffs) |
+| `<ins>` | Text added to document |
+
+## Table Content
+
+Create and structure tabular data.
+
+| Element | Purpose |
+|---------|---------|
+| `<caption>` | Table title or caption |
+| `<col>` | Column definition within `<colgroup>` (must have no `span` on parent) |
+| `<colgroup>` | Group of columns in a table |
+| `<table>` | Container for tabular data displayed in rows and columns |
+| `<tbody>` | Main body rows of a table |
+| `<td>` | Data cell within a table row |
+| `<tfoot>` | Footer rows with summary information |
+| `<th>` | Header cell for group of table cells (use `scope` and `headers` for relationships) |
+| `<thead>` | Header rows with column information |
+| `<tr>` | Row of cells in a table |
+
+## Forms
+
+Interactive controls for user input and data submission.
+
+| Element | Purpose |
+|---------|---------|
+| `<button>` | Interactive button activated by user action |
+| `<datalist>` | Set of `<option>` elements providing suggestions for other controls |
+| `<fieldset>` | Groups related form controls and labels |
+| `<form>` | Document section containing interactive submission controls |
+| `<input>` | Interactive control with many types for different data (text, checkbox, file, etc.) |
+| `<label>` | Caption for form control |
+| `<legend>` | Caption for parent `<fieldset>` |
+| `<meter>` | Scalar value within known range or fractional value |
+| `<optgroup>` | Groups options within `<select>` |
+| `<option>` | Item within `<select>`, `<optgroup>`, or `<datalist>` |
+| `<output>` | Container for calculation results or user action outcomes |
+| `<progress>` | Task completion indicator (progress bar) |
+| `<select>` | Dropdown menu of options |
+| `<selectedcontent>` | Displays currently selected option in closed `<select>` |
+| `<textarea>` | Multi-line plain text editing control |
+
+## Interactive Elements
+
+Create interactive user interface components.
+
+| Element | Purpose |
+|---------|---------|
+| `<details>` | Disclosure widget revealing content when toggled open |
+| `<dialog>` | Dialog box, modal, or interactive component |
+| `<geolocation>` | Interactive control for sharing user's geolocation (experimental) |
+| `<summary>` | Summary or label for `<details>` disclosure box |
+
+## Web Components
+
+Create and use custom elements as standard HTML.
+
+| Element | Purpose |
+|---------|---------|
+| `<slot>` | Placeholder in web component filled with custom markup |
+| `<template>` | HTML held for later instantiation via JavaScript |
+
+## Obsolete and Deprecated Elements
+
+**Do not use these elements.** They are deprecated and should be replaced in existing projects.
+
+| Element | Deprecated Purpose | Modern Alternative |
+|---------|-------------------|-------------------|
+| `<acronym>` | Indicated acronyms | Use `<abbr>` |
+| `<big>` | Larger font size | Use CSS `font-size` |
+| `<center>` | Centered content | Use CSS `text-align: center` |
+| `<content>` | Shadow DOM insertion point | Use `<slot>` |
+| `<dir>` | Directory list | Use `<ul>` |
+| `<font>` | Font styling | Use CSS `font` properties |
+| `<frame>`, `<frameset>` | Frame-based layout | Use modern layout techniques |
+| `<image>` | Image embed | Use `<img>` |
+| `<marquee>` | Scrolling text | Use CSS animations |
+| `<menuitem>` | Context menu command | Use modern menu patterns |
+| `<nobr>` | Prevent line breaks | Use CSS `white-space: nowrap` |
+| `<noembed>` | Fallback for embed | Use content between `<object>` tags |
+| `<noframes>` | Frame fallback | Don't use frames |
+| `<param>` | Object parameters | Use data attributes |
+| `<plaintext>` | Raw text rendering | Use `<pre>` with proper escaping |
+| `<rb>`, `<rtc>` | Ruby annotation parts | Use `<ruby>`, `<rt>`, `<rp>` |
+| `<shadow>` | Shadow DOM insertion | Use `<slot>` |
+| `<strike>` | Strikethrough | Use `<s>` or `<del>` |
+| `<tt>` | Teletype (monospace) | Use CSS `font-family: monospace` |
+| `<xmp>` | Example markup | Use `<pre>` with proper escaping |
+
+## Element Categories Overview
+
+**Metadata elements**: `<base>`, `<head>`, `<link>`, `<meta>`, `<style>`, `<title>`
+
+**Sectioning elements**: `<article>`, `<aside>`, `<nav>`, `<section>`
+
+**Heading elements**: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<hgroup>`
+
+**Phrasing elements**: `<a>`, `<abbr>`, `<b>`, `<br>`, `<cite>`, `<code>`, `<data>`, `<em>`, `<i>`, `<kbd>`, `<mark>`, `<q>`, `<s>`, `<samp>`, `<small>`, `<span>`, `<strong>`, `<sub>`, `<sup>`, `<time>`, `<u>`, `<var>`, and others
+
+**Flow elements**: Most elements that appear in document body
+
+**Interactive elements**: `<a>`, `<button>`, `<details>`, `<embed>`, `<iframe>`, `<input>`, `<label>`, `<select>`, `<textarea>`, and others with user interaction
+
+**Void elements** (no closing tag): `<area>`, `<base>`, `<br>`, `<col>`, `<embed>`, `<hr>`, `<img>`, `<input>`, `<link>`, `<meta>`, `<source>`, `<track>`, `<wbr>`
+
+## Usage Guidelines
+
+1. **Choose semantic elements**: Use elements that convey meaning (e.g., `<nav>` for navigation, not `<div class="nav">`)
+2. **Avoid deprecated elements**: Never use elements from the obsolete list
+3. **Use void elements correctly**: Don't add closing tags to self-closing elements
+4. **Nest properly**: Ensure elements are closed in correct order
+5. **Provide accessibility**: Use semantic HTML and proper attributes (alt, aria-*, etc.)
+6. **Validate markup**: Use HTML validators to catch errors
+7. **Consider content categories**: Understand which elements can contain which others
+
+## Quick Selection Guide
+
+**For text**: Use `<p>` for paragraphs, heading elements for structure, inline elements for emphasis
+
+**For layout**: Use `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`, `<section>`, `<article>`
+
+**For lists**: Use `<ul>` (unordered), `<ol>` (ordered), `<dl>` (definitions)
+
+**For data tables**: Use `<table>` with proper structure (`<thead>`, `<tbody>`, `<tfoot>`)
+
+**For forms**: Use `<form>` with `<input>`, `<label>`, `<select>`, `<textarea>`, `<button>`
+
+**For media**: Use `<img>`, `<video>`, `<audio>`, `<picture>` for responsive images
+
+**For interactive widgets**: Use `<details>`, `<dialog>`, form elements
+
+**For grouping**: Use `<div>` (block) or `<span>` (inline) when no semantic element fits
+
+## Resources
+
+- [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [WHATWG HTML Living Standard](https://html.spec.whatwg.org/)
+- [W3C HTML Specification](https://www.w3.org/TR/html/)
diff --git a/skills/html-coder/references/standards.md b/skills/html-coder/references/standards.md
new file mode 100644
index 000000000..41d0a79c6
--- /dev/null
+++ b/skills/html-coder/references/standards.md
@@ -0,0 +1,506 @@
+# HTML Standards and Best Practices
+
+Guidelines for writing valid, standards-compliant HTML based on the WHATWG HTML Living Standard and W3C specifications.
+
+## HTML Standard Bodies
+
+### WHATWG (Web Hypertext Application Technology Working Group)
+
+**HTML Living Standard**: The primary, continuously-updated HTML specification.
+- URL: https://html.spec.whatwg.org/
+- Single, evolving document
+- Adopted by all major browsers
+- Authoritative source for HTML
+
+### W3C (World Wide Web Consortium)
+
+**W3C HTML**: Previously maintained HTML5, now defers to WHATWG
+- Historical specifications (HTML 4.01, XHTML 1.0)
+- Accessibility guidelines (WCAG)
+- Related standards (CSS, SVG)
+
+## Document Structure Requirements
+
+### Minimal Valid HTML Document
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Page Title</title>
+</head>
+<body>
+  <!-- Content -->
+</body>
+</html>
+```
+
+### Required Elements
+
+1. **`<!DOCTYPE html>`**: Document type declaration (must be first)
+2. **`<html>`**: Root element
+3. **`<head>`**: Document metadata container
+4. **`<title>`**: Document title (required in `<head>`)
+5. **`<body>`**: Document content container
+
+### Recommended Elements
+
+1. **`<meta charset="UTF-8">`**: Character encoding (must be in first 1024 bytes)
+2. **`lang` attribute on `<html>`**: Primary language (e.g., `lang="en"`)
+3. **`<meta name="viewport">`**: Responsive design viewport settings
+
+## Syntax Rules
+
+### Element Syntax
+
+**Start and end tags**:
+```html
+<p>Paragraph content</p>
+```
+
+**Void elements** (no closing tag):
+```html
+<img src="image.jpg" alt="Description">
+<br>
+<hr>
+<input type="text">
+<link rel="stylesheet" href="style.css">
+<meta charset="UTF-8">
+```
+
+**Optional closing tags** (HTML allows omission in certain contexts, but not recommended):
+- `</li>`, `</p>`, `</td>`, etc.
+
+### Attribute Syntax
+
+**With values**:
+```html
+<input type="text" name="username">
+```
+
+**Boolean attributes** (presence means true):
+```html
+<input type="checkbox" checked>
+<input type="text" disabled>
+<script src="script.js" defer></script>
+```
+
+**Quotes**: Optional for simple values, required for values with spaces or special characters
+```html
+<!-- Both valid, but quotes preferred -->
+<div class="container"></div>
+<div class=container></div>
+```
+
+### Case Sensitivity
+
+HTML is **case-insensitive** for:
+- Element names: `<DIV>` = `<div>`
+- Attribute names: `CLASS` = `class`
+
+But **case-sensitive** for:
+- Attribute values (most): `class="MyClass"` ≠ `class="myclass"`
+- IDs and classes in CSS/JavaScript
+
+**Best practice**: Use lowercase for elements and attributes.
+
+## Content Models
+
+### Content Categories
+
+Elements belong to one or more categories that determine where they can be used:
+
+1. **Metadata content**: `<link>`, `<meta>`, `<style>`, `<title>`, `<script>`
+2. **Flow content**: Most body elements (`<div>`, `<p>`, `<ul>`, etc.)
+3. **Sectioning content**: `<article>`, `<aside>`, `<nav>`, `<section>`
+4. **Heading content**: `<h1>` to `<h6>`, `<hgroup>`
+5. **Phrasing content**: Text-level elements (`<span>`, `<a>`, `<strong>`, etc.)
+6. **Embedded content**: `<img>`, `<video>`, `<audio>`, `<iframe>`, `<svg>`
+7. **Interactive content**: `<a>`, `<button>`, `<input>`, `<select>`, `<textarea>`
+
+### Nesting Rules
+
+**Valid nesting**:
+```html
+<div><p>Text</p></div>
+<ul><li>Item</li></ul>
+<p><strong>Bold text</strong></p>
+```
+
+**Invalid nesting**:
+```html
+<!-- Inline element containing block element -->
+<span><div>Invalid</div></span>
+
+<!-- Paragraphs cannot contain other paragraphs -->
+<p><p>Invalid</p></p>
+
+<!-- Links cannot contain interactive content -->
+<a href="#"><button>Invalid</button></a>
+
+<!-- List items must be direct children -->
+<ul><div><li>Invalid</li></div></ul>
+```
+
+## Semantic HTML
+
+### Principle: Use Elements for Meaning, Not Appearance
+
+**Bad** (presentational):
+```html
+<div class="heading">Section Title</div>
+<div onclick="doSomething()">Click me</div>
+<div class="bold">Important text</div>
+```
+
+**Good** (semantic):
+```html
+<h2>Section Title</h2>
+<button onclick="doSomething()">Click me</button>
+<strong>Important text</strong>
+```
+
+### Semantic Element Usage
+
+| Purpose | Use | Don't Use |
+|---------|-----|-----------|
+| Page header | `<header>` | `<div class="header">` |
+| Navigation | `<nav>` | `<div id="nav">` |
+| Main content | `<main>` | `<div id="main">` |
+| Article/post | `<article>` | `<div class="post">` |
+| Sidebar | `<aside>` | `<div class="sidebar">` |
+| Page footer | `<footer>` | `<div class="footer">` |
+| Buttons | `<button>` | `<div class="button">` |
+
+### Document Outline
+
+Create logical document structure with headings:
+
+```html
+<h1>Site Title</h1>
+  <h2>Section 1</h2>
+    <h3>Subsection 1.1</h3>
+    <h3>Subsection 1.2</h3>
+  <h2>Section 2</h2>
+    <h3>Subsection 2.1</h3>
+```
+
+**Rules**:
+- One `<h1>` per page (usually)
+- Don't skip heading levels
+- Use headings for structure, not styling
+
+## Validation Standards
+
+### Character Encoding
+
+**Always specify UTF-8**:
+```html
+<meta charset="UTF-8">
+```
+
+Must appear:
+- Within first 1024 bytes of document
+- Before any content that uses non-ASCII characters
+
+### Required Attributes
+
+Certain attributes are required for validity:
+
+| Element | Required Attributes |
+|---------|-------------------|
+| `<img>` | `src`, `alt` |
+| `<a>` (if href present) | `href` |
+| `<input>` (for forms) | `name` (except submit/button) |
+| `<label>` | `for` or contains input |
+| `<optgroup>` | `label` |
+| `<map>` | `name` |
+| `<area>` | `alt` (for image maps) |
+
+### Attribute Values
+
+**Valid attribute characters**: Letters, digits, hyphens, periods, underscores, colons
+**ID restrictions**: 
+- Must be unique within document
+- Cannot contain spaces
+- Should start with letter
+
+**Class names**:
+- Can have multiple (space-separated)
+- Case-sensitive in CSS
+- Should be descriptive, not presentational
+
+## Accessibility Requirements
+
+### ARIA (Accessible Rich Internet Applications)
+
+Override or enhance semantic meaning when needed:
+
+```html
+<div role="button" tabindex="0" aria-pressed="false">
+  Toggle Button
+</div>
+```
+
+**Rules**:
+- Use semantic HTML first (button is better than div with role="button")
+- All interactive elements must be keyboard accessible
+- Provide text alternatives for non-text content
+- Ensure sufficient color contrast
+
+### Alt Text
+
+**Required for images**:
+```html
+<!-- Informative image -->
+<img src="chart.png" alt="Sales increased 40% in Q4 2024">
+
+<!-- Decorative image -->
+<img src="decorative.png" alt="">
+
+<!-- Functional image (link/button) -->
+<a href="home.html"><img src="logo.png" alt="Home"></a>
+```
+
+### Form Accessibility
+
+**Always label inputs**:
+```html
+<label for="email">Email:</label>
+<input type="email" id="email" name="email">
+```
+
+**Group related inputs**:
+```html
+<fieldset>
+  <legend>Shipping Address</legend>
+  <!-- Address fields -->
+</fieldset>
+```
+
+## Performance Standards
+
+### Critical Rendering Path
+
+Optimize document loading:
+
+1. **Place CSS in `<head>`**:
+```html
+<link rel="stylesheet" href="style.css">
+```
+
+2. **Place scripts at end of `<body>` or use `defer`**:
+```html
+<script src="script.js" defer></script>
+```
+
+3. **Inline critical CSS** (optional, for above-the-fold content)
+
+### Resource Hints
+
+Improve loading performance:
+
+```html
+<!-- Preconnect to external domains -->
+<link rel="preconnect" href="https://cdn.example.com">
+
+<!-- Prefetch likely next page -->
+<link rel="prefetch" href="next-page.html">
+
+<!-- Preload critical resources -->
+<link rel="preload" href="font.woff2" as="font" crossorigin>
+```
+
+### Image Optimization
+
+**Responsive images**:
+```html
+<img src="image-800w.jpg"
+     srcset="image-400w.jpg 400w,
+             image-800w.jpg 800w,
+             image-1200w.jpg 1200w"
+     sizes="(max-width: 600px) 400px,
+            (max-width: 1000px) 800px,
+            1200px"
+     alt="Description">
+```
+
+**Modern image formats**:
+```html
+<picture>
+  <source srcset="image.webp" type="image/webp">
+  <source srcset="image.jpg" type="image/jpeg">
+  <img src="image.jpg" alt="Description">
+</picture>
+```
+
+## Security Standards
+
+### Content Security Policy
+
+Prevent XSS attacks:
+
+```html
+<meta http-equiv="Content-Security-Policy" 
+      content="default-src 'self'; script-src 'self' https://trusted.cdn.com">
+```
+
+### Subresource Integrity (SRI)
+
+Verify external resources:
+
+```html
+<script src="https://cdn.example.com/lib.js"
+        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
+        crossorigin="anonymous"></script>
+```
+
+### Referrer Policy
+
+Control referrer information:
+
+```html
+<meta name="referrer" content="strict-origin-when-cross-origin">
+```
+
+## HTML5 Features
+
+### New Semantic Elements
+
+HTML5 introduced elements for better document structure:
+- `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`
+- `<article>`, `<section>`
+- `<figure>`, `<figcaption>`
+- `<mark>`, `<time>`, `<progress>`, `<meter>`
+
+### New Form Types
+
+Enhanced form inputs:
+- `email`, `url`, `tel`, `number`, `range`, `date`, `color`
+- Form validation attributes: `required`, `pattern`, `min`, `max`
+
+### Multimedia Elements
+
+Native audio and video:
+```html
+<video controls width="640" height="360">
+  <source src="video.mp4" type="video/mp4">
+  <source src="video.webm" type="video/webm">
+  Your browser doesn't support video.
+</video>
+```
+
+### APIs
+
+HTML5 includes JavaScript APIs:
+- Canvas, SVG
+- Geolocation
+- Web Storage (localStorage, sessionStorage)
+- Web Workers
+- WebSockets
+
+## Deprecated Elements and Attributes
+
+### Don't Use These Elements
+
+| Element | Why Deprecated | Use Instead |
+|---------|---------------|-------------|
+| `<font>` | Presentational | CSS `font-family`, `color` |
+| `<center>` | Presentational | CSS `text-align: center` |
+| `<big>`, `<small>` (for styling) | Presentational | CSS `font-size` |
+| `<frame>`, `<frameset>` | Accessibility, usability | Modern layout techniques |
+| `<marquee>` | Poor UX | CSS animations |
+| `<blink>` | Poor UX | CSS animations |
+
+### Don't Use These Attributes
+
+| Attribute | Use Instead |
+|-----------|-------------|
+| `align`, `valign` | CSS `text-align`, `vertical-align` |
+| `bgcolor` | CSS `background-color` |
+| `border` (except on tables) | CSS `border` |
+| `width`, `height` (except media) | CSS dimensions |
+
+## Validation Tools
+
+### Online Validators
+
+1. **W3C Markup Validation Service**: https://validator.w3.org/
+2. **Nu Html Checker**: https://validator.w3.org/nu/
+3. **HTML5 Outliner**: View document structure
+
+### Browser DevTools
+
+All major browsers include HTML inspection and validation:
+- Chrome/Edge DevTools
+- Firefox Developer Tools
+- Safari Web Inspector
+
+### Automated Testing
+
+**Linters and checkers**:
+- HTMLHint
+- HTML-validate
+- Lighthouse (Chrome DevTools)
+
+## Best Practices Summary
+
+1. ✅ **Use semantic HTML**: Choose elements by meaning, not appearance
+2. ✅ **Validate your HTML**: Use W3C validator regularly
+3. ✅ **Ensure accessibility**: WCAG 2.1 AA minimum compliance
+4. ✅ **Specify language**: Add `lang` attribute to `<html>`
+5. ✅ **Use UTF-8 encoding**: Always include `<meta charset="UTF-8">`
+6. ✅ **Include viewport meta**: For responsive design
+7. ✅ **Provide alt text**: For all images (empty string if decorative)
+8. ✅ **Label form inputs**: Every input needs associated label
+9. ✅ **Use lowercase**: For elements and attributes
+10. ✅ **Close all elements**: Even though some closings are optional
+11. ✅ **Indent properly**: For readability and maintainability
+12. ✅ **Separate concerns**: HTML for structure, CSS for presentation, JS for behavior
+13. ✅ **Optimize performance**: Proper resource loading order
+14. ✅ **Test cross-browser**: Check major browsers and devices
+15. ✅ **Avoid inline styles**: Use external CSS files
+
+## Common Mistakes to Avoid
+
+1. ❌ Missing `<!DOCTYPE html>`
+2. ❌ Missing `<title>` element
+3. ❌ Missing character encoding declaration
+4. ❌ Using divs for everything (non-semantic HTML)
+5. ❌ Missing alt attributes on images
+6. ❌ Using deprecated elements (font, center, etc.)
+7. ❌ Incorrect nesting (inline containing block elements)
+8. ❌ Missing or incorrect form labels
+9. ❌ Not closing elements properly
+10. ❌ Mixing HTML and CSS (inline styles everywhere)
+11. ❌ Using tables for layout (use CSS Grid/Flexbox)
+12. ❌ Missing heading hierarchy (skipping levels)
+13. ❌ Too many or too few headings
+14. ❌ Not validating HTML
+15. ❌ Ignoring accessibility
+
+## HTML Conformance Checkers
+
+**Document conformance** means:
+- Follows HTML syntax rules
+- Elements used correctly per content model
+- Required attributes present
+- No deprecated features
+- Accessibility requirements met
+
+**Check with**:
+```bash
+# Command-line validator
+npm install -g html-validate
+html-validate index.html
+```
+
+## Resources
+
+- **WHATWG HTML Living Standard**: https://html.spec.whatwg.org/
+- **MDN Web Docs HTML**: https://developer.mozilla.org/en-US/docs/Web/HTML
+- **W3C HTML Validator**: https://validator.w3.org/
+- **WCAG Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
+- **Can I Use**: https://caniuse.com/ (browser support)
+- **HTML5 Doctor**: http://html5doctor.com/ (element usage guide)
diff --git a/skills/html-coder/references/ui-ux.md b/skills/html-coder/references/ui-ux.md
new file mode 100644
index 000000000..420eabd0a
--- /dev/null
+++ b/skills/html-coder/references/ui-ux.md
@@ -0,0 +1,856 @@
+# HTML UI/UX Best Practices
+
+Comprehensive guide to creating accessible, usable, and user-friendly HTML interfaces.
+
+## Core UI/UX Principles
+
+### 1. Accessibility First
+
+Design for all users, including those with disabilities.
+
+**Screen Reader Support**:
+```html
+<!-- Proper heading hierarchy -->
+<h1>Main Title</h1>
+<h2>Section Title</h2>
+<h3>Subsection Title</h3>
+
+<!-- Descriptive link text -->
+<a href="products.html">View our products</a>
+<!-- NOT: <a href="products.html">Click here</a> -->
+
+<!-- Image alt text -->
+<img src="product.jpg" alt="Red leather handbag with gold chain strap">
+
+<!-- Form labels -->
+<label for="email">Email Address:</label>
+<input type="email" id="email" name="email" required>
+```
+
+**Keyboard Navigation**:
+```html
+<!-- All interactive elements should be keyboard accessible -->
+<button>Click Me</button>
+<a href="#section">Jump to Section</a>
+
+<!-- Custom interactive elements need tabindex and ARIA -->
+<div role="button" tabindex="0" aria-label="Custom button">
+  Click
+</div>
+
+<!-- Skip to main content link -->
+<a href="#main" class="skip-link">Skip to main content</a>
+<main id="main">
+  <!-- Content -->
+</main>
+```
+
+### 2. Semantic HTML
+
+Use meaningful HTML elements that convey structure and purpose.
+
+```html
+<!-- ✅ Good: Semantic structure -->
+<article>
+  <header>
+    <h1>Article Title</h1>
+    <time datetime="2024-01-15">January 15, 2024</time>
+  </header>
+  
+  <p>Article content...</p>
+  
+  <footer>
+    <p>Author: John Doe</p>
+  </footer>
+</article>
+
+<!-- ❌ Bad: Generic divs -->
+<div class="article">
+  <div class="header">
+    <div class="title">Article Title</div>
+    <div class="date">January 15, 2024</div>
+  </div>
+  <div class="content">Article content...</div>
+</div>
+```
+
+### 3. Mobile-First Design
+
+Design for mobile devices first, then enhance for larger screens.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <!-- Essential viewport meta tag -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mobile-First Page</title>
+</head>
+<body>
+  <!-- Touch-friendly button sizes (minimum 44x44px) -->
+  <button style="min-width: 44px; min-height: 44px;">Tap Me</button>
+  
+  <!-- Readable text (minimum 16px) -->
+  <p style="font-size: 16px;">Easy to read on mobile</p>
+  
+  <!-- Mobile-friendly navigation -->
+  <nav>
+    <button id="menuToggle" aria-label="Toggle menu">☰</button>
+    <ul id="menu">
+      <li><a href="#home">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </nav>
+</body>
+</html>
+```
+
+## Form UI/UX Best Practices
+
+### Well-Designed Forms
+
+```html
+<form action="/submit" method="post">
+  <!-- Group related fields -->
+  <fieldset>
+    <legend>Personal Information</legend>
+    
+    <!-- Always associate labels with inputs -->
+    <div class="form-group">
+      <label for="firstName">First Name</label>
+      <input 
+        type="text" 
+        id="firstName" 
+        name="firstName" 
+        required
+        aria-required="true"
+        autocomplete="given-name">
+    </div>
+    
+    <div class="form-group">
+      <label for="email">Email Address</label>
+      <input 
+        type="email" 
+        id="email" 
+        name="email" 
+        required
+        aria-required="true"
+        aria-describedby="emailHelp"
+        autocomplete="email">
+      <small id="emailHelp">We'll never share your email.</small>
+    </div>
+  </fieldset>
+  
+  <!-- Clear call-to-action -->
+  <button type="submit">Submit Application</button>
+  <button type="reset">Clear Form</button>
+</form>
+```
+
+### Input Types for Better UX
+
+```html
+<!-- Use appropriate input types for mobile keyboards -->
+<input type="tel" placeholder="Phone number">
+<input type="email" placeholder="Email address">
+<input type="url" placeholder="Website URL">
+<input type="number" placeholder="Age" min="18" max="120">
+<input type="date" placeholder="Birth date">
+<input type="search" placeholder="Search...">
+```
+
+### Form Validation Feedback
+
+```html
+<form>
+  <div class="form-group">
+    <label for="username">Username</label>
+    <input 
+      type="text" 
+      id="username" 
+      name="username"
+      required
+      minlength="3"
+      maxlength="20"
+      pattern="[a-zA-Z0-9]+"
+      aria-describedby="usernameError">
+    
+    <!-- Error message (shown when invalid) -->
+    <span id="usernameError" class="error" role="alert" style="display: none;">
+      Username must be 3-20 alphanumeric characters
+    </span>
+  </div>
+  
+  <button type="submit">Register</button>
+</form>
+```
+
+### Placeholder vs Label
+
+```html
+<!-- ✅ Good: Label + placeholder -->
+<label for="search">Search</label>
+<input type="search" id="search" placeholder="Enter keyword...">
+
+<!-- ❌ Bad: Placeholder only (inaccessible) -->
+<input type="text" placeholder="Email address">
+```
+
+## Navigation Best Practices
+
+### Clear Navigation Structure
+
+```html
+<header>
+  <nav aria-label="Main navigation">
+    <ul>
+      <li><a href="#home" aria-current="page">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#services">Services</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+### Breadcrumb Navigation
+
+```html
+<nav aria-label="Breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/products">Products</a></li>
+    <li><a href="/products/electronics">Electronics</a></li>
+    <li aria-current="page">Laptops</li>
+  </ol>
+</nav>
+```
+
+### Mobile Navigation
+
+```html
+<!-- Hamburger menu pattern -->
+<header>
+  <button 
+    id="menuToggle" 
+    aria-expanded="false" 
+    aria-controls="mainMenu"
+    aria-label="Toggle navigation menu">
+    ☰
+  </button>
+  
+  <nav id="mainMenu" hidden>
+    <ul>
+      <li><a href="#home">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#services">Services</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+## Content Layout Best Practices
+
+### Visual Hierarchy
+
+```html
+<!-- Clear hierarchy with headings -->
+<article>
+  <h1>Main Topic</h1>
+  
+  <section>
+    <h2>Subtopic A</h2>
+    <p>Content for subtopic A...</p>
+    
+    <h3>Detail A1</h3>
+    <p>Detailed information...</p>
+    
+    <h3>Detail A2</h3>
+    <p>More details...</p>
+  </section>
+  
+  <section>
+    <h2>Subtopic B</h2>
+    <p>Content for subtopic B...</p>
+  </section>
+</article>
+```
+
+### Scannable Content
+
+```html
+<!-- Use lists for scannable content -->
+<article>
+  <h2>Product Features</h2>
+  <ul>
+    <li>Fast performance</li>
+    <li>Easy to use</li>
+    <li>Secure encryption</li>
+    <li>24/7 support</li>
+  </ul>
+  
+  <!-- Use paragraphs for readable content -->
+  <h2>Description</h2>
+  <p>Our product offers the best solution for your needs...</p>
+</article>
+```
+
+### White Space
+
+```html
+<!-- Use semantic elements that naturally create spacing -->
+<section>
+  <h2>Section Title</h2>
+  <p>First paragraph of content.</p>
+  <p>Second paragraph with proper spacing.</p>
+</section>
+
+<section>
+  <h2>Another Section</h2>
+  <p>Content visually separated from previous section.</p>
+</section>
+```
+
+## Interactive Elements
+
+### Buttons vs Links
+
+```html
+<!-- ✅ Button: For actions -->
+<button type="button" onclick="saveData()">Save</button>
+<button type="submit">Submit Form</button>
+
+<!-- ✅ Link: For navigation -->
+<a href="page.html">Go to Page</a>
+<a href="#section">Jump to Section</a>
+
+<!-- ❌ Bad: Link styled as button for actions -->
+<a href="#" onclick="saveData()">Save</a>
+
+<!-- ❌ Bad: Button for navigation -->
+<button onclick="location.href='page.html'">Go to Page</button>
+```
+
+### Call-to-Action (CTA)
+
+```html
+<!-- Clear, action-oriented CTA buttons -->
+<section>
+  <h2>Get Started Today</h2>
+  <p>Join thousands of satisfied customers.</p>
+  
+  <!-- Primary CTA -->
+  <button class="btn-primary">Start Free Trial</button>
+  
+  <!-- Secondary CTA -->
+  <a href="#learn-more" class="btn-secondary">Learn More</a>
+</section>
+```
+
+### Loading States
+
+```html
+<!-- Button with loading state -->
+<button type="submit" id="submitBtn">
+  <span class="btn-text">Submit</span>
+  <span class="btn-spinner" hidden aria-hidden="true">⏳</span>
+</button>
+
+<!-- Loading indicator for content -->
+<div id="content" aria-busy="false" aria-live="polite">
+  <p>Content loading...</p>
+</div>
+```
+
+## Tables for Data
+
+### Accessible Data Tables
+
+```html
+<table>
+  <caption>Quarterly Sales Report 2024</caption>
+  <thead>
+    <tr>
+      <th scope="col">Quarter</th>
+      <th scope="col">Revenue</th>
+      <th scope="col">Growth</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Q1</th>
+      <td>$125,000</td>
+      <td>+12%</td>
+    </tr>
+    <tr>
+      <th scope="row">Q2</th>
+      <td>$140,000</td>
+      <td>+15%</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### Responsive Tables
+
+```html
+<!-- Option 1: Horizontal scroll -->
+<div style="overflow-x: auto;">
+  <table>
+    <!-- Table content -->
+  </table>
+</div>
+
+<!-- Option 2: Stacked layout with data attributes -->
+<table class="responsive-table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Phone</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-label="Name">John Doe</td>
+      <td data-label="Email">john@example.com</td>
+      <td data-label="Phone">(555) 123-4567</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+## Media and Images
+
+### Responsive Images
+
+```html
+<!-- Responsive image with srcset -->
+<img 
+  src="image-800w.jpg"
+  srcset="image-400w.jpg 400w,
+          image-800w.jpg 800w,
+          image-1200w.jpg 1200w"
+  sizes="(max-width: 600px) 400px,
+         (max-width: 1000px) 800px,
+         1200px"
+  alt="Product showcase">
+
+<!-- Art direction with picture -->
+<picture>
+  <source media="(min-width: 800px)" srcset="wide.jpg">
+  <source media="(min-width: 400px)" srcset="medium.jpg">
+  <img src="narrow.jpg" alt="Responsive design example">
+</picture>
+```
+
+### Context-Aware Alt Text
+
+```html
+<!-- ✅ Good: Descriptive alt text -->
+<img src="sunset.jpg" alt="Golden sunset over mountain peaks">
+
+<!-- ✅ Good: Decorative image (empty alt) -->
+<img src="decorative-line.png" alt="" role="presentation">
+
+<!-- ✅ Good: Functional image -->
+<button>
+  <img src="search-icon.svg" alt="Search">
+</button>
+
+<!-- ❌ Bad: Generic alt text -->
+<img src="photo.jpg" alt="Image">
+<img src="pic.jpg" alt="Picture of something">
+```
+
+### Video Best Practices
+
+```html
+<video 
+  controls 
+  preload="metadata"
+  poster="video-poster.jpg"
+  width="640" 
+  height="360">
+  
+  <source src="video.mp4" type="video/mp4">
+  <source src="video.webm" type="video/webm">
+  
+  <!-- Subtitles for accessibility -->
+  <track 
+    kind="subtitles" 
+    src="subtitles-en.vtt" 
+    srclang="en" 
+    label="English"
+    default>
+  
+  <track 
+    kind="subtitles" 
+    src="subtitles-es.vtt" 
+    srclang="es" 
+    label="Español">
+  
+  <!-- Fallback text -->
+  <p>Your browser doesn't support HTML5 video. 
+     <a href="video.mp4">Download the video</a>.</p>
+</video>
+```
+
+## Error Handling and Feedback
+
+### Error Messages
+
+```html
+<!-- Form with error feedback -->
+<form>
+  <div class="form-group" aria-invalid="true">
+    <label for="username">Username</label>
+    <input 
+      type="text" 
+      id="username" 
+      name="username"
+      aria-describedby="usernameError"
+      class="invalid">
+    
+    <div id="usernameError" role="alert" class="error-message">
+      ❌ Username must be at least 3 characters
+    </div>
+  </div>
+  
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Success Messages
+
+```html
+<!-- Success notification -->
+<div role="status" aria-live="polite" class="success-message">
+  ✅ Your changes have been saved successfully!
+</div>
+
+<!-- Success state for forms -->
+<form>
+  <div class="form-group">
+    <label for="email">Email</label>
+    <input 
+      type="email" 
+      id="email" 
+      aria-describedby="emailSuccess"
+      class="valid">
+    
+    <div id="emailSuccess" class="success-feedback">
+      ✓ Valid email address
+    </div>
+  </div>
+</form>
+```
+
+### 404 Error Pages
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>404 - Page Not Found</title>
+</head>
+<body>
+  <main>
+    <h1>404 - Page Not Found</h1>
+    <p>Sorry, the page you're looking for doesn't exist.</p>
+    
+    <!-- Helpful navigation -->
+    <nav aria-label="Error page navigation">
+      <ul>
+        <li><a href="/">Go to Homepage</a></li>
+        <li><a href="/sitemap">View Sitemap</a></li>
+        <li><a href="/search">Search</a></li>
+        <li><a href="/contact">Contact Support</a></li>
+      </ul>
+    </nav>
+  </main>
+</body>
+</html>
+```
+
+## Progress Indicators
+
+### Progress Bar
+
+```html
+<!-- Determinate progress -->
+<label for="uploadProgress">Upload Progress:</label>
+<progress id="uploadProgress" value="70" max="100">70%</progress>
+
+<!-- Indeterminate progress (no value) -->
+<progress>Loading...</progress>
+```
+
+### Step Indicators
+
+```html
+<nav aria-label="Progress">
+  <ol class="steps">
+    <li class="completed" aria-current="false">
+      <span class="step-number">1</span>
+      <span class="step-label">Account Info</span>
+    </li>
+    <li class="active" aria-current="step">
+      <span class="step-number">2</span>
+      <span class="step-label">Payment</span>
+    </li>
+    <li class="pending" aria-current="false">
+      <span class="step-number">3</span>
+      <span class="step-label">Confirmation</span>
+    </li>
+  </ol>
+</nav>
+```
+
+## Modals and Dialogs
+
+### Accessible Modal
+
+```html
+<!-- Trigger button -->
+<button id="openModal" aria-haspopup="dialog">Open Modal</button>
+
+<!-- Modal dialog -->
+<div 
+  id="modal" 
+  role="dialog" 
+  aria-labelledby="modalTitle"
+  aria-describedby="modalDesc"
+  aria-modal="true"
+  hidden>
+  
+  <div class="modal-content">
+    <header>
+      <h2 id="modalTitle">Confirm Action</h2>
+      <button 
+        id="closeModal" 
+        aria-label="Close modal"
+        type="button">✕</button>
+    </header>
+    
+    <div id="modalDesc">
+      <p>Are you sure you want to proceed?</p>
+    </div>
+    
+    <footer>
+      <button type="button" class="btn-primary">Confirm</button>
+      <button type="button" class="btn-secondary">Cancel</button>
+    </footer>
+  </div>
+</div>
+```
+
+## Search UI
+
+### Search Form
+
+```html
+<form role="search" action="/search" method="get">
+  <label for="siteSearch">Search this site:</label>
+  <input 
+    type="search" 
+    id="siteSearch" 
+    name="q"
+    placeholder="Enter keywords..."
+    autocomplete="off"
+    aria-label="Search">
+  
+  <button type="submit">
+    <span class="visually-hidden">Search</span>
+    <svg aria-hidden="true"><!-- Search icon --></svg>
+  </button>
+</form>
+```
+
+### Search Results
+
+```html
+<section aria-label="Search results">
+  <h2>Search Results for "keyword"</h2>
+  <p role="status">Found 42 results in 0.15 seconds</p>
+  
+  <ul class="results-list">
+    <li>
+      <article>
+        <h3><a href="/page1">Result Title 1</a></h3>
+        <p>Result description...</p>
+      </article>
+    </li>
+    <li>
+      <article>
+        <h3><a href="/page2">Result Title 2</a></h3>
+        <p>Result description...</p>
+      </article>
+    </li>
+  </ul>
+  
+  <!-- Pagination -->
+  <nav aria-label="Search results pages">
+    <ul class="pagination">
+      <li><a href="?page=1" aria-label="Page 1" aria-current="page">1</a></li>
+      <li><a href="?page=2" aria-label="Page 2">2</a></li>
+      <li><a href="?page=3" aria-label="Page 3">3</a></li>
+    </ul>
+  </nav>
+</section>
+```
+
+## Cards and Content Blocks
+
+### Card Component
+
+```html
+<article class="card">
+  <img src="product.jpg" alt="Product name" class="card-image">
+  
+  <div class="card-content">
+    <h3 class="card-title">Product Name</h3>
+    <p class="card-description">Brief description of the product...</p>
+    
+    <div class="card-meta">
+      <span class="price">$29.99</span>
+      <span class="rating" aria-label="Rating: 4.5 out of 5 stars">
+        ★★★★☆ 4.5
+      </span>
+    </div>
+  </div>
+  
+  <div class="card-actions">
+    <button class="btn-primary">Add to Cart</button>
+    <button class="btn-secondary">Learn More</button>
+  </div>
+</article>
+```
+
+## Performance Considerations
+
+### Lazy Loading
+
+```html
+<!-- Lazy load images below the fold -->
+<img 
+  src="placeholder.jpg" 
+  data-src="actual-image.jpg"
+  loading="lazy"
+  alt="Description">
+
+<!-- Lazy load iframes -->
+<iframe 
+  src="video.html"
+  loading="lazy"
+  title="Video player"></iframe>
+```
+
+### Critical Content First
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Fast Loading Page</title>
+  
+  <!-- Critical CSS inline -->
+  <style>
+    /* Above-the-fold styles */
+    .hero { /* styles */ }
+  </style>
+  
+  <!-- Defer non-critical CSS -->
+  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
+</head>
+<body>
+  <!-- Critical content first -->
+  <header>
+    <h1>Main Heading</h1>
+  </header>
+  
+  <!-- Non-critical content can load later -->
+  <section>
+    <!-- Content -->
+  </section>
+</body>
+</html>
+```
+
+## Accessibility Checklist
+
+### ✅ Essential Accessibility Features
+
+- [ ] **All images have alt text** (or `alt=""` for decorative)
+- [ ] **Form inputs have labels** (using `<label>` with `for`)
+- [ ] **Headings follow logical hierarchy** (H1 → H2 → H3)
+- [ ] **Links have descriptive text** (not "click here")
+- [ ] **Color contrast meets WCAG AA** (4.5:1 for normal text)
+- [ ] **Keyboard navigation works** (Tab, Enter, Space, Arrows)
+- [ ] **Focus visible on interactive elements**
+- [ ] **ARIA used correctly** (roles, states, properties)
+- [ ] **Skip navigation link provided**
+- [ ] **Language declared** (`<html lang="en">`)
+- [ ] **Viewport meta tag included** (for mobile)
+- [ ] **Forms have proper validation** (with clear error messages)
+- [ ] **Videos have captions/subtitles**
+- [ ] **Tables have proper headers** (`<th scope>`)
+- [ ] **Page title is descriptive**
+
+## Common UX Mistakes to Avoid
+
+### ❌ Don't Do These
+
+1. **Tiny tap targets** (minimum 44x44px for touch)
+2. **Disabled form submit buttons** (show errors instead)
+3. **Poor error messages** ("Error 402" vs "Email format invalid")
+4. **Fake loading spinners** (be honest about loading states)
+5. **Confusing navigation** (inconsistent menu locations)
+6. **Hiding important info** (critical data in tooltips)
+7. **Auto-playing media** (audio/video without user action)
+8. **Captchas that are impossible** (use accessible alternatives)
+9. **Required field only marked with color** (use text/symbol too)
+10. **Removing focus outline** without alternative
+11. **Infinite scroll without pagination** (accessibility issue)
+12. **Modal without keyboard trap** (can't escape with ESC or Tab)
+13. **Links that open in new tab** without warning
+14. **Justifying text** (creates irregular spacing, hard to read)
+15. **Using placeholders as labels** (disappear when typing)
+
+## Best Practices Summary
+
+### ✅ Always Do
+
+1. **Test with keyboard only** (no mouse)
+2. **Test with screen reader** (NVDA, JAWS, VoiceOver)
+3. **Use semantic HTML** (not divs for everything)
+4. **Provide visible focus states**
+5. **Write descriptive error messages**
+6. **Make clickable areas large enough** (44x44px minimum)
+7. **Use proper heading hierarchy**
+8. **Provide text alternatives** for non-text content
+9. **Test on mobile devices**
+10. **Ensure sufficient color contrast**
+11. **Allow users to control motion** (respect `prefers-reduced-motion`)
+12. **Provide clear feedback** for all user actions
+13. **Make forms easy to complete**
+14. **Use loading indicators** for async operations
+15. **Test across different browsers**
+
+## Resources
+
+- **WCAG 2.1 Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
+- **MDN Accessibility**: https://developer.mozilla.org/en-US/docs/Web/Accessibility
+- **A11y Project**: https://www.a11yproject.com/
+- **WebAIM**: https://webaim.org/
+- **Color Contrast Checker**: https://webaim.org/resources/contrastchecker/
+- **WAVE Tool**: https://wave.webaim.org/
+- **axe DevTools**: https://www.deque.com/axe/devtools/
+- **Material Design**: https://material.io/design
+- **Nielsen Norman Group**: https://www.nngroup.com/
+- **Inclusive Components**: https://inclusive-components.design/

From c6761bd042d17afab26055c69bed7ff428b1a816 Mon Sep 17 00:00:00 2001
From: jhauga <johnhaugabook@gmail.com>
Date: Sun, 8 Mar 2026 04:03:58 -0400
Subject: [PATCH 2/6] codespellrc: add brunch and capela

---
 .codespellrc | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.codespellrc b/.codespellrc
index 5632ebee0..a6ae83db5 100644
--- a/.codespellrc
+++ b/.codespellrc
@@ -42,7 +42,11 @@
 
 # aNULL - HTTPS configuration cipher string
 
-ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afterall,deques,dateA,dateB,TE,FillIn,alle,vai,LOD,InOut,pixelX,aNULL
+# brunch - A late morning meal, combining breakfast and lunch
+
+# capela - Portuguese word for chapel
+
+ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afterall,deques,dateA,dateB,TE,FillIn,alle,vai,LOD,InOut,pixelX,aNULL,brunch,capela
 
 # Skip certain files and directories
 

From cf782f7af735019d86c85dbbe97afd7b22f457c9 Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Sun, 8 Mar 2026 04:19:49 -0400
Subject: [PATCH 3/6] Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 skills/html-coder/SKILL.md                | 34 +++++++++++------------
 skills/html-coder/assets/util-500.html    |  2 +-
 skills/html-coder/assets/util-signup.html |  2 +-
 skills/html-coder/references/reference.md |  2 +-
 skills/html-coder/references/standards.md |  2 +-
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/skills/html-coder/SKILL.md b/skills/html-coder/SKILL.md
index 9ab5bdc1e..faff06558 100644
--- a/skills/html-coder/SKILL.md
+++ b/skills/html-coder/SKILL.md
@@ -123,26 +123,26 @@ Pre-built templates for common website types (located in `assets/`):
 - `social-media-template.md` - Social media style layout
 
 ### Technology and Startup
-- `startup-template.md` - Startup landing page
-- `app-splashpage-template.md` - App splash or launch page
-- `app-template.md` - Application showcase site
-- `marketing-template.md` - Marketing or promotional page
-- `analytics-template.md` - Analytics dashboard layout
+- `assets/startup-template.html` - Startup landing page
+- `assets/app-splashpage-template.html` - App splash or launch page
+- `assets/app-template.html` - Application showcase site
+- `assets/marketing-template.html` - Marketing or promotional page
+- `assets/analytics-template.html` - Analytics dashboard layout
 
 ### Travel and Lifestyle
-- `travel-template.md` - Travel blog or guide
-- `travel-agency-template.md` - Travel booking or agency site
-- `rental-template.md` - Rental property or vacation site
-- `home-design-template.md` - Home design or real estate
+- `assets/travel-template.html` - Travel blog or guide
+- `assets/travel-agency-template.html` - Travel booking or agency site
+- `assets/rental-template.html` - Rental property or vacation site
+- `assets/home-design-template.html` - Home design or real estate
 
 ### Utility and Special Purpose
-- `resume-template.md` - Professional resume or CV
-- `under-construction-template.md` - Coming soon or maintenance page
-- `start-page-template.md` - Personal start page or dashboard
-- `parallax-template.md` - Parallax scrolling design
-- `responsive-template.md` - Responsive layout example
-- `email-template.md` - HTML email template
-- `documentation-template.md` - Documentation site layout
+- `assets/resume-template.html` - Professional resume or CV
+- `assets/under-construction-template.html` - Coming soon or maintenance page
+- `assets/start-page-template.html` - Personal start page or dashboard
+- `assets/parallax-template.html` - Parallax scrolling design
+- `assets/responsive-template.html` - Responsive layout example
+- `assets/email-template.html` - HTML email template
+- `assets/documentation-template.html` - Documentation site layout
 
 ## Best Practices
 
@@ -334,4 +334,4 @@ All detailed reference materials are located in the `references/` directory:
 
 ---
 
-**Note**: Reference files and templates will be populated in subsequent setup steps. This skill is designed to grow and evolve with additional templates and examples as needed.
+**Note**: This skill includes a curated set of reference files and templates listed above. It is designed to grow and evolve, and additional templates and examples may be added over time as needed.
diff --git a/skills/html-coder/assets/util-500.html b/skills/html-coder/assets/util-500.html
index f42870694..c4010a965 100644
--- a/skills/html-coder/assets/util-500.html
+++ b/skills/html-coder/assets/util-500.html
@@ -34,7 +34,7 @@ <h3>What can you do?</h3>
             <li><strong>Wait a moment</strong> and try refreshing the page</li>
             <li><strong>Clear your browser cache</strong> and cookies, then try again</li>
             <li><strong>Check our status page</strong> for any ongoing incidents: <a href="https://status.example.com" target="_blank" rel="noopener">status.example.com</a></li>
-            <li><strong>Contact support</strong> if the problem persists: <a href="/contact">support@example.com</a></li>
+            <li><strong>Contact support</strong> if the problem persists: <a href="mailto:support@example.com">support@example.com</a></li>
           </ul>
         </div>
         
diff --git a/skills/html-coder/assets/util-signup.html b/skills/html-coder/assets/util-signup.html
index 98341a3eb..d02f9e1e7 100644
--- a/skills/html-coder/assets/util-signup.html
+++ b/skills/html-coder/assets/util-signup.html
@@ -108,7 +108,7 @@ <h1>Create your account</h1>
           <div class="form-group-checkbox">
             <input type="checkbox" id="terms" name="terms" value="accepted" required>
             <label for="terms">
-              I agree to the <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>
+              I agree to the <a href="/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> and <a href="/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
             </label>
           </div>
           
diff --git a/skills/html-coder/references/reference.md b/skills/html-coder/references/reference.md
index e2b5ffce9..1e3d1fdd9 100644
--- a/skills/html-coder/references/reference.md
+++ b/skills/html-coder/references/reference.md
@@ -200,7 +200,7 @@ Create interactive user interface components.
 |---------|---------|
 | `<details>` | Disclosure widget revealing content when toggled open |
 | `<dialog>` | Dialog box, modal, or interactive component |
-| `<geolocation>` | Interactive control for sharing user's geolocation (experimental) |
+| `navigator.geolocation` | JavaScript Geolocation API for accessing user's location (not an HTML element) |
 | `<summary>` | Summary or label for `<details>` disclosure box |
 
 ## Web Components
diff --git a/skills/html-coder/references/standards.md b/skills/html-coder/references/standards.md
index 41d0a79c6..f4944f652 100644
--- a/skills/html-coder/references/standards.md
+++ b/skills/html-coder/references/standards.md
@@ -224,7 +224,7 @@ Certain attributes are required for validity:
 **ID restrictions**: 
 - Must be unique within document
 - Cannot contain spaces
-- Should start with letter
+- For CSS selector convenience, prefer starting with a letter; IDs starting with digits may require escaping in some selectors
 
 **Class names**:
 - Can have multiple (space-separated)

From 778ae439c693b3a0eab63879dfeca7897b70a020 Mon Sep 17 00:00:00 2001
From: jhauga <johnhaugabook@gmail.com>
Date: Mon, 9 Mar 2026 19:21:50 -0400
Subject: [PATCH 4/6] changes to new skill html-coder

---
 docs/README.skills.md                         |    2 +-
 skills/html-coder/SKILL.md                    |  336 +---
 skills/html-coder/assets/blog-personal.html   |  348 ----
 skills/html-coder/assets/blog-tech.html       |  398 -----
 skills/html-coder/assets/blog-travel.html     |  388 -----
 skills/html-coder/assets/business-agency.html |  411 -----
 .../html-coder/assets/business-company.html   |  347 ----
 .../assets/business-consulting.html           |  380 -----
 .../html-coder/assets/business-services.html  |  385 -----
 .../assets/creative-artist-portfolio.html     |  435 -----
 .../assets/creative-designer-portfolio.html   |  448 ------
 .../creative-photographer-portfolio.html      |  509 ------
 skills/html-coder/assets/food-bakery.html     |  520 ------
 skills/html-coder/assets/food-cafe.html       |  509 ------
 skills/html-coder/assets/food-foodtruck.html  |  624 --------
 skills/html-coder/assets/food-restaurant.html |  392 -----
 .../html-coder/assets/tech-app-landing.html   |  551 -------
 .../html-coder/assets/tech-saas-landing.html  |  439 -----
 .../assets/tech-startup-homepage.html         |  625 --------
 .../assets/travel-destination-guide.html      |  746 ---------
 skills/html-coder/assets/travel-hotel.html    |  681 --------
 .../html-coder/assets/travel-tour-agency.html |  781 ---------
 skills/html-coder/assets/util-404.html        |   61 -
 skills/html-coder/assets/util-500.html        |   60 -
 skills/html-coder/assets/util-about.html      |  313 ----
 skills/html-coder/assets/util-contact.html    |  307 ----
 skills/html-coder/assets/util-faq.html        |  402 -----
 skills/html-coder/assets/util-login.html      |   97 --
 skills/html-coder/assets/util-pricing.html    |  346 ----
 skills/html-coder/assets/util-privacy.html    |  448 ------
 skills/html-coder/assets/util-signup.html     |  143 --
 skills/html-coder/assets/util-terms.html      |  331 ----
 .../html-coder/references/getting-started.md  |  157 --
 ...bal-attributes.md => global-attributes.md} |    0
 .../references/glossary-attributes.md         |  527 ------
 .../html-coder/references/glossary-events.md  |  495 ------
 skills/html-coder/references/glossary-tags.md |  383 -----
 .../html-coder/references/glossary-ui-ux.md   |  461 ------
 skills/html-coder/references/glossary.md      | 1409 +++++++++++++++++
 skills/html-coder/references/how-to.md        |  652 --------
 skills/html-coder/references/quickstart.md    |  273 ----
 skills/html-coder/references/reference.md     |  290 ----
 skills/html-coder/references/ui-ux.md         |  856 ----------
 43 files changed, 1462 insertions(+), 16804 deletions(-)
 delete mode 100644 skills/html-coder/assets/blog-personal.html
 delete mode 100644 skills/html-coder/assets/blog-tech.html
 delete mode 100644 skills/html-coder/assets/blog-travel.html
 delete mode 100644 skills/html-coder/assets/business-agency.html
 delete mode 100644 skills/html-coder/assets/business-company.html
 delete mode 100644 skills/html-coder/assets/business-consulting.html
 delete mode 100644 skills/html-coder/assets/business-services.html
 delete mode 100644 skills/html-coder/assets/creative-artist-portfolio.html
 delete mode 100644 skills/html-coder/assets/creative-designer-portfolio.html
 delete mode 100644 skills/html-coder/assets/creative-photographer-portfolio.html
 delete mode 100644 skills/html-coder/assets/food-bakery.html
 delete mode 100644 skills/html-coder/assets/food-cafe.html
 delete mode 100644 skills/html-coder/assets/food-foodtruck.html
 delete mode 100644 skills/html-coder/assets/food-restaurant.html
 delete mode 100644 skills/html-coder/assets/tech-app-landing.html
 delete mode 100644 skills/html-coder/assets/tech-saas-landing.html
 delete mode 100644 skills/html-coder/assets/tech-startup-homepage.html
 delete mode 100644 skills/html-coder/assets/travel-destination-guide.html
 delete mode 100644 skills/html-coder/assets/travel-hotel.html
 delete mode 100644 skills/html-coder/assets/travel-tour-agency.html
 delete mode 100644 skills/html-coder/assets/util-404.html
 delete mode 100644 skills/html-coder/assets/util-500.html
 delete mode 100644 skills/html-coder/assets/util-about.html
 delete mode 100644 skills/html-coder/assets/util-contact.html
 delete mode 100644 skills/html-coder/assets/util-faq.html
 delete mode 100644 skills/html-coder/assets/util-login.html
 delete mode 100644 skills/html-coder/assets/util-pricing.html
 delete mode 100644 skills/html-coder/assets/util-privacy.html
 delete mode 100644 skills/html-coder/assets/util-signup.html
 delete mode 100644 skills/html-coder/assets/util-terms.html
 delete mode 100644 skills/html-coder/references/getting-started.md
 rename skills/html-coder/references/{glossary-global-attributes.md => global-attributes.md} (100%)
 delete mode 100644 skills/html-coder/references/glossary-attributes.md
 delete mode 100644 skills/html-coder/references/glossary-events.md
 delete mode 100644 skills/html-coder/references/glossary-tags.md
 delete mode 100644 skills/html-coder/references/glossary-ui-ux.md
 create mode 100644 skills/html-coder/references/glossary.md
 delete mode 100644 skills/html-coder/references/how-to.md
 delete mode 100644 skills/html-coder/references/quickstart.md
 delete mode 100644 skills/html-coder/references/reference.md
 delete mode 100644 skills/html-coder/references/ui-ux.md

diff --git a/docs/README.skills.md b/docs/README.skills.md
index c091580d6..8eeaac42e 100644
--- a/docs/README.skills.md
+++ b/docs/README.skills.md
@@ -124,7 +124,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 | [github-copilot-starter](../skills/github-copilot-starter/SKILL.md) | Set up complete GitHub Copilot configuration for a new project based on technology stack | None |
 | [github-issues](../skills/github-issues/SKILL.md) | Create, update, and manage GitHub issues using MCP tools. Use this skill when users want to create bug reports, feature requests, or task issues, update existing issues, add labels/assignees/milestones, set issue fields (dates, priority, custom fields), set issue types, or manage issue workflows. Triggers on requests like "create an issue", "file a bug", "request a feature", "update issue X", "set the priority", "set the start date", or any GitHub issue management task. | `references/dependencies.md`<br />`references/images.md`<br />`references/issue-fields.md`<br />`references/issue-types.md`<br />`references/projects.md`<br />`references/search.md`<br />`references/sub-issues.md`<br />`references/templates.md` |
 | [go-mcp-server-generator](../skills/go-mcp-server-generator/SKILL.md) | Generate a complete Go MCP server project with proper structure, dependencies, and implementation using the official github.com/modelcontextprotocol/go-sdk. | None |
-| [html-coder](../skills/html-coder/SKILL.md) | Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns. | `assets/blog-personal.html`<br />`assets/blog-tech.html`<br />`assets/blog-travel.html`<br />`assets/business-agency.html`<br />`assets/business-company.html`<br />`assets/business-consulting.html`<br />`assets/business-services.html`<br />`assets/creative-artist-portfolio.html`<br />`assets/creative-designer-portfolio.html`<br />`assets/creative-photographer-portfolio.html`<br />`assets/food-bakery.html`<br />`assets/food-cafe.html`<br />`assets/food-foodtruck.html`<br />`assets/food-restaurant.html`<br />`assets/tech-app-landing.html`<br />`assets/tech-saas-landing.html`<br />`assets/tech-startup-homepage.html`<br />`assets/travel-destination-guide.html`<br />`assets/travel-hotel.html`<br />`assets/travel-tour-agency.html`<br />`assets/util-404.html`<br />`assets/util-500.html`<br />`assets/util-about.html`<br />`assets/util-contact.html`<br />`assets/util-faq.html`<br />`assets/util-login.html`<br />`assets/util-pricing.html`<br />`assets/util-privacy.html`<br />`assets/util-signup.html`<br />`assets/util-terms.html`<br />`references/add-css-style.md`<br />`references/add-javascript.md`<br />`references/attributes.md`<br />`references/essentials.md`<br />`references/getting-started.md`<br />`references/glossary-attributes.md`<br />`references/glossary-events.md`<br />`references/glossary-global-attributes.md`<br />`references/glossary-tags.md`<br />`references/glossary-ui-ux.md`<br />`references/how-to.md`<br />`references/quickstart.md`<br />`references/reference.md`<br />`references/standards.md`<br />`references/ui-ux.md` |
+| [html-coder](../skills/html-coder/SKILL.md) | Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns. | `references/add-css-style.md`<br />`references/add-javascript.md`<br />`references/attributes.md`<br />`references/essentials.md`<br />`references/global-attributes.md`<br />`references/glossary.md`<br />`references/standards.md` |
 | [image-manipulation-image-magick](../skills/image-manipulation-image-magick/SKILL.md) | Process and manipulate images using ImageMagick. Supports resizing, format conversion, batch processing, and retrieving image metadata. Use when working with images, creating thumbnails, resizing wallpapers, or performing batch image operations. | None |
 | [import-infrastructure-as-code](../skills/import-infrastructure-as-code/SKILL.md) | Import existing Azure resources into Terraform using Azure CLI discovery and Azure Verified Modules (AVM). Use when asked to reverse-engineer live Azure infrastructure, generate Infrastructure as Code from existing subscriptions/resource groups/resource IDs, map dependencies, derive exact import addresses from downloaded module source, prevent configuration drift, and produce AVM-based Terraform files ready for validation and planning across any Azure resource type. | None |
 | [java-add-graalvm-native-image-support](../skills/java-add-graalvm-native-image-support/SKILL.md) | GraalVM Native Image expert that adds native image support to Java applications, builds the project, analyzes build errors, applies fixes, and iterates until successful compilation using Oracle best practices. | None |
diff --git a/skills/html-coder/SKILL.md b/skills/html-coder/SKILL.md
index faff06558..bca054d83 100644
--- a/skills/html-coder/SKILL.md
+++ b/skills/html-coder/SKILL.md
@@ -1,337 +1,105 @@
 ---
 name: html-coder
 description: 'Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns.'
+collaborators:
+  - make-skill-template
+  - finalize-agent-prompt
 ---
 
 # HTML Coder Skill
 
-Expert skill for professional HTML development, covering everything from basic page structure to advanced HTML5 features, semantic markup, forms, multimedia, and web APIs. This skill provides comprehensive guidance, code templates, and best practices for building modern, accessible, and standards-compliant web content.
+Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.
 
 ## When to Use This Skill
 
-- Creating new HTML documents or web pages
-- Structuring content with semantic HTML elements
-- Building HTML forms with validation and accessibility
-- Adding multimedia content (images, audio, video)
-- Implementing responsive and accessible markup
-- Using HTML5 APIs (Canvas, SVG, Geolocation, Web Storage, etc.)
-- Applying HTML templates for common website types
-- Learning HTML syntax, attributes, and best practices
-- Troubleshooting HTML validation or accessibility issues
-- Understanding HTML standards and specifications
+- Creating HTML documents with semantic structure
+- Building accessible forms with HTML5 validation
+- Implementing responsive markup and multimedia
+- Using HTML5 APIs (Canvas, SVG, Storage, Geolocation)
+- Troubleshooting validation or accessibility issues
 
 ## Core Capabilities
 
-### HTML Fundamentals
-- Document structure and DOCTYPE declarations
-- Semantic elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`)
-- Text formatting and content organization
-- Links, navigation, and page relationships
-- Lists (ordered, unordered, description)
-- Tables with proper structure and accessibility
+- **Semantic HTML**: Document structure, content sections, accessibility-first markup
+- **Forms**: All input types, validation attributes, fieldsets, labels
+- **Media**: Responsive images, audio/video, Canvas, SVG  
+- **HTML5 APIs**: Web Storage, Geolocation, Drag & Drop, Web Workers
+- **Accessibility**: ARIA, screen reader support, WCAG compliance
 
-### Forms and Input
-- Form elements and structure
-- Input types (text, email, number, date, file, etc.)
-- Form validation (client-side and HTML5 validation)
-- Form attributes (required, pattern, min, max, etc.)
-- Labels, fieldsets, and accessibility
-- Form submission and methods
+## Essential References
 
-### Media and Graphics
-- Images with responsive techniques
-- Image maps and hotspots
-- Audio and video elements
-- Canvas for drawing and graphics
-- SVG for vector graphics
-- Picture element and responsive images
-- Background images and optimization
-
-### Advanced Features
-- HTML5 APIs (Geolocation, Web Storage, Web Workers, SSE)
-- Drag and drop functionality
-- Custom data attributes
-- Microdata and structured data
-- CORS for cross-origin resources
-- Iframes and embedded content
-
-### Accessibility and Standards
-- ARIA attributes and roles
-- Semantic markup for screen readers
-- Keyboard navigation support
-- Color contrast and text sizing
-- Alt text and descriptive content
-- WCAG compliance guidelines
-
-## Quick Reference
-
-### Getting Started
-For beginners and quick starts, see:
-- `references/getting-started.md` - First website and basic HTML structure
-- `references/quickstart.md` - HTML cheatsheet for common tasks
-
-### Essential Topics
-For core HTML concepts:
-- `references/essentials.md` - Comments, validation, content categories, responsive images, media formats
-- `references/how-to.md` - Practical guides for specific tasks
+Core documentation for HTML experts:
 - `references/reference.md` - Complete HTML element and attribute reference
-
-### HTML Attributes
-For working with attributes:
-- `references/attributes.md` - Input types, script types, meta names, rel keywords
-- `references/glossary-attributes.md` - Complete attribute reference
-- `references/glossary-global-attributes.md` - Global attributes available on all elements
-
-### Integration with CSS and JavaScript
-- `references/add-css-style.md` - Applying styles and colors to HTML
-- `references/add-javascript.md` - Adding interactivity with JavaScript
-
-### UI/UX Considerations
-- `references/ui-ux.md` - User interface and user experience best practices
-- `references/glossary-ui-ux.md` - UX terminology and concepts
-
-### Complete References
-- `references/glossary-tags.md` - All HTML tags organized by category
-- `references/glossary-events.md` - HTML and DOM event attributes
-- `references/standards.md` - HTML specifications and standards
-
-## HTML Templates
-
-Pre-built templates for common website types (located in `assets/`):
-
-### Business and Professional
-- `group-template.md` - Team or organization website
-- `construction-company-template.md` - Construction or contractor site
-- `retail-store-template.md` - E-commerce or retail storefront
-- `furniture-design-template.md` - Interior design or furniture showcase
-
-### Food and Hospitality
-- `food-service-template.md` - Food service or catering site
-- `restaurant-template.md` - Restaurant website with menu
-- `restaurant-blog-template.md` - Restaurant with blog integration
-- `hotel-template.md` - Hotel or accommodation booking site
-
-### Creative and Portfolio
-- `portfolio-template.md` - Professional portfolio site
-- `graphic-design-portfolio-template.md` - Design portfolio showcase
-- `art-template.md` - Artist or gallery website
-- `gallery-template.md` - Photo or image gallery
-
-### Blog and Content
-- `blog-template.md` - Standard blog layout
-- `style-blog-template.md` - Fashion or lifestyle blog
-- `social-media-template.md` - Social media style layout
-
-### Technology and Startup
-- `assets/startup-template.html` - Startup landing page
-- `assets/app-splashpage-template.html` - App splash or launch page
-- `assets/app-template.html` - Application showcase site
-- `assets/marketing-template.html` - Marketing or promotional page
-- `assets/analytics-template.html` - Analytics dashboard layout
-
-### Travel and Lifestyle
-- `assets/travel-template.html` - Travel blog or guide
-- `assets/travel-agency-template.html` - Travel booking or agency site
-- `assets/rental-template.html` - Rental property or vacation site
-- `assets/home-design-template.html` - Home design or real estate
-
-### Utility and Special Purpose
-- `assets/resume-template.html` - Professional resume or CV
-- `assets/under-construction-template.html` - Coming soon or maintenance page
-- `assets/start-page-template.html` - Personal start page or dashboard
-- `assets/parallax-template.html` - Parallax scrolling design
-- `assets/responsive-template.html` - Responsive layout example
-- `assets/email-template.html` - HTML email template
-- `assets/documentation-template.html` - Documentation site layout
+- `references/essentials.md` - Semantic markup, validation, responsive techniques
+- `references/quickstart.md` - Fast reference cheatsheet
+- `references/standards.md` - HTML5 specifications and standards
 
 ## Best Practices
 
-### Semantic HTML
-Always use semantic elements that convey meaning:
-```html
-<!-- Good: Semantic structure -->
-<article>
-  <header>
-    <h1>Article Title</h1>
-    <time datetime="2026-03-08">March 8, 2026</time>
-  </header>
-  <p>Article content...</p>
-  <footer>
-    <p>Author information</p>
-  </footer>
-</article>
+**Semantic HTML** - Use elements that convey meaning: `<article>`, `<nav>`, `<header>`, `<section>`, `<footer>`, not div soup.
 
-<!-- Avoid: Non-semantic divs everywhere -->
-<div class="article">
-  <div class="header">
-    <div class="title">Article Title</div>
-  </div>
-</div>
-```
+**Accessibility First** - Proper heading hierarchy, alt text, labels with inputs, keyboard navigation, ARIA when needed.
 
-### Accessibility First
-- Use proper heading hierarchy (h1 → h2 → h3)
-- Include alt text for all images
-- Use labels with form inputs
-- Ensure keyboard navigation works
-- Provide ARIA attributes when needed
-- Test with screen readers
+**HTML5 Validation** - Leverage built-in validation (`required`, `pattern`, `type="email"`) before JavaScript.
 
-### Form Validation
-Leverage HTML5 validation before JavaScript:
-```html
-<form>
-  <label for="email">Email:</label>
-  <input 
-    type="email" 
-    id="email" 
-    name="email" 
-    required 
-    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
-    aria-describedby="email-help"
-  >
-  <span id="email-help">Enter a valid email address</span>
-</form>
-```
+**Responsive Images** - Use `<picture>`, srcset, and `loading="lazy"` for performance.
 
-### Responsive Images
-Use modern responsive image techniques:
-```html
-<picture>
-  <source media="(min-width: 1200px)" srcset="large.jpg">
-  <source media="(min-width: 768px)" srcset="medium.jpg">
-  <img src="small.jpg" alt="Description" loading="lazy">
-</picture>
-```
+**Performance** - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.
 
-### Performance Optimization
-- Use `loading="lazy"` for images below the fold
-- Minimize DOM depth and complexity
-- Use semantic elements to reduce div soup
-- Optimize images before adding to HTML
-- Defer non-critical scripts
-- Use modern formats (WebP for images, etc.)
+## Quick Patterns
 
-## Common Patterns
-
-### Page Structure Template
+### Semantic Page Structure
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Page description for SEO">
   <title>Page Title</title>
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <header>
-    <nav><!-- Navigation --></nav>
-  </header>
-  
-  <main>
-    <article><!-- Main content --></article>
-  </main>
-  
-  <aside><!-- Sidebar content --></aside>
-  
-  <footer><!-- Footer content --></footer>
-  
-  <script src="script.js"></script>
+  <header><nav><!-- Navigation --></nav></header>
+  <main><article><!-- Content --></article></main>
+  <aside><!-- Sidebar --></aside>
+  <footer><!-- Footer --></footer>
 </body>
 </html>
 ```
 
-### Accessible Form Pattern
+### Accessible Form
 ```html
 <form method="post" action="/submit">
   <fieldset>
-    <legend>Contact Information</legend>
-    
-    <div class="form-group">
-      <label for="name">Name:</label>
-      <input type="text" id="name" name="name" required>
-    </div>
-    
-    <div class="form-group">
-      <label for="email">Email:</label>
-      <input type="email" id="email" name="email" required>
-    </div>
-    
-    <div class="form-group">
-      <label for="message">Message:</label>
-      <textarea id="message" name="message" rows="5" required></textarea>
-    </div>
-    
+    <legend>Contact</legend>
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email" required 
+           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
     <button type="submit">Send</button>
   </fieldset>
 </form>
 ```
 
-## Troubleshooting
-
-### Validation Errors
-- Use W3C Validator: https://validator.w3.org/
-- Check for unclosed tags
-- Verify attribute syntax
-- Ensure proper nesting of elements
-- Check DOCTYPE declaration
-
-### Accessibility Issues
-- Run Lighthouse audit in Chrome DevTools
-- Test with screen readers (NVDA, JAWS, VoiceOver)
-- Verify keyboard navigation
-- Check color contrast ratios
-- Validate ARIA usage
-
-### Browser Compatibility
-- Check Can I Use: https://caniuse.com/
-- Use feature detection, not browser detection
-- Provide fallbacks for older browsers
-- Test in multiple browsers and devices
-- Use polyfills when necessary
-
-## References
-
-All detailed reference materials are located in the `references/` directory:
-
-- **getting-started.md** - HTML fundamentals and first steps
-- **quickstart.md** - Quick reference cheatsheet
-- **essentials.md** - Core concepts and techniques
-- **how-to.md** - Task-specific guides
-- **reference.md** - Complete element reference
-- **attributes.md** - Attribute types and values
-- **standards.md** - Official HTML specifications
-- **add-css-style.md** - CSS integration guide
-- **add-javascript.md** - JavaScript integration guide
-- **ui-ux.md** - UI/UX best practices
-- **glossary-tags.md** - HTML elements reference
-- **glossary-attributes.md** - HTML attributes reference
-- **glossary-global-attributes.md** - Global attributes reference
-- **glossary-events.md** - Event attributes reference
-- **glossary-ui-ux.md** - UX terminology
-
-## External Resources
+### Responsive Image
+```html
+<picture>
+  <source media="(min-width: 1200px)" srcset="large.webp">
+  <source media="(min-width: 768px)" srcset="medium.webp">
+  <img src="small.jpg" alt="Description" loading="lazy">
+</picture>
+```
 
-### Official Standards
-- WHATWG HTML Living Standard: https://html.spec.whatwg.org/
-- W3C HTML Specifications: https://www.w3.org/TR/html/
-- MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML
+## Troubleshooting
 
-### Learning Resources
-- W3Schools HTML Tutorial: https://www.w3schools.com/html/
-- MDN Learning HTML: https://developer.mozilla.org/en-US/docs/Learn/HTML
+- **Validation**: W3C Validator (validator.w3.org), check unclosed tags, verify nesting
+- **Accessibility**: Lighthouse audit, screen reader testing, keyboard nav, color contrast
+- **Compatibility**: Can I Use (caniuse.com), feature detection, provide fallbacks
 
-### Tools
-- W3C Markup Validator: https://validator.w3.org/
-- HTML5 Outliner: https://gsnedders.html5.org/outliner/
-- Can I Use: https://caniuse.com/
+## Key Standards
 
-### Accessibility
-- WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
-- WAI-ARIA Practices: https://www.w3.org/WAI/ARIA/apg/
+- **WHATWG HTML Living Standard**: https://html.spec.whatwg.org/
+- **WCAG Accessibility**: https://www.w3.org/WAI/WCAG21/quickref/
+- **MDN Web Docs**: https://developer.mozilla.org/en-US/docs/Web/HTML
 
 ---
 
-**Note**: This skill includes a curated set of reference files and templates listed above. It is designed to grow and evolve, and additional templates and examples may be added over time as needed.
+**Collaborates with**: `make-skill-template` for creating new skills, `finalize-agent-prompt` for prompt refinement.
diff --git a/skills/html-coder/assets/blog-personal.html b/skills/html-coder/assets/blog-personal.html
deleted file mode 100644
index 01ce3859c..000000000
--- a/skills/html-coder/assets/blog-personal.html
+++ /dev/null
@@ -1,348 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Life & Style by Emma - Personal blog about lifestyle, wellness, home, and creativity. Join me on my journey.">
-  <title>Life & Style by Emma - Personal Lifestyle Blog</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Life & Style by Emma</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/">Home</a></li>
-          <li><a href="/wellness">Wellness</a></li>
-          <li><a href="/home">Home & Design</a></li>
-          <li><a href="/lifestyle">Lifestyle</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/contact">Contact</a></li>
-        </ul>
-        
-        <button class="search-toggle" aria-label="Toggle search">🔍</button>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <div class="container">
-      <div class="blog-layout">
-        <div class="blog-main">
-          <section class="featured-post">
-            <article class="post-card featured">
-              <a href="/posts/morning-routine-guide" class="post-image-link">
-                <img src="morning-routine.jpg" alt="Serene morning scene with coffee and journal" width="1200" height="600" loading="eager">
-              </a>
-              
-              <div class="post-content">
-                <div class="post-meta">
-                  <a href="/category/wellness" class="post-category">Wellness</a>
-                  <time datetime="2026-03-05">March 5, 2026</time>
-                  <span class="reading-time">8 min read</span>
-                </div>
-                
-                <h1><a href="/posts/morning-routine-guide">My Mindful Morning Routine That Changed Everything</a></h1>
-                
-                <p class="post-excerpt">After years of rushing through chaotic mornings, I finally created a routine that sets the tone for my entire day. Here's what works for me and how you can build your own...</p>
-                
-                <a href="/posts/morning-routine-guide" class="read-more">Continue Reading →</a>
-              </div>
-            </article>
-          </section>
-          
-          <section class="recent-posts">
-            <h2 class="section-title">Recent Posts</h2>
-            
-            <article class="post-card">
-              <a href="/posts/spring-home-refresh" class="post-image-link">
-                <img src="spring-home.jpg" alt="Bright living room with spring decor" width="600" height="400" loading="lazy">
-              </a>
-              
-              <div class="post-content">
-                <div class="post-meta">
-                  <a href="/category/home" class="post-category">Home & Design</a>
-                  <time datetime="2026-03-02">March 2, 2026</time>
-                  <span class="reading-time">6 min read</span>
-                </div>
-                
-                <h3><a href="/posts/spring-home-refresh">5 Easy Ways to Refresh Your Home for Spring</a></h3>
-                
-                <p class="post-excerpt">Spring is the perfect time to breathe new life into your living space. These simple, budget-friendly updates will have your home feeling fresh and renewed.</p>
-                
-                <a href="/posts/spring-home-refresh" class="read-more">Read More →</a>
-              </div>
-            </article>
-            
-            <article class="post-card">
-              <a href="/posts/self-care-Sunday" class="post-image-link">
-                <img src="self-care.jpg" alt="Relaxing bath setup with candles" width="600" height="400" loading="lazy">
-              </a>
-              
-              <div class="post-content">
-                <div class="post-meta">
-                  <a href="/category/wellness" class="post-category">Wellness</a>
-                  <time datetime="2026-02-28">February 28, 2026</time>
-                  <span class="reading-time">5 min read</span>
-                </div>
-                
-                <h3><a href="/posts/self-care-sunday">Self-Care Sunday Rituals I Actually Stick To</a></h3>
-                
-                <p class="post-excerpt">Self-care doesn't have to be elaborate or time-consuming. Here are my favorite Sunday rituals that help me reset and recharge for the week ahead.</p>
-                
-                <a href="/posts/self-care-sunday" class="read-more">Read More →</a>
-              </div>
-            </article>
-            
-            <article class="post-card">
-              <a href="/posts/capsule-wardrobe" class="post-image-link">
-                <img src="wardrobe.jpg" alt="Minimalist closet organization" width="600" height="400" loading="lazy">
-              </a>
-              
-              <div class="post-content">
-                <div class="post-meta">
-                  <a href="/category/lifestyle" class="post-category">Lifestyle</a>
-                  <time datetime="2026-02-25">February 25, 2026</time>
-                  <span class="reading-time">10 min read</span>
-                </div>
-                
-                <h3><a href="/posts/capsule-wardrobe">Building a Capsule Wardrobe: My Complete Guide</a></h3>
-                
-                <p class="post-excerpt">Simplifying my wardrobe was one of the best decisions I've made. Here's how I built a versatile capsule wardrobe with 30 pieces that work for every season.</p>
-                
-                <a href="/posts/capsule-wardrobe" class="read-more">Read More →</a>
-              </div>
-            </article>
-            
-            <article class="post-card">
-              <a href="/posts/journaling-practice" class="post-image-link">
-                <img src="journaling.jpg" alt="Journal and pen on desk" width="600" height="400" loading="lazy">
-              </a>
-              
-              <div class="post-content">
-                <div class="post-meta">
-                  <a href="/category/wellness" class="post-category">Wellness</a>
-                  <time datetime="2026-02-20">February 20, 2026</time>
-                  <span class="reading-time">7 min read</span>
-                </div>
-                
-                <h3><a href="/posts/journaling-practice">How Journaling Transformed My Mental Health</a></h3>
-                
-                <p class="post-excerpt">I was skeptical about journaling until I committed to 30 days. The results surprised me. Here's what I learned and my favorite prompts to get started.</p>
-                
-                <a href="/posts/journaling-practice" class="read-more">Read More →</a>
-              </div>
-            </article>
-            
-            <article class="post-card">
-              <a href="/posts/kitchen-organization" class="post-image-link">
-                <img src="kitchen.jpg" alt="Organized kitchen pantry" width="600" height="400" loading="lazy">
-              </a>
-              
-              <div class="post-content">
-                <div class="post-meta">
-                  <a href="/category/home" class="post-category">Home & Design</a>
-                  <time datetime="2026-02-15">February 15, 2026</time>
-                  <span class="reading-time">9 min read</span>
-                </div>
-                
-                <h3><a href="/posts/kitchen-organization">Kitchen Organization Tips That Actually Work</a></h3>
-                
-                <p class="post-excerpt">After years of kitchen chaos, I finally found organization systems that stick. These practical tips will help you create a functional, beautiful kitchen.</p>
-                
-                <a href="/posts/kitchen-organization" class="read-more">Read More →</a>
-              </div>
-            </article>
-            
-            <article class="post-card">
-              <a href="/posts/slow-living" class="post-image-link">
-                <img src="slow-living.jpg" alt="Peaceful outdoor scene" width="600" height="400" loading="lazy">
-              </a>
-              
-              <div class="post-content">
-                <div class="post-meta">
-                  <a href="/category/lifestyle" class="post-category">Lifestyle</a>
-                  <time datetime="2026-02-10">February 10, 2026</time>
-                  <span class="reading-time">6 min read</span>
-                </div>
-                
-                <h3><a href="/posts/slow-living">Embracing Slow Living in a Fast-Paced World</a></h3>
-                
-                <p class="post-excerpt">Slowing down changed my perspective on everything. Here's how I'm practicing slow living and finding more joy in everyday moments.</p>
-                
-                <a href="/posts/slow-living" class="read-more">Read More →</a>
-              </div>
-            </article>
-          </section>
-          
-          <nav class="pagination" aria-label="Pagination">
-            <span class="page-info">Page 1 of 5</span>
-            <a href="/page/2" class="btn btn-outline">Next Page →</a>
-          </nav>
-        </div>
-        
-        <aside class="sidebar">
-          <section class="widget about-widget">
-            <img src="emma-profile.jpg" alt="Emma smiling outdoors" width="150" height="150" loading="lazy" class="author-photo">
-            <h2>Hi, I'm Emma!</h2>
-            <p>Welcome to my corner of the internet where I share thoughts on wellness, creating a beautiful home, and living intentionally. I'm so glad you're here!</p>
-            <a href="/about" class="btn btn-outline btn-small">More About Me</a>
-          </section>
-          
-          <section class="widget search-widget">
-            <h2>Search</h2>
-            <form action="/search" method="GET" role="search">
-              <label for="search-input" class="visually-hidden">Search the blog</label>
-              <div class="search-box">
-                <input type="search" id="search-input" name="q" placeholder="Search posts..." required>
-                <button type="submit" aria-label="Search">🔍</button>
-              </div>
-            </form>
-          </section>
-          
-          <section class="widget newsletter-widget">
-            <h2>Join the Community</h2>
-            <p>Get weekly posts delivered to your inbox plus exclusive content just for subscribers.</p>
-            
-            <form action="/subscribe" method="POST" class="newsletter-form">
-              <label for="newsletter-email" class="visually-hidden">Email address</label>
-              <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
-              <button type="submit" class="btn btn-primary btn-small">Subscribe</button>
-            </form>
-            
-            <p class="privacy-note"><small>No spam, ever. Unsubscribe anytime.</small></p>
-          </section>
-          
-          <section class="widget categories-widget">
-            <h2>Categories</h2>
-            <ul>
-              <li><a href="/category/wellness">Wellness <span class="count">(24)</span></a></li>
-              <li><a href="/category/home">Home & Design <span class="count">(18)</span></a></li>
-              <li><a href="/category/lifestyle">Lifestyle <span class="count">(31)</span></a></li>
-              <li><a href="/category/recipes">Recipes <span class="count">(15)</span></a></li>
-              <li><a href="/category/travel">Travel <span class="count">(12)</span></a></li>
-              <li><a href="/category/creativity">Creativity <span class="count">(9)</span></a></li>
-            </ul>
-          </section>
-          
-          <section class="widget popular-posts-widget">
-            <h2>Popular Posts</h2>
-            <ul class="popular-posts-list">
-              <li>
-                <a href="/posts/morning-routine-guide">
-                  <img src="morning-routine-thumb.jpg" alt="" width="80" height="80" loading="lazy">
-                  <span>My Mindful Morning Routine That Changed Everything</span>
-                </a>
-              </li>
-              <li>
-                <a href="/posts/capsule-wardrobe">
-                  <img src="wardrobe-thumb.jpg" alt="" width="80" height="80" loading="lazy">
-                  <span>Building a Capsule Wardrobe: My Complete Guide</span>
-                </a>
-              </li>
-              <li>
-                <a href="/posts/slow-living">
-                  <img src="slow-living-thumb.jpg" alt="" width="80" height="80" loading="lazy">
-                  <span>Embracing Slow Living in a Fast-Paced World</span>
-                </a>
-              </li>
-            </ul>
-          </section>
-          
-          <section class="widget instagram-widget">
-            <h2>Follow on Instagram</h2>
-            <p class="instagram-handle">@lifeandstylebyemma</p>
-            
-            <div class="instagram-grid">
-              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
-                <img src="insta-1.jpg" alt="" width="100" height="100" loading="lazy">
-              </a>
-              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
-                <img src="insta-2.jpg" alt="" width="100" height="100" loading="lazy">
-              </a>
-              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
-                <img src="insta-3.jpg" alt="" width="100" height="100" loading="lazy">
-              </a>
-              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
-                <img src="insta-4.jpg" alt="" width="100" height="100" loading="lazy">
-              </a>
-              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
-                <img src="insta-5.jpg" alt="" width="100" height="100" loading="lazy">
-              </a>
-              <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram post">
-                <img src="insta-6.jpg" alt="" width="100" height="100" loading="lazy">
-              </a>
-            </div>
-          </section>
-          
-          <section class="widget tags-widget">
-            <h2>Popular Tags</h2>
-            <div class="tag-cloud">
-              <a href="/tag/minimalism" class="tag">minimalism</a>
-              <a href="/tag/self-care" class="tag">self-care</a>
-              <a href="/tag/organization" class="tag">organization</a>
-              <a href="/tag/mindfulness" class="tag">mindfulness</a>
-              <a href="/tag/home-decor" class="tag">home decor</a>
-              <a href="/tag/wellness" class="tag">wellness</a>
-              <a href="/tag/intentional-living" class="tag">intentional living</a>
-              <a href="/tag/productivity" class="tag">productivity</a>
-            </div>
-          </section>
-        </aside>
-      </div>
-    </div>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Life & Style by Emma</h3>
-          <p>A personal blog about wellness, home, and living with intention.</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/lifeandstylebyemma" aria-label="Instagram">Instagram</a>
-            <a href="https://pinterest.com/lifeandstylebyemma" aria-label="Pinterest">Pinterest</a>
-            <a href="https://facebook.com/lifeandstylebyemma" aria-label="Facebook">Facebook</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Categories</h3>
-          <ul>
-            <li><a href="/category/wellness">Wellness</a></li>
-            <li><a href="/category/home">Home & Design</a></li>
-            <li><a href="/category/lifestyle">Lifestyle</a></li>
-            <li><a href="/category/recipes">Recipes</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>More</h3>
-          <ul>
-            <li><a href="/about">About Me</a></li>
-            <li><a href="/contact">Contact</a></li>
-            <li><a href="/shop">Shop My Favorites</a></li>
-            <li><a href="/resources">Free Resources</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Life & Style by Emma. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/disclosure">Disclosure</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/blog-tech.html b/skills/html-coder/assets/blog-tech.html
deleted file mode 100644
index bb8189547..000000000
--- a/skills/html-coder/assets/blog-tech.html
+++ /dev/null
@@ -1,398 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="DevBytes - Web development tutorials, programming tips, and tech insights. Learn modern JavaScript, React, Node.js, and more.">
-  <title>DevBytes - Web Development Blog & Tutorials</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-  <link rel="stylesheet" href="prism.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">&lt;DevBytes /&gt;</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/">Blog</a></li>
-          <li><a href="/tutorials">Tutorials</a></li>
-          <li><a href="/javascript">JavaScript</a></li>
-          <li><a href="/react">React</a></li>
-          <li><a href="/nodejs">Node.js</a></li>
-          <li><a href="/about">About</a></li>
-        </ul>
-        
-        <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <div class="container">
-      <div class="blog-layout">
-        <div class="blog-main">
-          <article class="featured-post">
-            <div class="post-header">
-              <div class="post-meta">
-                <a href="/category/javascript" class="post-category">JavaScript</a>
-                <time datetime="2026-03-07">March 7, 2026</time>
-                <span class="reading-time">12 min read</span>
-              </div>
-              
-              <h1>Understanding JavaScript Closures: A Complete Guide</h1>
-              
-              <div class="author-info">
-                <img src="author-avatar.jpg" alt="" width="48" height="48" loading="eager">
-                <div class="author-details">
-                  <p class="author-name">By <a href="/author/alex">Alex Johnson</a></p>
-                  <p class="author-title">Senior Developer & Educator</p>
-                </div>
-              </div>
-            </div>
-            
-            <img src="closures-hero.jpg" alt="JavaScript code illustration" width="1200" height="600" loading="eager" class="post-featured-image">
-            
-            <div class="post-content">
-              <p class="lead">Closures are one of JavaScript's most powerful features, yet they often confuse developers. In this comprehensive guide, we'll demystify closures and show you practical ways to use them in your code.</p>
-              
-              <h2>What is a Closure?</h2>
-              
-              <p>A closure is the combination of a function bundled together with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function.</p>
-              
-              <p>Here's a simple example:</p>
-              
-              <pre><code class="language-javascript">function outer() {
-  const message = 'Hello';
-  
-  function inner() {
-    console.log(message); // Accesses 'message' from outer scope
-  }
-  
-  return inner;
-}
-
-const myFunction = outer();
-myFunction(); // Logs: "Hello"</code></pre>
-              
-              <p>Even though <code>outer()</code> has finished executing, <code>inner()</code> still has access to <code>message</code> because of closure.</p>
-              
-              <h2>Why Are Closures Useful?</h2>
-              
-              <p>Closures enable several important patterns in JavaScript:</p>
-              
-              <ol>
-                <li><strong>Data Privacy:</strong> Create private variables that can't be accessed from outside</li>
-                <li><strong>Function Factories:</strong> Generate specialized functions based on parameters</li>
-                <li><strong>Event Handlers:</strong> Maintain state across asynchronous operations</li>
-                <li><strong>Module Pattern:</strong> Organize code into reusable modules</li>
-              </ol>
-              
-              <h3>Practical Example: Counter</h3>
-              
-              <pre><code class="language-javascript">function createCounter() {
-  let count = 0;
-  
-  return {
-    increment() {
-      count++;
-      return count;
-    },
-    decrement() {
-      count--;
-      return count;
-    },
-    getCount() {
-      return count;
-    }
-  };
-}
-
-const counter = createCounter();
-console.log(counter.increment()); // 1
-console.log(counter.increment()); // 2
-console.log(counter.getCount());  // 2
-console.log(counter.count);       // undefined - private!</code></pre>
-              
-              <p>The <code>count</code> variable is private—it can only be modified through the provided methods.</p>
-              
-              <h2>Common Pitfalls</h2>
-              
-              <p>Closures can cause memory leaks if not used carefully. Always be mindful of what references you're maintaining:</p>
-              
-              <pre><code class="language-javascript">// ❌ Potential memory leak
-function attachEventListeners() {
-  const hugeData = new Array(1000000).fill('data');
-  
-  document.getElementById('button').addEventListener('click', () => {
-    console.log(hugeData[0]); // Keeps entire array in memory!
-  });
-}
-
-// ✅ Better approach
-function attachEventListeners() {
-  const hugeData = new Array(1000000).fill('data');
-  const firstItem = hugeData[0]; // Only keep what you need
-  
-  document.getElementById('button').addEventListener('click', () => {
-    console.log(firstItem);
-  });
-}</code></pre>
-              
-              <h2>Conclusion</h2>
-              
-              <p>Closures are fundamental to JavaScript and enable powerful programming patterns. Understanding how they work will make you a better developer and help you write more elegant, maintainable code.</p>
-              
-              <p>Want to practice? Try building a simple module system or implementing your own debounce function using closures!</p>
-            </div>
-            
-            <footer class="post-footer">
-              <div class="post-tags">
-                <strong>Tags:</strong>
-                <a href="/tag/javascript" class="tag">JavaScript</a>
-                <a href="/tag/closures" class="tag">Closures</a>
-                <a href="/tag/fundamentals" class="tag">Fundamentals</a>
-                <a href="/tag/tutorial" class="tag">Tutorial</a>
-              </div>
-              
-              <div class="post-share">
-                <strong>Share:</strong>
-                <a href="https://twitter.com/intent/tweet?url=..." class="share-link" aria-label="Share on Twitter">Twitter</a>
-                <a href="https://www.linkedin.com/sharing/share-offsite/?url=..." class="share-link" aria-label="Share on LinkedIn">LinkedIn</a>
-                <a href="https://news.ycombinator.com/submitlink?u=..." class="share-link" aria-label="Share on Hacker News">HN</a>
-              </div>
-            </footer>
-          </article>
-          
-          <section class="recent-posts">
-            <h2>More from DevBytes</h2>
-            
-            <article class="post-card">
-              <div class="post-card-content">
-                <div class="post-meta">
-                  <a href="/category/react" class="post-category">React</a>
-                  <time datetime="2026-03-05">March 5, 2026</time>
-                </div>
-                
-                <h3><a href="/posts/react-hooks-patterns">5 React Hooks Patterns You Should Know</a></h3>
-                
-                <p>Level up your React game with these essential custom hooks patterns that solve common problems elegantly.</p>
-                
-                <a href="/posts/react-hooks-patterns" class="read-more">Read Post →</a>
-              </div>
-            </article>
-            
-            <article class="post-card">
-              <div class="post-card-content">
-                <div class="post-meta">
-                  <a href="/category/nodejs" class="post-category">Node.js</a>
-                  <time datetime="2026-03-03">March 3, 2026</time>
-                </div>
-                
-                <h3><a href="/posts/nodejs-authentication">Building Secure Authentication in Node.js</a></h3>
-                
-                <p>A comprehensive guide to implementing JWT authentication with refresh tokens, password hashing, and security best practices.</p>
-                
-                <a href="/posts/nodejs-authentication" class="read-more">Read Post →</a>
-              </div>
-            </article>
-            
-            <article class="post-card">
-              <div class="post-card-content">
-                <div class="post-meta">
-                  <a href="/category/css" class="post-category">CSS</a>
-                  <time datetime="2026-03-01">March 1, 2026</time>
-                </div>
-                
-                <h3><a href="/posts/css-grid-mastery">CSS Grid: From Basics to Advanced Layouts</a></h3>
-                
-                <p>Master CSS Grid with practical examples ranging from simple two-column layouts to complex responsive designs.</p>
-                
-                <a href="/posts/css-grid-mastery" class="read-more">Read Post →</a>
-              </div>
-            </article>
-          </section>
-        </div>
-        
-        <aside class="sidebar">
-          <section class="widget search-widget">
-            <h2>Search</h2>
-            <form action="/search" method="GET" role="search">
-              <label for="search-input" class="visually-hidden">Search posts</label>
-              <div class="search-box">
-                <input type="search" id="search-input" name="q" placeholder="Search tutorials..." required>
-                <button type="submit" aria-label="Search">🔍</button>
-              </div>
-            </form>
-          </section>
-          
-          <section class="widget newsletter-widget">
-            <h2>Weekly Newsletter</h2>
-            <p>Get the latest tutorials and web dev tips delivered to your inbox every Monday.</p>
-            
-            <form action="/subscribe" method="POST" class="newsletter-form">
-              <label for="newsletter-email" class="visually-hidden">Email address</label>
-              <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
-              <button type="submit" class="btn btn-primary">Subscribe</button>
-            </form>
-            
-            <p class="subscriber-count">Join 12,500+ developers</p>
-          </section>
-          
-          <section class="widget topics-widget">
-            <h2>Browse by Topic</h2>
-            <ul>
-              <li><a href="/category/javascript">JavaScript</a> <span class="count">(45)</span></li>
-              <li><a href="/category/react">React</a> <span class="count">(32)</span></li>
-              <li><a href="/category/nodejs">Node.js</a> <span class="count">(28)</span></li>
-              <li><a href="/category/typescript">TypeScript</a> <span class="count">(21)</span></li>
-              <li><a href="/category/css">CSS</a> <span class="count">(18)</span></li>
-              <li><a href="/category/performance">Performance</a> <span class="count">(15)</span></li>
-              <li><a href="/category/testing">Testing</a> <span class="count">(12)</span></li>
-              <li><a href="/category/devops">DevOps</a> <span class="count">(10)</span></li>
-            </ul>
-          </section>
-          
-          <section class="widget popular-widget">
-            <h2>Most Popular</h2>
-            <ol class="popular-list">
-              <li>
-                <a href="/posts/async-await-guide">
-                  <span class="popular-title">Mastering Async/Await in JavaScript</span>
-                  <span class="popular-meta">42K views</span>
-                </a>
-              </li>
-              <li>
-                <a href="/posts/react-performance">
-                  <span class="popular-title">React Performance Optimization</span>
-                  <span class="popular-meta">38K views</span>
-                </a>
-              </li>
-              <li>
-                <a href="/posts/git-workflow">
-                  <span class="popular-title">Git Workflow Best Practices</span>
-                  <span class="popular-meta">35K views</span>
-                </a>
-              </li>
-              <li>
-                <a href="/posts/array-methods">
-                  <span class="popular-title">JavaScript Array Methods Cheat Sheet</span>
-                  <span class="popular-meta">31K views</span>
-                </a>
-              </li>
-            </ol>
-          </section>
-          
-          <section class="widget series-widget">
-            <h2>Tutorial Series</h2>
-            <ul class="series-list">
-              <li>
-                <a href="/series/javascript-fundamentals">
-                  <strong>JavaScript Fundamentals</strong>
-                  <span>12 parts</span>
-                </a>
-              </li>
-              <li>
-                <a href="/series/react-from-scratch">
-                  <strong>React from Scratch</strong>
-                  <span>8 parts</span>
-                </a>
-              </li>
-              <li>
-                <a href="/series/nodejs-backend">
-                  <strong>Building APIs with Node.js</strong>
-                  <span>10 parts</span>
-                </a>
-              </li>
-            </ul>
-          </section>
-          
-          <section class="widget resources-widget">
-            <h2>Free Resources</h2>
-            <ul>
-              <li><a href="/cheatsheets">Cheat Sheets</a></li>
-              <li><a href="/snippets">Code Snippets</a></li>
-              <li><a href="/tools">Developer Tools</a></li>
-              <li><a href="/books">Recommended Books</a></li>
-            </ul>
-          </section>
-          
-          <section class="widget ad-widget">
-            <div class="ad-placeholder">
-              <p class="ad-label">Sponsored</p>
-              <div class="ad-content">
-                <h3>Learn Full-Stack Development</h3>
-                <p>Master modern web development with our comprehensive course.</p>
-                <a href="/courses" class="btn btn-small">Learn More</a>
-              </div>
-            </div>
-          </section>
-        </aside>
-      </div>
-    </div>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>&lt;DevBytes /&gt;</h3>
-          <p>Practical web development tutorials and insights for modern developers.</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://twitter.com/devbytes" aria-label="Twitter">Twitter</a>
-            <a href="https://github.com/devbytes" aria-label="GitHub">GitHub</a>
-            <a href="https://dev.to/devbytes" aria-label="DEV">DEV.to</a>
-            <a href="/rss" aria-label="RSS Feed">RSS</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Content</h3>
-          <ul>
-            <li><a href="/tutorials">All Tutorials</a></li>
-            <li><a href="/series">Tutorial Series</a></li>
-            <li><a href="/cheatsheets">Cheat Sheets</a></li>
-            <li><a href="/snippets">Code Snippets</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Community</h3>
-          <ul>
-            <li><a href="/discord">Join Discord</a></li>
-            <li><a href="/newsletter">Newsletter</a></li>
-            <li><a href="/contribute">Write for Us</a></li>
-            <li><a href="/sponsor">Sponsor</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>More</h3>
-          <ul>
-            <li><a href="/about">About</a></li>
-            <li><a href="/contact">Contact</a></li>
-            <li><a href="/advertise">Advertise</a></li>
-            <li><a href="/uses">Uses</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 DevBytes. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-          <a href="/code-of-conduct">Code of Conduct</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="prism.js" defer></script>
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/blog-travel.html b/skills/html-coder/assets/blog-travel.html
deleted file mode 100644
index 3c77e8cbe..000000000
--- a/skills/html-coder/assets/blog-travel.html
+++ /dev/null
@@ -1,388 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Wanderlust Chronicles - Travel blog sharing adventures, destination guides, and tips for exploring the world.">
-  <title>Wanderlust Chronicles - Travel Blog & Adventure Stories</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">✈️ Wanderlust Chronicles</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/">Home</a></li>
-          <li><a href="/destinations">Destinations</a></li>
-          <li><a href="/guides">Travel Guides</a></li>
-          <li><a href="/tips">Travel Tips</a></li>
-          <li><a href="/photography">Photography</a></li>
-          <li><a href="/about">About</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-travel">
-      <img src="hero-travel.jpg" alt="Mountain landscape at sunset" width="1920" height="600" loading="eager" class="hero-image">
-      <div class="hero-overlay">
-        <div class="container">
-          <h1>Explore the World with Wanderlust Chronicles</h1>
-          <p>Travel stories, destination guides, and practical tips for adventure seekers</p>
-        </div>
-      </div>
-    </section>
-    
-    <div class="container">
-      <div class="travel-layout">
-        <div class="travel-main">
-          <article class="featured-post">
-            <div class="post-image-container">
-              <img src="japan-featured.jpg" alt="Traditional Japanese temple with cherry blossoms" width="1000" height="600" loading="eager">
-              <div class="post-badge">Featured</div>
-            </div>
-            
-            <div class="post-content">
-              <div class="post-meta">
-                <a href="/destination/japan" class="post-location">🇯🇵 Japan</a>
-                <time datetime="2026-03-06">March 6, 2026</time>
-                <span class="reading-time">15 min read</span>
-              </div>
-              
-              <h2><a href="/posts/japan-cherry-blossom-guide">The Ultimate Guide to Cherry Blossom Season in Japan</a></h2>
-              
-              <p class="post-excerpt">Cherry blossom season in Japan is magical, but timing is everything. After visiting during sakura season three times, here's everything you need to know to plan the perfect trip—from best viewing spots to crowded tourist traps to avoid.</p>
-              
-              <div class="post-highlights">
-                <h3>In this guide:</h3>
-                <ul>
-                  <li>Best cities and viewing spots for cherry blossoms</li>
-                  <li>When to visit (peak bloom forecasts)</li>
-                  <li>Budget breakdown and money-saving tips</li>
-                  <li>Cultural etiquette and hanami traditions</li>
-                  <li>Photography tips for capturing perfect sakura shots</li>
-                </ul>
-              </div>
-              
-              <a href="/posts/japan-cherry-blossom-guide" class="btn btn-primary">Read Full Guide</a>
-            </div>
-          </article>
-          
-          <section class="recent-posts">
-            <h2>Recent Adventures</h2>
-            
-            <div class="posts-grid">
-              <article class="post-card">
-                <a href="/posts/patagonia-trek" class="post-image-link">
-                  <img src="patagonia.jpg" alt="Hiking trail in Patagonia mountains" width="400" height="300" loading="lazy">
-                  <span class="post-duration">7 Days</span>
-                </a>
-                
-                <div class="post-content">
-                  <div class="post-meta">
-                    <a href="/destination/argentina" class="post-location">🇦🇷 Argentina</a>
-                    <time datetime="2026-03-03">March 3, 2026</time>
-                  </div>
-                  
-                  <h3><a href="/posts/patagonia-trek">Trekking the W Circuit in Torres del Paine</a></h3>
-                  
-                  <p>My 7-day journey through one of the world's most spectacular hiking destinations—complete with gear recommendations and trail conditions.</p>
-                  
-                  <a href="/posts/patagonia-trek" class="read-more">Read Story →</a>
-                </div>
-              </article>
-              
-              <article class="post-card">
-                <a href="/posts/morocco-markets" class="post-image-link">
-                  <img src="morocco.jpg" alt="Colorful Moroccan souks and markets" width="400" height="300" loading="lazy">
-                  <span class="post-duration">10 Days</span>
-                </a>
-                
-                <div class="post-content">
-                  <div class="post-meta">
-                    <a href="/destination/morocco" class="post-location">🇲🇦 Morocco</a>
-                    <time datetime="2026-02-28">February 28, 2026</time>
-                  </div>
-                  
-                  <h3><a href="/posts/morocco-markets">Getting Lost in Marrakech's Medina</a></h3>
-                  
-                  <p>A sensory overload in the best way possible—navigating souks, haggling for treasures, and discovering hidden riads in Morocco's most vibrant city.</p>
-                  
-                  <a href="/posts/morocco-markets" class="read-more">Read Story →</a>
-                </div>
-              </article>
-              
-              <article class="post-card">
-                <a href="/posts/iceland-road-trip" class="post-image-link">
-                  <img src="iceland.jpg" alt="Iceland waterfall landscape" width="400" height="300" loading="lazy">
-                  <span class="post-duration">14 Days</span>
-                </a>
-                
-                <div class="post-content">
-                  <div class="post-meta">
-                    <a href="/destination/iceland" class="post-location">🇮🇸 Iceland</a>
-                    <time datetime="2026-02-25">February 25, 2026</time>
-                  </div>
-                  
-                  <h3><a href="/posts/iceland-road-trip">Ring Road Adventure: 2 Weeks Around Iceland</a></h3>
-                  
-                  <p>The ultimate Iceland road trip itinerary with waterfalls, glaciers, hot springs, and the Northern Lights—plus practical driving tips.</p>
-                  
-                  <a href="/posts/iceland-road-trip" class="read-more">Read Story →</a>
-                </div>
-              </article>
-              
-              <article class="post-card">
-                <a href="/posts/bali-digital-nomad" class="post-image-link">
-                  <img src="bali.jpg" alt="Bali rice terraces" width="400" height="300" loading="lazy">
-                  <span class="post-duration">30 Days</span>
-                </a>
-                
-                <div class="post-content">
-                  <div class="post-meta">
-                    <a href="/destination/indonesia" class="post-location">🇮🇩 Indonesia</a>
-                    <time datetime="2026-02-20">February 20, 2026</time>
-                  </div>
-                  
-                  <h3><a href="/posts/bali-digital-nomad">A Month as a Digital Nomad in Bali</a></h3>
-                  
-                  <p>Living and working remotely in Ubud—coworking spaces, accommodation tips, cost of living, and balancing work with exploration.</p>
-                  
-                  <a href="/posts/bali-digital-nomad" class="read-more">Read Story →</a>
-                </div>
-              </article>
-              
-              <article class="post-card">
-                <a href="/posts/camino-de-santiago" class="post-image-link">
-                  <img src="camino.jpg" alt="Pilgrimage path in Spain" width="400" height="300" loading="lazy">
-                  <span class="post-duration">21 Days</span>
-                </a>
-                
-                <div class="post-content">
-                  <div class="post-meta">
-                    <a href="/destination/spain" class="post-location">🇪🇸 Spain</a>
-                    <time datetime="2026-02-15">February 15, 2026</time>
-                  </div>
-                  
-                  <h3><a href="/posts/camino-de-santiago">Walking the Camino de Santiago: A 500km Journey</a></h3>
-                  
-                  <p>Three weeks of walking across Spain taught me more than any guidebook could—lessons from the ancient pilgrimage route.</p>
-                  
-                  <a href="/posts/camino-de-santiago" class="read-more">Read Story →</a>
-                </div>
-              </article>
-              
-              <article class="post-card">
-                <a href="/posts/new-zealand-south-island" class="post-image-link">
-                  <img src="new-zealand.jpg" alt="New Zealand mountain vista" width="400" height="300" loading="lazy">
-                  <span class="post-duration">12 Days</span>
-                </a>
-                
-                <div class="post-content">
-                  <div class="post-meta">
-                    <a href="/destination/new-zealand" class="post-location">🇳🇿 New Zealand</a>
-                    <time datetime="2026-02-10">February 10, 2026</time>
-                  </div>
-                  
-                  <h3><a href="/posts/new-zealand-south-island">South Island Road Trip: Queenstown to Christchurch</a></h3>
-                  
-                  <p>Adventure capital to alpine beauty—exploring New Zealand's stunning South Island with stops for hiking, stargazing, and adrenaline activities.</p>
-                  
-                  <a href="/posts/new-zealand-south-island" class="read-more">Read Story →</a>
-                </div>
-              </article>
-            </div>
-          </section>
-          
-          <section class="destinations-map">
-            <h2>Where I've Been</h2>
-            <div class="map-container">
-              <img src="world-map.jpg" alt="World map showing visited destinations" width="1000" height="500" loading="lazy">
-              <p class="map-stats">
-                <strong>42 countries</strong> visited across <strong>6 continents</strong>
-              </p>
-            </div>
-          </section>
-          
-          <nav class="pagination" aria-label="Pagination">
-            <span class="page-info">Page 1 of 8</span>
-            <a href="/page/2" class="btn btn-outline">Older Posts →</a>
-          </nav>
-        </div>
-        
-        <aside class="sidebar">
-          <section class="widget about-widget">
-            <img src="avatar.jpg" alt="Sophia exploring outdoors" width="120" height="120" loading="lazy" class="avatar-circle">
-            <h2>Hi, I'm Sophia!</h2>
-            <p>Full-time traveler sharing stories and practical advice from the road. I've been exploring the world since 2020 and haven't looked back.</p>
-            <a href="/about" class="btn btn-outline btn-small">My Story</a>
-          </section>
-          
-          <section class="widget newsletter-widget">
-            <h2>📬 Travel Newsletter</h2>
-            <p>Get new posts, destination guides, and travel tips delivered weekly.</p>
-            
-            <form action="/subscribe" method="POST" class="newsletter-form">
-              <label for="newsletter-email" class="visually-hidden">Email address</label>
-              <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
-              <button type="submit" class="btn btn-primary">Subscribe</button>
-            </form>
-            
-            <p class="subscriber-count">Join 8,200+ travelers</p>
-          </section>
-          
-          <section class="widget destinations-widget">
-            <h2>Browse by Destination</h2>
-            <ul class="destinations-list">
-              <li><a href="/destination/japan">🇯🇵 Japan <span>(8)</span></a></li>
-              <li><a href="/destination/italy">🇮🇹 Italy <span>(7)</span></a></li>
-              <li><a href="/destination/thailand">🇹🇭 Thailand <span>(6)</span></a></li>
-              <li><a href="/destination/spain">🇪🇸 Spain <span>(5)</span></a></li>
-              <li><a href="/destination/greece">🇬🇷 Greece <span>(5)</span></a></li>
-              <li><a href="/destination/iceland">🇮🇸 Iceland <span>(4)</span></a></li>
-              <li><a href="/destinations/all">View All Destinations →</a></li>
-            </ul>
-          </section>
-          
-          <section class="widget travel-resources-widget">
-            <h2>Travel Resources</h2>
-            <ul>
-              <li><a href="/gear">My Travel Gear</a></li>
-              <li><a href="/packing-lists">Packing Lists</a></li>
-              <li><a href="/budget-tips">Budget Travel Tips</a></li>
-              <li><a href="/photography">Photography Tips</a></li>
-              <li><a href="/planning">Trip Planning Guide</a></li>
-              <li><a href="/apps">Favorite Travel Apps</a></li>
-            </ul>
-          </section>
-          
-          <section class="widget popular-posts-widget">
-            <h2>Most Popular</h2>
-            <ol class="popular-posts-list">
-              <li>
-                <a href="/posts/solo-travel-safety">
-                  <img src="solo-travel-thumb.jpg" alt="" width="60" height="60" loading="lazy">
-                  <div>
-                    <span class="popular-title">Solo Travel Safety Tips for Women</span>
-                    <span class="popular-views">85K views</span>
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a href="/posts/travel-credit-cards">
-                  <img src="credit-cards-thumb.jpg" alt="" width="60" height="60" loading="lazy">
-                  <div>
-                    <span class="popular-title">Best Travel Credit Cards 2026</span>
-                    <span class="popular-views">62K views</span>
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a href="/posts/long-term-travel">
-                  <img src="long-term-thumb.jpg" alt="" width="60" height="60" loading="lazy">
-                  <div>
-                    <span class="popular-title">How I Afford to Travel Full-Time</span>
-                    <span class="popular-views">58K views</span>
-                  </div>
-                </a>
-              </li>
-            </ol>
-          </section>
-          
-          <section class="widget instagram-widget">
-            <h2>📷 Latest from Instagram</h2>
-            <p class="instagram-handle">@wanderlust_chronicles</p>
-            
-            <div class="instagram-grid">
-              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-1.jpg" alt="" width="100" height="100" loading="lazy"></a>
-              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-2.jpg" alt="" width="100" height="100" loading="lazy"></a>
-              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-3.jpg" alt="" width="100" height="100" loading="lazy"></a>
-              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-4.jpg" alt="" width="100" height="100" loading="lazy"></a>
-              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-5.jpg" alt="" width="100" height="100" loading="lazy"></a>
-              <a href="https://instagram.com/wanderlust_chronicles"><img src="ig-6.jpg" alt="" width="100" height="100" loading="lazy"></a>
-            </div>
-            
-            <a href="https://instagram.com/wanderlust_chronicles" class="btn btn-outline btn-small">Follow on Instagram</a>
-          </section>
-          
-          <section class="widget categories-widget">
-            <h2>Categories</h2>
-            <ul>
-              <li><a href="/category/destination-guides">Destination Guides</a></li>
-              <li><a href="/category/adventure-travel">Adventure Travel</a></li>
-              <li><a href="/category/budget-travel">Budget Travel</a></li>
-              <li><a href="/category/solo-travel">Solo Travel</a></li>
-              <li><a href="/category/food-travel">Food & Travel</a></li>
-              <li><a href="/category/photography">Travel Photography</a></li>
-            </ul>
-          </section>
-        </aside>
-      </div>
-    </div>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>✈️ Wanderlust Chronicles</h3>
-          <p>Travel stories and guides from around the world</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/wanderlust_chronicles" aria-label="Instagram">Instagram</a>
-            <a href="https://youtube.com/wanderlustchronicles" aria-label="YouTube">YouTube</a>
-            <a href="https://pinterest.com/wanderlustchronicles" aria-label="Pinterest">Pinterest</a>
-            <a href="https://facebook.com/wanderlustchronicles" aria-label="Facebook">Facebook</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Explore</h3>
-          <ul>
-            <li><a href="/destinations">All Destinations</a></li>
-            <li><a href="/guides">Travel Guides</a></li>
-            <li><a href="/itineraries">Sample Itineraries</a></li>
-            <li><a href="/photography">Photo Gallery</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/gear">Travel Gear</a></li>
-            <li><a href="/planning">Planning Tips</a></li>
-            <li><a href="/budget">Budget Calculator</a></li>
-            <li><a href="/faq">Travel FAQ</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Connect</h3>
-          <ul>
-            <li><a href="/about">About Me</a></li>
-            <li><a href="/contact">Contact</a></li>
-            <li><a href="/work-with-me">Work With Me</a></li>
-            <li><a href="/press">Press Kit</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Wanderlust Chronicles. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/disclosure">Disclosure</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/business-agency.html b/skills/html-coder/assets/business-agency.html
deleted file mode 100644
index cc7c14f8f..000000000
--- a/skills/html-coder/assets/business-agency.html
+++ /dev/null
@@ -1,411 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Creative digital agency specializing in branding, web design, digital marketing, and content creation.">
-  <title>Pixel Perfect - Creative Digital Agency</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="main-nav" aria-label="Main navigation">
-        <a href="/" class="brand">
-          <svg width="40" height="40" aria-label="Pixel Perfect logo">
-            <use href="#logo-icon"></use>
-          </svg>
-          <span>Pixel Perfect</span>
-        </a>
-        
-        <ul class="nav-links">
-          <li><a href="#work">Work</a></li>
-          <li><a href="#services">Services</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="container">
-        <h1 class="hero-title">We Create Digital Experiences That Matter</h1>
-        <p class="hero-subtitle">A creative agency crafting beautiful brands, websites, and campaigns that connect with audiences.</p>
-        <a href="#work" class="btn btn-large">View Our Work</a>
-      </div>
-    </section>
-    
-    <section id="work" class="portfolio">
-      <div class="container">
-        <h2>Featured Projects</h2>
-        
-        <div class="project-grid">
-          <article class="project-card">
-            <a href="/project/techstart-branding">
-              <img src="project-techstart.jpg" alt="TechStart branding project showcase" width="600" height="400" loading="lazy">
-              <div class="project-info">
-                <h3>TechStart Branding</h3>
-                <p class="project-category">Brand Identity & Web Design</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/project/eco-marketplace">
-              <img src="project-eco.jpg" alt="Eco Marketplace e-commerce platform" width="600" height="400" loading="lazy">
-              <div class="project-info">
-                <h3>Eco Marketplace</h3>
-                <p class="project-category">E-commerce & UX Design</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/project/wellness-app">
-              <img src="project-wellness.jpg" alt="Wellness mobile app interface" width="600" height="400" loading="lazy">
-              <div class="project-info">
-                <h3>Wellness App</h3>
-                <p class="project-category">Mobile App Design</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/project/festival-campaign">
-              <img src="project-festival.jpg" alt="Summer festival marketing campaign" width="600" height="400" loading="lazy">
-              <div class="project-info">
-                <h3>Summer Festival Campaign</h3>
-                <p class="project-category">Marketing & Social Media</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/project/fintech-redesign">
-              <img src="project-fintech.jpg" alt="FinTech platform redesign" width="600" height="400" loading="lazy">
-              <div class="project-info">
-                <h3>FinTech Platform Redesign</h3>
-                <p class="project-category">UI/UX & Product Design</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/project/restaurant-branding">
-              <img src="project-restaurant.jpg" alt="Restaurant branding and identity" width="600" height="400" loading="lazy">
-              <div class="project-info">
-                <h3>Urban Bistro</h3>
-                <p class="project-category">Branding & Print Design</p>
-              </div>
-            </a>
-          </article>
-        </div>
-        
-        <div class="portfolio-cta">
-          <a href="/portfolio" class="btn btn-outline">View All Projects</a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="services" class="services">
-      <div class="container">
-        <header class="section-header">
-          <h2>What We Do</h2>
-          <p>Full-service creative solutions for modern brands</p>
-        </header>
-        
-        <div class="services-grid">
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">🎨</div>
-            <h3>Brand Identity</h3>
-            <p>Distinctive brand identities including logo design, visual systems, and brand guidelines.</p>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">💻</div>
-            <h3>Web Design & Development</h3>
-            <p>Beautiful, responsive websites built with modern technologies and best practices.</p>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">📱</div>
-            <h3>Mobile App Design</h3>
-            <p>Intuitive mobile experiences for iOS and Android that users love.</p>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">📊</div>
-            <h3>Digital Marketing</h3>
-            <p>Strategic campaigns across social media, email, and paid channels.</p>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">✏️</div>
-            <h3>Content Creation</h3>
-            <p>Engaging content including copywriting, photography, and video production.</p>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">🎯</div>
-            <h3>Strategy & Consulting</h3>
-            <p>Brand strategy, market research, and creative direction for your business.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="process">
-      <div class="container">
-        <h2>Our Process</h2>
-        
-        <ol class="process-steps">
-          <li class="process-step">
-            <div class="step-number" aria-hidden="true">1</div>
-            <h3>Discovery</h3>
-            <p>We learn about your brand, goals, audience, and challenges through workshops and research.</p>
-          </li>
-          
-          <li class="process-step">
-            <div class="step-number" aria-hidden="true">2</div>
-            <h3>Strategy</h3>
-            <p>Develop creative strategy and positioning based on insights and competitive analysis.</p>
-          </li>
-          
-          <li class="process-step">
-            <div class="step-number" aria-hidden="true">3</div>
-            <h3>Design</h3>
-            <p>Create concepts and iterate with your feedback to perfect the visual direction.</p>
-          </li>
-          
-          <li class="process-step">
-            <div class="step-number" aria-hidden="true">4</div>
-            <h3>Development</h3>
-            <p>Build and test your website, app, or campaign with attention to detail.</p>
-          </li>
-          
-          <li class="process-step">
-            <div class="step-number" aria-hidden="true">5</div>
-            <h3>Launch</h3>
-            <p>Deploy your project and provide training, documentation, and ongoing support.</p>
-          </li>
-        </ol>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-content">
-            <h2>About Our Agency</h2>
-            <p>Pixel Perfect is a creative digital agency founded in 2015 by designers and developers who believed that beautiful design and technical excellence could coexist.</p>
-            
-            <p>Today, our team of 30+ creatives, strategists, and developers works with brands around the world to create digital experiences that drive results.</p>
-            
-            <p>We've won awards, but we're most proud of the lasting relationships we've built with our clients and the impact our work has on their businesses.</p>
-            
-            <a href="/about" class="link-arrow">Learn more about us</a>
-          </div>
-          
-          <div class="about-image">
-            <img src="team-photo.jpg" alt="Pixel Perfect team members collaborating" width="500" height="400" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="testimonials">
-      <div class="container">
-        <h2>Client Love</h2>
-        
-        <div class="testimonial-grid">
-          <blockquote class="testimonial">
-            <p>"Pixel Perfect transformed our brand and created a website that perfectly captures our vision. Their creativity and professionalism exceeded expectations."</p>
-            <footer>
-              <cite>
-                <strong>Jessica Martinez</strong><br>
-                <span>Founder, TechStart</span>
-              </cite>
-            </footer>
-          </blockquote>
-          
-          <blockquote class="testimonial">
-            <p>"Working with Pixel Perfect was seamless. They understood our goals and delivered a mobile app that our users absolutely love."</p>
-            <footer>
-              <cite>
-                <strong>David Kim</strong><br>
-                <span>Product Manager, Wellness Co</span>
-              </cite>
-            </footer>
-          </blockquote>
-          
-          <blockquote class="testimonial">
-            <p>"Their digital marketing campaigns generated 3x ROI in the first quarter. Creative genius combined with data-driven strategy."</p>
-            <footer>
-              <cite>
-                <strong>Amanda Foster</strong><br>
-                <span>CMO, Urban Bistro</span>
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-      </div>
-    </section>
-    
-    <section class="clients">
-      <div class="container">
-        <h2>Trusted By</h2>
-        
-        <div class="client-logos">
-          <img src="client-techstart.svg" alt="TechStart" width="120" height="40" loading="lazy">
-          <img src="client-eco.svg" alt="Eco Marketplace" width="120" height="40" loading="lazy">
-          <img src="client-wellness.svg" alt="Wellness Co" width="120" height="40" loading="lazy">
-          <img src="client-fintech.svg" alt="FinTech Platform" width="120" height="40" loading="lazy">
-          <img src="client-bistro.svg" alt="Urban Bistro" width="120" height="40" loading="lazy">
-          <img src="client-festival.svg" alt="Summer Festival" width="120" height="40" loading="lazy">
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact" class="contact">
-      <div class="container">
-        <div class="contact-wrapper">
-          <div class="contact-intro">
-            <h2>Let's Create Something Amazing Together</h2>
-            <p>Ready to elevate your brand? Get in touch and let's discuss your project.</p>
-            
-            <address class="contact-details">
-              <p>
-                <strong>Email</strong><br>
-                <a href="mailto:hello@pixelperfect.example.com">hello@pixelperfect.example.com</a>
-              </p>
-              
-              <p>
-                <strong>Phone</strong><br>
-                <a href="tel:+18005554321">+1 (800) 555-4321</a>
-              </p>
-              
-              <p>
-                <strong>Studio</strong><br>
-                456 Creative Lane<br>
-                San Francisco, CA 94102
-              </p>
-            </address>
-          </div>
-          
-          <form class="contact-form" action="/project-inquiry" method="POST">
-            <div class="form-row">
-              <div class="form-group">
-                <label for="name">Name</label>
-                <input type="text" id="name" name="name" required>
-              </div>
-              
-              <div class="form-group">
-                <label for="email">Email</label>
-                <input type="email" id="email" name="email" required>
-              </div>
-            </div>
-            
-            <div class="form-group">
-              <label for="company">Company</label>
-              <input type="text" id="company" name="company">
-            </div>
-            
-            <div class="form-group">
-              <label for="service">Service Interested In</label>
-              <select id="service" name="service" required>
-                <option value="">Select a service</option>
-                <option value="branding">Brand Identity</option>
-                <option value="web">Web Design & Development</option>
-                <option value="mobile">Mobile App Design</option>
-                <option value="marketing">Digital Marketing</option>
-                <option value="content">Content Creation</option>
-                <option value="strategy">Strategy & Consulting</option>
-              </select>
-            </div>
-            
-            <div class="form-group">
-              <label for="budget">Budget Range</label>
-              <select id="budget" name="budget">
-                <option value="">Select budget range</option>
-                <option value="10-25k">$10,000 - $25,000</option>
-                <option value="25-50k">$25,000 - $50,000</option>
-                <option value="50-100k">$50,000 - $100,000</option>
-                <option value="100k+">$100,000+</option>
-              </select>
-            </div>
-            
-            <div class="form-group">
-              <label for="message">Tell Us About Your Project</label>
-              <textarea id="message" name="message" rows="5" required></textarea>
-            </div>
-            
-            <button type="submit" class="btn btn-primary btn-large">Send Inquiry</button>
-          </form>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-grid">
-        <div class="footer-col">
-          <h3>Pixel Perfect</h3>
-          <p>Creative digital agency in San Francisco.</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/pixelperfect" aria-label="Instagram">Instagram</a>
-            <a href="https://dribbble.com/pixelperfect" aria-label="Dribbble">Dribbble</a>
-            <a href="https://behance.net/pixelperfect" aria-label="Behance">Behance</a>
-            <a href="https://linkedin.com/company/pixelperfect" aria-label="LinkedIn">LinkedIn</a>
-          </div>
-        </div>
-        
-        <div class="footer-col">
-          <h3>Services</h3>
-          <ul>
-            <li><a href="/branding">Branding</a></li>
-            <li><a href="/web-design">Web Design</a></li>
-            <li><a href="/mobile-apps">Mobile Apps</a></li>
-            <li><a href="/marketing">Marketing</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-col">
-          <h3>Agency</h3>
-          <ul>
-            <li><a href="/about">About</a></li>
-            <li><a href="/work">Our Work</a></li>
-            <li><a href="/blog">Blog</a></li>
-            <li><a href="/careers">Careers</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-col">
-          <h3>Connect</h3>
-          <ul>
-            <li><a href="/contact">Contact</a></li>
-            <li><a href="/newsletter">Newsletter</a></li>
-            <li><a href="/events">Events</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Pixel Perfect Agency. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="app.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/business-company.html b/skills/html-coder/assets/business-company.html
deleted file mode 100644
index 892103156..000000000
--- a/skills/html-coder/assets/business-company.html
+++ /dev/null
@@ -1,347 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Leading technology solutions provider delivering innovative software and consulting services to businesses worldwide.">
-  <meta name="keywords" content="technology, software, consulting, business solutions">
-  <meta name="author" content="TechCorp Industries">
-  
-  <title>TechCorp Industries - Innovative Technology Solutions</title>
-  
-  <link rel="icon" type="image/svg+xml" href="favicon.svg">
-  <link rel="alternate icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-  
-  <!-- Open Graph for social sharing -->
-  <meta property="og:title" content="TechCorp Industries - Innovative Technology Solutions">
-  <meta property="og:description" content="Leading technology solutions provider delivering innovative software and consulting services.">
-  <meta property="og:image" content="og-image.jpg">
-  <meta property="og:url" content="https://techcorp.example.com">
-  <meta property="og:type" content="website">
-</head>
-<body>
-  <!-- Skip to main content link for accessibility -->
-  <a href="#main-content" class="skip-link">Skip to main content</a>
-  
-  <!-- Header with navigation -->
-  <header class="site-header">
-    <div class="container">
-      <div class="header-content">
-        <div class="logo">
-          <a href="/" aria-label="TechCorp Industries - Home">
-            <img src="logo.svg" alt="TechCorp Industries" width="180" height="50">
-          </a>
-        </div>
-        
-        <nav aria-label="Main navigation">
-          <button class="nav-toggle" aria-expanded="false" aria-controls="main-nav" aria-label="Toggle navigation menu">
-            <span class="hamburger"></span>
-          </button>
-          
-          <ul id="main-nav" class="main-nav">
-            <li><a href="/" aria-current="page">Home</a></li>
-            <li><a href="#services">Services</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#solutions">Solutions</a></li>
-            <li><a href="#contact">Contact</a></li>
-          </ul>
-        </nav>
-      </div>
-    </div>
-  </header>
-  
-  <!-- Main content -->
-  <main id="main-content">
-    <!-- Hero section -->
-    <section class="hero" aria-labelledby="hero-heading">
-      <div class="container">
-        <div class="hero-content">
-          <h1 id="hero-heading">Transforming Business Through Technology</h1>
-          <p class="hero-subtitle">We deliver cutting-edge software solutions that drive innovation and accelerate growth for enterprises worldwide.</p>
-          
-          <div class="hero-actions">
-            <a href="#contact" class="btn btn-primary">Get Started</a>
-            <a href="#solutions" class="btn btn-secondary">View Solutions</a>
-          </div>
-        </div>
-        
-        <div class="hero-image">
-          <img src="hero-illustration.svg" alt="Technology innovation illustration" width="600" height="400" loading="eager">
-        </div>
-      </div>
-    </section>
-    
-    <!-- Services section -->
-    <section id="services" class="services" aria-labelledby="services-heading">
-      <div class="container">
-        <header class="section-header">
-          <h2 id="services-heading">Our Services</h2>
-          <p>Comprehensive technology solutions tailored to your business needs</p>
-        </header>
-        
-        <div class="services-grid">
-          <article class="service-card">
-            <img src="icon-software.svg" alt="" aria-hidden="true" width="64" height="64">
-            <h3>Software Development</h3>
-            <p>Custom software solutions built with modern technologies and best practices to solve your unique business challenges.</p>
-            <a href="#software" class="card-link">Learn more <span aria-hidden="true">→</span></a>
-          </article>
-          
-          <article class="service-card">
-            <img src="icon-cloud.svg" alt="" aria-hidden="true" width="64" height="64">
-            <h3>Cloud Solutions</h3>
-            <p>Scalable cloud infrastructure and migration services to enhance performance, security, and cost-efficiency.</p>
-            <a href="#cloud" class="card-link">Learn more <span aria-hidden="true">→</span></a>
-          </article>
-          
-          <article class="service-card">
-            <img src="icon-consulting.svg" alt="" aria-hidden="true" width="64" height="64">
-            <h3>IT Consulting</h3>
-            <p>Strategic technology advisory services to optimize your IT infrastructure and drive digital transformation.</p>
-            <a href="#consulting" class="card-link">Learn more <span aria-hidden="true">→</span></a>
-          </article>
-          
-          <article class="service-card">
-            <img src="icon-security.svg" alt="" aria-hidden="true" width="64" height="64">
-            <h3>Cybersecurity</h3>
-            <p>Comprehensive security solutions protecting your business from evolving cyber threats and vulnerabilities.</p>
-            <a href="#security" class="card-link">Learn more <span aria-hidden="true">→</span></a>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <!-- About section -->
-    <section id="about" class="about" aria-labelledby="about-heading">
-      <div class="container">
-        <div class="about-content">
-          <div class="about-text">
-            <h2 id="about-heading">About TechCorp Industries</h2>
-            <p>For over <strong>15 years</strong>, TechCorp Industries has been at the forefront of technology innovation, helping businesses transform their operations through cutting-edge solutions.</p>
-            
-            <p>Our team of <strong>500+ experts</strong> across the globe works with clients ranging from startups to Fortune 500 companies, delivering solutions that drive measurable results.</p>
-            
-            <ul class="stats-list">
-              <li>
-                <strong>500+</strong>
-                <span>Projects Completed</span>
-              </li>
-              <li>
-                <strong>250+</strong>
-                <span>Enterprise Clients</span>
-              </li>
-              <li>
-                <strong>98%</strong>
-                <span>Client Satisfaction</span>
-              </li>
-            </ul>
-          </div>
-          
-          <div class="about-image">
-            <img src="team.jpg" alt="TechCorp team collaborating in modern office" width="550" height="400" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <!-- Solutions section -->
-    <section id="solutions" class="solutions" aria-labelledby="solutions-heading">
-      <div class="container">
-        <header class="section-header">
-          <h2 id="solutions-heading">Industry Solutions</h2>
-          <p>Specialized solutions for your industry challenges</p>
-        </header>
-        
-        <div class="solutions-list">
-          <article class="solution-item">
-            <h3>Healthcare</h3>
-            <p>HIPAA-compliant platforms for patient management, telemedicine, and healthcare analytics.</p>
-          </article>
-          
-          <article class="solution-item">
-            <h3>Finance</h3>
-            <p>Secure fintech solutions for banking, payments, and financial services with regulatory compliance.</p>
-          </article>
-          
-          <article class="solution-item">
-            <h3>Retail & E-commerce</h3>
-            <p>Omnichannel retail platforms with inventory management, POS systems, and customer analytics.</p>
-          </article>
-          
-          <article class="solution-item">
-            <h3>Manufacturing</h3>
-            <p>IoT-enabled smart manufacturing systems for supply chain optimization and quality control.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <!-- Testimonials section -->
-    <section class="testimonials" aria-labelledby="testimonials-heading">
-      <div class="container">
-        <h2 id="testimonials-heading">What Our Clients Say</h2>
-        
-        <div class="testimonials-grid">
-          <blockquote class="testimonial-card">
-            <p>"TechCorp transformed our legacy systems into a modern, scalable platform. The results exceeded our expectations."</p>
-            <footer>
-              <cite>
-                <strong>Sarah Johnson</strong>
-                <span>CTO, GlobalRetail Inc.</span>
-              </cite>
-            </footer>
-          </blockquote>
-          
-          <blockquote class="testimonial-card">
-            <p>"Their expertise in cloud migration saved us 40% in infrastructure costs while improving performance."</p>
-            <footer>
-              <cite>
-                <strong>Michael Chen</strong>
-                <span>VP Technology, FinanceFirst</span>
-              </cite>
-            </footer>
-          </blockquote>
-          
-          <blockquote class="testimonial-card">
-            <p>"Outstanding team with deep technical knowledge and excellent communication throughout the project."</p>
-            <footer>
-              <cite>
-                <strong>Emily Rodriguez</strong>
-                <span>CEO, HealthTech Solutions</span>
-              </cite>
-            </footer>
-          </blockquote>
-        </div>
-      </div>
-    </section>
-    
-    <!-- Contact section -->
-    <section id="contact" class="contact" aria-labelledby="contact-heading">
-      <div class="container">
-        <div class="contact-content">
-          <div class="contact-info">
-            <h2 id="contact-heading">Get In Touch</h2>
-            <p>Ready to transform your business with technology? Let's discuss your project.</p>
-            
-            <address class="contact-details">
-              <div class="contact-item">
-                <h3>Email</h3>
-                <a href="mailto:contact@techcorp.example.com">contact@techcorp.example.com</a>
-              </div>
-              
-              <div class="contact-item">
-                <h3>Phone</h3>
-                <a href="tel:+18005551234">+1 (800) 555-1234</a>
-              </div>
-              
-              <div class="contact-item">
-                <h3>Office</h3>
-                <p>
-                  123 Innovation Parkway<br>
-                  Tech District, CA 94000<br>
-                  United States
-                </p>
-              </div>
-            </address>
-          </div>
-          
-          <div class="contact-form-wrapper">
-            <form class="contact-form" action="/submit-contact" method="POST">
-              <h3>Send Us a Message</h3>
-              
-              <div class="form-group">
-                <label for="name">Full Name</label>
-                <input type="text" id="name" name="name" required autocomplete="name">
-              </div>
-              
-              <div class="form-group">
-                <label for="email">Email Address</label>
-                <input type="email" id="email" name="email" required autocomplete="email">
-              </div>
-              
-              <div class="form-group">
-                <label for="company">Company</label>
-                <input type="text" id="company" name="company" autocomplete="organization">
-              </div>
-              
-              <div class="form-group">
-                <label for="message">Message</label>
-                <textarea id="message" name="message" rows="5" required></textarea>
-              </div>
-              
-              <button type="submit" class="btn btn-primary">Send Message</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <!-- Footer -->
-  <footer class="site-footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>TechCorp Industries</h3>
-          <p>Innovative technology solutions for modern businesses.</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://linkedin.com/company/techcorp" aria-label="LinkedIn">
-              <svg width="24" height="24" aria-hidden="true">
-                <use href="#icon-linkedin"></use>
-              </svg>
-            </a>
-            <a href="https://twitter.com/techcorp" aria-label="Twitter">
-              <svg width="24" height="24" aria-hidden="true">
-                <use href="#icon-twitter"></use>
-              </svg>
-            </a>
-            <a href="https://github.com/techcorp" aria-label="GitHub">
-              <svg width="24" height="24" aria-hidden="true">
-                <use href="#icon-github"></use>
-              </svg>
-            </a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Services</h3>
-          <ul>
-            <li><a href="#software">Software Development</a></li>
-            <li><a href="#cloud">Cloud Solutions</a></li>
-            <li><a href="#consulting">IT Consulting</a></li>
-            <li><a href="#security">Cybersecurity</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/blog">Blog</a></li>
-            <li><a href="/press">Press</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Legal</h3>
-          <ul>
-            <li><a href="/privacy">Privacy Policy</a></li>
-            <li><a href="/terms">Terms of Service</a></li>
-            <li><a href="/security">Security</a></li>
-            <li><a href="/accessibility">Accessibility</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 TechCorp Industries. All rights reserved.</p>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/business-consulting.html b/skills/html-coder/assets/business-consulting.html
deleted file mode 100644
index 467d537d7..000000000
--- a/skills/html-coder/assets/business-consulting.html
+++ /dev/null
@@ -1,380 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Strategic business consulting firm helping organizations navigate growth, transformation, and operational excellence.">
-  <title>Stratify Consulting - Strategic Business Advisory</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <div class="header-inner">
-        <a href="/" class="logo">Stratify Consulting</a>
-        
-        <nav aria-label="Main navigation">
-          <ul class="nav-list">
-            <li><a href="#services">Services</a></li>
-            <li><a href="#approach">Our Approach</a></li>
-            <li><a href="#case-studies">Case Studies</a></li>
-            <li><a href="#insights">Insights</a></li>
-            <li><a href="#contact" class="btn-small">Contact Us</a></li>
-          </ul>
-        </nav>
-      </div>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="container">
-        <h1>Strategic Consulting for Business Growth</h1>
-        <p class="subtitle">We partner with leaders to solve their toughest challenges and create lasting value.</p>
-        <a href="#contact" class="btn btn-primary">Schedule Consultation</a>
-      </div>
-    </section>
-    
-    <section id="services" class="services">
-      <div class="container">
-        <h2>Our Services</h2>
-        <p class="section-intro">Comprehensive consulting services across strategy, operations, and transformation.</p>
-        
-        <div class="services-list">
-          <article class="service-item">
-            <h3>Strategy Development</h3>
-            <p>Craft winning strategies aligned with your vision, market dynamics, and competitive landscape.</p>
-            <ul>
-              <li>Corporate strategy</li>
-              <li>Market entry & expansion</li>
-              <li>Competitive positioning</li>
-              <li>Portfolio optimization</li>
-            </ul>
-          </article>
-          
-          <article class="service-item">
-            <h3>Organizational Transformation</h3>
-            <p>Guide your organization through change with proven methodologies and hands-on support.</p>
-            <ul>
-              <li>Change management</li>
-              <li>Operating model design</li>
-              <li>Organizational restructuring</li>
-              <li>Culture transformation</li>
-            </ul>
-          </article>
-          
-          <article class="service-item">
-            <h3>Operations Excellence</h3>
-            <p>Optimize operations to drive efficiency, reduce costs, and improve customer satisfaction.</p>
-            <ul>
-              <li>Process optimization</li>
-              <li>Supply chain management</li>
-              <li>Performance improvement</li>
-              <li>Lean & Six Sigma</li>
-            </ul>
-          </article>
-          
-          <article class="service-item">
-            <h3>Digital Transformation</h3>
-            <p>Leverage technology to reimagine business models, processes, and customer experiences.</p>
-            <ul>
-              <li>Digital strategy</li>
-              <li>Technology roadmap</li>
-              <li>Data & analytics</li>
-              <li>Innovation programs</li>
-            </ul>
-          </article>
-          
-          <article class="service-item">
-            <h3>M&A Advisory</h3>
-            <p>Navigate mergers, acquisitions, and divestitures with strategic and operational expertise.</p>
-            <ul>
-              <li>Deal strategy & screening</li>
-              <li>Due diligence</li>
-              <li>Integration planning</li>
-              <li>Post-merger integration</li>
-            </ul>
-          </article>
-          
-          <article class="service-item">
-            <h3>Performance Management</h3>
-            <p>Establish metrics, dashboards, and governance to drive accountability and results.</p>
-            <ul>
-              <li>KPI framework design</li>
-              <li>Dashboard development</li>
-              <li>Performance tracking</li>
-              <li>Executive reporting</li>
-            </ul>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="approach" class="approach">
-      <div class="container">
-        <h2>Our Approach</h2>
-        
-        <div class="approach-grid">
-          <article class="approach-step">
-            <div class="step-number" aria-hidden="true">01</div>
-            <h3>Discover</h3>
-            <p>Deep dive into your business, challenges, and opportunities through stakeholder interviews and data analysis.</p>
-          </article>
-          
-          <article class="approach-step">
-            <div class="step-number" aria-hidden="true">02</div>
-            <h3>Design</h3>
-            <p>Develop tailored solutions based on industry best practices and your unique context.</p>
-          </article>
-          
-          <article class="approach-step">
-            <div class="step-number" aria-hidden="true">03</div>
-            <h3>Deliver</h3>
-            <p>Implement solutions with your team, building capabilities and ensuring sustainable results.</p>
-          </article>
-          
-          <article class="approach-step">
-            <div class="step-number" aria-hidden="true">04</div>
-            <h3>Drive</h3>
-            <p>Monitor progress, refine approaches, and drive continuous improvement to maximize value.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="case-studies" class="case-studies">
-      <div class="container">
-        <h2>Client Success Stories</h2>
-        
-        <div class="case-study-grid">
-          <article class="case-study">
-            <div class="case-study-header">
-              <span class="industry-tag">Retail</span>
-              <h3>40% Cost Reduction Through Supply Chain Optimization</h3>
-            </div>
-            <p class="challenge"><strong>Challenge:</strong> National retailer faced rising operational costs and inventory management issues.</p>
-            <p class="solution"><strong>Solution:</strong> Redesigned supply chain network, implemented demand forecasting, and optimized inventory levels.</p>
-            <p class="results"><strong>Results:</strong></p>
-            <ul>
-              <li>40% reduction in logistics costs</li>
-              <li>25% improvement in inventory turnover</li>
-              <li>$15M annual savings</li>
-            </ul>
-          </article>
-          
-          <article class="case-study">
-            <div class="case-study-header">
-              <span class="industry-tag">Financial Services</span>
-              <h3>Digital Transformation Driving 3x Revenue Growth</h3>
-            </div>
-            <p class="challenge"><strong>Challenge:</strong> Traditional bank struggling to compete with digital-first competitors.</p>
-            <p class="solution"><strong>Solution:</strong> Developed digital strategy, launched mobile banking platform, and transformed customer experience.</p>
-            <p class="results"><strong>Results:</strong></p>
-            <ul>
-              <li>3x increase in digital revenue</li>
-              <li>60% of customers now digital-first</li>
-              <li>Net Promoter Score improved by 35 points</li>
-            </ul>
-          </article>
-          
-          <article class="case-study">
-            <div class="case-study-header">
-              <span class="industry-tag">Manufacturing</span>
-              <h3>Post-Merger Integration Achieving $50M Synergies</h3>
-            </div>
-            <p class="challenge"><strong>Challenge:</strong> Manufacturing company acquired competitor and needed rapid integration.</p>
-            <p class="solution"><strong>Solution:</strong> Led end-to-end integration including organizational design, systems consolidation, and culture alignment.</p>
-            <p class="results"><strong>Results:</strong></p>
-            <ul>
-              <li>$50M in cost synergies realized</li>
-              <li>Integration completed 3 months ahead of schedule</li>
-              <li>95% employee retention rate</li>
-            </ul>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="stats">
-      <div class="container">
-        <div class="stats-grid">
-          <div class="stat">
-            <div class="stat-number">500+</div>
-            <div class="stat-label">Projects Delivered</div>
-          </div>
-          <div class="stat">
-            <div class="stat-number">$2B+</div>
-            <div class="stat-label">Client Value Created</div>
-          </div>
-          <div class="stat">
-            <div class="stat-number">95%</div>
-            <div class="stat-label">Client Satisfaction</div>
-          </div>
-          <div class="stat">
-            <div class="stat-number">20+</div>
-            <div class="stat-label">Years Experience</div>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="insights" class="insights">
-      <div class="container">
-        <h2>Latest Insights</h2>
-        
-        <div class="insights-grid">
-          <article class="insight-card">
-            <time datetime="2026-03-01">March 1, 2026</time>
-            <h3><a href="/insights/ai-strategy-2026">Building an AI Strategy for 2026</a></h3>
-            <p>How leading organizations are leveraging artificial intelligence to drive competitive advantage.</p>
-            <a href="/insights/ai-strategy-2026" class="read-more">Read article</a>
-          </article>
-          
-          <article class="insight-card">
-            <time datetime="2026-02-15">February 15, 2026</time>
-            <h3><a href="/insights/resilient-supply-chains">Creating Resilient Supply Chains</a></h3>
-            <p>Five strategies to build supply chain resilience in an uncertain global environment.</p>
-            <a href="/insights/resilient-supply-chains" class="read-more">Read article</a>
-          </article>
-          
-          <article class="insight-card">
-            <time datetime="2026-02-01">February 1, 2026</time>
-            <h3><a href="/insights/culture-transformation">Leading Culture Transformation</a></h3>
-            <p>Practical approaches to shifting organizational culture and driving sustainable change.</p>
-            <a href="/insights/culture-transformation" class="read-more">Read article</a>
-          </article>
-        </div>
-        
-        <div class="insights-cta">
-          <a href="/insights" class="btn btn-outline">View All Insights</a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact" class="contact">
-      <div class="container">
-        <div class="contact-content">
-          <div class="contact-text">
-            <h2>Let's Discuss Your Challenge</h2>
-            <p>Schedule a confidential consultation to explore how we can help your organization achieve its goals.</p>
-            
-            <address class="contact-info">
-              <p>
-                <strong>Email:</strong><br>
-                <a href="mailto:consulting@stratify.example.com">consulting@stratify.example.com</a>
-              </p>
-              <p>
-                <strong>Phone:</strong><br>
-                <a href="tel:+18005559876">+1 (800) 555-9876</a>
-              </p>
-              <p>
-                <strong>Headquarters:</strong><br>
-                100 Executive Plaza<br>
-                New York, NY 10001
-              </p>
-            </address>
-          </div>
-          
-          <form class="contact-form" action="/submit-inquiry" method="POST">
-            <h3>Request Consultation</h3>
-            
-            <div class="form-group">
-              <label for="full-name">Full Name</label>
-              <input type="text" id="full-name" name="name" required>
-            </div>
-            
-            <div class="form-group">
-              <label for="email-address">Email Address</label>
-              <input type="email" id="email-address" name="email" required>
-            </div>
-            
-            <div class="form-group">
-              <label for="company-name">Company</label>
-              <input type="text" id="company-name" name="company" required>
-            </div>
-            
-            <div class="form-group">
-              <label for="title">Job Title</label>
-              <input type="text" id="title" name="title" required>
-            </div>
-            
-            <div class="form-group">
-              <label for="service-area">Area of Interest</label>
-              <select id="service-area" name="service" required>
-                <option value="">Select service</option>
-                <option value="strategy">Strategy Development</option>
-                <option value="transformation">Organizational Transformation</option>
-                <option value="operations">Operations Excellence</option>
-                <option value="digital">Digital Transformation</option>
-                <option value="ma">M&A Advisory</option>
-                <option value="performance">Performance Management</option>
-                <option value="other">Other</option>
-              </select>
-            </div>
-            
-            <div class="form-group">
-              <label for="details">Tell Us About Your Challenge</label>
-              <textarea id="details" name="message" rows="4" required></textarea>
-            </div>
-            
-            <button type="submit" class="btn btn-primary">Submit Inquiry</button>
-          </form>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Stratify Consulting</h3>
-          <p>Strategic advisory for business transformation.</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Services</h3>
-          <ul>
-            <li><a href="#strategy">Strategy</a></li>
-            <li><a href="#transformation">Transformation</a></li>
-            <li><a href="#operations">Operations</a></li>
-            <li><a href="#digital">Digital</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About</a></li>
-            <li><a href="/team">Team</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/insights">Insights</a></li>
-            <li><a href="/case-studies">Case Studies</a></li>
-            <li><a href="/research">Research</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Stratify Consulting. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/business-services.html b/skills/html-coder/assets/business-services.html
deleted file mode 100644
index 3fe3f9c9c..000000000
--- a/skills/html-coder/assets/business-services.html
+++ /dev/null
@@ -1,385 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Professional business services including accounting, legal consulting, HR solutions, and strategic advisory for growing companies.">
-  <meta name="keywords" content="business services, accounting, legal, HR, consulting">
-  
-  <title>ProServe - Professional Business Services</title>
-  
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">
-          <img src="logo.svg" alt="ProServe" width="150" height="40">
-        </a>
-        
-        <ul class="nav-menu">
-          <li><a href="#services">Services</a></li>
-          <li><a href="#expertise">Expertise</a></li>
-          <li><a href="#pricing">Pricing</a></li>
-          <li><a href="#resources">Resources</a></li>
-          <li><a href="#contact" class="btn-nav">Get Started</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="container">
-        <h1>Professional Services for Modern Businesses</h1>
-        <p class="lead">Expert accounting, legal, HR, and consulting services to help your business thrive.</p>
-        
-        <form class="hero-form" action="/get-quote" method="POST">
-          <fieldset>
-            <legend class="visually-hidden">Request a consultation</legend>
-            
-            <div class="form-row">
-              <input type="text" name="name" placeholder="Your Name" required aria-label="Your name">
-              <input type="email" name="email" placeholder="Email Address" required aria-label="Email address">
-              <select name="service" required aria-label="Select service">
-                <option value="">Select Service</option>
-                <option value="accounting">Accounting</option>
-                <option value="legal">Legal</option>
-                <option value="hr">HR Solutions</option>
-                <option value="consulting">Consulting</option>
-              </select>
-              <button type="submit" class="btn btn-primary">Get Free Consultation</button>
-            </div>
-          </fieldset>
-        </form>
-        
-        <p class="hero-note"><small>No credit card required. Free 30-minute consultation.</small></p>
-      </div>
-    </section>
-    
-    <section id="services" class="services">
-      <div class="container">
-        <h2>Our Services</h2>
-        
-        <div class="services-grid">
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">📊</div>
-            <h3>Accounting & Bookkeeping</h3>
-            <p>Complete accounting services including bookkeeping, tax preparation, financial reporting, and payroll management.</p>
-            <ul>
-              <li>Monthly bookkeeping</li>
-              <li>Tax filing & planning</li>
-              <li>Financial statements</li>
-              <li>Payroll processing</li>
-            </ul>
-            <a href="#accounting" class="service-link">Learn more</a>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">⚖️</div>
-            <h3>Legal Consulting</h3>
-            <p>Business law expertise covering contracts, compliance, intellectual property, and corporate governance.</p>
-            <ul>
-              <li>Contract drafting & review</li>
-              <li>Compliance management</li>
-              <li>IP protection</li>
-              <li>Legal risk assessment</li>
-            </ul>
-            <a href="#legal" class="service-link">Learn more</a>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">👥</div>
-            <h3>HR Solutions</h3>
-            <p>Comprehensive human resources services including recruitment, employee management, and benefits administration.</p>
-            <ul>
-              <li>Talent acquisition</li>
-              <li>Employee onboarding</li>
-              <li>Performance management</li>
-              <li>Benefits administration</li>
-            </ul>
-            <a href="#hr" class="service-link">Learn more</a>
-          </article>
-          
-          <article class="service">
-            <div class="service-icon" aria-hidden="true">💡</div>
-            <h3>Strategic Consulting</h3>
-            <p>Business strategy advisory helping you make informed decisions and achieve sustainable growth.</p>
-            <ul>
-              <li>Business planning</li>
-              <li>Market analysis</li>
-              <li>Growth strategy</li>
-              <li>Operations optimization</li>
-            </ul>
-            <a href="#consulting" class="service-link">Learn more</a>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="expertise" class="expertise">
-      <div class="container">
-        <div class="two-column">
-          <div class="column">
-            <h2>Industry Expertise</h2>
-            <p>We serve businesses across various industries with specialized knowledge and experience.</p>
-            
-            <dl class="industries-list">
-              <dt>Technology & SaaS</dt>
-              <dd>Startups, software companies, and tech service providers</dd>
-              
-              <dt>Healthcare</dt>
-              <dd>Medical practices, clinics, and healthcare service organizations</dd>
-              
-              <dt>Retail & E-commerce</dt>
-              <dd>Online stores, brick-and-mortar retailers, and marketplaces</dd>
-              
-              <dt>Professional Services</dt>
-              <dd>Consulting firms, agencies, and B2B service providers</dd>
-              
-              <dt>Real Estate</dt>
-              <dd>Property management, real estate agencies, and developers</dd>
-            </dl>
-          </div>
-          
-          <div class="column">
-            <img src="expertise.jpg" alt="Professional team analyzing business data" width="500" height="400" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="pricing" class="pricing">
-      <div class="container">
-        <header class="section-header">
-          <h2>Transparent Pricing</h2>
-          <p>Choose a plan that fits your business needs</p>
-        </header>
-        
-        <div class="pricing-grid">
-          <article class="pricing-card">
-            <h3>Starter</h3>
-            <p class="price">
-              <span class="currency">$</span>
-              <span class="amount">499</span>
-              <span class="period">/month</span>
-            </p>
-            <p class="pricing-desc">Perfect for small businesses and startups</p>
-            
-            <ul class="features-list">
-              <li>Monthly bookkeeping</li>
-              <li>Quarterly tax filing</li>
-              <li>Financial reports</li>
-              <li>Email support</li>
-            </ul>
-            
-            <a href="#signup" class="btn btn-outline">Get Started</a>
-          </article>
-          
-          <article class="pricing-card featured">
-            <div class="badge">Most Popular</div>
-            <h3>Growth</h3>
-            <p class="price">
-              <span class="currency">$</span>
-              <span class="amount">999</span>
-              <span class="period">/month</span>
-            </p>
-            <p class="pricing-desc">For growing businesses with complex needs</p>
-            
-            <ul class="features-list">
-              <li>Everything in Starter, plus:</li>
-              <li>Payroll processing</li>
-              <li>Monthly tax planning</li>
-              <li>HR consultation</li>
-              <li>Priority support</li>
-            </ul>
-            
-            <a href="#signup" class="btn btn-primary">Get Started</a>
-          </article>
-          
-          <article class="pricing-card">
-            <h3>Enterprise</h3>
-            <p class="price">
-              <span class="amount">Custom</span>
-            </p>
-            <p class="pricing-desc">Tailored solutions for large organizations</p>
-            
-            <ul class="features-list">
-              <li>Everything in Growth, plus:</li>
-              <li>Dedicated account manager</li>
-              <li>Custom reporting</li>
-              <li>Legal consulting included</li>
-              <li>24/7 support</li>
-            </ul>
-            
-            <a href="#contact" class="btn btn-outline">Contact Sales</a>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="resources" class="resources">
-      <div class="container">
-        <h2>Resources & Insights</h2>
-        
-        <div class="resources-grid">
-          <article class="resource-card">
-            <img src="guide-taxes.jpg" alt="" width="350" height="200" loading="lazy">
-            <div class="resource-content">
-              <span class="resource-category">Guide</span>
-              <h3>Small Business Tax Planning Guide 2026</h3>
-              <p>Essential tax strategies every business owner should know to maximize deductions and minimize liability.</p>
-              <a href="/resources/tax-guide-2026" class="resource-link">Download PDF</a>
-            </div>
-          </article>
-          
-          <article class="resource-card">
-            <img src="webinar-hr.jpg" alt="" width="350" height="200" loading="lazy">
-            <div class="resource-content">
-              <span class="resource-category">Webinar</span>
-              <h3>Building Effective HR Policies</h3>
-              <p>Learn how to create HR policies that protect your business and support employee success.</p>
-              <a href="/webinars/hr-policies" class="resource-link">Watch Recording</a>
-            </div>
-          </article>
-          
-          <article class="resource-card">
-            <img src="template-contracts.jpg" alt="" width="350" height="200" loading="lazy">
-            <div class="resource-content">
-              <span class="resource-category">Template</span>
-              <h3>Free Contract Templates</h3>
-              <p>Download professionally drafted contract templates for common business agreements.</p>
-              <a href="/resources/contract-templates" class="resource-link">Get Templates</a>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="cta">
-      <div class="container">
-        <div class="cta-content">
-          <h2>Ready to Focus on Growing Your Business?</h2>
-          <p>Let us handle the business services so you can focus on what you do best.</p>
-          <a href="#contact" class="btn btn-primary btn-large">Schedule Free Consultation</a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact" class="contact">
-      <div class="container">
-        <div class="contact-grid">
-          <div class="contact-info">
-            <h2>Get In Touch</h2>
-            <p>Have questions? We're here to help.</p>
-            
-            <address>
-              <p>
-                <strong>Phone:</strong><br>
-                <a href="tel:+18005556789">+1 (800) 555-6789</a>
-              </p>
-              
-              <p>
-                <strong>Email:</strong><br>
-                <a href="mailto:hello@proserve.example.com">hello@proserve.example.com</a>
-              </p>
-              
-              <p>
-                <strong>Office Hours:</strong><br>
-                Monday - Friday: 9:00 AM - 6:00 PM EST<br>
-                Saturday: 10:00 AM - 2:00 PM EST
-              </p>
-            </address>
-          </div>
-          
-          <form class="contact-form" action="/contact" method="POST">
-            <div class="form-group">
-              <label for="contact-name">Name</label>
-              <input type="text" id="contact-name" name="name" required>
-            </div>
-            
-            <div class="form-group">
-              <label for="contact-email">Email</label>
-              <input type="email" id="contact-email" name="email" required>
-            </div>
-            
-            <div class="form-group">
-              <label for="contact-service">Service Interest</label>
-              <select id="contact-service" name="service" required>
-                <option value="">Select a service</option>
-                <option value="accounting">Accounting & Bookkeeping</option>
-                <option value="legal">Legal Consulting</option>
-                <option value="hr">HR Solutions</option>
-                <option value="consulting">Strategic Consulting</option>
-                <option value="other">Other</option>
-              </select>
-            </div>
-            
-            <div class="form-group">
-              <label for="contact-message">Message</label>
-              <textarea id="contact-message" name="message" rows="4" required></textarea>
-            </div>
-            
-            <button type="submit" class="btn btn-primary">Send Message</button>
-          </form>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-grid">
-        <div class="footer-col">
-          <img src="logo.svg" alt="ProServe" width="120" height="32" class="footer-logo">
-          <p>Professional business services for growing companies.</p>
-        </div>
-        
-        <div class="footer-col">
-          <h3>Services</h3>
-          <ul>
-            <li><a href="#accounting">Accounting</a></li>
-            <li><a href="#legal">Legal</a></li>
-            <li><a href="#hr">HR Solutions</a></li>
-            <li><a href="#consulting">Consulting</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-col">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/team">Our Team</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-col">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/blog">Blog</a></li>
-            <li><a href="/guides">Guides</a></li>
-            <li><a href="/webinars">Webinars</a></li>
-            <li><a href="/faq">FAQ</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 ProServe. All rights reserved.</p>
-        <nav aria-label="Footer legal links">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Service</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="app.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/creative-artist-portfolio.html b/skills/html-coder/assets/creative-artist-portfolio.html
deleted file mode 100644
index cdc550b76..000000000
--- a/skills/html-coder/assets/creative-artist-portfolio.html
+++ /dev/null
@@ -1,435 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Maya Chen - Contemporary visual artist working with mixed media, painting, and sculpture. View artwork and exhibitions.">
-  <meta property="og:title" content="Maya Chen - Contemporary Artist">
-  <meta property="og:description" content="Exploring identity, memory, and transformation through mixed media art">
-  <meta property="og:type" content="website">
-  <title>Maya Chen - Contemporary Artist</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Maya Chen</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#works">Works</a></li>
-          <li><a href="#exhibitions">Exhibitions</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-art">
-      <div class="hero-artwork">
-        <img src="hero-artwork.jpg" alt="Abstract mixed media artwork with textured layers" width="1200" height="800" loading="eager">
-      </div>
-      <div class="hero-text">
-        <div class="container">
-          <h1>Maya Chen</h1>
-          <p class="hero-subtitle">Contemporary Artist</p>
-          <p class="hero-statement">Exploring identity, memory, and transformation through mixed media, painting, and sculpture</p>
-        </div>
-      </div>
-    </section>
-    
-    <section id="works" class="works">
-      <div class="container">
-        <header class="section-header">
-          <h2>Selected Works</h2>
-        </header>
-        
-        <div class="works-list">
-          <article class="artwork-feature">
-            <div class="artwork-image">
-              <img src="artwork-series-1.jpg" alt="Memory Fragments series - layered mixed media pieces" width="1000" height="667" loading="lazy">
-            </div>
-            <div class="artwork-details">
-              <h3>Memory Fragments Series</h3>
-              <p class="artwork-year">2025-2026</p>
-              <p class="artwork-medium">Mixed media on canvas, incorporating found objects, photography transfers, and acrylic paint</p>
-              <p class="artwork-dimensions">Various dimensions, 24" x 36" to 48" x 72"</p>
-              
-              <div class="artwork-statement">
-                <p>This ongoing series explores the fractured nature of memory—how our recollections layer, fade, and transform over time. Each piece incorporates personal photographs, vintage ephemera, and textured materials that represent the physical traces of lived experience.</p>
-                
-                <p>The work investigates how we construct identity from fragments of the past, questioning the reliability of memory while celebrating its emotional resonance.</p>
-              </div>
-              
-              <p class="artwork-status"><strong>Status:</strong> Selected pieces available. <a href="#contact">Inquire for details</a></p>
-            </div>
-          </article>
-          
-          <article class="artwork-feature">
-            <div class="artwork-image">
-              <img src="artwork-series-2.jpg" alt="Threshold series - sculptural installations" width="1000" height="667" loading="lazy">
-            </div>
-            <div class="artwork-details">
-              <h3>Threshold Series</h3>
-              <p class="artwork-year">2024</p>
-              <p class="artwork-medium">Steel, fabric, resin, and LED lighting</p>
-              <p class="artwork-dimensions">Site-specific installations, dimensions variable</p>
-              
-              <div class="artwork-statement">
-                <p>Threshold examines liminal spaces—both physical and psychological—where transformation occurs. These sculptural installations create portals that viewers can move through, experiencing shifts in light, texture, and spatial perception.</p>
-                
-                <p>The series draws inspiration from traditional architectural elements reimagined through contemporary materials, inviting contemplation about boundaries, passage, and change.</p>
-              </div>
-              
-              <p class="artwork-status"><strong>Collection:</strong> San Francisco Museum of Modern Art (commissioned installation)</p>
-            </div>
-          </article>
-          
-          <article class="artwork-feature">
-            <div class="artwork-image">
-              <img src="artwork-series-3.jpg" alt="Dialogue series - diptych paintings" width="1000" height="667" loading="lazy">
-            </div>
-            <div class="artwork-details">
-              <h3>Dialogue Series</h3>
-              <p class="artwork-year">2023</p>
-              <p class="artwork-medium">Oil and acrylic on linen, diptych format</p>
-              <p class="artwork-dimensions">Each panel: 36" x 48"</p>
-              
-              <div class="artwork-statement">
-                <p>Presented as paired paintings, Dialogue explores the relationship between Eastern and Western aesthetic traditions, drawing from my Chinese-American heritage. Each diptych places abstract gestural marks in conversation with more structured, geometric forms.</p>
-                
-                <p>The work examines cultural hybridity and the constant negotiation between different ways of seeing and being in the world.</p>
-              </div>
-              
-              <p class="artwork-status"><strong>Status:</strong> Series complete. Several pieces in private collections, 3 available for purchase</p>
-            </div>
-          </article>
-          
-          <article class="artwork-feature">
-            <div class="artwork-image">
-              <img src="artwork-series-4.jpg" alt="Ephemera collection - small-scale works on paper" width="1000" height="667" loading="lazy">
-            </div>
-            <div class="artwork-details">
-              <h3>Ephemera Collection</h3>
-              <p class="artwork-year">2022-ongoing</p>
-              <p class="artwork-medium">Ink, watercolor, collage on handmade paper</p>
-              <p class="artwork-dimensions">8" x 10" to 12" x 16"</p>
-              
-              <div class="artwork-statement">
-                <p>A more intimate body of work created as daily practice pieces. These smaller works explore spontaneity and imperfection, incorporating accidental marks, tea stains, and found papers collected during travels.</p>
-                
-                <p>The collection celebrates the beauty of transience and the creative power of embracing mistakes.</p>
-              </div>
-              
-              <p class="artwork-status"><strong>Status:</strong> Available through studio visits. Prices range $400-$1,200</p>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="exhibitions" class="exhibitions">
-      <div class="container">
-        <header class="section-header">
-          <h2>Exhibitions</h2>
-        </header>
-        
-        <div class="exhibition-timeline">
-          <h3>Upcoming</h3>
-          
-          <article class="exhibition-item">
-            <div class="exhibition-date">
-              <time datetime="2026-09">September 2026</time>
-            </div>
-            <div class="exhibition-details">
-              <h4>Memory & Material</h4>
-              <p class="exhibition-type">Solo Exhibition</p>
-              <p class="exhibition-venue">Contemporary Arts Center, Chicago, IL</p>
-              <p>Major solo exhibition featuring new work from the Memory Fragments series alongside site-specific installations.</p>
-            </div>
-          </article>
-          
-          <article class="exhibition-item">
-            <div class="exhibition-date">
-              <time datetime="2026-06">June 2026</time>
-            </div>
-            <div class="exhibition-details">
-              <h4>Emerging Voices</h4>
-              <p class="exhibition-type">Group Exhibition</p>
-              <p class="exhibition-venue">Whitney Museum of American Art, New York, NY</p>
-              <p>Group show featuring 12 contemporary artists exploring identity and cultural heritage.</p>
-            </div>
-          </article>
-          
-          <h3>Past Exhibitions</h3>
-          
-          <article class="exhibition-item">
-            <div class="exhibition-date">
-              <time datetime="2025-10">October 2025</time>
-            </div>
-            <div class="exhibition-details">
-              <h4>Threshold: An Installation</h4>
-              <p class="exhibition-type">Solo Exhibition</p>
-              <p class="exhibition-venue">San Francisco Museum of Modern Art, San Francisco, CA</p>
-              <p>Commissioned installation for the museum's contemporary gallery space.</p>
-            </div>
-          </article>
-          
-          <article class="exhibition-item">
-            <div class="exhibition-date">
-              <time datetime="2024-05">May 2024</time>
-            </div>
-            <div class="exhibition-details">
-              <h4>Dialogue: East/West</h4>
-              <p class="exhibition-type">Solo Exhibition</p>
-              <p class="exhibition-venue">Gallery 101, Los Angeles, CA</p>
-              <p>Complete presentation of the Dialogue Series with critical acclaim.</p>
-            </div>
-          </article>
-          
-          <article class="exhibition-item">
-            <div class="exhibition-date">
-              <time datetime="2023-11">November 2023</time>
-            </div>
-            <div class="exhibition-details">
-              <h4>Intersections: Asian-American Artists</h4>
-              <p class="exhibition-type">Group Exhibition</p>
-              <p class="exhibition-venue">Brooklyn Museum, Brooklyn, NY</p>
-            </div>
-          </article>
-          
-          <article class="exhibition-item">
-            <div class="exhibition-date">
-              <time datetime="2022-03">March 2022</time>
-            </div>
-            <div class="exhibition-details">
-              <h4>New Talent</h4>
-              <p class="exhibition-type">Group Exhibition</p>
-              <p class="exhibition-venue">Saatchi Gallery, London, UK</p>
-              <p>International exhibition showcasing emerging contemporary artists.</p>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-image">
-            <img src="artist-portrait.jpg" alt="Maya Chen in her studio" width="600" height="750" loading="lazy">
-            <p class="image-caption">In the studio, Oakland, 2026. Photo by Jordan Hayes</p>
-          </div>
-          
-          <div class="about-content">
-            <h2>About the Artist</h2>
-            
-            <p>Maya Chen (b. 1992, San Francisco, CA) is a contemporary visual artist working primarily in mixed media, painting, and sculptural installation. Her work explores themes of cultural identity, memory, and transformation through layered, tactile compositions that invite prolonged contemplation.</p>
-            
-            <p>Drawing from her Chinese-American heritage, Chen's practice investigates the spaces between cultures—the negotiations, translations, and hybrid forms that emerge from living across multiple worlds. Her work often incorporates found materials, vintage photographs, and traditional craft techniques alongside contemporary media.</p>
-            
-            <p>Chen received her MFA from California College of the Arts (2018) and her BA from Yale University (2014). She has been awarded residencies at Headlands Center for the Arts and the Vermont Studio Center, and her work has been featured in <cite>Artforum</cite>, <cite>Art in America</cite>, and <cite>Hyperallergic</cite>.</p>
-            
-            <p>She currently lives and works in Oakland, California.</p>
-            
-            <h3>Education</h3>
-            <dl class="education-list">
-              <dt>2018</dt>
-              <dd>MFA, Studio Art, California College of the Arts, San Francisco, CA</dd>
-              
-              <dt>2014</dt>
-              <dd>BA, Art History and Studio Art, Yale University, New Haven, CT</dd>
-            </dl>
-            
-            <h3>Awards & Residencies</h3>
-            <ul class="awards-list">
-              <li>Emerging Artist Grant, Joan Mitchell Foundation (2025)</li>
-              <li>Artist Residency, Headlands Center for the Arts (2024)</li>
-              <li>Artadia Award Finalist (2023)</li>
-              <li>Vermont Studio Center Fellowship (2022)</li>
-              <li>Inaugural Contemporary Art Prize, Asian Arts Museum (2021)</li>
-            </ul>
-            
-            <h3>Collections</h3>
-            <ul class="collections-list">
-              <li>San Francisco Museum of Modern Art, San Francisco, CA</li>
-              <li>Asian Art Museum, San Francisco, CA</li>
-              <li>de Young Museum, San Francisco, CA</li>
-              <li>Berkeley Art Museum and Pacific Film Archive, Berkeley, CA</li>
-              <li>Private collections (USA, UK, Hong Kong)</li>
-            </ul>
-            
-            <h3>Press & Publications</h3>
-            <ul class="press-list">
-              <li>"Maya Chen's Layered Histories," <cite>Artforum</cite>, November 2025</li>
-              <li>"Threshold: Navigating Liminal Space," <cite>Art in America</cite>, October 2025</li>
-              <li>"10 Emerging Artists to Watch," <cite>Hyperallergic</cite>, January 2024</li>
-              <li>"In Dialogue with Heritage," <cite>Sculpture Magazine</cite>, Summer 2023</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="statement">
-      <div class="container">
-        <div class="statement-content">
-          <h2>Artist Statement</h2>
-          
-          <p>My work emerges from the intersection of memory, materiality, and cultural identity. As a first-generation Chinese-American, I've always been fascinated by the ways we construct meaning across different cultural frameworks—the translations, mistranslations, and beautiful hybrid forms that result.</p>
-          
-          <p>I work primarily with mixed media and installation, building up layers of material that mirror the layering of experience and memory. My practice incorporates found photographs, vintage papers, textiles, and traditional craft techniques alongside contemporary materials like resin and LED lighting. This juxtaposition of old and new, East and West, reflects my lived experience navigating multiple cultural identities.</p>
-          
-          <p>Memory—both personal and collective—is central to my work. I'm interested in how memories fragment, shift, and reconstruct over time, and how physical objects can serve as anchors for recollection. The materials I choose carry their own histories and associations, adding layers of meaning beyond my own intentions.</p>
-          
-          <p>Through my art, I create spaces for reflection and questioning. I want viewers to slow down, look closely, and discover the subtle details and layered narratives embedded within each piece. My work asks: How do we remember? What gets preserved and what fades? How do we honor multiple truths simultaneously?</p>
-          
-          <p>Ultimately, I believe art can create bridges—between cultures, between past and present, between individual experience and collective understanding. My hope is that the work resonates not just with those who share my specific cultural background, but with anyone who has navigated the complexity of identity, memory, and belonging.</p>
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact" class="contact">
-      <div class="container">
-        <div class="contact-layout">
-          <div class="contact-info-section">
-            <h2>Get in Touch</h2>
-            <p>For inquiries about available works, studio visits, commissions, or press requests, please reach out using the form or contact information below.</p>
-            
-            <div class="contact-details">
-              <h3>Contact Information</h3>
-              <p>
-                <strong>Email:</strong> <a href="mailto:studio@mayachen.art">studio@mayachen.art</a><br>
-                <strong>Studio:</strong> Oakland, California<br>
-                <strong>Representation:</strong> Gallery 101, Los Angeles
-              </p>
-            </div>
-            
-            <div class="contact-details">
-              <h3>Gallery Representation</h3>
-              <p>
-                <strong>Gallery 101</strong><br>
-                456 Art District Blvd<br>
-                Los Angeles, CA 90013<br>
-                <a href="tel:+13105551234">(310) 555-1234</a><br>
-                <a href="https://gallery101.example.com">gallery101.example.com</a>
-              </p>
-            </div>
-            
-            <div class="social-links">
-              <h3>Follow My Work</h3>
-              <ul>
-                <li><a href="https://instagram.com/mayachenart">Instagram</a></li>
-                <li><a href="https://artsy.net/artist/maya-chen">Artsy</a></li>
-                <li><a href="https://saatchiart.com/mayachen">Saatchi Art</a></li>
-              </ul>
-            </div>
-          </div>
-          
-          <div class="contact-form-container">
-            <form class="contact-form" action="/contact-artist" method="POST">
-              <div class="form-group">
-                <label for="contact-name">Name</label>
-                <input type="text" id="contact-name" name="name" required autocomplete="name">
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-email">Email</label>
-                <input type="email" id="contact-email" name="email" required autocomplete="email">
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-phone">Phone <span class="optional">(optional)</span></label>
-                <input type="tel" id="contact-phone" name="phone" autocomplete="tel">
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-subject">Subject</label>
-                <select id="contact-subject" name="subject" required>
-                  <option value="">Select subject</option>
-                  <option value="purchase">Purchase Inquiry</option>
-                  <option value="studio-visit">Studio Visit Request</option>
-                  <option value="commission">Commission Inquiry</option>
-                  <option value="exhibition">Exhibition Opportunity</option>
-                  <option value="press">Press / Media</option>
-                  <option value="other">Other</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-message">Message</label>
-                <textarea id="contact-message" name="message" rows="6" required></textarea>
-              </div>
-              
-              <button type="submit" class="btn btn-primary">Send Message</button>
-              
-              <p class="form-footer"><small>I typically respond to inquiries within 3-5 business days.</small></p>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="newsletter">
-      <div class="container">
-        <h2>Studio Updates</h2>
-        <p>Subscribe to receive occasional updates about new work, exhibitions, and studio news</p>
-        
-        <form class="newsletter-form" action="/subscribe" method="POST">
-          <label for="newsletter-email" class="visually-hidden">Email address</label>
-          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
-          <button type="submit" class="btn btn-secondary">Subscribe</button>
-        </form>
-        
-        <p class="newsletter-note"><small>I respect your privacy. No spam, unsubscribe anytime.</small></p>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Maya Chen</h3>
-          <p>Contemporary Visual Artist<br>Oakland, California</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Navigation</h3>
-          <ul>
-            <li><a href="#works">Works</a></li>
-            <li><a href="#exhibitions">Exhibitions</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Connect</h3>
-          <ul>
-            <li><a href="https://instagram.com/mayachenart">Instagram</a></li>
-            <li><a href="https://artsy.net/artist/maya-chen">Artsy</a></li>
-            <li><a href="/press">Press Kit</a></li>
-            <li><a href="/cv">Download CV (PDF)</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Maya Chen. All artwork images and content are protected by copyright.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Use</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/creative-designer-portfolio.html b/skills/html-coder/assets/creative-designer-portfolio.html
deleted file mode 100644
index 29ab21fa2..000000000
--- a/skills/html-coder/assets/creative-designer-portfolio.html
+++ /dev/null
@@ -1,448 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Alex Rivera - UI/UX Designer specializing in web and mobile app design. View my portfolio of design work.">
-  <meta property="og:title" content="Alex Rivera - UI/UX Designer">
-  <meta property="og:description" content="Creating beautiful, user-centered digital experiences">
-  <meta property="og:type" content="website">
-  <title>Alex Rivera - UI/UX Designer</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Alex Rivera</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#work">Work</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#process">Process</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="container">
-        <div class="hero-content">
-          <p class="hero-label">UI/UX Designer</p>
-          <h1>Creating beautiful, user-centered digital experiences</h1>
-          <p class="hero-description">I design intuitive interfaces for web and mobile applications, focusing on usability, accessibility, and delightful interactions.</p>
-          <div class="hero-actions">
-            <a href="#work" class="btn btn-primary">View My Work</a>
-            <a href="#contact" class="btn btn-outline">Get in Touch</a>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="work" class="portfolio">
-      <div class="container">
-        <header class="section-header">
-          <h2>Selected Work</h2>
-          <p>Recent projects showcasing my design approach</p>
-        </header>
-        
-        <div class="portfolio-grid">
-          <article class="project-card featured">
-            <a href="/work/fintech-app" class="project-link">
-              <img src="fintech-hero.jpg" alt="FinTech mobile banking app interface" width="800" height="500" loading="eager">
-              <div class="project-content">
-                <div class="project-tags">
-                  <span class="tag">Mobile App</span>
-                  <span class="tag">FinTech</span>
-                </div>
-                <h3>FinTech Mobile Banking</h3>
-                <p>Complete redesign of a mobile banking experience for 2M+ users, improving task completion rates by 40%</p>
-                <span class="project-cta" aria-hidden="true">View Case Study →</span>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/work/wellness-platform" class="project-link">
-              <img src="wellness-cover.jpg" alt="Wellness platform dashboard design" width="600" height="400" loading="lazy">
-              <div class="project-content">
-                <div class="project-tags">
-                  <span class="tag">Web App</span>
-                  <span class="tag">Healthcare</span>
-                </div>
-                <h3>Wellness Management Platform</h3>
-                <p>Enterprise wellness platform connecting employees with health resources and coaching</p>
-                <span class="project-cta" aria-hidden="true">View Case Study →</span>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/work/elearning-redesign" class="project-link">
-              <img src="elearning-cover.jpg" alt="E-learning platform interface redesign" width="600" height="400" loading="lazy">
-              <div class="project-content">
-                <div class="project-tags">
-                  <span class="tag">Web Design</span>
-                  <span class="tag">Education</span>
-                </div>
-                <h3>E-Learning Platform Redesign</h3>
-                <p>Modernizing an online education platform to improve learner engagement and course completion</p>
-                <span class="project-cta" aria-hidden="true">View Case Study →</span>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/work/food-delivery" class="project-link">
-              <img src="food-delivery-cover.jpg" alt="Food delivery app UI design" width="600" height="400" loading="lazy">
-              <div class="project-content">
-                <div class="project-tags">
-                  <span class="tag">Mobile App</span>
-                  <span class="tag">Consumer</span>
-                </div>
-                <h3>Food Delivery App</h3>
-                <p>Streamlined ordering experience reducing checkout time by 60%</p>
-                <span class="project-cta" aria-hidden="true">View Case Study →</span>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/work/saas-dashboard" class="project-link">
-              <img src="saas-cover.jpg" alt="SaaS analytics dashboard" width="600" height="400" loading="lazy">
-              <div class="project-content">
-                <div class="project-tags">
-                  <span class="tag">Web App</span>
-                  <span class="tag">SaaS</span>
-                </div>
-                <h3>Analytics Dashboard</h3>
-                <p>Data visualization dashboard helping teams make informed decisions</p>
-                <span class="project-cta" aria-hidden="true">View Case Study →</span>
-              </div>
-            </a>
-          </article>
-          
-          <article class="project-card">
-            <a href="/work/nonprofit-website" class="project-link">
-              <img src="nonprofit-cover.jpg" alt="Nonprofit organization website" width="600" height="400" loading="lazy">
-              <div class="project-content">
-                <div class="project-tags">
-                  <span class="tag">Website</span>
-                  <span class="tag">Nonprofit</span>
-                </div>
-                <h3>Nonprofit Rebrand & Website</h3>
-                <p>Complete brand refresh and website redesign increasing donations by 85%</p>
-                <span class="project-cta" aria-hidden="true">View Case Study →</span>
-              </div>
-            </a>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-image">
-            <img src="profile.jpg" alt="Alex Rivera at design desk" width="500" height="600" loading="lazy">
-          </div>
-          
-          <div class="about-content">
-            <h2>About Me</h2>
-            <p>I'm a UI/UX designer with 8 years of experience creating digital products that people love to use. Based in San Francisco, I work with startups and established companies to design intuitive, accessible, and beautiful experiences.</p>
-            
-            <p>My design philosophy is rooted in empathy—understanding users' needs, frustrations, and goals. I believe great design solves real problems while creating moments of delight.</p>
-            
-            <p>When I'm not designing, you'll find me hiking Bay Area trails, experimenting with film photography, or mentoring junior designers through ADPList.</p>
-            
-            <h3>Skills & Expertise</h3>
-            <div class="skills-grid">
-              <div class="skill-category">
-                <h4>Design</h4>
-                <ul>
-                  <li>UX Research & Testing</li>
-                  <li>Information Architecture</li>
-                  <li>Interaction Design</li>
-                  <li>Visual Design</li>
-                  <li>Prototyping</li>
-                  <li>Design Systems</li>
-                </ul>
-              </div>
-              
-              <div class="skill-category">
-                <h4>Tools</h4>
-                <ul>
-                  <li>Figma</li>
-                  <li>Adobe Creative Suite</li>
-                  <li>Sketch</li>
-                  <li>Framer</li>
-                  <li>Principle</li>
-                  <li>InVision</li>
-                </ul>
-              </div>
-              
-              <div class="skill-category">
-                <h4>Development</h4>
-                <ul>
-                  <li>HTML & CSS</li>
-                  <li>JavaScript Basics</li>
-                  <li>Responsive Design</li>
-                  <li>Accessibility (WCAG)</li>
-                </ul>
-              </div>
-            </div>
-            
-            <h3>Recognition</h3>
-            <ul class="recognition-list">
-              <li>🏆 Awwwards Site of the Day (2025)</li>
-              <li>📱 Apple Design Award Finalist (2024)</li>
-              <li>✨ Featured in UX Collective (2023)</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="process" class="process">
-      <div class="container">
-        <header class="section-header">
-          <h2>My Design Process</h2>
-          <p>How I approach every project</p>
-        </header>
-        
-        <div class="process-steps">
-          <article class="process-step">
-            <div class="step-number" aria-hidden="true">01</div>
-            <h3>Discover & Research</h3>
-            <p>Understanding the problem space through user interviews, competitive analysis, and stakeholder workshops. I dig deep to uncover user needs and business constraints.</p>
-            <ul class="step-activities">
-              <li>User interviews</li>
-              <li>Competitive analysis</li>
-              <li>Heuristic evaluation</li>
-              <li>Analytics review</li>
-            </ul>
-          </article>
-          
-          <article class="process-step">
-            <div class="step-number" aria-hidden="true">02</div>
-            <h3>Define & Strategize</h3>
-            <p>Synthesizing research into actionable insights, creating user personas, journey maps, and defining the product strategy and key metrics for success.</p>
-            <ul class="step-activities">
-              <li>User personas</li>
-              <li>Journey mapping</li>
-              <li>Information architecture</li>
-              <li>Success metrics definition</li>
-            </ul>
-          </article>
-          
-          <article class="process-step">
-            <div class="step-number" aria-hidden="true">03</div>
-            <h3>Design & Prototype</h3>
-            <p>Exploring multiple solutions through sketching, wireframing, and high-fidelity mockups. Creating interactive prototypes to test ideas and gather feedback early.</p>
-            <ul class="step-activities">
-              <li>Sketching & ideation</li>
-              <li>Wireframing</li>
-              <li>Visual design</li>
-              <li>Interactive prototyping</li>
-            </ul>
-          </article>
-          
-          <article class="process-step">
-            <div class="step-number" aria-hidden="true">04</div>
-            <h3>Test & Iterate</h3>
-            <p>Conducting usability testing with real users, analyzing results, and refining the design based on feedback. Design is never done on the first try.</p>
-            <ul class="step-activities">
-              <li>Usability testing</li>
-              <li>Accessibility audits</li>
-              <li>Design iteration</li>
-              <li>Stakeholder reviews</li>
-            </ul>
-          </article>
-          
-          <article class="process-step">
-            <div class="step-number" aria-hidden="true">05</div>
-            <h3>Deliver & Support</h3>
-            <p>Collaborating closely with developers during implementation, creating design documentation and style guides, and measuring post-launch performance.</p>
-            <ul class="step-activities">
-              <li>Developer handoff</li>
-              <li>Design system documentation</li>
-              <li>QA & design review</li>
-              <li>Post-launch monitoring</li>
-            </ul>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="testimonials">
-      <div class="container">
-        <h2>What Clients Say</h2>
-        
-        <div class="testimonials-grid">
-          <article class="testimonial-card">
-            <blockquote>
-              <p>"Alex transformed our product from confusing to intuitive. User satisfaction scores jumped 45% after the redesign, and our support tickets dropped significantly. Outstanding work."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="client-sarah.jpg" alt="" width="60" height="60" loading="lazy">
-              <div class="author-info">
-                <cite>Sarah Chen</cite>
-                <p>Product Director, FinTech Corp</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card">
-            <blockquote>
-              <p>"Working with Alex was a dream. They listened carefully to our needs, challenged our assumptions (in the best way), and delivered designs that exceeded our expectations."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="client-michael.jpg" alt="" width="60" height="60" loading="lazy">
-              <div class="author-info">
-                <cite>Michael Torres</cite>
-                <p>Founder, WellnessHub</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card">
-            <blockquote>
-              <p>"Alex brings both creative vision and analytical rigor. Every design decision was backed by research and testing. The result was a product users actually want to use."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="client-jennifer.jpg" alt="" width="60" height="60" loading="lazy">
-              <div class="author-info">
-                <cite>Jennifer Park</cite>
-                <p>VP Product, EduLearn</p>
-              </div>
-            </footer>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact" class="contact">
-      <div class="container">
-        <div class="contact-layout">
-          <div class="contact-intro">
-            <h2>Let's Work Together</h2>
-            <p>I'm currently available for freelance projects and consulting work. Whether you need a full product redesign or want to improve a specific feature, I'd love to hear about your project.</p>
-            
-            <div class="contact-info">
-              <p><strong>Email:</strong> <a href="mailto:alex@alexrivera.design">alex@alexrivera.design</a></p>
-              <p><strong>Location:</strong> San Francisco, CA (Remote-friendly)</p>
-              <p><strong>Response time:</strong> Usually within 24 hours</p>
-            </div>
-            
-            <div class="social-links">
-              <a href="https://dribbble.com/alexrivera" class="social-link">Dribbble</a>
-              <a href="https://linkedin.com/in/alexrivera" class="social-link">LinkedIn</a>
-              <a href="https://twitter.com/alexrivera" class="social-link">Twitter</a>
-              <a href="https://medium.com/@alexrivera" class="social-link">Medium</a>
-            </div>
-          </div>
-          
-          <div class="contact-form-container">
-            <form class="contact-form" action="/send-message" method="POST">
-              <div class="form-group">
-                <label for="contact-name">Name</label>
-                <input type="text" id="contact-name" name="name" required autocomplete="name">
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-email">Email</label>
-                <input type="email" id="contact-email" name="email" required autocomplete="email">
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-company">Company <span class="optional">(optional)</span></label>
-                <input type="text" id="contact-company" name="company" autocomplete="organization">
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-project-type">Project Type</label>
-                <select id="contact-project-type" name="project-type">
-                  <option value="">Select type</option>
-                  <option value="full-product">Full Product Design</option>
-                  <option value="feature">Feature Design</option>
-                  <option value="redesign">Redesign/Refresh</option>
-                  <option value="consulting">Design Consulting</option>
-                  <option value="research">UX Research</option>
-                  <option value="other">Other</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-budget">Budget Range</label>
-                <select id="contact-budget" name="budget">
-                  <option value="">Select range</option>
-                  <option value="5k-10k">$5k - $10k</option>
-                  <option value="10k-25k">$10k - $25k</option>
-                  <option value="25k-50k">$25k - $50k</option>
-                  <option value="50k+">$50k+</option>
-                  <option value="not-sure">Not sure yet</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-timeline">Desired Timeline</label>
-                <input type="text" id="contact-timeline" name="timeline" placeholder="e.g., 2-3 months, ASAP, Q3 2026">
-              </div>
-              
-              <div class="form-group">
-                <label for="contact-message">Tell Me About Your Project</label>
-                <textarea id="contact-message" name="message" rows="5" placeholder="What problem are you trying to solve? Who are your users? What's your vision?" required></textarea>
-              </div>
-              
-              <button type="submit" class="btn btn-primary btn-large">Send Message</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Alex Rivera</h3>
-          <p>UI/UX Designer creating thoughtful digital experiences</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Quick Links</h3>
-          <ul>
-            <li><a href="#work">Portfolio</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#process">Process</a></li>
-            <li><a href="#contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Connect</h3>
-          <ul>
-            <li><a href="https://dribbble.com/alexrivera">Dribbble</a></li>
-            <li><a href="https://linkedin.com/in/alexrivera">LinkedIn</a></li>
-            <li><a href="https://twitter.com/alexrivera">Twitter</a></li>
-            <li><a href="https://medium.com/@alexrivera">Medium</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Alex Rivera. All rights reserved.</p>
-        <p>Designed and coded with care</p>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/creative-photographer-portfolio.html b/skills/html-coder/assets/creative-photographer-portfolio.html
deleted file mode 100644
index 09f74a7b4..000000000
--- a/skills/html-coder/assets/creative-photographer-portfolio.html
+++ /dev/null
@@ -1,509 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Jordan Hayes - Professional photographer specializing in portraits, weddings, and commercial photography.">
-  <meta property="og:title" content="Jordan Hayes Photography">
-  <meta property="og:description" content="Capturing authentic moments and telling stories through photography">
-  <meta property="og:type" content="website">
-  <title>Jordan Hayes - Professional Photographer</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Jordan Hayes</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#portfolio">Portfolio</a></li>
-          <li><a href="#services">Services</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#contact">Book a Session</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-photo">
-      <img src="hero-image.jpg" alt="Dramatic portrait photograph with natural lighting" width="1920" height="1080" loading="eager" class="hero-image">
-      <div class="hero-overlay">
-        <div class="container">
-          <div class="hero-content">
-            <h1>Capturing Authentic Moments</h1>
-            <p>Professional photographer based in New York, specializing in portraits, weddings, and commercial work</p>
-            <a href="#portfolio" class="btn btn-primary">View Portfolio</a>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="portfolio" class="portfolio">
-      <div class="container">
-        <header class="section-header">
-          <h2>Portfolio</h2>
-          <p>A selection of my recent work</p>
-        </header>
-        
-        <nav class="portfolio-filter" aria-label="Filter portfolio">
-          <button class="filter-btn active" data-filter="all">All</button>
-          <button class="filter-btn" data-filter="portraits">Portraits</button>
-          <button class="filter-btn" data-filter="weddings">Weddings</button>
-          <button class="filter-btn" data-filter="commercial">Commercial</button>
-          <button class="filter-btn" data-filter="lifestyle">Lifestyle</button>
-        </nav>
-        
-        <div class="gallery-grid">
-          <article class="gallery-item" data-category="portraits">
-            <a href="/gallery/portrait-1" class="gallery-link">
-              <img src="portrait-1.jpg" alt="Professional headshot with natural light" width="600" height="800" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Executive Portrait Session</h3>
-                <p class="category">Portraits</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="weddings">
-            <a href="/gallery/wedding-1" class="gallery-link">
-              <img src="wedding-1.jpg" alt="Wedding couple embracing at sunset" width="800" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Brooklyn Rooftop Wedding</h3>
-                <p class="category">Weddings</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="commercial">
-            <a href="/gallery/commercial-1" class="gallery-link">
-              <img src="commercial-1.jpg" alt="Product photography setup with dramatic lighting" width="600" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Fashion Editorial</h3>
-                <p class="category">Commercial</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="portraits">
-            <a href="/gallery/portrait-2" class="gallery-link">
-              <img src="portrait-2.jpg" alt="Family portrait in natural outdoor setting" width="800" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Family Portrait</h3>
-                <p class="category">Portraits</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="lifestyle">
-            <a href="/gallery/lifestyle-1" class="gallery-link">
-              <img src="lifestyle-1.jpg" alt="Candid lifestyle photography in urban setting" width="600" height="800" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Urban Lifestyle</h3>
-                <p class="category">Lifestyle</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="weddings">
-            <a href="/gallery/wedding-2" class="gallery-link">
-              <img src="wedding-2.jpg" alt="Wedding ceremony detail shot" width="600" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Garden Wedding Ceremony</h3>
-                <p class="category">Weddings</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="commercial">
-            <a href="/gallery/commercial-2" class="gallery-link">
-              <img src="commercial-2.jpg" alt="Brand campaign photography" width="800" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Brand Campaign</h3>
-                <p class="category">Commercial</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="portraits">
-            <a href="/gallery/portrait-3" class="gallery-link">
-              <img src="portrait-3.jpg" alt="Artistic portrait with creative lighting" width="600" height="800" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Creative Portrait Series</h3>
-                <p class="category">Portraits</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="lifestyle">
-            <a href="/gallery/lifestyle-2" class="gallery-link">
-              <img src="lifestyle-2.jpg" alt="Lifestyle photography capturing everyday moments" width="800" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Day in the Life</h3>
-                <p class="category">Lifestyle</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="weddings">
-            <a href="/gallery/wedding-3" class="gallery-link">
-              <img src="wedding-3.jpg" alt="Wedding reception celebration photograph" width="600" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Reception Moments</h3>
-                <p class="category">Weddings</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="commercial">
-            <a href="/gallery/commercial-3" class="gallery-link">
-              <img src="commercial-3.jpg" alt="Corporate event photography" width="600" height="800" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Corporate Event</h3>
-                <p class="category">Commercial</p>
-              </div>
-            </a>
-          </article>
-          
-          <article class="gallery-item" data-category="lifestyle">
-            <a href="/gallery/lifestyle-3" class="gallery-link">
-              <img src="lifestyle-3.jpg" alt="Travel and adventure lifestyle photography" width="800" height="600" loading="lazy">
-              <div class="gallery-caption">
-                <h3>Travel Stories</h3>
-                <p class="category">Lifestyle</p>
-              </div>
-            </a>
-          </article>
-        </div>
-        
-        <div class="gallery-cta">
-          <p>Want to see more? Check out my full galleries on Instagram</p>
-          <a href="https://instagram.com/jordanhayesphoto" class="btn btn-outline">Follow on Instagram</a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="services" class="services">
-      <div class="container">
-        <header class="section-header">
-          <h2>Services & Pricing</h2>
-          <p>Professional photography for every occasion</p>
-        </header>
-        
-        <div class="services-grid">
-          <article class="service-card">
-            <div class="service-icon" aria-hidden="true">📸</div>
-            <h3>Portrait Photography</h3>
-            <p>Professional headshots, personal branding, and family portraits</p>
-            
-            <ul class="service-features">
-              <li>1-2 hour session</li>
-              <li>Location of your choice or studio</li>
-              <li>Wardrobe consultation</li>
-              <li>50+ edited high-resolution images</li>
-              <li>Online gallery for viewing/download</li>
-              <li>Print rights included</li>
-            </ul>
-            
-            <p class="service-price">Starting at <strong>$450</strong></p>
-            <a href="#contact" class="btn btn-outline">Book Now</a>
-          </article>
-          
-          <article class="service-card featured">
-            <div class="badge">Most Popular</div>
-            <div class="service-icon" aria-hidden="true">💍</div>
-            <h3>Wedding Photography</h3>
-            <p>Full-day coverage capturing every moment of your special day</p>
-            
-            <ul class="service-features">
-              <li>Up to 10 hours coverage</li>
-              <li>Engagement session included</li>
-              <li>Second photographer available</li>
-              <li>500+ edited high-resolution images</li>
-              <li>Custom online gallery</li>
-              <li>Print rights included</li>
-              <li>Wedding album option available</li>
-            </ul>
-            
-            <p class="service-price">Starting at <strong>$3,500</strong></p>
-            <a href="#contact" class="btn btn-primary">Book Now</a>
-          </article>
-          
-          <article class="service-card">
-            <div class="service-icon" aria-hidden="true">💼</div>
-            <h3>Commercial & Brand</h3>
-            <p>Product photography, brand campaigns, and corporate events</p>
-            
-            <ul class="service-features">
-              <li>Half or full-day shoots</li>
-              <li>Studio or on-location</li>
-              <li>Art direction available</li>
-              <li>Edited images for web & print</li>
-              <li>Fast turnaround available</li>
-              <li>Commercial licensing included</li>
-            </ul>
-            
-            <p class="service-price">Starting at <strong>$1,200</strong></p>
-            <a href="#contact" class="btn btn-outline">Get a Quote</a>
-          </article>
-        </div>
-        
-        <div class="services-note">
-          <p><strong>Custom Packages:</strong> Every project is unique. Contact me to discuss a custom package that fits your specific needs and budget.</p>
-        </div>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-image">
-            <img src="photographer-portrait.jpg" alt="Jordan Hayes with camera" width="500" height="600" loading="lazy">
-          </div>
-          
-          <div class="about-content">
-            <h2>About Jordan</h2>
-            <p>Hi, I'm Jordan! I've been a professional photographer for over 10 years, and I still get excited every time I pick up my camera.</p>
-            
-            <p>My journey into photography started with a borrowed film camera and a college photography course. What began as a hobby quickly became a passion, and eventually, my career. I love that photography lets me meet incredible people, witness their most important moments, and create images they'll treasure forever.</p>
-            
-            <p>My approach is documentary-style with an editorial eye—I want to capture genuine emotions and authentic moments, but with beautiful composition and lighting. Whether I'm shooting a wedding, a portrait session, or a commercial project, my goal is always the same: tell a story that resonates.</p>
-            
-            <p>When I'm not behind the camera, you'll find me exploring New York's neighborhoods, trying new coffee shops, or planning my next travel photography adventure.</p>
-            
-            <h3>What I Believe</h3>
-            <ul class="beliefs-list">
-              <li><strong>Authenticity over perfection:</strong> Real moments are more beautiful than posed ones</li>
-              <li><strong>Connection matters:</strong> The best photos come from genuine rapport</li>
-              <li><strong>Light is everything:</strong> Understanding light transforms good into great</li>
-              <li><strong>Stories > shots:</strong> Every photo should tell part of a larger narrative</li>
-            </ul>
-            
-            <h3>Experience & Recognition</h3>
-            <ul class="experience-list">
-              <li>10+ years professional photography experience</li>
-              <li>200+ weddings photographed</li>
-              <li>Featured in Martha Stewart Weddings, The Knot</li>
-              <li>Commercial clients include Nike, Airbnb, Etsy</li>
-              <li>Member: Professional Photographers of America</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="testimonials">
-      <div class="container">
-        <h2>Kind Words from Clients</h2>
-        
-        <div class="testimonials-grid">
-          <article class="testimonial-card">
-            <blockquote>
-              <p>"Jordan captured our wedding day perfectly—every laugh, every tear, every spontaneous moment. When we look at our photos, we're transported right back to that day. We couldn't be happier!"</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <cite>Emily & Marcus</cite>
-              <p>Wedding Clients, 2025</p>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card">
-            <blockquote>
-              <p>"As someone who usually hates having their photo taken, Jordan made the headshot session actually enjoyable. The photos came out amazing—professional but still natural. I use them everywhere now!"</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <cite>David Chen</cite>
-              <p>Corporate Portrait Client</p>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card">
-            <blockquote>
-              <p>"We've worked with Jordan on three campaigns now. They consistently deliver stunning work, understand our brand vision, and are an absolute professional. Highly recommend!"</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <cite>Rachel Green</cite>
-              <p>Marketing Director, Boutique Fashion Brand</p>
-            </footer>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="instagram-feed">
-      <div class="container">
-        <h2>Follow Along on Instagram</h2>
-        <p>@jordanhayesphoto</p>
-        
-        <div class="instagram-grid">
-          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
-            <img src="insta-1.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
-          </a>
-          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
-            <img src="insta-2.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
-          </a>
-          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
-            <img src="insta-3.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
-          </a>
-          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
-            <img src="insta-4.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
-          </a>
-          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
-            <img src="insta-5.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
-          </a>
-          <a href="https://instagram.com/jordanhayesphoto" class="instagram-item">
-            <img src="insta-6.jpg" alt="Recent Instagram post" width="300" height="300" loading="lazy">
-          </a>
-        </div>
-        
-        <a href="https://instagram.com/jordanhayesphoto" class="btn btn-outline">Follow @jordanhayesphoto</a>
-      </div>
-    </section>
-    
-    <section id="contact" class="contact">
-      <div class="container">
-        <div class="contact-layout">
-          <div class="contact-intro">
-            <h2>Let's Create Something Beautiful</h2>
-            <p>I'd love to hear about your photography needs and discuss how we can work together.</p>
-            
-            <div class="contact-details">
-              <p><strong>Email:</strong> <a href="mailto:jordan@jordanhayes.photo">jordan@jordanhayes.photo</a></p>
-              <p><strong>Phone:</strong> <a href="tel:+12125551234">(212) 555-1234</a></p>
-              <p><strong>Studio:</strong> Brooklyn, NY</p>
-              <p><strong>Available:</strong> Travel available nationwide</p>
-            </div>
-            
-            <div class="availability">
-              <h3>Booking Status</h3>
-              <p class="status-badge">✅ Accepting New Clients</p>
-              <p><strong>2026 Wedding Availability:</strong> 8 dates remaining<br>
-              <strong>Portrait Sessions:</strong> Booking 2-3 weeks out</p>
-            </div>
-          </div>
-          
-          <div class="contact-form-container">
-            <form class="contact-form" action="/booking-inquiry" method="POST">
-              <div class="form-group">
-                <label for="booking-name">Name</label>
-                <input type="text" id="booking-name" name="name" required autocomplete="name">
-              </div>
-              
-              <div class="form-row">
-                <div class="form-group">
-                  <label for="booking-email">Email</label>
-                  <input type="email" id="booking-email" name="email" required autocomplete="email">
-                </div>
-                
-                <div class="form-group">
-                  <label for="booking-phone">Phone</label>
-                  <input type="tel" id="booking-phone" name="phone" autocomplete="tel">
-                </div>
-              </div>
-              
-              <div class="form-group">
-                <label for="booking-service">Service Interested In</label>
-                <select id="booking-service" name="service" required>
-                  <option value="">Select service</option>
-                  <option value="portrait">Portrait Photography</option>
-                  <option value="wedding">Wedding Photography</option>
-                  <option value="commercial">Commercial / Brand</option>
-                  <option value="event">Event Photography</option>
-                  <option value="other">Other / Not Sure</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="booking-date">Preferred Date(s)</label>
-                <input type="text" id="booking-date" name="date" placeholder="e.g., June 15, 2026 or Summer 2026">
-              </div>
-              
-              <div class="form-group">
-                <label for="booking-location">Location</label>
-                <input type="text" id="booking-location" name="location" placeholder="Where will the session/event take place?">
-              </div>
-              
-              <div class="form-group">
-                <label for="booking-details">Tell Me About Your Vision</label>
-                <textarea id="booking-details" name="details" rows="5" placeholder="What kind of photos are you looking for? Any inspiration or specific requests?" required></textarea>
-              </div>
-              
-              <div class="form-group">
-                <label for="booking-budget">Budget Range</label>
-                <select id="booking-budget" name="budget">
-                  <option value="">Select budget (optional)</option>
-                  <option value="under-1k">Under $1,000</option>
-                  <option value="1k-2k">$1,000 - $2,000</option>
-                  <option value="2k-4k">$2,000 - $4,000</option>
-                  <option value="4k-6k">$4,000 - $6,000</option>
-                  <option value="6k+">$6,000+</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="booking-referral">How did you hear about me? <span class="optional">(optional)</span></label>
-                <input type="text" id="booking-referral" name="referral" placeholder="Referral, Instagram, Google, etc.">
-              </div>
-              
-              <button type="submit" class="btn btn-primary btn-large">Send Inquiry</button>
-              
-              <p class="form-footer"><small>I typically respond within 24 hours. Looking forward to connecting!</small></p>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Jordan Hayes Photography</h3>
-          <p>Capturing life's authentic moments</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/jordanhayesphoto" aria-label="Instagram">Instagram</a>
-            <a href="https://facebook.com/jordanhayesphoto" aria-label="Facebook">Facebook</a>
-            <a href="https://pinterest.com/jordanhayesphoto" aria-label="Pinterest">Pinterest</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Services</h3>
-          <ul>
-            <li><a href="#services">Portrait Photography</a></li>
-            <li><a href="#services">Wedding Photography</a></li>
-            <li><a href="#services">Commercial Work</a></li>
-            <li><a href="/pricing">Full Pricing</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/blog">Photography Blog</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/testimonials">Client Reviews</a></li>
-            <li><a href="/vendors">Preferred Vendors</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Jordan Hayes Photography. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms & Conditions</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/food-bakery.html b/skills/html-coder/assets/food-bakery.html
deleted file mode 100644
index 265df4a68..000000000
--- a/skills/html-coder/assets/food-bakery.html
+++ /dev/null
@@ -1,520 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Sweet Haven Bakery - Artisan breads, custom cakes, and fresh pastries. Order online for pickup or delivery.">
-  <title>Sweet Haven Bakery - Fresh Baked Goods Daily</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Sweet Haven Bakery</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#products">Products</a></li>
-          <li><a href="#custom">Custom Orders</a></li>
-          <li><a href="#daily">Daily Specials</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#order">Order Now</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="hero-content">
-        <h1>Handcrafted Baked Goods Made Fresh Daily</h1>
-        <p>From scratch recipes using premium ingredients since 1998</p>
-        <div class="hero-actions">
-          <a href="#order" class="btn btn-primary">Order Pickup or Delivery</a>
-          <a href="#custom" class="btn btn-secondary">Custom Cakes</a>
-        </div>
-      </div>
-    </section>
-    
-    <section class="highlights">
-      <div class="container">
-        <div class="highlights-grid">
-          <div class="highlight">
-            <div class="highlight-icon" aria-hidden="true">🥖</div>
-            <h2>Fresh Daily</h2>
-            <p>Baked from scratch every morning, nothing frozen</p>
-          </div>
-          
-          <div class="highlight">
-            <div class="highlight-icon" aria-hidden="true">🎂</div>
-            <h2>Custom Cakes</h2>
-            <p>Beautiful custom designs for any occasion</p>
-          </div>
-          
-          <div class="highlight">
-            <div class="highlight-icon" aria-hidden="true">🚚</div>
-            <h2>Delivery Available</h2>
-            <p>Order online for same-day local delivery</p>
-          </div>
-          
-          <div class="highlight">
-            <div class="highlight-icon" aria-hidden="true">🌾</div>
-            <h2>Special Diets</h2>
-            <p>Gluten-free, vegan, and sugar-free options</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="products" class="products">
-      <div class="container">
-        <header class="section-header">
-          <h2>Our Products</h2>
-          <p>All items baked fresh daily in our kitchen</p>
-        </header>
-        
-        <div class="products-grid">
-          <article class="product-card">
-            <img src="artisan-breads.jpg" alt="Assorted artisan bread loaves" width="400" height="300" loading="eager">
-            <div class="product-content">
-              <h3>Artisan Breads</h3>
-              <p>Hand-shaped loaves made with natural starters and long fermentation</p>
-              <ul class="product-varieties">
-                <li>Sourdough - $6.50</li>
-                <li>French Baguette - $4.00</li>
-                <li>Whole Wheat - $5.50</li>
-                <li>Rosemary Focaccia - $7.00</li>
-                <li>Ciabatta - $5.00</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="product-card">
-            <img src="pastries.jpg" alt="Fresh pastries and croissants" width="400" height="300" loading="lazy">
-            <div class="product-content">
-              <h3>Pastries & Croissants</h3>
-              <p>Flaky, buttery pastries made with European-style techniques</p>
-              <ul class="product-varieties">
-                <li>Butter Croissant - $4.00</li>
-                <li>Pain au Chocolat - $4.50</li>
-                <li>Almond Croissant - $5.00</li>
-                <li>Danish Pastry - $4.25</li>
-                <li>Cinnamon Roll - $4.75</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="product-card">
-            <img src="cakes.jpg" alt="Decorated celebration cakes" width="400" height="300" loading="lazy">
-            <div class="product-content">
-              <h3>Cakes & Celebration</h3>
-              <p>Custom and ready-made cakes for every occasion</p>
-              <ul class="product-varieties">
-                <li>Custom Layer Cake - from $45</li>
-                <li>Cupcakes (dozen) - $36</li>
-                <li>Cheesecake - $32</li>
-                <li>Tiramisu - $28</li>
-                <li>Opera Cake - $35</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="product-card">
-            <img src="cookies.jpg" alt="Assorted cookies on display" width="400" height="300" loading="lazy">
-            <div class="product-content">
-              <h3>Cookies & Treats</h3>
-              <p>Classic favorites and unique specialty cookies</p>
-              <ul class="product-varieties">
-                <li>Chocolate Chip - $2.50</li>
-                <li>Macarons (6 pack) - $18</li>
-                <li>Brownies - $3.50</li>
-                <li>Biscotti - $3.00</li>
-                <li>Madeleines (6 pack) - $8</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="product-card">
-            <img src="pies.jpg" alt="Fresh fruit pies" width="400" height="300" loading="lazy">
-            <div class="product-content">
-              <h3>Pies & Tarts</h3>
-              <p>Seasonal fruit pies and elegant tarts with handmade crusts</p>
-              <ul class="product-varieties">
-                <li>Apple Pie - $24</li>
-                <li>Fruit Tart - $28</li>
-                <li>Lemon Meringue - $26</li>
-                <li>Pecan Pie - $25</li>
-                <li>Mini Quiche (4 pack) - $16</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="product-card">
-            <img src="specialty.jpg" alt="Gluten-free and vegan baked goods" width="400" height="300" loading="lazy">
-            <div class="product-content">
-              <h3>Specialty & Dietary</h3>
-              <p>Delicious options for special dietary needs</p>
-              <ul class="product-varieties">
-                <li>Gluten-Free Bread - $8.00</li>
-                <li>Vegan Muffins - $4.00</li>
-                <li>Sugar-Free Cookies - $3.00</li>
-                <li>Keto Brownies - $4.50</li>
-                <li>Dairy-Free Cupcakes - $4.25</li>
-              </ul>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="custom" class="custom-orders">
-      <div class="container">
-        <div class="custom-layout">
-          <div class="custom-content">
-            <h2>Custom Cake Orders</h2>
-            <p>Make your celebration special with a custom-designed cake from our talented pastry team.</p>
-            
-            <h3>What We Offer</h3>
-            <ul class="custom-features">
-              <li>Wedding cakes with tasting appointments</li>
-              <li>Birthday cakes in any theme</li>
-              <li>Corporate event desserts</li>
-              <li>Baby shower and bridal shower cakes</li>
-              <li>Anniversary and celebration cakes</li>
-              <li>Custom sugar work and decorations</li>
-            </ul>
-            
-            <h3>Ordering Process</h3>
-            <ol class="custom-steps">
-              <li><strong>Consultation:</strong> Submit request form or call to discuss your vision</li>
-              <li><strong>Design:</strong> We'll create a custom design based on your preferences</li>
-              <li><strong>Order:</strong> Approve design, confirm flavors, and place order</li>
-              <li><strong>Pickup:</strong> Pick up your cake on your event date</li>
-            </ol>
-            
-            <p class="custom-note"><strong>Note:</strong> Custom orders require at least 2 weeks advance notice. Wedding cakes need 6-8 weeks.</p>
-          </div>
-          
-          <div class="custom-form-container">
-            <h3>Request Custom Cake Quote</h3>
-            
-            <form class="custom-form" action="/custom-quote" method="POST">
-              <div class="form-group">
-                <label for="custom-name">Name</label>
-                <input type="text" id="custom-name" name="name" required autocomplete="name">
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-email">Email</label>
-                <input type="email" id="custom-email" name="email" required autocomplete="email">
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-phone">Phone</label>
-                <input type="tel" id="custom-phone" name="phone" required autocomplete="tel">
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-event-date">Event Date</label>
-                <input type="date" id="custom-event-date" name="event-date" required min="2026-03-22">
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-occasion">Occasion</label>
-                <select id="custom-occasion" name="occasion" required>
-                  <option value="">Select occasion</option>
-                  <option value="wedding">Wedding</option>
-                  <option value="birthday">Birthday</option>
-                  <option value="anniversary">Anniversary</option>
-                  <option value="baby-shower">Baby Shower</option>
-                  <option value="bridal-shower">Bridal Shower</option>
-                  <option value="corporate">Corporate Event</option>
-                  <option value="other">Other</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-servings">Number of Servings</label>
-                <input type="number" id="custom-servings" name="servings" min="10" max="500" required>
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-flavors">Preferred Flavors</label>
-                <textarea id="custom-flavors" name="flavors" rows="2" placeholder="E.g., Vanilla cake with chocolate buttercream" required></textarea>
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-design">Design Ideas & Details</label>
-                <textarea id="custom-design" name="design" rows="4" placeholder="Describe your vision, colors, themes, inspiration photos, etc." required></textarea>
-              </div>
-              
-              <div class="form-group">
-                <label for="custom-budget">Budget Range</label>
-                <select id="custom-budget" name="budget">
-                  <option value="">Select budget range</option>
-                  <option value="50-100">$50 - $100</option>
-                  <option value="100-200">$100 - $200</option>
-                  <option value="200-350">$200 - $350</option>
-                  <option value="350-500">$350 - $500</option>
-                  <option value="500+">$500+</option>
-                </select>
-              </div>
-              
-              <button type="submit" class="btn btn-primary btn-large">Request Quote</button>
-              
-              <p class="form-footer"><small>We'll respond within 24 hours with pricing and availability</small></p>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="daily" class="daily-specials">
-      <div class="container">
-        <h2>Daily Specials</h2>
-        <p>Fresh baked items available each day of the week</p>
-        
-        <div class="specials-grid">
-          <article class="special-card">
-            <h3>Monday</h3>
-            <p><strong>Cinnamon Roll Monday</strong></p>
-            <p>Oversized cinnamon rolls with cream cheese frosting - $5.50</p>
-          </article>
-          
-          <article class="special-card">
-            <h3>Tuesday</h3>
-            <p><strong>Tart Tuesday</strong></p>
-            <p>Selection of mini fruit tarts - $4.00 each</p>
-          </article>
-          
-          <article class="special-card">
-            <h3>Wednesday</h3>
-            <p><strong>Bread Day</strong></p>
-            <p>Buy 2 loaves, get 3rd loaf 50% off</p>
-          </article>
-          
-          <article class="special-card">
-            <h3>Thursday</h3>
-            <p><strong>Cookie Dozen</strong></p>
-            <p>Mix & match any cookies - Dozen for $24</p>
-          </article>
-          
-          <article class="special-card">
-            <h3>Friday</h3>
-            <p><strong>Fresh Challah</strong></p>
-            <p>Traditional braided challah bread - $7.00</p>
-          </article>
-          
-          <article class="special-card">
-            <h3>Saturday</h3>
-            <p><strong>Pastry Platter</strong></p>
-            <p>Assorted pastries perfect for brunch - $32 (serves 6)</p>
-          </article>
-          
-          <article class="special-card">
-            <h3>Sunday</h3>
-            <p><strong>Family Pie Day</strong></p>
-            <p>Whole pies $5 off - Perfect for weekend gatherings</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-image">
-            <img src="baker-working.jpg" alt="Baker preparing dough in kitchen" width="500" height="600" loading="lazy">
-          </div>
-          
-          <div class="about-content">
-            <h2>Our Story</h2>
-            <p>Sweet Haven Bakery was founded in 1998 by master baker Elena Martinez, who learned the art of traditional baking from her grandmother in France.</p>
-            
-            <p>For over 25 years, we've been dedicated to creating exceptional baked goods using time-honored techniques and the finest ingredients. Everything is made from scratch in our kitchen—no mixes, no shortcuts, no compromises.</p>
-            
-            <p>We source organic flour from local mills, use European butter, and work with seasonal fruits from nearby farms. The result is baked goods that taste like they came from your grandmother's kitchen—if she was a professionally trained French pastry chef.</p>
-            
-            <h3>What Makes Us Special</h3>
-            <ul class="about-features">
-              <li><strong>Traditional Methods:</strong> Hand-shaping, long fermentation, classic techniques</li>
-              <li><strong>Premium Ingredients:</strong> Organic flour, European butter, real vanilla</li>
-              <li><strong>Daily Fresh Baking:</strong> Everything made fresh each morning</li>
-              <li><strong>Custom Creations:</strong> Skilled cake decorators for special occasions</li>
-              <li><strong>Family Recipes:</strong> Passed down through generations</li>
-            </ul>
-            
-            <blockquote>
-              <p>"Good bread is the most fundamentally satisfying of all foods; and good bread with fresh butter, the greatest of feasts."</p>
-              <footer>
-                <cite>— James Beard</cite>
-              </footer>
-            </blockquote>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="order" class="order-section">
-      <div class="container">
-        <h2>Order for Pickup or Delivery</h2>
-        <p>Get fresh baked goods delivered or ready for pickup</p>
-        
-        <form class="order-form" action="/place-order" method="POST">
-          <div class="form-row">
-            <div class="form-group">
-              <label for="order-name">Name</label>
-              <input type="text" id="order-name" name="name" required autocomplete="name">
-            </div>
-            
-            <div class="form-group">
-              <label for="order-email">Email</label>
-              <input type="email" id="order-email" name="email" required autocomplete="email">
-            </div>
-            
-            <div class="form-group">
-              <label for="order-phone">Phone</label>
-              <input type="tel" id="order-phone" name="phone" required autocomplete="tel">
-            </div>
-          </div>
-          
-          <fieldset class="form-group">
-            <legend>Order Type</legend>
-            <div class="radio-group">
-              <div class="radio-option">
-                <input type="radio" id="pickup" name="order-type" value="pickup" checked>
-                <label for="pickup">Pickup (No charge)</label>
-              </div>
-              <div class="radio-option">
-                <input type="radio" id="delivery" name="order-type" value="delivery">
-                <label for="delivery">Delivery ($5.00 fee, free over $50)</label>
-              </div>
-            </div>
-          </fieldset>
-          
-          <div class="form-group">
-            <label for="order-date">Pickup/Delivery Date</label>
-            <input type="date" id="order-date" name="date" required min="2026-03-08">
-          </div>
-          
-          <div class="form-group">
-            <label for="order-time">Time</label>
-            <select id="order-time" name="time" required>
-              <option value="">Select time</option>
-              <option value="07:00">7:00 AM (Store Opening)</option>
-              <option value="09:00">9:00 AM</option>
-              <option value="11:00">11:00 AM</option>
-              <option value="13:00">1:00 PM</option>
-              <option value="15:00">3:00 PM</option>
-              <option value="17:00">5:00 PM</option>
-              <option value="18:00">6:00 PM (Store Closing)</option>
-            </select>
-          </div>
-          
-          <div class="form-group delivery-address" style="display: none;">
-            <label for="order-address">Delivery Address</label>
-            <textarea id="order-address" name="address" rows="2" placeholder="Street address, city, ZIP" autocomplete="street-address"></textarea>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-items">Items to Order</label>
-            <textarea id="order-items" name="items" rows="4" placeholder="List items and quantities (e.g., 2 Sourdough Loaves, 1 dozen Chocolate Chip Cookies)" required></textarea>
-            <p class="form-hint"><small>We'll confirm availability and provide total pricing via email</small></p>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-notes">Special Requests <span class="optional">(optional)</span></label>
-            <textarea id="order-notes" name="notes" rows="2" placeholder="Allergies, substitutions, etc."></textarea>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large">Submit Order</button>
-        </form>
-      </div>
-    </section>
-    
-    <section class="hours-location">
-      <div class="container">
-        <div class="info-grid">
-          <div class="info-block">
-            <h2>Hours</h2>
-            <dl class="hours-list">
-              <dt>Tuesday - Saturday</dt>
-              <dd>7:00 AM - 6:00 PM</dd>
-              
-              <dt>Sunday</dt>
-              <dd>8:00 AM - 3:00 PM</dd>
-              
-              <dt>Monday</dt>
-              <dd>Closed</dd>
-            </dl>
-          </div>
-          
-          <address class="info-block">
-            <h2>Location</h2>
-            <p>
-              Sweet Haven Bakery<br>
-              456 Baker Street<br>
-              Portland, OR 97201
-            </p>
-            
-            <p>
-              <strong>Phone:</strong> <a href="tel:+15035551234">(503) 555-1234</a><br>
-              <strong>Email:</strong> <a href="mailto:orders@sweethaven.example.com">orders@sweethaven.example.com</a>
-            </p>
-          </address>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Sweet Haven Bakery</h3>
-          <p>Baking from scratch since 1998</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/sweethavenbakery" aria-label="Instagram">Instagram</a>
-            <a href="https://facebook.com/sweethavenbakery" aria-label="Facebook">Facebook</a>
-            <a href="https://pinterest.com/sweethavenbakery" aria-label="Pinterest">Pinterest</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Shop</h3>
-          <ul>
-            <li><a href="#products">All Products</a></li>
-            <li><a href="#custom">Custom Cakes</a></li>
-            <li><a href="#order">Order Online</a></li>
-            <li><a href="/gift-cards">Gift Cards</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>About</h3>
-          <ul>
-            <li><a href="/about">Our Story</a></li>
-            <li><a href="/wholesale">Wholesale</a></li>
-            <li><a href="/classes">Baking Classes</a></li>
-            <li><a href="/careers">Careers</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Sweet Haven Bakery. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/allergens">Allergen Information</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/food-cafe.html b/skills/html-coder/assets/food-cafe.html
deleted file mode 100644
index 069aa0f29..000000000
--- a/skills/html-coder/assets/food-cafe.html
+++ /dev/null
@@ -1,509 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Brew & Bean Coffee House - Artisan coffee, fresh pastries, and community gathering space. Order online for pickup.">
-  <title>Brew & Bean Coffee House - Artisan Coffee & Pastries</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Brew & Bean</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#menu">Menu</a></li>
-          <li><a href="#order">Order Online</a></li>
-          <li><a href="#rewards">Rewards</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#locations">Locations</a></li>
-        </ul>
-        
-        <a href="/order" class="btn-cart" aria-label="View cart">🛒</a>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="hero-content">
-        <h1>Locally Roasted Coffee & Handcrafted Pastries</h1>
-        <p>Your neighborhood coffee house serving the community since 2018</p>
-        <div class="hero-actions">
-          <a href="#order" class="btn btn-primary">Order for Pickup</a>
-          <a href="#menu" class="btn btn-secondary">View Menu</a>
-        </div>
-      </div>
-    </section>
-    
-    <section class="features">
-      <div class="container">
-        <div class="features-grid">
-          <div class="feature">
-            <div class="feature-icon" aria-hidden="true">☕</div>
-            <h2>Single-Origin Coffee</h2>
-            <p>Ethically sourced beans roasted in-house weekly</p>
-          </div>
-          
-          <div class="feature">
-            <div class="feature-icon" aria-hidden="true">🥐</div>
-            <h2>Fresh Daily Baking</h2>
-            <p>Pastries, muffins, and treats baked fresh every morning</p>
-          </div>
-          
-          <div class="feature">
-            <div class="feature-icon" aria-hidden="true">📱</div>
-            <h2>Order Ahead</h2>
-            <p>Skip the line with mobile ordering and pickup</p>
-          </div>
-          
-          <div class="feature">
-            <div class="feature-icon" aria-hidden="true">⭐</div>
-            <h2>Rewards Program</h2>
-            <p>Earn points with every purchase, get free drinks</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="menu" class="menu">
-      <div class="container">
-        <header class="section-header">
-          <h2>Our Menu</h2>
-          <p>Handcrafted drinks and fresh baked goods</p>
-        </header>
-        
-        <div class="menu-categories">
-          <article class="menu-category">
-            <h3>Coffee & Espresso</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Drip Coffee</h4>
-                <div class="menu-item-sizes">
-                  <span>S $2.50</span>
-                  <span>M $3.00</span>
-                  <span>L $3.50</span>
-                </div>
-              </div>
-              <p class="description">House blend or daily single-origin roast</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Latte</h4>
-                <div class="menu-item-sizes">
-                  <span>S $4.00</span>
-                  <span>M $4.75</span>
-                  <span>L $5.50</span>
-                </div>
-              </div>
-              <p class="description">Espresso with steamed milk, choice of milk</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Cappuccino</h4>
-                <div class="menu-item-sizes">
-                  <span>S $3.75</span>
-                  <span>M $4.50</span>
-                  <span>L $5.25</span>
-                </div>
-              </div>
-              <p class="description">Espresso with steamed milk and foam</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Americano</h4>
-                <div class="menu-item-sizes">
-                  <span>S $3.25</span>
-                  <span>M $3.75</span>
-                  <span>L $4.25</span>
-                </div>
-              </div>
-              <p class="description">Espresso shots with hot water</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Cold Brew</h4>
-                <div class="menu-item-sizes">
-                  <span>M $4.50</span>
-                  <span>L $5.25</span>
-                </div>
-              </div>
-              <p class="description">Smooth, slow-steeped cold coffee</p>
-            </div>
-          </article>
-          
-          <article class="menu-category">
-            <h3>Specialty Drinks</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Caramel Macchiato</h4>
-                <div class="menu-item-sizes">
-                  <span>M $5.25</span>
-                  <span>L $6.00</span>
-                </div>
-              </div>
-              <p class="description">Vanilla, espresso, steamed milk, caramel drizzle</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Mocha</h4>
-                <div class="menu-item-sizes">
-                  <span>M $5.00</span>
-                  <span>L $5.75</span>
-                </div>
-              </div>
-              <p class="description">Espresso, chocolate, steamed milk, whipped cream</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Chai Latte</h4>
-                <div class="menu-item-sizes">
-                  <span>M $4.75</span>
-                  <span>L $5.50</span>
-                </div>
-              </div>
-              <p class="description">Spiced tea concentrate with steamed milk</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Matcha Latte</h4>
-                <div class="menu-item-sizes">
-                  <span>M $5.50</span>
-                  <span>L $6.25</span>
-                </div>
-              </div>
-              <p class="description">Premium Japanese matcha with steamed milk</p>
-            </div>
-          </article>
-          
-          <article class="menu-category">
-            <h3>Pastries & Food</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Croissant</h4>
-                <span class="price">$4.50</span>
-              </div>
-              <p class="description">Butter croissant, plain or chocolate</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Muffin</h4>
-                <span class="price">$3.75</span>
-              </div>
-              <p class="description">Blueberry, chocolate chip, or bran</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Avocado Toast</h4>
-                <span class="price">$8.50</span>
-              </div>
-              <p class="description">Smashed avocado on sourdough, everything spice</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Breakfast Sandwich</h4>
-                <span class="price">$7.50</span>
-              </div>
-              <p class="description">Egg, cheese, choice of bacon or sausage</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Bagel with Cream Cheese</h4>
-                <span class="price">$4.00</span>
-              </div>
-              <p class="description">Plain, everything, or sesame bagel</p>
-            </div>
-          </article>
-        </div>
-        
-        <div class="menu-footer">
-          <p class="menu-note">
-            <strong>Milk Options:</strong> Whole, 2%, Oat (+$0.75), Almond (+$0.75), Soy (+$0.50)<br>
-            <strong>Add Shots:</strong> Extra espresso shot +$1.00
-          </p>
-        </div>
-      </div>
-    </section>
-    
-    <section id="order" class="order-online">
-      <div class="container">
-        <h2>Order Online for Pickup</h2>
-        <p>Skip the line and order ahead</p>
-        
-        <form class="order-form" action="/place-order" method="POST">
-          <div class="form-row">
-            <div class="form-group">
-              <label for="order-name">Name</label>
-              <input type="text" id="order-name" name="name" required autocomplete="name">
-            </div>
-            
-            <div class="form-group">
-              <label for="order-phone">Phone</label>
-              <input type="tel" id="order-phone" name="phone" required autocomplete="tel">
-            </div>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-location">Pickup Location</label>
-            <select id="order-location" name="location" required>
-              <option value="">Select location</option>
-              <option value="downtown">Downtown - 123 Main St</option>
-              <option value="university">University District - 456 College Ave</option>
-              <option value="westside">Westside - 789 West Blvd</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-time">Pickup Time</label>
-            <select id="order-time" name="pickup-time" required>
-              <option value="">Select time</option>
-              <option value="asap">ASAP (15-20 min)</option>
-              <option value="30min">30 minutes</option>
-              <option value="1hr">1 hour</option>
-              <option value="2hr">2 hours</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-items">Order Details</label>
-            <textarea id="order-items" name="items" rows="4" placeholder="List your items (e.g., Medium Latte with oat milk, Chocolate Croissant)" required></textarea>
-            <p class="form-hint"><small>You'll confirm quantities and options on the next page</small></p>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-notes">Special Instructions <span class="optional">(optional)</span></label>
-            <textarea id="order-notes" name="notes" rows="2" placeholder="Allergies, preferences, etc."></textarea>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large">Continue to Order</button>
-        </form>
-      </div>
-    </section>
-    
-    <section id="rewards" class="rewards">
-      <div class="container">
-        <div class="rewards-layout">
-          <div class="rewards-content">
-            <h2>Bean Rewards Program</h2>
-            <p>Earn points with every purchase and get rewarded!</p>
-            
-            <div class="rewards-tiers">
-              <div class="tier">
-                <h3>How It Works</h3>
-                <ol>
-                  <li>Sign up for free</li>
-                  <li>Earn 1 point per $1 spent</li>
-                  <li>Redeem points for rewards</li>
-                </ol>
-              </div>
-              
-              <div class="tier">
-                <h3>Reward Levels</h3>
-                <dl class="rewards-list">
-                  <dt>50 Points</dt>
-                  <dd>Free pastry or breakfast item</dd>
-                  
-                  <dt>125 Points</dt>
-                  <dd>Free specialty drink (any size)</dd>
-                  
-                  <dt>250 Points</dt>
-                  <dd>$10 off your order</dd>
-                </dl>
-              </div>
-              
-              <div class="tier">
-                <h3>Member Perks</h3>
-                <ul>
-                  <li>Free drink on your birthday</li>
-                  <li>Early access to new menu items</li>
-                  <li>Exclusive member promotions</li>
-                  <li>Order ahead privileges</li>
-                </ul>
-              </div>
-            </div>
-            
-            <a href="/rewards/signup" class="btn btn-primary">Join Bean Rewards</a>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-image">
-            <img src="cafe-interior.jpg" alt="Cozy cafe interior with seating and coffee bar" width="600" height="400" loading="lazy">
-          </div>
-          
-          <div class="about-content">
-            <h2>Your Community Coffee House</h2>
-            <p>Brew & Bean started in 2018 with a simple mission: create exceptional coffee and a welcoming space where neighbors become friends.</p>
-            
-            <p>We roast our own beans in small batches, source from ethical sustainable farms, and bake fresh pastries every morning. But what we're most proud of is the community we've built.</p>
-            
-            <p>Whether you're here to work, meet friends, or simply enjoy a quiet moment with a great cup of coffee, we're glad you chose Brew & Bean.</p>
-            
-            <h3>Our Values</h3>
-            <ul class="values-list">
-              <li><strong>Quality:</strong> Premium beans, expert roasting, skilled baristas</li>
-              <li><strong>Community:</strong> Supporting local artists, hosting events, giving back</li>
-              <li><strong>Sustainability:</strong> Eco-friendly packaging, composting, green practices</li>
-              <li><strong>Inclusivity:</strong> Everyone is welcome at our table</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="locations" class="locations">
-      <div class="container">
-        <h2>Our Locations</h2>
-        
-        <div class="locations-grid">
-          <article class="location-card">
-            <h3>Downtown</h3>
-            <address>
-              123 Main Street<br>
-              San Francisco, CA 94102
-            </address>
-            <p><strong>Phone:</strong> <a href="tel:+14155551234">(415) 555-1234</a></p>
-            
-            <dl class="location-hours">
-              <dt>Monday - Friday:</dt>
-              <dd>6:00 AM - 8:00 PM</dd>
-              
-              <dt>Saturday - Sunday:</dt>
-              <dd>7:00 AM - 9:00 PM</dd>
-            </dl>
-            
-            <p class="location-features">
-              <small>WiFi • Outdoor Seating • Meeting Room</small>
-            </p>
-          </article>
-          
-          <article class="location-card">
-            <h3>University District</h3>
-            <address>
-              456 College Avenue<br>
-              San Francisco, CA 94115
-            </address>
-            <p><strong>Phone:</strong> <a href="tel:+14155555678">(415) 555-5678</a></p>
-            
-            <dl class="location-hours">
-              <dt>Monday - Friday:</dt>
-              <dd>6:30 AM - 10:00 PM</dd>
-              
-              <dt>Saturday - Sunday:</dt>
-              <dd>7:00 AM - 10:00 PM</dd>
-            </dl>
-            
-            <p class="location-features">
-              <small>WiFi • Study Area • Late Hours</small>
-            </p>
-          </article>
-          
-          <article class="location-card">
-            <h3>Westside</h3>
-            <address>
-              789 West Boulevard<br>
-              San Francisco, CA 94121
-            </address>
-            <p><strong>Phone:</strong> <a href="tel:+14155559012">(415) 555-9012</a></p>
-            
-            <dl class="location-hours">
-              <dt>Monday - Friday:</dt>
-              <dd>6:30 AM - 7:00 PM</dd>
-              
-              <dt>Saturday - Sunday:</dt>
-              <dd>7:00 AM - 8:00 PM</dd>
-            </dl>
-            
-            <p class="location-features">
-              <small>WiFi • Family Friendly • Drive-Through</small>
-            </p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="newsletter">
-      <div class="container">
-        <h2>Stay Connected</h2>
-        <p>Get updates on new drinks, special promotions, and community events</p>
-        
-        <form class="newsletter-form" action="/subscribe" method="POST">
-          <label for="newsletter-email" class="visually-hidden">Email address</label>
-          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
-          <button type="submit" class="btn btn-primary">Subscribe</button>
-        </form>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Brew & Bean</h3>
-          <p>Community coffee since 2018</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/brewandbean" aria-label="Instagram">Instagram</a>
-            <a href="https://facebook.com/brewandbean" aria-label="Facebook">Facebook</a>
-            <a href="https://twitter.com/brewandbean" aria-label="Twitter">Twitter</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Quick Links</h3>
-          <ul>
-            <li><a href="#menu">Menu</a></li>
-            <li><a href="#order">Order Online</a></li>
-            <li><a href="/rewards">Bean Rewards</a></li>
-            <li><a href="/gift-cards">Gift Cards</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">Our Story</a></li>
-            <li><a href="/wholesale">Wholesale</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/contact">Contact Us</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Brew & Bean Coffee House. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Service</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/food-foodtruck.html b/skills/html-coder/assets/food-foodtruck.html
deleted file mode 100644
index 8e95c29e8..000000000
--- a/skills/html-coder/assets/food-foodtruck.html
+++ /dev/null
@@ -1,624 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Taco Nomad Food Truck - Authentic street tacos and Mexican street food. Find our locations and order ahead.">
-  <title>Taco Nomad Food Truck - Authentic Street Tacos</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">🌮 Taco Nomad</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#locations">Find Us</a></li>
-          <li><a href="#menu">Menu</a></li>
-          <li><a href="#order">Order Ahead</a></li>
-          <li><a href="#catering">Catering</a></li>
-          <li><a href="#about">About</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="hero-content">
-        <h1>Authentic Street Tacos on Wheels</h1>
-        <p>Handmade tortillas, slow-cooked meats, fresh ingredients—delivered from our mobile kitchen</p>
-        <div class="hero-actions">
-          <a href="#locations" class="btn btn-primary">Where We Are Today</a>
-          <a href="#menu" class="btn btn-secondary">View Menu</a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="locations" class="current-location">
-      <div class="container">
-        <h2>🚚 We're Here Today!</h2>
-        
-        <div class="location-today">
-          <div class="location-card-today">
-            <p class="location-date"><strong>Today, <time datetime="2026-03-07">Saturday, March 7</time></strong></p>
-            
-            <div class="location-stop">
-              <h3>Lunch Service</h3>
-              <p class="location-time"><strong>11:00 AM - 2:00 PM</strong></p>
-              <address class="location-address">
-                Tech Plaza<br>
-                555 Market Street<br>
-                San Francisco, CA 94103
-              </address>
-              <p class="location-map"><a href="https://maps.google.com/?q=555+Market+Street+San+Francisco+CA">Get Directions →</a></p>
-            </div>
-            
-            <div class="location-stop">
-              <h3>Dinner Service</h3>
-              <p class="location-time"><strong>5:00 PM - 9:00 PM</strong></p>
-              <address class="location-address">
-                Marina Square<br>
-                2100 Chestnut Street<br>
-                San Francisco, CA 94123
-              </address>
-              <p class="location-map"><a href="https://maps.google.com/?q=2100+Chestnut+Street+San+Francisco+CA">Get Directions →</a></p>
-            </div>
-          </div>
-        </div>
-        
-        <div class="location-updates">
-          <p><strong>Get real-time location updates:</strong></p>
-          <div class="social-links">
-            <a href="https://twitter.com/taconomad" class="btn btn-outline">Follow on Twitter</a>
-            <a href="https://instagram.com/taconomad" class="btn btn-outline">Follow on Instagram</a>
-            <a href="/subscribe" class="btn btn-outline">Text Alerts</a>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="schedule">
-      <div class="container">
-        <h2>Weekly Schedule</h2>
-        <p>Our typical weekly rotation—follow us on social for real-time updates</p>
-        
-        <div class="schedule-grid">
-          <article class="schedule-day">
-            <h3>Monday</h3>
-            <div class="schedule-stop">
-              <p class="time">11:30 AM - 2:00 PM</p>
-              <p class="location">Financial District<br><small>One Market Plaza</small></p>
-            </div>
-            <div class="schedule-stop">
-              <p class="time">5:00 PM - 8:00 PM</p>
-              <p class="location">Mission District<br><small>Valencia & 20th</small></p>
-            </div>
-          </article>
-          
-          <article class="schedule-day">
-            <h3>Tuesday</h3>
-            <div class="schedule-stop">
-              <p class="time">11:30 AM - 2:00 PM</p>
-              <p class="location">SOMA<br><small>Tech Plaza</small></p>
-            </div>
-            <div class="schedule-stop">
-              <p class="time">5:30 PM - 8:30 PM</p>
-              <p class="location">Outer Sunset<br><small>Judah & 43rd</small></p>
-            </div>
-          </article>
-          
-          <article class="schedule-day">
-            <h3>Wednesday</h3>
-            <div class="schedule-stop">
-              <p class="time">11:30 AM - 2:00 PM</p>
-              <p class="location">Union Square<br><small>Powell Street</small></p>
-            </div>
-            <div class="schedule-stop">
-              <p class="time">5:00 PM - 9:00 PM</p>
-              <p class="location">Hayes Valley<br><small>Octavia & Fell</small></p>
-            </div>
-          </article>
-          
-          <article class="schedule-day">
-            <h3>Thursday</h3>
-            <div class="schedule-stop">
-              <p class="time">11:30 AM - 2:00 PM</p>
-              <p class="location">Embarcadero<br><small>Ferry Building</small></p>
-            </div>
-            <div class="schedule-stop">
-              <p class="time">5:00 PM - 9:00 PM</p>
-              <p class="location">Haight-Ashbury<br><small>Haight & Ashbury</small></p>
-            </div>
-          </article>
-          
-          <article class="schedule-day">
-            <h3>Friday</h3>
-            <div class="schedule-stop">
-              <p class="time">11:30 AM - 2:30 PM</p>
-              <p class="location">Financial District<br><small>One Market Plaza</small></p>
-            </div>
-            <div class="schedule-stop">
-              <p class="time">5:00 PM - 10:00 PM</p>
-              <p class="location">North Beach<br><small>Washington Square</small></p>
-            </div>
-          </article>
-          
-          <article class="schedule-day">
-            <h3>Saturday</h3>
-            <div class="schedule-stop">
-              <p class="time">11:00 AM - 4:00 PM</p>
-              <p class="location">Ferry Plaza Farmers Market<br><small>Embarcadero</small></p>
-            </div>
-            <div class="schedule-stop">
-              <p class="time">5:00 PM - 9:00 PM</p>
-              <p class="location">Marina<br><small>Chestnut Street</small></p>
-            </div>
-          </article>
-          
-          <article class="schedule-day">
-            <h3>Sunday</h3>
-            <div class="schedule-stop">
-              <p class="time">11:00 AM - 5:00 PM</p>
-              <p class="location">Dolores Park<br><small>18th & Dolores</small></p>
-            </div>
-          </article>
-        </div>
-        
-        <p class="schedule-note"><small><strong>Note:</strong> Schedule subject to change due to weather, events, or private bookings. Always check social media for today's confirmed locations.</small></p>
-      </div>
-    </section>
-    
-    <section id="menu" class="menu">
-      <div class="container">
-        <header class="section-header">
-          <h2>Our Menu</h2>
-          <p>Street-style tacos and Mexican favorites made fresh to order</p>
-        </header>
-        
-        <div class="menu-sections">
-          <article class="menu-section">
-            <h3>Street Tacos</h3>
-            <p class="section-desc">Served on handmade corn tortillas with cilantro, onion, and lime</p>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Carne Asada</h4>
-                <span class="price">$4.00</span>
-              </div>
-              <p class="description">Grilled marinated steak with charred edges</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Al Pastor</h4>
-                <span class="price">$4.00</span>
-              </div>
-              <p class="description">Spit-roasted pork with pineapple</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Carnitas</h4>
-                <span class="price">$4.00</span>
-              </div>
-              <p class="description">Slow-braised, tender pulled pork</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Pollo Asado</h4>
-                <span class="price">$3.75</span>
-              </div>
-              <p class="description">Citrus-marinated grilled chicken</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Pescado</h4>
-                <span class="price">$4.50</span>
-              </div>
-              <p class="description">Beer-battered or grilled fish with cabbage slaw</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Veggie (V)</h4>
-                <span class="price">$3.50</span>
-              </div>
-              <p class="description">Grilled seasonal vegetables with black beans</p>
-            </div>
-          </article>
-          
-          <article class="menu-section">
-            <h3>Burritos & Bowls</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Classic Burrito</h4>
-                <span class="price">$12.00</span>
-              </div>
-              <p class="description">Choice of protein, rice, beans, cheese, salsa, sour cream</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>California Burrito</h4>
-                <span class="price">$13.00</span>
-              </div>
-              <p class="description">Carne asada, fries, cheese, guacamole, pico de gallo</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Burrito Bowl</h4>
-                <span class="price">$11.50</span>
-              </div>
-              <p class="description">All burrito ingredients served in a bowl (no tortilla)</p>
-            </div>
-          </article>
-          
-          <article class="menu-section">
-            <h3>Sides & Extras</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Chips & Guacamole</h4>
-                <span class="price">$6.00</span>
-              </div>
-              <p class="description">Fresh-made guacamole with crispy tortilla chips</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Elote (Mexican Street Corn)</h4>
-                <span class="price">$5.00</span>
-              </div>
-              <p class="description">Grilled corn, mayo, cotija cheese, chili powder, lime</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Rice & Beans</h4>
-                <span class="price">$4.00</span>
-              </div>
-              <p class="description">Cilantro-lime rice with black or pinto beans</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Churros</h4>
-                <span class="price">$5.00</span>
-              </div>
-              <p class="description">Fried dough with cinnamon sugar and chocolate sauce</p>
-            </div>
-          </article>
-          
-          <article class="menu-section">
-            <h3>Drinks</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Horchata</h4>
-                <span class="price">$3.50</span>
-              </div>
-              <p class="description">Sweet rice milk with cinnamon</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Jamaica (Hibiscus Tea)</h4>
-                <span class="price">$3.50</span>
-              </div>
-              <p class="description">Refreshing hibiscus iced tea</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Jarritos</h4>
-                <span class="price">$3.00</span>
-              </div>
-              <p class="description">Mexican sodas (multiple flavors)</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Bottled Water</h4>
-                <span class="price">$2.00</span>
-              </div>
-            </div>
-          </article>
-        </div>
-        
-        <div class="menu-footer">
-          <h3>Combo Deals</h3>
-          <ul class="combo-list">
-            <li><strong>3 Tacos Combo:</strong> Any 3 tacos + rice & beans + drink - $16</li>
-            <li><strong>Taco Tuesday:</strong> All tacos $3 each (every Tuesday)</li>
-            <li><strong>Lunch Special:</strong> 2 tacos + side + drink - $12 (Mon-Fri, 11:30-2pm)</li>
-          </ul>
-        </div>
-      </div>
-    </section>
-    
-    <section id="order" class="order-ahead">
-      <div class="container">
-        <h2>Order Ahead</h2>
-        <p>Skip the line—order now and pick up when you arrive</p>
-        
-        <form class="order-form" action="/submit-order" method="POST">
-          <div class="form-row">
-            <div class="form-group">
-              <label for="order-name">Name</label>
-              <input type="text" id="order-name" name="name" required autocomplete="name" placeholder="Name for order">
-            </div>
-            
-            <div class="form-group">
-              <label for="order-phone">Phone</label>
-              <input type="tel" id="order-phone" name="phone" required autocomplete="tel">
-            </div>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-location">Pickup Location</label>
-            <select id="order-location" name="location" required>
-              <option value="">Where will you pick up?</option>
-              <option value="current">Today's Current Location</option>
-              <option value="lunch-market">Lunch - One Market Plaza</option>
-              <option value="dinner-marina">Dinner - Marina (Chestnut St)</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-time">Pickup Time</label>
-            <select id="order-time" name="pickup-time" required>
-              <option value="">Select time</option>
-              <option value="asap">ASAP (10-15 min)</option>
-              <option value="30min">30 minutes</option>
-              <option value="1hr">1 hour</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-details">Your Order</label>
-            <textarea id="order-details" name="order" rows="5" placeholder="Example:&#10;- 2 Carne Asada Tacos&#10;- 1 Al Pastor Taco&#10;- 1 Chips & Guac&#10;- 1 Horchata" required></textarea>
-          </div>
-          
-          <div class="form-group">
-            <label for="order-notes">Special Instructions <span class="optional">(optional)</span></label>
-            <textarea id="order-notes" name="notes" rows="2" placeholder="Extra spicy, no onions, etc."></textarea>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large">Place Order</button>
-          
-          <p class="form-note"><small>We'll text you when your order is ready. Payment at pickup (cash or card).</small></p>
-        </form>
-      </div>
-    </section>
-    
-    <section id="catering" class="catering">
-      <div class="container">
-        <div class="catering-layout">
-          <div class="catering-content">
-            <h2>Private Events & Catering</h2>
-            <p>Bring Taco Nomad to your next event! Perfect for corporate lunches, weddings, birthday parties, and special celebrations.</p>
-            
-            <h3>What We Offer</h3>
-            <ul class="catering-features">
-              <li>Full taco bar with multiple protein options</li>
-              <li>All toppings, salsas, and sides included</li>
-              <li>Professional setup and service</li>
-              <li>Vegetarian and dietary options available</li>
-              <li>Serves groups of 20-200 people</li>
-              <li>Available evenings and weekends</li>
-            </ul>
-            
-            <h3>Packages Starting At</h3>
-            <ul class="catering-pricing">
-              <li><strong>Basic Package:</strong> $18/person - 3 tacos, rice & beans</li>
-              <li><strong>Deluxe Package:</strong> $25/person - Taco bar with all sides</li>
-              <li><strong>Premium Package:</strong> $32/person - Full spread with appetizers</li>
-            </ul>
-            
-            <p class="catering-note"><strong>Minimum:</strong> 20 people | <strong>Booking:</strong> 2 weeks advance notice</p>
-          </div>
-          
-          <div class="catering-form-container">
-            <h3>Request Catering Quote</h3>
-            
-            <form class="catering-form" action="/catering-request" method="POST">
-              <div class="form-group">
-                <label for="catering-name">Name</label>
-                <input type="text" id="catering-name" name="name" required autocomplete="name">
-              </div>
-              
-              <div class="form-group">
-                <label for="catering-email">Email</label>
-                <input type="email" id="catering-email" name="email" required autocomplete="email">
-              </div>
-              
-              <div class="form-group">
-                <label for="catering-phone">Phone</label>
-                <input type="tel" id="catering-phone" name="phone" required autocomplete="tel">
-              </div>
-              
-              <div class="form-group">
-                <label for="catering-date">Event Date</label>
-                <input type="date" id="catering-date" name="date" required min="2026-03-21">
-              </div>
-              
-              <div class="form-group">
-                <label for="catering-location">Event Location</label>
-                <input type="text" id="catering-location" name="location" placeholder="City or address" required>
-              </div>
-              
-              <div class="form-group">
-                <label for="catering-guests">Number of Guests</label>
-                <input type="number" id="catering-guests" name="guests" min="20" max="200" required>
-              </div>
-              
-              <div class="form-group">
-                <label for="catering-type">Event Type</label>
-                <select id="catering-type" name="event-type">
-                  <option value="">Select type</option>
-                  <option value="corporate">Corporate Event</option>
-                  <option value="wedding">Wedding</option>
-                  <option value="birthday">Birthday Party</option>
-                  <option value="private">Private Party</option>
-                  <option value="other">Other</option>
-                </select>
-              </div>
-              
-              <div class="form-group">
-                <label for="catering-details">Event Details</label>
-                <textarea id="catering-details" name="details" rows="3" placeholder="Tell us about your event and any special needs"></textarea>
-              </div>
-              
-              <button type="submit" class="btn btn-primary btn-large">Request Quote</button>
-              
-              <p class="form-footer"><small>We'll respond within 48 hours with availability and pricing</small></p>
-            </form>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-image">
-            <img src="food-truck.jpg" alt="Taco Nomad food truck with customers" width="600" height="400" loading="lazy">
-          </div>
-          
-          <div class="about-content">
-            <h2>Our Story</h2>
-            <p>Taco Nomad started in 2019 when chef Carlos Mendoza traded his restaurant kitchen for a mobile one, bringing authentic Mexican street food to the neighborhoods of San Francisco.</p>
-            
-            <p>Growing up in Mexico City, Carlos learned to make tortillas from his abuela and spent years perfecting traditional cooking techniques. Now he's sharing those flavors from the window of his custom-built taco truck.</p>
-            
-            <p>Every morning, we make fresh corn and flour tortillas by hand. Our meats are marinated overnight and slow-cooked for hours. The salsas? Made fresh daily with roasted chilies and authentic spices.</p>
-            
-            <p>We believe great tacos shouldn't require a sit-down restaurant. They're meant to be eaten standing on a street corner, shared with friends, and enjoyed throughout the city. That's why we're always on the move, bringing authentic street tacos to wherever you are.</p>
-            
-            <blockquote>
-              <p>"The best tacos are made with love, served fresh, and shared with community. That's what we do every day."</p>
-              <footer>
-                <cite>— Carlos Mendoza, Owner & Chef</cite>
-              </footer>
-            </blockquote>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="reviews">
-      <div class="container">
-        <h2>What People Are Saying</h2>
-        
-        <div class="reviews-grid">
-          <article class="review-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Best tacos in SF, hands down. The al pastor is incredible and the handmade tortillas make all the difference. Worth seeking out wherever they are!"</p>
-            </blockquote>
-            <footer>
-              <cite>— Sarah M., <a href="https://yelp.com">Yelp</a></cite>
-            </footer>
-          </article>
-          
-          <article class="review-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Carlos and his team are amazing. We hired them for our company event and everyone raved about the food. Authentic, delicious, and great service."</p>
-            </blockquote>
-            <footer>
-              <cite>— James L., Catering Client</cite>
-            </footer>
-          </article>
-          
-          <article class="review-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"I follow them on Twitter to find out where they'll be. The carnitas tacos are perfection—crispy, juicy, loaded with flavor. And those churros!"</p>
-            </blockquote>
-            <footer>
-              <cite>— Michael T., <a href="https://google.com/maps">Google</a></cite>
-            </footer>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="newsletter">
-      <div class="container">
-        <h2>Never Miss Us</h2>
-        <p>Get our weekly schedule and special offers delivered to your inbox</p>
-        
-        <form class="newsletter-form" action="/subscribe" method="POST">
-          <label for="newsletter-email" class="visually-hidden">Email address</label>
-          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
-          <button type="submit" class="btn btn-primary">Subscribe</button>
-        </form>
-        
-        <p class="newsletter-alt">Prefer text messages? <a href="/sms-signup">Sign up for SMS alerts</a></p>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>🌮 Taco Nomad</h3>
-          <p>Authentic street tacos since 2019</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://twitter.com/taconomad" aria-label="Twitter">Twitter</a>
-            <a href="https://instagram.com/taconomad" aria-label="Instagram">Instagram</a>
-            <a href="https://facebook.com/taconomad" aria-label="Facebook">Facebook</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Find Us</h3>
-          <ul>
-            <li><a href="#locations">Today's Locations</a></li>
-            <li><a href="/schedule">Weekly Schedule</a></li>
-            <li><a href="/alerts">Location Alerts</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Menu & Ordering</h3>
-          <ul>
-            <li><a href="#menu">Full Menu</a></li>
-            <li><a href="#order">Order Ahead</a></li>
-            <li><a href="#catering">Catering</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Contact</h3>
-          <p>
-            <strong>Email:</strong> <a href="mailto:carlos@taconomad.example.com">carlos@taconomad.example.com</a><br>
-            <strong>Phone:</strong> <a href="tel:+14155557890">(415) 555-7890</a>
-          </p>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Taco Nomad. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/food-restaurant.html b/skills/html-coder/assets/food-restaurant.html
deleted file mode 100644
index 18ce888c9..000000000
--- a/skills/html-coder/assets/food-restaurant.html
+++ /dev/null
@@ -1,392 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Savory Bistro - Farm-to-table restaurant serving seasonal American cuisine in downtown. Reservations available.">
-  <title>Savory Bistro - Farm-to-Table Restaurant</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Savory Bistro</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#menu">Menu</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#reservations">Reservations</a></li>
-          <li><a href="#events">Private Events</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero">
-      <div class="hero-content">
-        <h1>Farm-to-Table Dining Experience</h1>
-        <p>Seasonal American cuisine crafted with locally-sourced ingredients</p>
-        <div class="hero-actions">
-          <a href="#reservations" class="btn btn-primary">Reserve a Table</a>
-          <a href="#menu" class="btn btn-secondary">View Menu</a>
-        </div>
-      </div>
-    </section>
-    
-    <section class="highlights">
-      <div class="container">
-        <div class="highlights-grid">
-          <div class="highlight">
-            <div class="highlight-icon" aria-hidden="true">🌱</div>
-            <h2>Farm-to-Table</h2>
-            <p>Ingredients sourced from local farms daily</p>
-          </div>
-          
-          <div class="highlight">
-            <div class="highlight-icon" aria-hidden="true">👨‍🍳</div>
-            <h2>Chef-Driven</h2>
-            <p>Creative seasonal menus by award-winning chef</p>
-          </div>
-          
-          <div class="highlight">
-            <div class="highlight-icon" aria-hidden="true">🍷</div>
-            <h2>Curated Wine List</h2>
-            <p>150+ selections from sustainable wineries</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="menu" class="menu">
-      <div class="container">
-        <header class="section-header">
-          <h2>Our Menu</h2>
-          <p>Fresh seasonal selections updated weekly</p>
-        </header>
-        
-        <div class="menu-sections">
-          <article class="menu-section">
-            <h3>Appetizers</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Heirloom Tomato Salad</h4>
-                <span class="price">$14</span>
-              </div>
-              <p class="description">Local heirloom tomatoes, burrata, basil, aged balsamic</p>
-              <p class="dietary-info"><small>Vegetarian, Gluten-free</small></p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Crispy Brussels Sprouts</h4>
-                <span class="price">$12</span>
-              </div>
-              <p class="description">Flash-fried, honey-sriracha glaze, toasted almonds</p>
-              <p class="dietary-info"><small>Vegan option available</small></p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Charcuterie Board</h4>
-                <span class="price">$22</span>
-              </div>
-              <p class="description">Artisan cheeses, cured meats, house-made jam, crackers</p>
-            </div>
-          </article>
-          
-          <article class="menu-section">
-            <h3>Main Courses</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Pan-Seared Salmon</h4>
-                <span class="price">$32</span>
-              </div>
-              <p class="description">Wild-caught salmon, roasted vegetables, lemon-dill sauce</p>
-              <p class="dietary-info"><small>Gluten-free</small></p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Grass-Fed Ribeye</h4>
-                <span class="price">$42</span>
-              </div>
-              <p class="description">12 oz ribeye, garlic mashed potatoes, seasonal vegetables</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Wild Mushroom Risotto</h4>
-                <span class="price">$26</span>
-              </div>
-              <p class="description">Arborio rice, mixed mushrooms, truffle oil, parmesan</p>
-              <p class="dietary-info"><small>Vegetarian</small></p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Roasted Half Chicken</h4>
-                <span class="price">$28</span>
-              </div>
-              <p class="description">Free-range chicken, herb butter, roasted root vegetables</p>
-              <p class="dietary-info"><small>Gluten-free</small></p>
-            </div>
-          </article>
-          
-          <article class="menu-section">
-            <h3>Desserts</h3>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Seasonal Fruit Tart</h4>
-                <span class="price">$10</span>
-              </div>
-              <p class="description">Fresh berries, vanilla pastry cream, almond crust</p>
-            </div>
-            
-            <div class="menu-item">
-              <div class="menu-item-header">
-                <h4>Dark Chocolate Torte</h4>
-                <span class="price">$12</span>
-              </div>
-              <p class="description">Rich chocolate, raspberry coulis, whipped cream</p>
-            </div>
-          </article>
-        </div>
-        
-        <div class="menu-footer">
-          <a href="/menu.pdf" class="btn btn-outline" download>Download Full Menu (PDF)</a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="about" class="about">
-      <div class="container">
-        <div class="about-layout">
-          <div class="about-image">
-            <img src="chef-portrait.jpg" alt="Chef Maria Rodriguez in restaurant kitchen" width="500" height="600" loading="lazy">
-          </div>
-          
-          <div class="about-content">
-            <h2>Meet Chef Maria Rodriguez</h2>
-            <p>Chef Maria brings 15 years of culinary expertise to Savory Bistro, combining classical French techniques with modern American flavors.</p>
-            
-            <p>Her philosophy is simple: start with the best ingredients from local farms and let their natural flavors shine. Every dish is crafted with care, celebrating the seasons and supporting our community.</p>
-            
-            <p>Maria's commitment to sustainability and farm partnerships has earned Savory Bistro recognition as one of the city's top sustainable restaurants.</p>
-            
-            <blockquote>
-              <p>"Cooking is about honoring the ingredients and the farmers who grew them. When you start with quality, the rest is easy."</p>
-              <footer>
-                <cite>— Chef Maria Rodriguez</cite>
-              </footer>
-            </blockquote>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="reservations" class="reservations">
-      <div class="container">
-        <h2>Make a Reservation</h2>
-        <p>Join us for an unforgettable dining experience</p>
-        
-        <form class="reservation-form" action="/book-table" method="POST">
-          <div class="form-row">
-            <div class="form-group">
-              <label for="res-name">Name</label>
-              <input type="text" id="res-name" name="name" required autocomplete="name">
-            </div>
-            
-            <div class="form-group">
-              <label for="res-email">Email</label>
-              <input type="email" id="res-email" name="email" required autocomplete="email">
-            </div>
-            
-            <div class="form-group">
-              <label for="res-phone">Phone</label>
-              <input type="tel" id="res-phone" name="phone" required autocomplete="tel">
-            </div>
-          </div>
-          
-          <div class="form-row">
-            <div class="form-group">
-              <label for="res-date">Date</label>
-              <input type="date" id="res-date" name="date" required min="2026-03-08">
-            </div>
-            
-            <div class="form-group">
-              <label for="res-time">Time</label>
-              <select id="res-time" name="time" required>
-                <option value="">Select time</option>
-                <option value="17:00">5:00 PM</option>
-                <option value="17:30">5:30 PM</option>
-                <option value="18:00">6:00 PM</option>
-                <option value="18:30">6:30 PM</option>
-                <option value="19:00">7:00 PM</option>
-                <option value="19:30">7:30 PM</option>
-                <option value="20:00">8:00 PM</option>
-                <option value="20:30">8:30 PM</option>
-                <option value="21:00">9:00 PM</option>
-              </select>
-            </div>
-            
-            <div class="form-group">
-              <label for="res-guests">Party Size</label>
-              <select id="res-guests" name="guests" required>
-                <option value="">Select guests</option>
-                <option value="1">1 guest</option>
-                <option value="2">2 guests</option>
-                <option value="3">3 guests</option>
-                <option value="4">4 guests</option>
-                <option value="5">5 guests</option>
-                <option value="6">6 guests</option>
-                <option value="7">7+ guests</option>
-              </select>
-            </div>
-          </div>
-          
-          <div class="form-group">
-            <label for="res-requests">Special Requests <span class="optional">(optional)</span></label>
-            <textarea id="res-requests" name="requests" rows="3" placeholder="Allergies, dietary restrictions, special occasions, etc."></textarea>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large">Book Table</button>
-          
-          <p class="form-note"><small>For parties of 8 or more, please call us at <a href="tel:+14155551234">(415) 555-1234</a></small></p>
-        </form>
-      </div>
-    </section>
-    
-    <section id="events" class="events">
-      <div class="container">
-        <div class="events-layout">
-          <div class="events-content">
-            <h2>Private Events</h2>
-            <p>Host your special event at Savory Bistro. Our private dining room accommodates up to 40 guests for intimate celebrations, corporate dinners, and special occasions.</p>
-            
-            <ul class="events-features">
-              <li>Customizable menus</li>
-              <li>Dedicated event coordinator</li>
-              <li>Private dining room</li>
-              <li>AV equipment available</li>
-              <li>Wine pairing options</li>
-            </ul>
-            
-            <a href="/private-events" class="btn btn-outline">Learn More About Private Events</a>
-          </div>
-          
-          <div class="events-image">
-            <img src="private-dining.jpg" alt="Elegant private dining room setup" width="600" height="400" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="hours">
-      <div class="container">
-        <h2>Hours & Location</h2>
-        
-        <div class="hours-grid">
-          <div class="hours-info">
-            <h3>Opening Hours</h3>
-            <dl class="hours-list">
-              <dt>Monday - Thursday</dt>
-              <dd>5:00 PM - 10:00 PM</dd>
-              
-              <dt>Friday - Saturday</dt>
-              <dd>5:00 PM - 11:00 PM</dd>
-              
-              <dt>Sunday</dt>
-              <dd>4:00 PM - 9:00 PM</dd>
-            </dl>
-            
-            <p class="hours-note"><small>Closed major holidays</small></p>
-          </div>
-          
-          <address class="location-info">
-            <h3>Location</h3>
-            <p>
-              Savory Bistro<br>
-              123 Main Street<br>
-              San Francisco, CA 94102
-            </p>
-            
-            <p>
-              <strong>Phone:</strong> <a href="tel:+14155551234">(415) 555-1234</a><br>
-              <strong>Email:</strong> <a href="mailto:info@savorybistro.example.com">info@savorybistro.example.com</a>
-            </p>
-          </address>
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact" class="newsletter">
-      <div class="container">
-        <h2>Stay Updated</h2>
-        <p>Subscribe to our newsletter for seasonal menu updates, special events, and exclusive offers.</p>
-        
-        <form class="newsletter-form" action="/subscribe" method="POST">
-          <label for="newsletter-email" class="visually-hidden">Email address</label>
-          <input type="email" id="newsletter-email" name="email" placeholder="Your email address" required autocomplete="email">
-          <button type="submit" class="btn btn-primary">Subscribe</button>
-        </form>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Savory Bistro</h3>
-          <p>Farm-to-table dining since 2015</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/savorybistro" aria-label="Instagram">Instagram</a>
-            <a href="https://facebook.com/savorybistro" aria-label="Facebook">Facebook</a>
-            <a href="https://yelp.com/biz/savorybistro" aria-label="Yelp">Yelp</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Restaurant</h3>
-          <ul>
-            <li><a href="#menu">Menu</a></li>
-            <li><a href="#reservations">Reservations</a></li>
-            <li><a href="#events">Private Events</a></li>
-            <li><a href="/gift-cards">Gift Cards</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>About</h3>
-          <ul>
-            <li><a href="/about">Our Story</a></li>
-            <li><a href="/chef">Meet the Chef</a></li>
-            <li><a href="/farm-partners">Farm Partners</a></li>
-            <li><a href="/careers">Careers</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Savory Bistro. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/accessibility">Accessibility</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/tech-app-landing.html b/skills/html-coder/assets/tech-app-landing.html
deleted file mode 100644
index e7e427824..000000000
--- a/skills/html-coder/assets/tech-app-landing.html
+++ /dev/null
@@ -1,551 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="FitTrack - Your personal fitness companion. Track workouts, set goals, and achieve your fitness dreams with AI-powered coaching.">
-  <meta property="og:title" content="FitTrack - AI-Powered Fitness App">
-  <meta property="og:description" content="Transform your fitness journey with personalized workouts and nutrition">
-  <meta property="og:image" content="og-image.png">
-  <meta property="og:type" content="website">
-  <title>FitTrack - AI-Powered Fitness App</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header-transparent">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">
-          <img src="logo.svg" alt="FitTrack" width="140" height="40">
-        </a>
-        
-        <ul class="nav-menu">
-          <li><a href="#features">Features</a></li>
-          <li><a href="#how-it-works">How It Works</a></li>
-          <li><a href="#testimonials">Reviews</a></li>
-          <li><a href="#pricing">Pricing</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="#download" class="btn btn-primary">Download App</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-app">
-      <div class="container">
-        <div class="hero-content">
-          <div class="badge">🎉 Now with AI Personal Trainer</div>
-          
-          <h1>Your fitness journey starts here</h1>
-          <p class="hero-subtitle">Transform your body and mind with personalized workouts, nutrition plans, and AI-powered coaching. Join 2 million users achieving their fitness goals.</p>
-          
-          <div class="app-download-buttons">
-            <a href="https://apps.apple.com/app/fittrack" class="download-button">
-              <img src="app-store-badge.svg" alt="Download on the App Store" width="140" height="42" loading="eager">
-            </a>
-            <a href="https://play.google.com/store/apps/details?id=com.fittrack" class="download-button">
-              <img src="google-play-badge.svg" alt="Get it on Google Play" width="157" height="42" loading="eager">
-            </a>
-          </div>
-          
-          <div class="hero-stats">
-            <div class="stat">
-              <strong>2M+</strong>
-              <span>Active Users</span>
-            </div>
-            <div class="stat">
-              <strong>4.8★</strong>
-              <span>App Store Rating</span>
-            </div>
-            <div class="stat">
-              <strong>50M+</strong>
-              <span>Workouts Logged</span>
-            </div>
-          </div>
-        </div>
-        
-        <div class="hero-phone-mockup">
-          <img src="phone-mockup-hero.png" alt="FitTrack app interface showing workout tracking screen" width="400" height="800" loading="eager">
-        </div>
-      </div>
-    </section>
-    
-    <section class="features-showcase">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Everything you need to reach your goals</h2>
-          <p>Powerful features that make fitness simple and effective</p>
-        </div>
-        
-        <div class="feature-showcase-item">
-          <div class="showcase-content">
-            <div class="feature-icon-large" aria-hidden="true">🤖</div>
-            <h3>AI Personal Trainer</h3>
-            <p>Get a personalized workout plan tailored to your fitness level, goals, and available equipment. Our AI adapts to your progress and adjusts your training in real-time.</p>
-            
-            <ul class="feature-highlights">
-              <li>Custom workout plans based on your goals</li>
-              <li>Real-time form correction using your camera</li>
-              <li>Adaptive difficulty that grows with you</li>
-              <li>Voice-guided coaching during workouts</li>
-            </ul>
-          </div>
-          
-          <div class="showcase-image">
-            <img src="feature-ai-trainer.png" alt="AI trainer interface with exercise form analysis" width="500" height="600" loading="lazy">
-          </div>
-        </div>
-        
-        <div class="feature-showcase-item reverse">
-          <div class="showcase-content">
-            <div class="feature-icon-large" aria-hidden="true">📊</div>
-            <h3>Track Your Progress</h3>
-            <p>Watch your transformation unfold with detailed progress tracking, body measurements, workout history, and performance analytics.</p>
-            
-            <ul class="feature-highlights">
-              <li>Visual progress photos with timeline</li>
-              <li>Body measurements and weight tracking</li>
-              <li>Workout history and personal records</li>
-              <li>Detailed analytics and insights</li>
-            </ul>
-          </div>
-          
-          <div class="showcase-image">
-            <img src="feature-progress.png" alt="Progress tracking dashboard with charts and measurements" width="500" height="600" loading="lazy">
-          </div>
-        </div>
-        
-        <div class="feature-showcase-item">
-          <div class="showcase-content">
-            <div class="feature-icon-large" aria-hidden="true">🥗</div>
-            <h3>Nutrition Made Easy</h3>
-            <p>Fuel your workouts with personalized meal plans and nutrition tracking. Scan food barcodes, log meals in seconds, and hit your macros effortlessly.</p>
-            
-            <ul class="feature-highlights">
-              <li>Custom meal plans for your goals</li>
-              <li>Barcode scanner for quick logging</li>
-              <li>Macro and calorie tracking</li>
-              <li>Thousands of recipes included</li>
-            </ul>
-          </div>
-          
-          <div class="showcase-image">
-            <img src="feature-nutrition.png" alt="Nutrition tracking interface with meal logging" width="500" height="600" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="features" class="features-grid-section">
-      <div class="container">
-        <h2>More features to love</h2>
-        
-        <div class="features-grid-compact">
-          <article class="feature-card-small">
-            <div class="feature-icon" aria-hidden="true">⏱️</div>
-            <h3>Workout Timer</h3>
-            <p>Built-in timers for intervals, rest periods, and circuit training</p>
-          </article>
-          
-          <article class="feature-card-small">
-            <div class="feature-icon" aria-hidden="true">🎯</div>
-            <h3>Goal Setting</h3>
-            <p>Set and achieve fitness milestones with guided goal programs</p>
-          </article>
-          
-          <article class="feature-card-small">
-            <div class="feature-icon" aria-hidden="true">👥</div>
-            <h3>Social Features</h3>
-            <p>Connect with friends, join challenges, and share achievements</p>
-          </article>
-          
-          <article class="feature-card-small">
-            <div class="feature-icon" aria-hidden="true">⌚</div>
-            <h3>Wearable Sync</h3>
-            <p>Sync with Apple Watch, Garmin, Fitbit, and more</p>
-          </article>
-          
-          <article class="feature-card-small">
-            <div class="feature-icon" aria-hidden="true">📹</div>
-            <h3>Video Tutorials</h3>
-            <p>HD exercise videos with professional trainers</p>
-          </article>
-          
-          <article class="feature-card-small">
-            <div class="feature-icon" aria-hidden="true">🏆</div>
-            <h3>Achievements</h3>
-            <p>Earn badges and rewards as you hit milestones</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="how-it-works" class="how-it-works-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Getting started is easy</h2>
-          <p>From download to first workout in under 5 minutes</p>
-        </div>
-        
-        <div class="steps-grid">
-          <article class="step-card">
-            <div class="step-number">1</div>
-            <h3>Download & Create Account</h3>
-            <p>Get the app from the App Store or Google Play. Sign up in seconds with email or social login.</p>
-          </article>
-          
-          <article class="step-card">
-            <div class="step-number">2</div>
-            <h3>Set Your Goals</h3>
-            <p>Tell us about your fitness level, goals, and preferences. Our AI will create your personalized plan.</p>
-          </article>
-          
-          <article class="step-card">
-            <div class="step-number">3</div>
-            <h3>Start Training</h3>
-            <p>Follow your custom workout plan with video guidance, form correction, and real-time coaching.</p>
-          </article>
-          
-          <article class="step-card">
-            <div class="step-number">4</div>
-            <h3>Track & Improve</h3>
-            <p>Watch your progress, celebrate achievements, and let our AI refine your plan as you get stronger.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="app-screenshots-section">
-      <div class="container">
-        <h2>A glimpse inside the app</h2>
-        
-        <div class="screenshots-carousel">
-          <div class="screenshot">
-            <img src="screenshot-home.png" alt="Home screen with today's workout" width="300" height="600" loading="lazy">
-            <p>Home Dashboard</p>
-          </div>
-          
-          <div class="screenshot">
-            <img src="screenshot-workout.png" alt="Active workout screen with exercise timer" width="300" height="600" loading="lazy">
-            <p>Workout Tracker</p>
-          </div>
-          
-          <div class="screenshot">
-            <img src="screenshot-progress.png" alt="Progress charts and body measurements" width="300" height="600" loading="lazy">
-            <p>Progress Tracking</p>
-          </div>
-          
-          <div class="screenshot">
-            <img src="screenshot-nutrition.png" alt="Meal logging and macro breakdown" width="300" height="600" loading="lazy">
-            <p>Nutrition Log</p>
-          </div>
-          
-          <div class="screenshot">
-            <img src="screenshot-ai.png" alt="AI trainer giving personalized recommendations" width="300" height="600" loading="lazy">
-            <p>AI Coaching</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="testimonials" class="testimonials-app-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Real people, real results</h2>
-          <p>Join thousands who've transformed their lives with FitTrack</p>
-        </div>
-        
-        <div class="testimonials-grid">
-          <article class="testimonial-card-app">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Lost 30 pounds in 4 months! The AI trainer keeps me motivated and the workouts are never boring. Best fitness app I've ever used."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="user-mike.jpg" alt="" width="48" height="48" loading="lazy">
-              <div>
-                <cite>Mike Thompson</cite>
-                <p>Lost 30 lbs • 4 months</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card-app">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"As a busy mom, I never thought I'd find time for fitness. FitTrack's quick workouts fit perfectly into my schedule. Down 2 dress sizes!"</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="user-jennifer.jpg" alt="" width="48" height="48" loading="lazy">
-              <div>
-                <cite>Jennifer Lee</cite>
-                <p>Built consistency • 6 months</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card-app">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Gained 15 pounds of muscle and hit all my strength goals. The progressive overload system and form checks are incredible."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="user-carlos.jpg" alt="" width="48" height="48" loading="lazy">
-              <div>
-                <cite>Carlos Rodriguez</cite>
-                <p>Gained 15 lbs muscle • 5 months</p>
-              </div>
-            </footer>
-          </article>
-        </div>
-        
-        <div class="app-rating-summary">
-          <div class="rating-large">
-            <span class="rating-number">4.8</span>
-            <span class="rating-stars">★★★★★</span>
-          </div>
-          <p><strong>Based on 125,000+ reviews</strong></p>
-          <p>Average across App Store and Google Play</p>
-        </div>
-      </div>
-    </section>
-    
-    <section id="pricing" class="pricing-app-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Choose your plan</h2>
-          <p>Start free, upgrade when you're ready</p>
-        </div>
-        
-        <div class="pricing-cards-app">
-          <article class="pricing-card-app">
-            <h3>Free</h3>
-            <p class="pricing-app-price">
-              <span class="price-amount">$0</span>
-            </p>
-            <p class="pricing-period">Forever free</p>
-            
-            <a href="#download" class="btn btn-outline btn-large">Get Started</a>
-            
-            <ul class="pricing-features">
-              <li>✓ Basic workout tracking</li>
-              <li>✓ 50+ exercises library</li>
-              <li>✓ Progress photos</li>
-              <li>✓ Community access</li>
-              <li>✗ AI Personal Trainer</li>
-              <li>✗ Custom meal plans</li>
-              <li>✗ Form correction</li>
-            </ul>
-          </article>
-          
-          <article class="pricing-card-app featured">
-            <div class="popular-badge">Most Popular</div>
-            <h3>Premium</h3>
-            <p class="pricing-app-price">
-              <span class="price-amount">$12.99</span>
-            </p>
-            <p class="pricing-period">per month</p>
-            
-            <a href="#download" class="btn btn-primary btn-large">Start 7-Day Free Trial</a>
-            
-            <ul class="pricing-features">
-              <li>✓ Everything in Free, plus:</li>
-              <li>✓ AI Personal Trainer</li>
-              <li>✓ Custom workout plans</li>
-              <li>✓ Real-time form correction</li>
-              <li>✓ Personalized meal plans</li>
-              <li>✓ Nutrition tracking</li>
-              <li>✓ Unlimited workout programs</li>
-              <li>✓ Advanced analytics</li>
-            </ul>
-            
-            <p class="pricing-note"><small>or $99.99/year (save 35%)</small></p>
-          </article>
-          
-          <article class="pricing-card-app">
-            <h3>Elite</h3>
-            <p class="pricing-app-price">
-              <span class="price-amount">$29.99</span>
-            </p>
-            <p class="pricing-period">per month</p>
-            
-            <a href="#download" class="btn btn-outline btn-large">Start 7-Day Free Trial</a>
-            
-            <ul class="pricing-features">
-              <li>✓ Everything in Premium, plus:</li>
-              <li>✓ 1-on-1 video coaching sessions</li>
-              <li>✓ Live group classes</li>
-              <li>✓ Priority support</li>
-              <li>✓ Custom supplement recommendations</li>
-              <li>✓ Exclusive challenges & prizes</li>
-            </ul>
-            
-            <p class="pricing-note"><small>or $249.99/year (save 30%)</small></p>
-          </article>
-        </div>
-        
-        <p class="pricing-guarantee">💪 30-Day Money-Back Guarantee • Cancel Anytime</p>
-      </div>
-    </section>
-    
-    <section class="press-section">
-      <div class="container">
-        <h2>As featured in</h2>
-        
-        <div class="press-logos">
-          <img src="press-techcrunch.svg" alt="TechCrunch" width="140" height="30" loading="lazy">
-          <img src="press-forbes.svg" alt="Forbes" width="100" height="30" loading="lazy">
-          <img src="press-wired.svg" alt="Wired" width="100" height="30" loading="lazy">
-          <img src="press-shape.svg" alt="Shape Magazine" width="100" height="30" loading="lazy">
-          <img src="press-menshealth.svg" alt="Men's Health" width="120" height="30" loading="lazy">
-        </div>
-        
-        <blockquote class="press-quote">
-          <p>"FitTrack is revolutionizing personal fitness with AI technology that rivals a human personal trainer."</p>
-          <cite>— TechCrunch</cite>
-        </blockquote>
-      </div>
-    </section>
-    
-    <section id="download" class="download-cta-section">
-      <div class="container">
-        <div class="download-cta-content">
-          <h2>Ready to start your transformation?</h2>
-          <p>Download FitTrack now and get 7 days of Premium free</p>
-          
-          <div class="app-download-buttons-large">
-            <a href="https://apps.apple.com/app/fittrack" class="download-button-large">
-              <img src="app-store-badge.svg" alt="Download on the App Store" width="160" height="48" loading="lazy">
-            </a>
-            <a href="https://play.google.com/store/apps/details?id=com.fittrack" class="download-button-large">
-              <img src="google-play-badge.svg" alt="Get it on Google Play" width="180" height="48" loading="lazy">
-            </a>
-          </div>
-          
-          <p class="download-note">
-            <small>✓ No credit card required for free trial • Available on iOS 14+ and Android 8+</small>
-          </p>
-        </div>
-      </div>
-    </section>
-    
-    <section class="faq-section">
-      <div class="container">
-        <h2>Frequently Asked Questions</h2>
-        
-        <div class="faq-grid">
-          <article class="faq-item">
-            <h3>Do I need equipment to use FitTrack?</h3>
-            <p>No! We offer bodyweight workouts, as well as plans for home equipment or full gyms. Tell us what you have, and we'll customize your workouts accordingly.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>Can I use FitTrack if I'm a complete beginner?</h3>
-            <p>Absolutely! Our AI adapts to any fitness level. We'll start you with beginner-friendly workouts and gradually progress as you get stronger.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>How does the AI Personal Trainer work?</h3>
-            <p>Our AI analyzes your goals, fitness level, progress, and feedback to create personalized workout plans. It uses your phone's camera for form correction and adjusts difficulty in real-time.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>Can I cancel my subscription anytime?</h3>
-            <p>Yes! Cancel anytime through your app store subscription settings. You'll continue to have access until the end of your billing period.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>Does FitTrack work offline?</h3>
-            <p>Yes! Download workouts and exercise videos to use offline. Nutrition tracking and basic features work without internet. Your data syncs when you're back online.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>What devices are supported?</h3>
-            <p>FitTrack works on iOS 14+ (iPhone and iPad) and Android 8+. We also integrate with Apple Watch, Garmin, Fitbit, and other popular fitness wearables.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>FitTrack</h3>
-          <p>Your AI-powered fitness companion</p>
-          
-          <div class="app-badges-footer">
-            <a href="https://apps.apple.com/app/fittrack">
-              <img src="app-store-badge-small.svg" alt="App Store" width="120" height="36" loading="lazy">
-            </a>
-            <a href="https://play.google.com/store/apps/details?id=com.fittrack">
-              <img src="google-play-badge-small.svg" alt="Google Play" width="135" height="36" loading="lazy">
-            </a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/workout-programs">Workout Programs</a></li>
-            <li><a href="/nutrition">Nutrition</a></li>
-            <li><a href="/integrations">Integrations</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/blog">Blog</a></li>
-            <li><a href="/success-stories">Success Stories</a></li>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/community">Community</a></li>
-            <li><a href="/trainers">For Trainers</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/press">Press</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Social</h3>
-          <div class="social-links-footer">
-            <a href="https://instagram.com/fittrack" aria-label="Instagram">Instagram</a>
-            <a href="https://twitter.com/fittrack" aria-label="Twitter">Twitter</a>
-            <a href="https://facebook.com/fittrack" aria-label="Facebook">Facebook</a>
-            <a href="https://youtube.com/fittrack" aria-label="YouTube">YouTube</a>
-            <a href="https://tiktok.com/@fittrack" aria-label="TikTok">TikTok</a>
-          </div>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 FitTrack Inc. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Service</a>
-          <a href="/cookies">Cookie Policy</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="app.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/tech-saas-landing.html b/skills/html-coder/assets/tech-saas-landing.html
deleted file mode 100644
index 92c0d7589..000000000
--- a/skills/html-coder/assets/tech-saas-landing.html
+++ /dev/null
@@ -1,439 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="CloudFlow - Modern project management software for distributed teams. Streamline workflows, boost productivity, and collaborate seamlessly.">
-  <meta property="og:title" content="CloudFlow - Project Management for Modern Teams">
-  <meta property="og:description" content="The all-in-one workspace for remote teams">
-  <meta property="og:type" content="website">
-  <title>CloudFlow - Project Management for Modern Teams</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">CloudFlow</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#features">Features</a></li>
-          <li><a href="#pricing">Pricing</a></li>
-          <li><a href="/customers">Customers</a></li>
-          <li><a href="/resources">Resources</a></li>
-          <li><a href="/company">Company</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/login" class="btn-link">Sign In</a>
-          <a href="/signup" class="btn btn-primary">Start Free Trial</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-saas">
-      <div class="container">
-        <div class="hero-content">
-          <h1>The workspace where work happens</h1>
-          <p class="hero-subtitle">CloudFlow brings your teams, projects, and workflows together in one collaborative platform. No more juggling multiple tools.</p>
-          
-          <form class="hero-signup-form" action="/start-trial" method="POST">
-            <label for="hero-email" class="visually-hidden">Work email</label>
-            <input type="email" id="hero-email" name="email" placeholder="Work email address" required autocomplete="email">
-            <button type="submit" class="btn btn-primary btn-large">Start Free Trial</button>
-          </form>
-          
-          <p class="hero-trust">
-            <small>✓ Free 14-day trial • No credit card required • Cancel anytime</small>
-          </p>
-          
-          <div class="social-proof">
-            <p><strong>Trusted by 50,000+ teams worldwide</strong></p>
-            <div class="logo-strip">
-              <img src="logo-stripe.svg" alt="Stripe" width="80" height="30" loading="eager">
-              <img src="logo-shopify.svg" alt="Shopify" width="80" height="30" loading="eager">
-              <img src="logo-zoom.svg" alt="Zoom" width="80" height="30" loading="eager">
-              <img src="logo-slack.svg" alt="Slack" width="80" height="30" loading="eager">
-              <img src="logo-notion.svg" alt="Notion" width="80" height="30" loading="eager">
-            </div>
-          </div>
-        </div>
-        
-        <div class="hero-image">
-          <img src="dashboard-preview.png" alt="CloudFlow dashboard interface showing project boards and tasks" width="800" height="600" loading="eager">
-        </div>
-      </div>
-    </section>
-    
-    <section class="features-overview">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Everything your team needs to succeed</h2>
-          <p>Powerful features designed for how modern teams work</p>
-        </div>
-        
-        <div class="features-grid">
-          <article class="feature-card">
-            <div class="feature-icon" aria-hidden="true">📋</div>
-            <h3>Project Management</h3>
-            <p>Organize work with customizable boards, lists, and timelines. Track progress from start to finish.</p>
-          </article>
-          
-          <article class="feature-card">
-            <div class="feature-icon" aria-hidden="true">💬</div>
-            <h3>Team Collaboration</h3>
-            <p>Real-time messaging, comments, and @mentions keep everyone in the loop.</p>
-          </article>
-          
-          <article class="feature-card">
-            <div class="feature-icon" aria-hidden="true">📊</div>
-            <h3>Analytics & Reporting</h3>
-            <p>Visualize team performance with customizable dashboards and automated reports.</p>
-          </article>
-          
-          <article class="feature-card">
-            <div class="feature-icon" aria-hidden="true">🔗</div>
-            <h3>Integrations</h3>
-            <p>Connect with 100+ tools including Slack, Google Drive, GitHub, and more.</p>
-          </article>
-          
-          <article class="feature-card">
-            <div class="feature-icon" aria-hidden="true">⚡</div>
-            <h3>Automation</h3>
-            <p>Automate repetitive tasks with custom workflows and triggers.</p>
-          </article>
-          
-          <article class="feature-card">
-            <div class="feature-icon" aria-hidden="true">🔒</div>
-            <h3>Enterprise Security</h3>
-            <p>Bank-level encryption, SSO, and compliance certifications you can trust.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="features" class="features-detailed">
-      <div class="container">
-        <article class="feature-detail">
-          <div class="feature-detail-content">
-            <h2>Plan projects with clarity</h2>
-            <p>Visualize your roadmap with multiple views—boards, lists, timelines, or calendars. Switch between views instantly to see your work the way you need to.</p>
-            
-            <ul class="feature-list">
-              <li>✓ Kanban boards for agile workflows</li>
-              <li>✓ Gantt charts for timeline planning</li>
-              <li>✓ Calendar view for deadline tracking</li>
-              <li>✓ List view for simple task management</li>
-            </ul>
-            
-            <a href="/features/project-management" class="btn btn-outline">Learn More</a>
-          </div>
-          
-          <div class="feature-detail-image">
-            <img src="feature-boards.png" alt="Project board interface with drag-and-drop cards" width="600" height="400" loading="lazy">
-          </div>
-        </article>
-        
-        <article class="feature-detail reverse">
-          <div class="feature-detail-content">
-            <h2>Collaborate in real-time</h2>
-            <p>No more endless email threads. Discuss tasks, share files, and make decisions faster with built-in collaboration tools.</p>
-            
-            <ul class="feature-list">
-              <li>✓ Task comments and @mentions</li>
-              <li>✓ File attachments and previews</li>
-              <li>✓ Activity feeds and notifications</li>
-              <li>✓ Guest access for external stakeholders</li>
-            </ul>
-            
-            <a href="/features/collaboration" class="btn btn-outline">Learn More</a>
-          </div>
-          
-          <div class="feature-detail-image">
-            <img src="feature-collaboration.png" alt="Team collaboration interface with comments and mentions" width="600" height="400" loading="lazy">
-          </div>
-        </article>
-        
-        <article class="feature-detail">
-          <div class="feature-detail-content">
-            <h2>Automate your workflow</h2>
-            <p>Save hours every week by automating repetitive tasks. No coding required—just set up rules and let CloudFlow handle the rest.</p>
-            
-            <ul class="feature-list">
-              <li>✓ Custom automation rules</li>
-              <li>✓ Trigger actions based on events</li>
-              <li>✓ Recurring task creation</li>
-              <li>✓ Pre-built automation templates</li>
-            </ul>
-            
-            <a href="/features/automation" class="btn btn-outline">Learn More</a>
-          </div>
-          
-          <div class="feature-detail-image">
-            <img src="feature-automation.png" alt="Automation workflow builder interface" width="600" height="400" loading="lazy">
-          </div>
-        </article>
-      </div>
-    </section>
-    
-    <section class="testimonials-section">
-      <div class="container">
-        <h2>Loved by teams everywhere</h2>
-        
-        <div class="testimonials-grid">
-          <article class="testimonial-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"CloudFlow transformed how our distributed team works together. We've improved project delivery times by 40% and everyone actually enjoys using it."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="testimonial-sarah.jpg" alt="" width="48" height="48" loading="lazy">
-              <div>
-                <cite>Sarah Martinez</cite>
-                <p>Head of Product, TechCorp</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Finally, a project management tool that doesn't require a PhD to understand. My team was up and running in under an hour."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="testimonial-james.jpg" alt="" width="48" height="48" loading="lazy">
-              <div>
-                <cite>James Chen</cite>
-                <p>Founder, StartupXYZ</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"The automation features alone have saved us 10+ hours per week. CloudFlow pays for itself many times over."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="testimonial-priya.jpg" alt="" width="48" height="48" loading="lazy">
-              <div>
-                <cite>Priya Patel</cite>
-                <p>Operations Manager, GrowthCo</p>
-              </div>
-            </footer>
-        </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="pricing" class="pricing-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Simple, transparent pricing</h2>
-          <p>Choose the plan that fits your team size and needs</p>
-        </div>
-        
-        <div class="pricing-toggle">
-          <button class="toggle-option active" data-billing="monthly">Monthly</button>
-          <button class="toggle-option" data-billing="annual">Annual <span class="badge">Save 20%</span></button>
-        </div>
-        
-        <div class="pricing-grid">
-          <article class="pricing-card">
-            <h3>Free</h3>
-            <p class="pricing-description">Perfect for small teams getting started</p>
-            
-            <p class="pricing-price">
-              <span class="price-amount">$0</span>
-              <span class="price-period">forever</span>
-            </p>
-            
-            <a href="/signup?plan=free" class="btn btn-outline btn-large">Get Started</a>
-            
-            <ul class="pricing-features">
-              <li>✓ Up to 10 team members</li>
-              <li>✓ 3 projects</li>
-              <li>✓ Basic task management</li>
-              <li>✓ 5GB storage</li>
-              <li>✓ Mobile apps</li>
-              <li>✓ Email support</li>
-            </ul>
-          </article>
-          
-          <article class="pricing-card featured">
-            <div class="popular-badge">Most Popular</div>
-            <h3>Pro</h3>
-            <p class="pricing-description">For growing teams that need more power</p>
-            
-            <p class="pricing-price">
-              <span class="price-amount">$12</span>
-              <span class="price-period">per user/month</span>
-            </p>
-            
-            <a href="/signup?plan=pro" class="btn btn-primary btn-large">Start Free Trial</a>
-            
-            <ul class="pricing-features">
-              <li>✓ Unlimited team members</li>
-              <li>✓ Unlimited projects</li>
-              <li>✓ Advanced workflows</li>
-              <li>✓ 100GB storage per user</li>
-              <li>✓ Custom fields & views</li>
-              <li>✓ Automation (100 actions/month)</li>
-              <li>✓ Timeline & calendar views</li>
-              <li>✓ Priority support</li>
-            </ul>
-          </article>
-          
-          <article class="pricing-card">
-            <h3>Enterprise</h3>
-            <p class="pricing-description">Advanced features for large organizations</p>
-            
-            <p class="pricing-price">
-              <span class="price-amount">Custom</span>
-            </p>
-            
-            <a href="/contact-sales" class="btn btn-outline btn-large">Contact Sales</a>
-            
-            <ul class="pricing-features">
-              <li>✓ Everything in Pro, plus:</li>
-              <li>✓ Unlimited storage</li>
-              <li>✓ Advanced security & permissions</li>
-              <li>✓ SSO & SAML</li>
-              <li>✓ Dedicated account manager</li>
-              <li>✓ 99.9% uptime SLA</li>
-              <li>✓ Custom integrations</li>
-              <li>✓ On-premise deployment option</li>
-            </ul>
-          </article>
-        </div>
-        
-        <p class="pricing-note">All plans include a 14-day free trial. No credit card required.</p>
-      </div>
-    </section>
-    
-    <section class="integrations-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Connects with your favorite tools</h2>
-          <p>CloudFlow integrates seamlessly with 100+ apps you already use</p>
-        </div>
-        
-        <div class="integrations-grid">
-          <div class="integration-logo">
-            <img src="integration-slack.svg" alt="Slack" width="120" height="40" loading="lazy">
-          </div>
-          <div class="integration-logo">
-            <img src="integration-google.svg" alt="Google Workspace" width="120" height="40" loading="lazy">
-          </div>
-          <div class="integration-logo">
-            <img src="integration-github.svg" alt="GitHub" width="120" height="40" loading="lazy">
-          </div>
-          <div class="integration-logo">
-            <img src="integration-dropbox.svg" alt="Dropbox" width="120" height="40" loading="lazy">
-          </div>
-          <div class="integration-logo">
-            <img src="integration-zoom.svg" alt="Zoom" width="120" height="40" loading="lazy">
-          </div>
-          <div class="integration-logo">
-            <img src="integration-salesforce.svg" alt="Salesforce" width="120" height="40" loading="lazy">
-          </div>
-          <div class="integration-logo">
-            <img src="integration-figma.svg" alt="Figma" width="120" height="40" loading="lazy">
-          </div>
-          <div class="integration-logo">
-            <img src="integration-jira.svg" alt="Jira" width="120" height="40" loading="lazy">
-          </div>
-        </div>
-        
-        <a href="/integrations" class="btn btn-outline">View All Integrations</a>
-      </div>
-    </section>
-    
-    <section class="cta-section">
-      <div class="container">
-        <div class="cta-content">
-          <h2>Ready to transform how your team works?</h2>
-          <p>Join 50,000+ teams already using CloudFlow to get more done</p>
-          
-          <form class="cta-signup-form" action="/start-trial" method="POST">
-            <label for="cta-email" class="visually-hidden">Work email</label>
-            <input type="email" id="cta-email" name="email" placeholder="Work email address" required autocomplete="email">
-            <button type="submit" class="btn btn-primary btn-large">Start Free Trial</button>
-          </form>
-          
-          <p class="cta-trust">
-            <small>✓ Free 14-day trial • No credit card required • Cancel anytime</small>
-          </p>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>CloudFlow</h3>
-          <p>The all-in-one workspace for modern teams</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://twitter.com/cloudflow" aria-label="Twitter">Twitter</a>
-            <a href="https://linkedin.com/company/cloudflow" aria-label="LinkedIn">LinkedIn</a>
-            <a href="https://facebook.com/cloudflow" aria-label="Facebook">Facebook</a>
-            <a href="https://youtube.com/cloudflow" aria-label="YouTube">YouTube</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/integrations">Integrations</a></li>
-            <li><a href="/security">Security</a></li>
-            <li><a href="/updates">Product Updates</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/blog">Blog</a></li>
-            <li><a href="/guides">Guides</a></li>
-            <li><a href="/templates">Templates</a></li>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/api">API Documentation</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/customers">Customers</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/press">Press Kit</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 CloudFlow, Inc. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Service</a>
-          <a href="/gdpr">GDPR</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/tech-startup-homepage.html b/skills/html-coder/assets/tech-startup-homepage.html
deleted file mode 100644
index 784fc89de..000000000
--- a/skills/html-coder/assets/tech-startup-homepage.html
+++ /dev/null
@@ -1,625 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Vertex AI - Building the future of enterprise automation. AI-powered workflow automation that saves companies millions.">
-  <meta property="og:title" content="Vertex AI - Enterprise Workflow Automation">
-  <meta property="og:description" content="AI that automates your business processes end-to-end">
-  <meta property="og:image" content="og-vertex.png">
-  <meta property="og:type" content="website">
-  <title>Vertex AI - Building the Future of Enterprise Automation</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header-startup">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">
-          <img src="vertex-logo.svg" alt="Vertex AI" width="130" height="40">
-        </a>
-        
-        <ul class="nav-menu">
-          <li><a href="#product">Product</a></li>
-          <li><a href="#how-it-works">How It Works</a></li>
-          <li><a href="#customers">Customers</a></li>
-          <li><a href="#company">Company</a></li>
-          <li><a href="/blog">Blog</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/contact" class="btn btn-outline">Contact Sales</a>
-          <a href="/demo" class="btn btn-primary">Request Demo</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-startup">
-      <div class="container">
-        <div class="hero-content-startup">
-          <div class="announcement-badge">
-            <span class="badge-icon">🚀</span>
-            <span>Series B Funding: $45M raised from Sequoia Capital</span>
-            <a href="/blog/series-b-announcement">Read more →</a>
-          </div>
-          
-          <h1>Automate your business.<br>Amplify your impact.</h1>
-          
-          <p class="hero-description">Vertex AI transforms complex business processes into intelligent, automated workflows. What used to take hours now takes seconds—powered by cutting-edge AI that learns and adapts to your business.</p>
-          
-          <div class="hero-cta-group">
-            <a href="/demo" class="btn btn-primary btn-large">Request a Demo</a>
-            <a href="#product" class="btn btn-outline btn-large">See How It Works</a>
-          </div>
-          
-          <div class="hero-proof-points">
-            <div class="proof-point">
-              <strong>87%</strong>
-              <span>Average time saved</span>
-            </div>
-            <div class="proof-point">
-              <strong>$2.4M</strong>
-              <span>Avg. annual savings</span>
-            </div>
-            <div class="proof-point">
-              <strong>500+</strong>
-              <span>Enterprise customers</span>
-            </div>
-          </div>
-        </div>
-        
-        <div class="hero-visual">
-          <img src="platform-dashboard.png" alt="Vertex AI platform dashboard showing automated workflow analytics" width="900" height="600" loading="eager">
-        </div>
-      </div>
-    </section>
-    
-    <section class="customers-logo-section">
-      <div class="container">
-        <p class="customers-headline">Trusted by leading enterprises worldwide</p>
-        
-        <div class="customer-logos">
-          <img src="customer-adobe.svg" alt="Adobe" width="100" height="40" loading="lazy">
-          <img src="customer-salesforce.svg" alt="Salesforce" width="120" height="40" loading="lazy">
-          <img src="customer-deloitte.svg" alt="Deloitte" width="100" height="40" loading="lazy">
-          <img src="customer-general-electric.svg" alt="General Electric" width="80" height="40" loading="lazy">
-          <img src="customer-airbnb.svg" alt="Airbnb" width="100" height="40" loading="lazy">
-          <img src="customer-walmart.svg" alt="Walmart" width="100" height="40" loading="lazy">
-        </div>
-      </div>
-    </section>
-    
-    <section class="problem-solution-section">
-      <div class="container">
-        <div class="problem-solution-grid">
-          <div class="problem-box">
-            <h2>The Problem</h2>
-            <p class="intro-text">Businesses waste billions on manual, repetitive tasks</p>
-            
-            <ul class="problem-list">
-              <li>
-                <strong>Manual Data Entry:</strong>
-                <span>Teams spend 40% of their time on repetitive data tasks</span>
-              </li>
-              <li>
-                <strong>Disconnected Systems:</strong>
-                <span>Data silos create inefficiencies and errors</span>
-              </li>
-              <li>
-                <strong>Slow Approvals:</strong>
-                <span>Business processes bottleneck on manual reviews</span>
-              </li>
-              <li>
-                <strong>Limited Insights:</strong>
-                <span>Important patterns hidden in unstructured data</span>
-              </li>
-            </ul>
-          </div>
-          
-          <div class="solution-box">
-            <h2>The Solution</h2>
-            <p class="intro-text">AI that understands and automates your entire workflow</p>
-            
-            <ul class="solution-list">
-              <li>
-                <strong>Intelligent Automation:</strong>
-                <span>AI handles data entry, extraction, and validation automatically</span>
-              </li>
-              <li>
-                <strong>Unified Platform:</strong>
-                <span>Connect all your systems with pre-built integrations</span>
-              </li>
-              <li>
-                <strong>Smart Routing:</strong>
-                <span>AI routes approvals and flagging based on priorities</span>
-              </li>
-              <li>
-                <strong>Predictive Analytics:</strong>
-                <span>Surface insights and anomalies in real-time</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="product" class="product-showcase-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>One platform. Infinite possibilities.</h2>
-          <p>Vertex AI adapts to any business process, in any industry</p>
-        </div>
-        
-        <div class="product-features-showcase">
-          <article class="product-feature-large">
-            <div class="product-feature-content">
-              <div class="feature-label">Core Technology</div>
-              <h3>AI That Actually Understands Your Business</h3>
-              <p>Our proprietary Natural Language Processing engine reads and understands documents, emails, forms, and conversations just like a human—but 1000x faster. It learns your business rules and applies them consistently across all workflows.</p>
-              
-              <ul class="capability-list">
-                <li>Document intelligence (invoices, contracts, forms)</li>
-                <li>Email and message processing</li>
-                <li>Intelligent data extraction and validation</li>
-                <li>Context-aware decision making</li>
-              </ul>
-            </div>
-            
-            <div class="product-feature-visual">
-              <img src="feature-ai-processing.png" alt="AI document processing showing invoice data extraction" width="600" height="400" loading="lazy">
-            </div>
-          </article>
-          
-          <article class="product-feature-large reverse">
-            <div class="product-feature-content">
-              <div class="feature-label">Workflow Builder</div>
-              <h3>Build Automations in Minutes, Not Months</h3>
-              <p>Our visual workflow builder lets you create complex automations without writing code. Drag, drop, and connect—Vertex AI handles the rest. Or use our AI assistant to generate workflows from natural language descriptions.</p>
-              
-              <ul class="capability-list">
-                <li>Visual drag-and-drop interface</li>
-                <li>AI-powered workflow generation</li>
-                <li>Pre-built templates for common processes</li>
-                <li>Real-time testing and debugging</li>
-              </ul>
-            </div>
-            
-            <div class="product-feature-visual">
-              <img src="feature-workflow-builder.png" alt="Visual workflow builder interface with connected nodes" width="600" height="400" loading="lazy">
-            </div>
-          </article>
-          
-          <article class="product-feature-large">
-            <div class="product-feature-content">
-              <div class="feature-label">Integrations</div>
-              <h3>Connect Everything You Use</h3>
-              <p>Vertex AI integrates seamlessly with 200+ business applications. From CRMs to ERPs to custom internal tools—if it has an API, we can connect to it. No more data silos.</p>
-              
-              <ul class="capability-list">
-                <li>200+ pre-built integrations</li>
-                <li>Custom API connections</li>
-                <li>Real-time data sync</li>
-                <li>Secure data handling (SOC 2, GDPR compliant)</li>
-              </ul>
-            </div>
-            
-            <div class="product-feature-visual">
-              <img src="feature-integrations.png" alt="Integration hub showing connected business applications" width="600" height="400" loading="lazy">
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="how-it-works" class="how-it-works-startup">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>From setup to ROI in weeks</h2>
-          <p>Our proven implementation process gets you up and running fast</p>
-        </div>
-        
-        <div class="process-timeline">
-          <article class="timeline-step">
-            <div class="timeline-marker">
-              <span class="timeline-number">1</span>
-            </div>
-            <div class="timeline-content">
-              <div class="timeline-duration">Week 1</div>
-              <h3>Discovery & Planning</h3>
-              <p>Our team works with you to map your current processes, identify automation opportunities, and design your custom solution.</p>
-            </div>
-          </article>
-          
-          <article class="timeline-step">
-            <div class="timeline-marker">
-              <span class="timeline-number">2</span>
-            </div>
-            <div class="timeline-content">
-              <div class="timeline-duration">Week 2-3</div>
-              <h3>Configuration & Integration</h3>
-              <p>We configure Vertex AI for your business, connect your systems, and build your initial automation workflows.</p>
-            </div>
-          </article>
-          
-          <article class="timeline-step">
-            <div class="timeline-marker">
-              <span class="timeline-number">3</span>
-            </div>
-            <div class="timeline-content">
-              <div class="timeline-duration">Week 4</div>
-              <h3>Testing & Training</h3>
-              <p>Test workflows with real data, train your team, and refine automations based on feedback.</p>
-            </div>
-          </article>
-          
-          <article class="timeline-step">
-            <div class="timeline-marker">
-              <span class="timeline-number">4</span>
-            </div>
-            <div class="timeline-content">
-              <div class="timeline-duration">Week 5+</div>
-              <h3>Launch & Optimize</h3>
-              <p>Go live with ongoing support. Our AI continuously learns and optimizes your workflows for maximum efficiency.</p>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="customers" class="case-study-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Real results from real customers</h2>
-        </div>
-        
-        <div class="case-studies">
-          <article class="case-study-card featured-case">
-            <div class="case-study-header">
-              <img src="logo-acme-corp.svg" alt="Acme Corp" width="120" height="40" loading="lazy">
-              <span class="case-study-industry">Financial Services</span>
-            </div>
-            
-            <h3>How Acme Corp Automated Invoice Processing</h3>
-            <p class="case-study-description">Acme Corp processes 50,000+ invoices monthly across 30 countries. Manual processing was slow, error-prone, and expensive.</p>
-            
-            <div class="case-study-results">
-              <div class="result-stat">
-                <strong>94%</strong>
-                <span>Faster processing</span>
-              </div>
-              <div class="result-stat">
-                <strong>$1.8M</strong>
-                <span>Annual savings</span>
-              </div>
-              <div class="result-stat">
-                <strong>99.7%</strong>
-                <span>Accuracy rate</span>
-              </div>
-            </div>
-            
-            <blockquote>
-              <p>"Vertex AI transformed our accounts payable department. What used to take a team of 12 people now runs automatically with 2 people overseeing exceptions. The ROI was immediate."</p>
-              <cite>— Michael Chen, CFO at Acme Corp</cite>
-            </blockquote>
-            
-            <a href="/case-studies/acme-corp" class="case-study-link">Read Full Case Study →</a>
-          </article>
-          
-          <article class="case-study-card">
-            <div class="case-study-header">
-              <img src="logo-healthtech.svg" alt="HealthTech Solutions" width="120" height="40" loading="lazy">
-              <span class="case-study-industry">Healthcare</span>
-            </div>
-            
-            <h3>Streamlining Patient Onboarding</h3>
-            
-            <div class="case-study-results-compact">
-              <div class="result-stat-compact">
-                <strong>70%</strong>
-                <span>Time reduction</span>
-              </div>
-              <div class="result-stat-compact">
-                <strong>3x</strong>
-                <span>More patients served</span>
-              </div>
-            </div>
-            
-            <p class="case-study-quote">"Patient satisfaction scores increased by 40% after implementing Vertex AI."</p>
-            
-            <a href="/case-studies/healthtech" class="case-study-link">Read Case Study →</a>
-          </article>
-          
-          <article class="case-study-card">
-            <div class="case-study-header">
-              <img src="logo-retail-plus.svg" alt="RetailPlus" width="120" height="40" loading="lazy">
-              <span class="case-study-industry">Retail</span>
-            </div>
-            
-            <h3>Automating Supply Chain Operations</h3>
-            
-            <div class="case-study-results-compact">
-              <div class="result-stat-compact">
-                <strong>85%</strong>
-                <span>Order accuracy</span>
-              </div>
-              <div class="result-stat-compact">
-                <strong>$3.2M</strong>
-                <span>Cost savings</span>
-              </div>
-            </div>
-            
-            <p class="case-study-quote">"We eliminated stockouts and reduced excess inventory by 60%."</p>
-            
-            <a href="/case-studies/retailplus" class="case-study-link">Read Case Study →</a>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="company" class="company-section">
-      <div class="container">
-        <div class="company-intro">
-          <h2>Built by automation experts. Backed by world-class investors.</h2>
-          <p>We're on a mission to eliminate tedious work and let people focus on what matters most.</p>
-        </div>
-        
-        <div class="company-grid">
-          <div class="company-block">
-            <h3>Our Story</h3>
-            <p>Founded in 2021 by a team of AI researchers and enterprise software veterans, Vertex AI was born from a simple insight: businesses waste billions on work that machines can do better.</p>
-            
-            <p>After seeing firsthand how Fortune 500 companies struggled with manual processes, we set out to build AI that actually works—accurate, reliable, and easy to use.</p>
-            
-            <p>Today, we serve 500+ enterprise customers across industries, processing over 10 million automated workflows daily.</p>
-          </div>
-          
-          <div class="company-stats-grid">
-            <div class="company-stat">
-              <strong>500+</strong>
-              <span>Enterprise customers</span>
-            </div>
-            <div class="company-stat">
-              <strong>$45M</strong>
-              <span>Series B funding</span>
-            </div>
-            <div class="company-stat">
-              <strong>120</strong>
-              <span>Team members</span>
-            </div>
-            <div class="company-stat">
-              <strong>10M+</strong>
-              <span>Workflows daily</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="investors-section">
-      <div class="container">
-        <h2>Backed by Leading Investors</h2>
-        
-        <div class="investors-grid">
-          <div class="investor-logo">
-            <img src="investor-sequoia.svg" alt="Sequoia Capital" width="140" height="50" loading="lazy">
-          </div>
-          <div class="investor-logo">
-            <img src="investor-andreessen.svg" alt="Andreessen Horowitz" width="140" height="50" loading="lazy">
-          </div>
-          <div class="investor-logo">
-            <img src="investor-accel.svg" alt="Accel Partners" width="120" height="50" loading="lazy">
-          </div>
-          <div class="investor-logo">
-            <img src="investor-yc.svg" alt="Y Combinator" width="80" height="50" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="team-section">
-      <div class="container">
-        <h2>Meet the Team</h2>
-        <p class="team-intro">Led by experienced founders with deep expertise in AI and enterprise software</p>
-        
-        <div class="team-grid">
-          <article class="team-member">
-            <img src="team-sarah-williams.jpg" alt="Sarah Williams" width="200" height="200" loading="lazy">
-            <h3>Sarah Williams</h3>
-            <p class="team-role">Co-founder & CEO</p>
-            <p class="team-bio">Former VP Product at Salesforce. Stanford CS PhD. 15 years building enterprise software.</p>
-            <a href="https://linkedin.com/in/sarahwilliams" class="team-social" aria-label="Sarah Williams on LinkedIn">LinkedIn</a>
-          </article>
-          
-          <article class="team-member">
-            <img src="team-david-chen.jpg" alt="David Chen" width="200" height="200" loading="lazy">
-            <h3>David Chen</h3>
-            <p class="team-role">Co-founder & CTO</p>
-            <p class="team-bio">AI researcher from MIT. Published 30+ papers on NLP. Led ML teams at Google Brain.</p>
-            <a href="https://linkedin.com/in/davidchen" class="team-social" aria-label="David Chen on LinkedIn">LinkedIn</a>
-          </article>
-          
-          <article class="team-member">
-            <img src="team-priya-patel.jpg" alt="Priya Patel" width="200" height="200" loading="lazy">
-            <h3>Priya Patel</h3>
-            <p class="team-role">VP of Engineering</p>
-            <p class="team-bio">Built scalable systems at Uber and Stripe. Berkeley EECS. Loves distributed systems.</p>
-            <a href="https://linkedin.com/in/priyapatel" class="team-social" aria-label="Priya Patel on LinkedIn">LinkedIn</a>
-          </article>
-          
-          <article class="team-member">
-            <img src="team-marcus-johnson.jpg" alt="Marcus Johnson" width="200" height="200" loading="lazy">
-            <h3>Marcus Johnson</h3>
-            <p class="team-role">VP of Sales</p>
-            <p class="team-bio">20 years in enterprise sales. Former SVP at Oracle. Closed 100+ Fortune 500 deals.</p>
-            <a href="https://linkedin.com/in/marcusjohnson" class="team-social" aria-label="Marcus Johnson on LinkedIn">LinkedIn</a>
-          </article>
-        </div>
-        
-        <div class="careers-cta">
-          <h3>Join Our Team</h3>
-          <p>We're hiring world-class talent across engineering, product, sales, and operations.</p>
-          <a href="/careers" class="btn btn-primary">View Open Positions</a>
-        </div>
-      </div>
-    </section>
-    
-    <section class="press-mentions-section">
-      <div class="container">
-        <h2>In the News</h2>
-        
-        <div class="press-articles">
-          <article class="press-article">
-            <img src="press-techcrunch-logo.svg" alt="TechCrunch" width="120" height="30" loading="lazy">
-            <h3>"Vertex AI raises $45M to automate enterprise workflows"</h3>
-            <p><time datetime="2026-01-15">January 15, 2026</time></p>
-            <a href="https://techcrunch.com/vertex-ai-series-b">Read Article →</a>
-          </article>
-          
-          <article class="press-article">
-            <img src="press-forbes-logo.svg" alt="Forbes" width="100" height="30" loading="lazy">
-            <h3>"The AI Startups Transforming Enterprise Software"</h3>
-            <p><time datetime="2025-11-20">November 20, 2025</time></p>
-            <a href="https://forbes.com/ai-startups-2025">Read Article →</a>
-          </article>
-          
-          <article class="press-article">
-            <img src="press-wsjlogo.svg" alt="Wall Street Journal" width="120" height="30" loading="lazy">
-            <h3>"How AI Is Reshaping Corporate Back Offices"</h3>
-            <p><time datetime="2025-09-08">September 8, 2025</time></p>
-            <a href="https://wsj.com/ai-back-offices">Read Article →</a>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="final-cta-section">
-      <div class="container">
-        <div class="final-cta-content">
-          <h2>Ready to automate your business?</h2>
-          <p>See how Vertex AI can transform your workflows in a personalized demo.</p>
-          
-          <form class="demo-request-form" action="/request-demo" method="POST">
-            <div class="form-row">
-              <div class="form-group">
-                <label for="demo-name">Full Name *</label>
-                <input type="text" id="demo-name" name="name" required autocomplete="name">
-              </div>
-              
-              <div class="form-group">
-                <label for="demo-email">Work Email *</label>
-                <input type="email" id="demo-email" name="email" required autocomplete="email">
-              </div>
-            </div>
-            
-            <div class="form-row">
-              <div class="form-group">
-                <label for="demo-company">Company *</label>
-                <input type="text" id="demo-company" name="company" required autocomplete="organization">
-              </div>
-              
-              <div class="form-group">
-                <label for="demo-size">Company Size *</label>
-                <select id="demo-size" name="company_size" required>
-                  <option value="">Select size...</option>
-                  <option value="1-50">1-50 employees</option>
-                  <option value="51-200">51-200 employees</option>
-                  <option value="201-1000">201-1,000 employees</option>
-                  <option value="1001-5000">1,001-5,000 employees</option>
-                  <option value="5001+">5,001+ employees</option>
-                </select>
-              </div>
-            </div>
-            
-            <div class="form-group">
-              <label for="demo-use-case">Tell us about your automation needs</label>
-              <textarea id="demo-use-case" name="use_case" rows="4" placeholder="E.g., We process 10,000 invoices monthly and want to automate approval workflows..."></textarea>
-            </div>
-            
-            <button type="submit" class="btn btn-primary btn-large">Request Demo</button>
-            
-            <p class="form-note"><small>We'll respond within 24 hours to schedule your personalized demo</small></p>
-          </form>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <img src="vertex-logo-white.svg" alt="Vertex AI" width="130" height="40" loading="lazy">
-          <p>Automate your business.<br>Amplify your impact.</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://twitter.com/vertexai" aria-label="Twitter">Twitter</a>
-            <a href="https://linkedin.com/company/vertexai" aria-label="LinkedIn">LinkedIn</a>
-            <a href="https://youtube.com/vertexai" aria-label="YouTube">YouTube</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/platform">Platform</a></li>
-            <li><a href="/integrations">Integrations</a></li>
-            <li><a href="/security">Security</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/demo">Request Demo</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Solutions</h3>
-          <ul>
-            <li><a href="/solutions/finance">Finance & Accounting</a></li>
-            <li><a href="/solutions/hr">Human Resources</a></li>
-            <li><a href="/solutions/operations">Operations</a></li>
-            <li><a href="/solutions/customer-service">Customer Service</a></li>
-            <li><a href="/case-studies">Case Studies</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/blog">Blog</a></li>
-            <li><a href="/documentation">Documentation</a></li>
-            <li><a href="/api">API Reference</a></li>
-            <li><a href="/guides">Guides</a></li>
-            <li><a href="/support">Support</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/press">Press</a></li>
-            <li><a href="/partners">Partners</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Vertex AI, Inc. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Service</a>
-          <a href="/security">Security</a>
-          <a href="/compliance">Compliance</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/travel-destination-guide.html b/skills/html-coder/assets/travel-destination-guide.html
deleted file mode 100644
index 152c6e932..000000000
--- a/skills/html-coder/assets/travel-destination-guide.html
+++ /dev/null
@@ -1,746 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Complete travel guide to Lisbon, Portugal. Discover the best things to do, where to stay, what to eat, and insider tips for visiting Portugal's vibrant capital.">
-  <meta property="og:title" content="Lisbon Travel Guide - Complete Guide to Portugal's Capital">
-  <meta property="og:description" content="Your ultimate guide to exploring Lisbon: attractions, food, hotels, and local tips">
-  <meta property="og:image" content="og-lisbon.jpg">
-  <meta property="og:type" content="article">
-  <title>Lisbon Travel Guide: Complete Guide to Portugal's Capital | 2026</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header-guide">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Travel Guides</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/">Home</a></li>
-          <li><a href="/destinations">Destinations</a></li>
-          <li><a href="/guides">All Guides</a></li>
-          <li><a href="/blog">Blog</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <button class="btn-link" onclick="openSearch()">🔍 Search</button>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <article class="destination-guide">
-      <section class="hero-guide">
-        <div class="hero-guide-image">
-          <img src="lisbon-hero.jpg" alt="Colorful buildings and tram in Lisbon's Alfama district" width="1920" height="800" loading="eager">
-        </div>
-        
-        <div class="container">
-          <div class="hero-guide-content">
-            <div class="destination-meta">
-              <span class="location-badge">🇵🇹 Portugal</span>
-              <span class="updated-date">Updated March 2026</span>
-            </div>
-            
-            <h1>The Complete Lisbon Travel Guide</h1>
-            <p class="hero-subtitle">Your ultimate guide to exploring Portugal's sun-soaked capital—from historic neighborhoods to world-class cuisine</p>
-            
-            <div class="author-info">
-              <img src="author-sofia.jpg" alt="" width="48" height="48" loading="eager">
-              <div>
-                <p>By <strong>Sofia Martinez</strong></p>
-                <p>Lisbon resident & travel writer • 15 min read</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      
-      <div class="guide-nav-sticky" id="guide-nav">
-        <div class="container">
-          <nav class="guide-nav" aria-label="Guide sections">
-            <a href="#overview">Overview</a>
-            <a href="#best-time">Best Time</a>
-            <a href="#attractions">Top Attractions</a>
-            <a href="#neighborhoods">Neighborhoods</a>
-            <a href="#food">Food & Drink</a>
-            <a href="#where-to-stay">Where to Stay</a>
-            <a href="#getting-around">Getting Around</a>
-            <a href="#itineraries">Itineraries</a>
-            <a href="#tips">Local Tips</a>
-          </nav>
-        </div>
-      </div>
-      
-      <div class="container">
-        <div class="guide-layout">
-          <div class="guide-content">
-            <section id="overview" class="guide-section">
-              <h2>Why Visit Lisbon?</h2>
-              
-              <p class="lead-paragraph">Lisbon is having a moment—and for good reason. Portugal's capital seamlessly blends old-world charm with contemporary cool, offering sun-drenched days, incredible seafood, historic neighborhoods draped in azulejo tiles, and some of Europe's best nightlife.</p>
-              
-              <p>Built across seven hills overlooking the Tagus River, Lisbon rewards wanderers with stunning viewpoints (miradouros), vintage yellow trams rattling through narrow streets, and a laid-back vibe that's rare among European capitals. Whether you're here for the history, the food, the beaches, or the culture, Lisbon delivers.</p>
-              
-              <div class="quick-facts">
-                <h3>Quick Facts</h3>
-                <dl class="facts-grid">
-                  <div class="fact-item">
-                    <dt>Population:</dt>
-                    <dd>505,000 (2.9M metro area)</dd>
-                  </div>
-                  
-                  <div class="fact-item">
-                    <dt>Language:</dt>
-                    <dd>Portuguese (English widely spoken)</dd>
-                  </div>
-                  
-                  <div class="fact-item">
-                    <dt>Currency:</dt>
-                    <dd>Euro (€)</dd>
-                  </div>
-                  
-                  <div class="fact-item">
-                    <dt>Time Zone:</dt>
-                    <dd>WET (UTC+0) / WEST (UTC+1 summer)</dd>
-                  </div>
-                  
-                  <div class="fact-item">
-                    <dt>Best For:</dt>
-                    <dd>History, food, beaches, nightlife</dd>
-                  </div>
-                  
-                  <div class="fact-item">
-                    <dt>Budget:</dt>
-                    <dd>€80-150/day (mid-range traveler)</dd>
-                  </div>
-                </dl>
-              </div>
-            </section>
-            
-            <section id="best-time" class="guide-section">
-              <h2>When to Visit Lisbon</h2>
-              
-              <p>Lisbon enjoys 300+ days of sunshine annually, making it a year-round destination. That said, timing matters for crowds and weather.</p>
-              
-              <div class="seasons-grid">
-                <article class="season-card">
-                  <h3>🌸 Spring (March-May)</h3>
-                  <p class="season-verdict"><strong>Best Time to Visit</strong></p>
-                  <p>Perfect weather (60-70°F), fewer crowds, jacaranda trees blooming, and reasonable prices. April and May are ideal.</p>
-                  
-                  <ul class="season-pros-cons">
-                    <li class="pro">✓ Beautiful weather</li>
-                    <li class="pro">✓ Fewer tourists</li>
-                    <li class="pro">✓ Lower prices</li>
-                    <li class="con">✗ Can be rainy in March</li>
-                  </ul>
-                </article>
-                
-                <article class="season-card">
-                  <h3>☀️ Summer (June-August)</h3>
-                  <p class="season-verdict"><strong>Peak Season</strong></p>
-                  <p>Hot and sunny (75-85°F), perfect beach weather. Busiest and most expensive time. Book accommodations well in advance.</p>
-                  
-                  <ul class="season-pros-cons">
-                    <li class="pro">✓ Best beach weather</li>
-                    <li class="pro">✓ Long days (sunset at 9pm)</li>
-                    <li class="pro">✓ Festival season</li>
-                    <li class="con">✗ Crowded and expensive</li>
-                    <li class="con">✗ Can be very hot</li>
-                  </ul>
-                </article>
-                
-                <article class="season-card">
-                  <h3>🍂 Fall (September-November)</h3>
-                  <p class="season-verdict"><strong>Excellent Choice</strong></p>
-                  <p>September is still warm (70-75°F), October is perfect, November gets rainy. Great shoulder season with fewer crowds.</p>
-                  
-                  <ul class="season-pros-cons">
-                    <li class="pro">✓ Pleasant temperatures</li>
-                    <li class="pro">✓ Fewer tourists</li>
-                    <li class="pro">✓ Ocean still warm in Sept</li>
-                    <li class="con">✗ Rain increases in Nov</li>
-                  </ul>
-                </article>
-                
-                <article class="season-card">
-                  <h3>❄️ Winter (December-February)</h3>
-                  <p class="season-verdict"><strong>Budget-Friendly</strong></p>
-                  <p>Mild (50-60°F) but rainy. Quietest time with lowest prices. Still enjoyable for city exploration and indoor activities.</p>
-                  
-                  <ul class="season-pros-cons">
-                    <li class="pro">✓ Lowest prices</li>
-                    <li class="pro">✓ No crowds</li>
-                    <li class="pro">✓ Cozy cafés and museums</li>
-                    <li class="con">✗ Rainy and gray</li>
-                    <li class="con">✗ Not beach weather</li>
-                  </ul>
-                </article>
-              </div>
-            </section>
-            
-            <section id="attractions" class="guide-section">
-              <h2>Top Attractions & Things to Do</h2>
-              
-              <div class="attractions-list">
-                <article class="attraction-item">
-                  <div class="attraction-image">
-                    <img src="attraction-belem-tower.jpg" alt="Belém Tower fortress on the Tagus River" width="400" height="300" loading="lazy">
-                  </div>
-                  
-                  <div class="attraction-content">
-                    <div class="attraction-header">
-                      <h3>Belém Tower & Jerónimos Monastery</h3>
-                      <span class="attraction-rating">★★★★★</span>
-                    </div>
-                    
-                    <p>These UNESCO World Heritage sites showcase Portugal's maritime glory. The ornate Manueline architecture is stunning, and the monastery's cloister is peaceful perfection.</p>
-                    
-                    <div class="attraction-details">
-                      <p><strong>Location:</strong> Belém district</p>
-                      <p><strong>Cost:</strong> €12 (combo ticket)</p>
-                      <p><strong>Time needed:</strong> 2-3 hours</p>
-                      <p><strong>Pro tip:</strong> Arrive early to beat crowds, then grab a pastel de nata at Pastéis de Belém</p>
-                    </div>
-                  </div>
-                </article>
-                
-                <article class="attraction-item">
-                  <div class="attraction-image">
-                    <img src="attraction-alfama.jpg" alt="Narrow cobblestone streets of Alfama neighborhood" width="400" height="300" loading="lazy">
-                  </div>
-                  
-                  <div class="attraction-content">
-                    <div class="attraction-header">
-                      <h3>Wander Alfama's Maze</h3>
-                      <span class="attraction-rating">★★★★★</span>
-                    </div>
-                    
-                    <p>Lisbon's oldest neighborhood is a labyrinth of steep alleys, hidden squares, and fado music drifting from taverns. Get lost on purpose—it's the best way to experience Alfama.</p>
-                    
-                    <div class="attraction-details">
-                      <p><strong>Location:</strong> Alfama district</p>
-                      <p><strong>Cost:</strong> Free (just walking)</p>
-                      <p><strong>Time needed:</strong> Half day</p>
-                      <p><strong>Pro tip:</strong> Start at São Jorge Castle and wind down to the waterfront</p>
-                    </div>
-                  </div>
-                </article>
-                
-                <article class="attraction-item">
-                  <div class="attraction-image">
-                    <img src="attraction-tram28.jpg" alt="Yellow vintage tram 28 on narrow street" width="400" height="300" loading="lazy">
-                  </div>
-                  
-                  <div class="attraction-content">
-                    <div class="attraction-header">
-                      <h3>Ride Tram 28</h3>
-                      <span class="attraction-rating">★★★★☆</span>
-                    </div>
-                    
-                    <p>The iconic yellow tram rattles through Lisbon's historic neighborhoods, climbing steep hills and squeezing through impossibly narrow streets. It's touristy but fun.</p>
-                    
-                    <div class="attraction-details">
-                      <p><strong>Route:</strong> Martim Moniz to Campo de Ourique</p>
-                      <p><strong>Cost:</strong> €3 (single ride)</p>
-                      <p><strong>Time needed:</strong> 40 minutes full route</p>
-                      <p><strong>Pro tip:</strong> Board early morning or late afternoon to avoid crowds</p>
-                    </div>
-                  </div>
-                </article>
-                
-                <article class="attraction-item">
-                  <div class="attraction-image">
-                    <img src="attraction-tile-museum.jpg" alt="Colorful Portuguese azulejo tiles display" width="400" height="300" loading="lazy">
-                  </div>
-                  
-                  <div class="attraction-content">
-                    <div class="attraction-header">
-                      <h3>National Tile Museum</h3>
-                      <span class="attraction-rating">★★★★☆</span>
-                    </div>
-                    
-                    <p>Portugal's iconic azulejo tiles get their moment. This underrated museum showcases 500 years of tile artistry in a beautiful former convent.</p>
-                    
-                    <div class="attraction-details">
-                      <p><strong>Location:</strong> Beato district</p>
-                      <p><strong>Cost:</strong> €5</p>
-                      <p><strong>Time needed:</strong> 1.5 hours</p>
-                      <p><strong>Pro tip:</strong> Don't miss the stunning blue-and-white capela (chapel)</p>
-                    </div>
-                  </div>
-                </article>
-                
-                <article class="attraction-item">
-                  <div class="attraction-image">
-                    <img src="attraction-sintra.jpg" alt="Colorful Pena Palace in Sintra mountains" width="400" height="300" loading="lazy">
-                  </div>
-                  
-                  <div class="attraction-content">
-                    <div class="attraction-header">
-                      <h3>Day Trip to Sintra</h3>
-                      <span class="attraction-rating">★★★★★</span>
-                    </div>
-                    
-                    <p>This fairy-tale town is 30 minutes from Lisbon and absolutely unmissable. Colorful palaces, mysterious quintas (estates), and forested hills create a magical atmosphere.</p>
-                    
-                    <div class="attraction-details">
-                      <p><strong>Distance:</strong> 30 min by train from Rossio</p>
-                      <p><strong>Must-see:</strong> Pena Palace, Quinta da Regaleira, Moorish Castle</p>
-                      <p><strong>Time needed:</strong> Full day</p>
-                      <p><strong>Pro tip:</strong> Book palace tickets online in advance to skip lines</p>
-                    </div>
-                  </div>
-                </article>
-              </div>
-              
-              <div class="more-attractions">
-                <h3>More Worth Your Time</h3>
-                <ul class="attractions-list-compact">
-                  <li><strong>LX Factory:</strong> Hip creative complex in converted industrial space (cafés, shops, street art)</li>
-                  <li><strong>Miradouros:</strong> Viewpoints scattered across the city—try Portas do Sol and Senhora do Monte</li>
-                  <li><strong>Time Out Market:</strong> Gourmet food court with Lisbon's best chefs under one roof</li>
-                  <li><strong>São Jorge Castle:</strong> Moorish castle with panoramic city views</li>
-                  <li><strong>Oceanário:</strong> One of Europe's best aquariums (great for families)</li>
-                  <li><strong>Beaches:</strong> Cascais and Costa da Caparica (30-45 min from center)</li>
-                </ul>
-              </div>
-            </section>
-            
-            <section id="neighborhoods" class="guide-section">
-              <h2>Lisbon's Neighborhoods</h2>
-              
-              <div class="neighborhoods-list">
-                <article class="neighborhood-card">
-                  <h3>🏛️ Alfama</h3>
-                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Historic, atmospheric, authentic</p>
-                  <p>Lisbon's oldest district survived the 1755 earthquake. Today it's a warren of steep streets, traditional fado houses, and local taverns. Touristy but charming.</p>
-                  <p><strong>Best for:</strong> History buffs, photographers, fado music lovers</p>
-                  <p><strong>Don't miss:</strong> São Jorge Castle, Feira da Ladra flea market (Tuesdays and Saturdays)</p>
-                </article>
-                
-                <article class="neighborhood-card">
-                  <h3>🎭 Bairro Alto</h3>
-                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Bohemian, nightlife hub, artsy</p>
-                  <p>By day: quirky shops and quiet streets. By night: Lisbon's party central with bars spilling onto cobblestones. The energy is infectious after 10pm.</p>
-                  <p><strong>Best for:</strong> Nightlife, bar hopping, young travelers</p>
-                  <p><strong>Don't miss:</strong> Sunset drinks with views, street parties on Pink Street</p>
-                </article>
-                
-                <article class="neighborhood-card">
-                  <h3>🌊 Belém</h3>
-                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Historical, spacious, monumental</p>
-                  <p>Where Portugal's Age of Discovery comes alive. Waterfront location with major monuments and the famous pastel de nata bakery.</p>
-                  <p><strong>Best for:</strong> History enthusiasts, families, monument lovers</p>
-                  <p><strong>Don't miss:</strong> Pastéis de Belém (arrive before 9am to avoid queues)</p>
-                </article>
-                
-                <article class="neighborhood-card">
-                  <h3>🛍️ Chiado & Baixa</h3>
-                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Elegant, commercial, central</p>
-                  <p>The downtown core. Baixa's grid streets (rebuilt after 1755 earthquake) lead to Chiado's elegant shopping district and literary cafés.</p>
-                  <p><strong>Best for:</strong> Shopping, central location, classic cafés</p>
-                  <p><strong>Don't miss:</strong> A Brasileira café, Santa Justa Lift viewpoint</p>
-                </article>
-                
-                <article class="neighborhood-card">
-                  <h3>🎨 Príncipe Real</h3>
-                  <p class="neighborhood-vibe"><strong>Vibe:</strong> Trendy, LGBTQ+ friendly, upscale</p>
-                  <p>Lisbon's most fashionable neighborhood with concept stores, design shops, botanical garden, and excellent restaurants.</p>
-                  <p><strong>Best for:</strong> Foodies, design lovers, gay travelers</p>
-                  <p><strong>Don't miss:</strong> Weekend brunch scene, Jardim do Príncipe Real park</p>
-                </article>
-              </div>
-            </section>
-            
-            <section id="food" class="guide-section">
-              <h2>Food & Drink in Lisbon</h2>
-              
-              <p>Lisbon's food scene is having a renaissance. Traditional tasca (taverns) sit alongside innovative restaurants, while markets overflow with fresh seafood and produce.</p>
-              
-              <div class="must-try-foods">
-                <h3>Must-Try Dishes</h3>
-                
-                <div class="food-grid">
-                  <article class="food-card">
-                    <h4>Pastel de Nata</h4>
-                    <p>Custard tart with flaky pastry. Lisbon's iconic sweet. Best at Pastéis de Belém or Manteigaria.</p>
-                    <p class="food-price">€1-2 each</p>
-                  </article>
-                  
-                  <article class="food-card">
-                    <h4>Bacalhau</h4>
-                    <p>Salted cod prepared 1,000 ways. Try bacalhau à brás (shredded cod with eggs and potatoes).</p>
-                    <p class="food-price">€12-18</p>
-                  </article>
-                  
-                  <article class="food-card">
-                    <h4>Sardinhas Assadas</h4>
-                    <p>Grilled sardines, especially during June's Santo António festival. Simple and delicious.</p>
-                    <p class="food-price">€8-12</p>
-                  </article>
-                  
-                  <article class="food-card">
-                    <h4>Caldo Verde</h4>
-                    <p>Comforting kale and potato soup with chouriço sausage. Perfect starter.</p>
-                    <p class="food-price">€3-5</p>
-                  </article>
-                  
-                  <article class="food-card">
-                    <h4>Arroz de Marisco</h4>
-                    <p>Seafood rice—Portugal's answer to paella. Rich, tomatoey, loaded with shellfish.</p>
-                    <p class="food-price">€15-25</p>
-                  </article>
-                  
-                  <article class="food-card">
-                    <h4>Bifana</h4>
-                    <p>Pork sandwich with mustard sauce. The ultimate Portuguese street food.</p>
-                    <p class="food-price">€3-5</p>
-                  </article>
-                </div>
-              </div>
-              
-              <div class="restaurant-recommendations">
-                <h3>Where to Eat</h3>
-                
-                <ul class="restaurants-list">
-                  <li>
-                    <strong>Time Out Market (Mercado da Ribeira):</strong>
-                    <span>Gourmet food hall with 40+ vendors. Great for trying multiple dishes. €€</span>
-                  </li>
-                  
-                  <li>
-                    <strong>Cervejaria Ramiro:</strong>
-                    <span>Legendary seafood spot. Order the garlic prawns and prego (steak sandwich). Expect queues. €€€</span>
-                  </li>
-                  
-                  <li>
-                    <strong>Taberna da Rua das Flores:</strong>
-                    <span>Small plates with creative twists on Portuguese classics. Book ahead. €€</span>
-                  </li>
-                  
-                  <li>
-                    <strong>A Cevicheria:</strong>
-                    <span>Peruvian-Portuguese fusion. The ceviche is incredible. Tiny—reserve ahead. €€€</span>
-                  </li>
-                  
-                  <li>
-                    <strong>Solar dos Presuntos:</strong>
-                    <span>Traditional Portuguese in generous portions. Family-run since 1974. €€</span>
-                  </li>
-                  
-                  <li>
-                    <strong>Pastéis de Belém:</strong>
-                    <span>The pastel de nata mecca. Using the secret royal recipe since 1837. Go early. €</span>
-                  </li>
-                </ul>
-                
-                <p class="price-key"><small><strong>Price key:</strong> € = under €15 | €€ = €15-30 | €€€ = €30+</small></p>
-              </div>
-              
-              <div class="drinks-section">
-                <h3>What to Drink</h3>
-                <ul>
-                  <li><strong>Vinho Verde:</strong> "Green wine"—young, slightly fizzy white wine. Perfect on hot days.</li>
-                  <li><strong>Ginjinha:</strong> Sour cherry liqueur served in chocolate cups. Tourist trap but fun.</li>
-                  <li><strong>Port Wine:</strong> Sweet fortified wine from Porto. Try a tawny or vintage.</li>
-                  <li><strong>Super Bock / Sagres:</strong> Local beers. Ice-cold imperial (draft) is the way.</li>
-                  <li><strong>Bica:</strong> Portuguese espresso. Order "uma bica" at any café counter.</li>
-                </ul>
-              </div>
-            </section>
-            
-            <section id="where-to-stay" class="guide-section">
-              <h2>Where to Stay in Lisbon</h2>
-              
-              <p>Choose your neighborhood based on your priorities: nightlife (Bairro Alto), history (Alfama), shopping and transit (Baixa), or trendy vibes (Príncipe Real).</p>
-              
-              <div class="accommodation-tiers">
-                <article class="accom-tier">
-                  <h3>Budget (€40-80/night)</h3>
-                  <ul>
-                    <li><strong>The Independente Hostel:</strong> Hip hostel with rooftop bar in São Bento</li>
-                    <li><strong>Home Lisbon Hostel:</strong> Social atmosphere, great for solo travelers</li>
-                    <li><strong>Airbnb:</strong> Apartments in local neighborhoods (Intendente, Graça)</li>
-                  </ul>
-                </article>
-                
-                <article class="accom-tier">
-                  <h3>Mid-Range (€80-180/night)</h3>
-                  <ul>
-                    <li><strong>Memmo Alfama Hotel:</strong> Design hotel with river views in Alfama</li>
-                    <li><strong>The Lumiares Hotel:</strong> Boutique hotel in Bairro Alto</li>
-                    <li><strong>My Story Hotel Rossio:</strong> Central location, rooftop terrace</li>
-                  </ul>
-                </article>
-                
-                <article class="accom-tier">
-                  <h3>Luxury (€180+/night)</h3>
-                  <ul>
-                    <li><strong>Memmo Príncipe Real:</strong> Chic hotel with rooftop pool and city views</li>
-                    <li><strong>Four Seasons Ritz Lisbon:</strong> Classic luxury in Parque Eduardo VII</li>
-                    <li><strong>Palácio Belmonte:</strong> Palace hotel in Alfama (splurge-worthy)</li>
-                  </ul>
-                </article>
-              </div>
-            </section>
-            
-            <section id="getting-around" class="guide-section">
-              <h2>Getting Around Lisbon</h2>
-              
-              <p>Lisbon is hilly—those seven hills are no joke. Combine walking, trams, metro, and the occasional Uber for efficient exploration.</p>
-              
-              <div class="transport-options">
-                <article class="transport-card">
-                  <h3>🚇 Metro</h3>
-                  <p>Fast and efficient. Four lines cover major areas. Buy a rechargeable Viva Viagem card (€0.50) and load with credit.</p>
-                  <p><strong>Cost:</strong> €1.50/ride or €6.80/day pass</p>
-                </article>
-                
-                <article class="transport-card">
-                  <h3>🚋 Trams</h3>
-                  <p>Iconic but slow. Tram 28 is touristy but fun. Use other trams (12, 15, 18, 25) for practical transportation.</p>
-                  <p><strong>Cost:</strong> €3 onboard, €1.50 with Viva Viagem</p>
-                </article>
-                
-                <article class="transport-card">
-                  <h3>🚌 Buses</h3>
-                  <p>Extensive network but confusing routes. Use Google Maps for directions.</p>
-                  <p><strong>Cost:</strong> €2 onboard, €1.50 with Viva Viagem</p>
-                </article>
-                
-                <article class="transport-card">
-                  <h3>🚕 Taxis & Uber</h3>
-                  <p>Taxis are cheap by European standards. Uber is widely available and often cheaper.</p>
-                  <p><strong>Cost:</strong> €5-15 for most rides within city</p>
-                </article>
-                
-                <article class="transport-card">
-                  <h3>🚶 Walking</h3>
-                  <p>The best way to discover hidden corners. Wear comfortable shoes—those cobblestones and hills are real.</p>
-                  <p><strong>Cost:</strong> Free (just blisters)</p>
-                </article>
-              </div>
-              
-              <div class="airport-info">
-                <h3>From the Airport</h3>
-                <ul>
-                  <li><strong>Metro:</strong> Red Line to city center (20 min, €1.50)</li>
-                  <li><strong>Aerobus:</strong> Direct to hotels and main squares (30 min, €4)</li>
-                  <li><strong>Taxi/Uber:</strong> Fixed rate to center (20 min, €15-25)</li>
-                </ul>
-              </div>
-            </section>
-            
-            <section id="itineraries" class="guide-section">
-              <h2>Sample Itineraries</h2>
-              
-              <div class="itinerary-tabs">
-                <article class="itinerary-card">
-                  <h3>3 Days in Lisbon</h3>
-                  
-                  <div class="itinerary-day">
-                    <h4>Day 1: Historic Lisbon</h4>
-                    <ul>
-                      <li>Morning: Explore Alfama, visit São Jorge Castle</li>
-                      <li>Lunch: Time Out Market</li>
-                      <li>Afternoon: Baixa and Chiado shopping</li>
-                      <li>Evening: Fado dinner in Alfama</li>
-                    </ul>
-                  </div>
-                  
-                  <div class="itinerary-day">
-                    <h4>Day 2: Belém & Waterfront</h4>
-                    <ul>
-                      <li>Morning: Jerónimos Monastery, Belém Tower, pastel de nata</li>
-                      <li>Lunch: By the waterfront in Belém</li>
-                      <li>Afternoon: LX Factory, walk along river</li>
-                      <li>Evening: Sunset at Miradouro de Santa Catarina, dinner in Bairro Alto</li>
-                    </ul>
-                  </div>
-                  
-                  <div class="itinerary-day">
-                    <h4>Day 3: Day Trip to Sintra</h4>
-                    <ul>
-                      <li>Full day: Pena Palace, Quinta da Regaleira, Sintra town</li>
-                      <li>Option: Add Cascais beach on return</li>
-                      <li>Evening: Back to Lisbon for final dinner</li>
-                    </ul>
-                  </div>
-                </article>
-              </div>
-            </section>
-            
-            <section id="tips" class="guide-section">
-              <h2>Local Tips & Need-to-Knows</h2>
-              
-              <div class="tips-grid">
-                <article class="tip-card">
-                  <h3>💰 Money Matters</h3>
-                  <ul>
-                    <li>Portugal uses euros (€)</li>
-                    <li>Cards widely accepted, but carry cash for small purchases</li>
-                    <li>Tipping: 5-10% at restaurants (not obligatory)</li>
-                    <li>Many places add "couvert" (bread/olives)—you can decline</li>
-                  </ul>
-                </article>
-                
-                <article class="tip-card">
-                  <h3>🗣️ Language</h3>
-                  <ul>
-                    <li>Portuguese is the official language</li>
-                    <li>English widely spoken in tourist areas</li>
-                    <li>Learn basics: "Olá" (hello), "Obrigado/a" (thank you), "Desculpe" (excuse me)</li>
-                    <li>"Não falo português" = I don't speak Portuguese</li>
-                  </ul>
-                </article>
-                
-                <article class="tip-card">
-                  <h3>⚡ Quick Facts</h3>
-                  <ul>
-                    <li>Outlets: Type C/F plugs (European two-pin)</li>
-                    <li>Water: Tap water is safe to drink</li>
-                    <li>WiFi: Available in most cafés and hotels</li>
-                    <li>Safety: Very safe city, but watch for pickpockets in crowded areas</li>
-                  </ul>
-                </article>
-                
-                <article class="tip-card">
-                  <h3>👟 Comfort Tips</h3>
-                  <ul>
-                    <li>Wear comfortable walking shoes—cobblestones and hills!</li>
-                    <li>Sunscreen essential (even in winter)</li>
-                    <li>Carry water bottle</li>
-                    <li>Download offline Google Maps</li>
-                  </ul>
-                </article>
-              </div>
-              
-              <div class="insider-tips">
-                <h3>Insider Secrets</h3>
-                <ul class="insider-list">
-                  <li>🕐 <strong>Dinner timing:</strong> Portuguese eat late (9-10pm). Restaurants open around 7:30pm.</li>
-                  <li>🚋 <strong>Tram hack:</strong> Take tram 28 from Martim Moniz early morning when it's empty.</li>
-                  <li>📸 <strong>Best viewpoints:</strong> Miradouro da Senhora do Monte (sunset), Portas do Sol (photos), São Pedro de Alcântara (central).</li>
-                  <li>🎵 <strong>Free fado:</strong> Skip tourist traps—hear authentic fado at Tasca do Chico (Bairro Alto) for price of a drink.</li>
-                  <li>🍷 <strong>Wine tip:</strong> Buy wine at supermarkets (€3-8 for excellent bottles). Restaurants mark up 200-300%.</li>
-                  <li>🏖️ <strong>Beach day:</strong> Skip crowded Cascais—take ferry to Costa da Caparica for local vibe.</li>
-                </ul>
-              </div>
-            </section>
-            
-            <section class="guide-footer-cta">
-              <h2>Ready to Explore Lisbon?</h2>
-              <p>This guide just scratches the surface. The best way to experience Lisbon is to wander, get lost, talk to locals, and embrace the unexpected.</p>
-              
-              <div class="cta-buttons">
-                <a href="/book-flight-lisbon" class="btn btn-primary">Find Flights to Lisbon</a>
-                <a href="/lisbon-hotels" class="btn btn-outline">Browse Hotels</a>
-              </div>
-            </section>
-          </div>
-          
-          <aside class="guide-sidebar">
-            <div class="sidebar-sticky">
-              <div class="quick-links-box">
-                <h3>Quick Links</h3>
-                <ul>
-                  <li><a href="#overview">Overview</a></li>
-                  <li><a href="#best-time">Best Time to Visit</a></li>
-                  <li><a href="#attractions">Top Attractions</a></li>
-                  <li><a href="#neighborhoods">Neighborhoods</a></li>
-                  <li><a href="#food">Food & Drink</a></li>
-                  <li><a href="#where-to-stay">Where to Stay</a></li>
-                  <li><a href="#getting-around">Getting Around</a></li>
-                  <li><a href="#itineraries">Itineraries</a></li>
-                  <li><a href="#tips">Local Tips</a></li>
-                </ul>
-              </div>
-              
-              <div class="related-guides-box">
-                <h3>Related Guides</h3>
-                <ul>
-                  <li><a href="/guides/porto">Porto Travel Guide</a></li>
-                  <li><a href="/guides/algarve">Algarve Beaches Guide</a></li>
-                  <li><a href="/guides/sintra">Sintra Day Trip Guide</a></li>
-                  <li><a href="/guides/portugal-itinerary">2-Week Portugal Itinerary</a></li>
-                </ul>
-              </div>
-              
-              <div class="newsletter-box">
-                <h3>Get Travel Tips</h3>
-                <p>Weekly destination guides and travel hacks in your inbox</p>
-                
-                <form class="sidebar-newsletter-form" action="/newsletter" method="POST">
-                  <label for="sidebar-email" class="visually-hidden">Email address</label>
-                  <input type="email" id="sidebar-email" name="email" placeholder="Your email" required autocomplete="email">
-                  <button type="submit" class="btn btn-primary">Subscribe</button>
-                </form>
-              </div>
-            </div>
-          </aside>
-        </div>
-      </div>
-    </article>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Travel Guides</h3>
-          <p>In-depth destination guides written by locals and travel experts</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Popular Guides</h3>
-          <ul>
-            <li><a href="/guides/paris">Paris</a></li>
-            <li><a href="/guides/tokyo">Tokyo</a></li>
-            <li><a href="/guides/barcelona">Barcelona</a></li>
-            <li><a href="/guides/new-york">New York</a></li>
-            <li><a href="/guides">All Destinations</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/blog">Travel Blog</a></li>
-            <li><a href="/packing-lists">Packing Lists</a></li>
-            <li><a href="/travel-tips">Travel Tips</a></li>
-            <li><a href="/about">About Us</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Follow Us</h3>
-          <div class="social-links">
-            <a href="https://instagram.com/travelguides" aria-label="Instagram">Instagram</a>
-            <a href="https://pinterest.com/travelguides" aria-label="Pinterest">Pinterest</a>
-            <a href="https://twitter.com/travelguides" aria-label="Twitter">Twitter</a>
-          </div>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Travel Guides. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-          <a href="/contact">Contact</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="guide.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/travel-hotel.html b/skills/html-coder/assets/travel-hotel.html
deleted file mode 100644
index 86d20d976..000000000
--- a/skills/html-coder/assets/travel-hotel.html
+++ /dev/null
@@ -1,681 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="The Grand Marina Hotel - Luxury beachfront hotel in Miami Beach. Experience world-class service, stunning ocean views, and exclusive amenities.">
-  <meta property="og:title" content="The Grand Marina Hotel - Luxury Beachfront Resort">
-  <meta property="og:description" content="Five-star luxury on Miami's most beautiful beach">
-  <meta property="og:image" content="og-hotel.jpg">
-  <meta property="og:type" content="website">
-  <title>The Grand Marina Hotel - Luxury Beachfront Resort | Miami Beach</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header-hotel">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">The Grand Marina</a>
-        
-        <ul class="nav-menu">
-          <li><a href="#rooms">Rooms & Suites</a></li>
-          <li><a href="#amenities">Amenities</a></li>
-          <li><a href="#dining">Dining</a></li>
-          <li><a href="#spa">Spa</a></li>
-          <li><a href="#events">Events</a></li>
-          <li><a href="#location">Location</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="tel:+13055551234" class="btn-link">📞 (305) 555-1234</a>
-          <a href="#book" class="btn btn-primary">Book Now</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-hotel">
-      <div class="hero-hotel-background">
-        <img src="hero-ocean-view.jpg" alt="Luxury hotel overlooking pristine Miami Beach with turquoise water" width="1920" height="900" loading="eager">
-      </div>
-      
-      <div class="hero-hotel-content">
-        <h1>Escape to Paradise</h1>
-        <p class="hero-subtitle">Where luxury meets the sea</p>
-        <a href="#book" class="btn btn-primary btn-large">Reserve Your Stay</a>
-      </div>
-    </section>
-    
-    <section class="quick-booking-bar" id="book">
-      <div class="container">
-        <form class="booking-form" action="/book" method="POST">
-          <div class="form-group">
-            <label for="check-in">Check In</label>
-            <input type="date" id="check-in" name="check_in" required>
-          </div>
-          
-          <div class="form-group">
-            <label for="check-out">Check Out</label>
-            <input type="date" id="check-out" name="check_out" required>
-          </div>
-          
-          <div class="form-group">
-            <label for="guests">Guests</label>
-            <select id="guests" name="guests" required>
-              <option value="1">1 Guest</option>
-              <option value="2" selected>2 Guests</option>
-              <option value="3">3 Guests</option>
-              <option value="4">4 Guests</option>
-              <option value="5">5+ Guests</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="rooms">Rooms</label>
-            <select id="rooms" name="rooms" required>
-              <option value="1" selected>1 Room</option>
-              <option value="2">2 Rooms</option>
-              <option value="3">3 Rooms</option>
-              <option value="4">4+ Rooms</option>
-            </select>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large">Check Availability</button>
-        </form>
-      </div>
-    </section>
-    
-    <section class="hotel-intro-section">
-      <div class="container">
-        <div class="intro-content-center">
-          <h2>Welcome to The Grand Marina</h2>
-          <p class="intro-lead">Experience the pinnacle of luxury hospitality on Miami's most coveted stretch of beach. Our five-star resort offers 350 elegantly appointed rooms and suites, world-class dining, a rejuvenating spa, and unparalleled service.</p>
-          
-          <div class="hotel-highlights">
-            <div class="highlight">
-              <span class="highlight-icon">🏖️</span>
-              <strong>Private Beach</strong>
-              <span>Direct beachfront access</span>
-            </div>
-            
-            <div class="highlight">
-              <span class="highlight-icon">🍽️</span>
-              <strong>5 Restaurants</strong>
-              <span>Award-winning cuisine</span>
-            </div>
-            
-            <div class="highlight">
-              <span class="highlight-icon">💆</span>
-              <strong>Luxury Spa</strong>
-              <span>20,000 sq ft wellness</span>
-            </div>
-            
-            <div class="highlight">
-              <span class="highlight-icon">⭐</span>
-              <strong>5-Star Service</strong>
-              <span>Forbes Travel Guide rated</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="rooms" class="rooms-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Rooms & Suites</h2>
-          <p>Choose from our selection of luxury accommodations</p>
-        </div>
-        
-        <div class="rooms-grid">
-          <article class="room-card">
-            <img src="room-deluxe.jpg" alt="Deluxe Ocean View Room with king bed and balcony" width="600" height="400" loading="lazy">
-            
-            <div class="room-content">
-              <h3>Deluxe Ocean View</h3>
-              <p class="room-size">450 sq ft • King or 2 Queens</p>
-              
-              <p class="room-description">Spacious rooms with floor-to-ceiling windows overlooking the Atlantic Ocean. Private balcony, marble bathroom, and modern amenities.</p>
-              
-              <ul class="room-amenities">
-                <li>Ocean view balcony</li>
-                <li>55" Smart TV</li>
-                <li>Marble bathroom with rainfall shower</li>
-                <li>Premium bedding</li>
-                <li>Mini bar & Nespresso machine</li>
-                <li>Fast WiFi included</li>
-              </ul>
-              
-              <div class="room-footer">
-                <p class="room-price">From <strong>$425</strong>/night</p>
-                <a href="/book?room=deluxe-ocean" class="btn btn-outline">Reserve Room</a>
-              </div>
-            </div>
-          </article>
-          
-          <article class="room-card">
-            <img src="room-suite.jpg" alt="Executive Suite with separate living area and ocean view" width="600" height="400" loading="lazy">
-            
-            <div class="room-content">
-              <h3>Executive Suite</h3>
-              <p class="room-size">750 sq ft • King Bed + Sofa Bed</p>
-              
-              <p class="room-description">Sophisticated suite with separate living area, perfect for extended stays or families. Panoramic ocean views from multiple balconies.</p>
-              
-              <ul class="room-amenities">
-                <li>Separate living & bedroom areas</li>
-                <li>Two balconies with ocean views</li>
-                <li>Dining table for 4</li>
-                <li>Two 55" Smart TVs</li>
-                <li>Luxury bathroom with soaking tub</li>
-                <li>Kitchenette with mini-fridge</li>
-              </ul>
-              
-              <div class="room-footer">
-                <p class="room-price">From <strong>$725</strong>/night</p>
-                <a href="/book?room=executive-suite" class="btn btn-outline">Reserve Suite</a>
-              </div>
-            </div>
-          </article>
-          
-          <article class="room-card featured-room">
-            <div class="featured-badge">Most Popular</div>
-            <img src="room-penthouse.jpg" alt="Oceanfront Penthouse with wraparound terrace" width="600" height="400" loading="lazy">
-            
-            <div class="room-content">
-              <h3>Oceanfront Penthouse</h3>
-              <p class="room-size">1,500 sq ft • 2 Bedrooms</p>
-              
-              <p class="room-description">The ultimate in luxury living. Two-bedroom penthouse with wraparound terrace, private plunge pool, and breathtaking 180-degree ocean views.</p>
-              
-              <ul class="room-amenities">
-                <li>Private plunge pool on terrace</li>
-                <li>2 bedrooms with king beds</li>
-                <li>2.5 luxury bathrooms</li>
-                <li>Full kitchen with chef's appliances</li>
-                <li>Living & dining for 8</li>
-                <li>Dedicated concierge service</li>
-<!--                <li>In-room spa services</li>
-              </ul>
-              
-              <div class="room-footer">
-                <p class="room-price">From <strong>$1,850</strong>/night</p>
-                <a href="/book?room=penthouse" class="btn btn-primary">Reserve Penthouse</a>
-              </div>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="amenities" class="amenities-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>World-Class Amenities</h2>
-          <p>Everything you need for an unforgettable stay</p>
-        </div>
-        
-        <div class="amenities-showcase">
-          <article class="amenity-feature">
-            <div class="amenity-image">
-              <img src="amenity-pool.jpg" alt="Infinity pool overlooking the ocean at sunset" width="700" height="500" loading="lazy">
-            </div>
-            
-            <div class="amenity-content">
-              <h3>Infinity Pool & Beach Club</h3>
-              <p>Three temperature-controlled pools including a stunning infinity pool that appears to merge with the ocean. Private cabanas, poolside bar service, and direct beach access.</p>
-              
-              <ul class="amenity-details">
-                <li>3 heated pools (lap, family, infinity)</li>
-                <li>Private beach cabanas (reservable)</li>
-                <li>Beach butler service</li>
-                <li>Watersports equipment rentals</li>
-                <li>Poolside dining all day</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="amenity-feature reverse">
-            <div class="amenity-image">
-              <img src="amenity-fitness.jpg" alt="State-of-the-art fitness center with ocean views" width="700" height="500" loading="lazy">
-            </div>
-            
-            <div class="amenity-content">
-              <h3>Fitness & Wellness Center</h3>
-              <p>State-of-the-art fitness facility with the latest equipment, personal trainers, and daily classes. Open 24/7 with stunning ocean views.</p>
-              
-              <ul class="amenity-details">
-                <li>Cutting-edge cardio & strength equipment</li>
-                <li>Daily yoga & pilates classes</li>
-                <li>Personal training sessions</li>
-                <li>Outdoor training area</li>
-                <li>Meditation garden</li>
-              </ul>
-            </div>
-          </article>
-        </div>
-        
-        <div class="amenities-grid-compact">
-          <div class="amenity-item">
-            <h4>🎾 Tennis Courts</h4>
-            <p>Two championship courts with pro shop</p>
-          </div>
-          
-          <div class="amenity-item">
-            <h4>🧒 Kids Club</h4>
-            <p>Supervised activities for ages 4-12</p>
-          </div>
-          
-          <div class="amenity-item">
-            <h4>💼 Business Center</h4>
-            <p>Meeting rooms and high-speed internet</p>
-          </div>
-          
-          <div class="amenity-item">
-            <h4>🚗 Valet Parking</h4>
-            <p>Complimentary for hotel guests</p>
-          </div>
-          
-          <div class="amenity-item">
-            <h4>🛎️ Concierge</h4>
-            <p>24/7 assistance and recommendations</p>
-          </div>
-          
-          <div class="amenity-item">
-            <h4>🚖 Airport Shuttle</h4>
-            <p>Luxury transport to MIA (fee applies)</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="dining" class="dining-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Exceptional Dining Experiences</h2>
-          <p>Five distinctive restaurants and bars</p>
-        </div>
-        
-        <div class="restaurants-grid">
-          <article class="restaurant-card">
-            <img src="restaurant-azure.jpg" alt="Elegant fine dining restaurant with ocean views" width="600" height="400" loading="lazy">
-            
-            <div class="restaurant-content">
-              <h3>Azure</h3>
-              <p class="restaurant-type">Fine Dining • Seafood</p>
-              
-              <p>Our signature restaurant featuring contemporary coastal cuisine and an award-winning wine collection. Michelin-recommended.</p>
-              
-              <div class="restaurant-details">
-                <p><strong>Hours:</strong> Dinner 6:00 PM - 11:00 PM</p>
-                <p><strong>Dress Code:</strong> Resort Elegant</p>
-                <p><strong>Reservations:</strong> Required</p>
-              </div>
-              
-              <a href="/dining/azure" class="btn btn-outline">View Menu</a>
-            </div>
-          </article>
-          
-          <article class="restaurant-card">
-            <img src="restaurant-terrace.jpg" alt="Outdoor breakfast buffet on oceanfront terrace" width="600" height="400" loading="lazy">
-            
-            <div class="restaurant-content">
-              <h3>The Oceanfront Terrace</h3>
-              <p class="restaurant-type">All-Day Dining • International</p>
-              
-              <p>Casual indoor-outdoor dining with stunning ocean views. Breakfast buffet, lunch, and dinner featuring international favorites.</p>
-              
-              <div class="restaurant-details">
-                <p><strong>Hours:</strong> 7:00 AM - 11:00 PM daily</p>
-                <p><strong>Dress Code:</strong> Resort Casual</p>
-                <p><strong>Reservations:</strong> Walk-ins welcome</p>
-              </div>
-              
-              <a href="/dining/terrace" class="btn btn-outline">View Menu</a>
-            </div>
-          </article>
-          
-          <article class="restaurant-card">
-            <img src="restaurant-sushi.jpg" alt="Modern sushi bar with chef preparing fresh sashimi" width="600" height="400" loading="lazy">
-            
-            <div class="restaurant-content">
-              <h3>Kai Sushi & Sake Bar</h3>
-              <p class="restaurant-type">Japanese • Sushi Bar</p>
-              
-              <p>Authentic Japanese cuisine with premium sushi, sashimi, and an extensive sake selection. Watch our master chefs at work.</p>
-              
-              <div class="restaurant-details">
-                <p><strong>Hours:</strong> 5:30 PM - 10:30 PM</p>
-                <p><strong>Dress Code:</strong> Smart Casual</p>
-                <p><strong>Reservations:</strong> Recommended</p>
-              </div>
-              
-              <a href="/dining/kai" class="btn btn-outline">View Menu</a>
-            </div>
-          </article>
-          
-          <article class="restaurant-card">
-            <img src="bar-sunset.jpg" alt="Rooftop bar at sunset with cocktails" width="600" height="400" loading="lazy">
-            
-            <div class="restaurant-content">
-              <h3>Sunset Bar & Lounge</h3>
-              <p class="restaurant-type">Rooftop Bar • Cocktails</p>
-              
-              <p>Spectacular 18th-floor rooftop bar with panoramic views, craft cocktails, and live DJ on weekends.</p>
-              
-              <div class="restaurant-details">
-                <p><strong>Hours:</strong> 4:00 PM - 1:00 AM</p>
-                <p><strong>Happy Hour:</strong> 5:00-7:00 PM daily</p>
-                <p><strong>Live Music:</strong> Thursday-Saturday</p>
-              </div>
-              
-              <a href="/dining/sunset-bar" class="btn btn-outline">View Menu</a>
-            </div>
-          </article>
-          
-          <article class="restaurant-card">
-            <img src="restaurant-poolside.jpg" alt="Poolside grill with tropical drinks and burgers" width="600" height="400" loading="lazy">
-            
-            <div class="restaurant-content">
-              <h3>Poolside Grill</h3>
-              <p class="restaurant-type">Casual • American Grill</p>
-              
-              <p>Laid-back poolside dining featuring burgers, salads, tropical cocktails, and frozen drinks. Perfect for lunch in the sun.</p>
-              
-              <div class="restaurant-details">
-                <p><strong>Hours:</strong> 11:00 AM - 6:00 PM</p>
-                <p><strong>Dress Code:</strong> Pool Attire Welcome</p>
-                <p><strong>Service:</strong> Order at pool or cabana</p>
-              </div>
-              
-              <a href="/dining/poolside" class="btn btn-outline">View Menu</a>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="spa" class="spa-section">
-      <div class="container">
-        <div class="spa-showcase">
-          <div class="spa-images">
-            <img src="spa-treatment.jpg" alt="Luxury spa treatment room with massage table and ocean view" width="700" height="500" loading="lazy">
-          </div>
-          
-          <div class="spa-content">
-            <h2>The Marina Spa</h2>
-            <p class="spa-tagline">A sanctuary of wellness and rejuvenation</p>
-            
-            <p>Escape to our 20,000 square foot luxury spa featuring 16 treatment rooms, hydrotherapy circuits, relaxation lounges, and a full-service salon. Our expert therapists offer innovative treatments using organic products.</p>
-            
-            <h3>Signature Treatments</h3>
-            <ul class="spa-treatments">
-              <li>
-                <strong>Ocean Ritual Massage</strong> (90 min) - $295
-                <p>Full-body massage with warm seashells and aquatic-inspired aromatherapy</p>
-              </li>
-              
-              <li>
-                <strong>Tropical Radiance Facial</strong> (75 min) - $235
-                <p>Rejuvenating facial with marine collagen and vitamin C</p>
-              </li>
-              
-              <li>
-                <strong>Couples Retreat</strong> (120 min) - $695
-                <p>Private suite with synchronized massage, champagne, and chocolate</p>
-              </li>
-              
-              <li>
-                <strong>Deep Tissue Sports Massage</strong> (60 min) - $195
-                <p>Targeted relief for muscle tension and recovery</p>
-              </li>
-            </ul>
-            
-            <h3>Spa Facilities</h3>
-            <p>Complimentary access with any 60+ minute treatment:</p>
-            <ul class="spa-facilities">
-              <li>Hydrotherapy circuit (hot & cold plunge pools)</li>
-              <li>Steam room & sauna</li>
-              <li>Relaxation lounge with ocean views</li>
-              <li>Tea & healthy snacks</li>
-            </ul>
-            
-            <div class="spa-cta">
-              <a href="/spa/book" class="btn btn-primary">Book Spa Treatment</a>
-              <a href="/spa/menu" class="btn btn-outline">Full Spa Menu</a>
-            </div>
-            
-            <p class="spa-note"><small>Hours: 9:00 AM - 8:00 PM daily • Advance reservations recommended</small></p>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="events" class="events-section">
-      <div class="container">
-        <div class="section-header-center">
-          <h2>Weddings & Special Events</h2>
-          <p>Create unforgettable memories in paradise</p>
-        </div>
-        
-        <div class="events-content">
-          <div class="event-type">
-            <img src="event-wedding.jpg" alt="Beach wedding ceremony at sunset" width="600" height="400" loading="lazy">
-            
-            <h3>Dream Weddings</h3>
-            <p>Say "I do" with your toes in the sand or in our elegant ballroom. Our expert wedding team handles every detail to make your day perfect.</p>
-            
-            <ul>
-              <li>Beachfront & indoor ceremony locations</li>
-              <li>Capacity: 20-300 guests</li>
-              <li>Dedicated wedding coordinator</li>
-              <li>Custom menus & bar packages</li>
-              <li>Bridal suite & room blocks</li>
-              <li>Wedding night suite upgrade included</li>
-            </ul>
-            
-            <a href="/weddings" class="btn btn-outline">Wedding Packages</a>
-          </div>
-          
-          <div class="event-type">
-            <img src="event-meetings.jpg" alt="Modern meeting space with AV equipment" width="600" height="400" loading="lazy">
-            
-            <h3>Meetings & Corporate Events</h3>
-            <p>Inspire your team with a productive meeting in an inspiring setting. 25,000 sq ft of flexible meeting space with state-of-the-art technology.</p>
-            
-            <ul>
-              <li>12 meeting rooms + grand ballroom</li>
-              <li>Capacity: 10-500 attendees</li>
-              <li>High-speed WiFi & AV equipment</li>
-              <li>Dedicated event planner</li>
-              <li>Catering & break services</li>
-              <li>Team building activities available</li>
-            </ul>
-            
-            <a href="/meetings" class="btn btn-outline">Event Spaces</a>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="reviews-section">
-      <div class="container">
-        <h2>What Our Guests Say</h2>
-        
-        <div class="reviews-grid">
-          <article class="review-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Absolutely perfect in every way. The room was stunning, the staff went above and beyond, and the location is unbeatable. We've stayed at five-star hotels around the world, and The Grand Marina is among the very best."</p>
-            </blockquote>
-            <footer class="review-author">
-              <cite>Jennifer M.</cite>
-              <p>TripAdvisor • <time datetime="2026-02-15">February 2026</time></p>
-            </footer>
-          </article>
-          
-          <article class="review-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Our anniversary trip was magical. The oceanfront penthouse exceeded expectations, and the spa treatments were divine. Already planning our return visit!"</p>
-            </blockquote>
-            <footer class="review-author">
-              <cite>Michael & Sarah T.</cite>
-              <p>Google Reviews • <time datetime="2026-01-28">January 2026</time></p>
-            </footer>
-          </article>
-          
-          <article class="review-card">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"The kids loved the kids club, and we loved the adults-only pool. Azure restaurant was phenomenal—best seafood we've had. True luxury without stuffiness."</p>
-            </blockquote>
-            <footer class="review-author">
-              <cite>Rodriguez Family</cite>
-              <p>Expedia • <time datetime="2026-02-05">February 2026</time></p>
-            </footer>
-          </article>
-        </div>
-        
-        <div class="review-summary">
-          <p><strong>4.9/5.0</strong> based on 3,247 reviews across TripAdvisor, Google, and Expedia</p>
-          <p>🏆 TripAdvisor Travelers' Choice Award 2025 • Forbes Five-Star Rating</p>
-        </div>
-      </div>
-    </section>
-    
-    <section id="location" class="location-section">
-      <div class="container">
-        <div class="location-grid">
-          <div class="location-content">
-            <h2>Prime Miami Beach Location</h2>
-            <p>Nestled on the most beautiful stretch of Miami Beach, The Grand Marina offers the perfect blend of beachfront serenity and urban excitement.</p>
-            
-            <h3>Address</h3>
-            <address>
-              The Grand Marina Hotel<br>
-              1500 Ocean Drive<br>
-              Miami Beach, FL 33139<br>
-              <a href="tel:+13055551234">(305) 555-1234</a><br>
-              <a href="mailto:reservations@grandmarina.com">reservations@grandmarina.com</a>
-            </address>
-            
-            <h3>Nearby Attractions</h3>
-            <ul class="attractions-list">
-              <li>Art Deco Historic District - 0.3 miles</li>
-              <li>Lincoln Road Shopping - 1.2 miles</li>
-              <li>South Beach - 0.8 miles</li>
-              <li>Wynwood Arts District - 4 miles</li>
-              <li>Miami International Airport - 9 miles (20 min)</li>
-              <li>Port of Miami - 5 miles (cruise terminal)</li>
-            </ul>
-            
-            <a href="https://maps.google.com/?q=Grand+Marina+Hotel" class="btn btn-outline" target="_blank" rel="noopener">Get Directions</a>
-          </div>
-          
-          <div class="location-map">
-            <img src="location-map.png" alt="Map showing The Grand Marina Hotel location in Miami Beach" width="600" height="500" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="booking-cta-section">
-      <div class="container">
-        <div class="booking-cta-content">
-          <h2>Your Paradise Awaits</h2>
-          <p>Book direct for the best rates and exclusive benefits</p>
-          
-          <div class="booking-benefits">
-            <div class="benefit">✓ Best Rate Guarantee</div>
-            <div class="benefit">✓ Free WiFi</div>
-            <div class="benefit">✓ Complimentary Valet</div>
-            <div class="benefit">✓ Room Upgrade (subject to availability)</div>
-          </div>
-          
-          <a href="#book" class="btn btn-primary btn-large">Reserve Now</a>
-          
-          <p class="booking-contact">Or call our reservations team: <a href="tel:+13055551234"><strong>(305) 555-1234</strong></a></p>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>The Grand Marina</h3>
-          <p>Luxury beachfront resort</p>
-          <p>1500 Ocean Drive<br>
-          Miami Beach, FL 33139</p>
-          <p><a href="tel:+13055551234">(305) 555-1234</a></p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Hotel</h3>
-          <ul>
-            <li><a href="/rooms">Rooms & Suites</a></li>
-            <li><a href="/amenities">Amenities</a></li>
-            <li><a href="/dining">Dining</a></li>
-            <li><a href="/spa">Spa</a></li>
-            <li><a href="/offers">Special Offers</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Services</h3>
-          <ul>
-            <li><a href="/weddings">Weddings</a></li>
-            <li><a href="/meetings">Meetings & Events</a></li>
-            <li><a href="/concierge">Concierge</a></li>
-            <li><a href="/gallery">Photo Gallery</a></li>
-            <li><a href="/careers">Careers</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Guest Services</h3>
-          <ul>
-            <li><a href="/manage-reservation">Manage Reservation</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/accessibility">Accessibility</a></li>
-            <li><a href="/contact">Contact Us</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Connect</h3>
-          <div class="social-links">
-            <a href="https://instagram.com/grandmarina" aria-label="Instagram">Instagram</a>
-            <a href="https://facebook.com/grandmarina" aria-label="Facebook">Facebook</a>
-            <a href="https://twitter.com/grandmarina" aria-label="Twitter">Twitter</a>
-          </div>
-          
-          <h4>Newsletter</h4>
-          <form class="newsletter-form" action="/newsletter" method="POST">
-            <label for="newsletter-email" class="visually-hidden">Email address</label>
-            <input type="email" id="newsletter-email" name="email" placeholder="Your email" required autocomplete="email">
-            <button type="submit" class="btn btn-outline">Subscribe</button>
-          </form>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 The Grand Marina Hotel. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms & Conditions</a>
-          <a href="/sitemap">Sitemap</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="hotel.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/travel-tour-agency.html b/skills/html-coder/assets/travel-tour-agency.html
deleted file mode 100644
index d8eb2c5d5..000000000
--- a/skills/html-coder/assets/travel-tour-agency.html
+++ /dev/null
@@ -1,781 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Wanderlust Adventures - Curated small-group tours to the world's most incredible destinations. Expert guides, authentic experiences, lifelong memories.">
-  <meta property="og:title" content="Wanderlust Adventures - Small Group Tours Worldwide">
-  <meta property="og:description" content="Explore the world with expert-led small group adventures">
-  <meta property="og:image" content="og-tours.jpg">
-  <meta property="og:type" content="website">
-  <title>Wanderlust Adventures - Small Group Tours & Adventure Travel</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header-tours">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">
-          <img src="wanderlust-logo.svg" alt="Wanderlust Adventures" width="180" height="45">
-        </a>
-        
-        <ul class="nav-menu">
-          <li><a href="#destinations">Destinations</a></li>
-          <li><a href="#tours">Tours</a></li>
-          <li><a href="#travel-styles">Travel Styles</a></li>
-          <li><a href="#why-us">Why Us</a></li>
-          <li><a href="/blog">Travel Blog</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="tel:+18885551234" class="btn-link">📞 (888) 555-1234</a>
-          <a href="#contact" class="btn btn-primary">Plan Your Trip</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="hero-tours">
-      <div class="hero-tours-background">
-        <img src="hero-adventure.jpg" alt="Group of travelers hiking mountain trail with stunning vista" width="1920" height="900" loading="eager">
-      </div>
-      
-      <div class="hero-tours-content">
-        <h1>Adventure Awaits</h1>
-        <p class="hero-subtitle">Small groups. Big experiences. Unforgettable journeys.</p>
-        <a href="#tours" class="btn btn-primary btn-large">Explore Our Tours</a>
-      </div>
-    </section>
-    
-    <section class="tour-search-section">
-      <div class="container">
-        <form class="tour-search-form" action="/search-tours" method="GET">
-          <div class="form-group">
-            <label for="destination">Where do you want to go?</label>
-            <select id="destination" name="destination">
-              <option value="">All Destinations</option>
-              <option value="europe">Europe</option>
-              <option value="asia">Asia</option>
-              <option value="africa">Africa</option>
-              <option value="south-america">South America</option>
-              <option value="north-america">North America</option>
-              <option value="oceania">Oceania</option>
-              <option value="antarctica">Antarctica</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="travel-style">Travel Style</label>
-            <select id="travel-style" name="travel_style">
-              <option value="">All Styles</option>
-              <option value="adventure">Adventure</option>
-              <option value="cultural">Cultural</option>
-              <option value="wildlife">Wildlife & Nature</option>
-              <option value="luxury">Luxury</option>
-              <option value="family">Family</option>
-              <option value="solo">Solo Traveler</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="duration">Duration</label>
-            <select id="duration" name="duration">
-              <option value="">Any Duration</option>
-              <option value="1-7">1-7 days</option>
-              <option value="8-14">8-14 days</option>
-              <option value="15-21">15-21 days</option>
-              <option value="22+">22+ days</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="month">Travel Month</label>
-            <select id="month" name="month">
-              <option value="">Any Month</option>
-              <option value="jan">January</option>
-              <option value="feb">February</option>
-              <option value="mar">March</option>
-              <option value="apr">April</option>
-              <option value="may">May</option>
-              <option value="jun">June</option>
-              <option value="jul">July</option>
-              <option value="aug">August</option>
-              <option value="sep">September</option>
-              <option value="oct">October</option>
-              <option value="nov">November</option>
-              <option value="dec">December</option>
-            </select>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large">Find Tours</button>
-        </form>
-      </div>
-    </section>
-    
-    <section class="intro-section">
-      <div class="container">
-        <div class="intro-content-center">
-          <h2>Explore the World with Wanderlust</h2>
-          <p class="intro-lead">For over 15 years, we've been crafting authentic travel experiences that go beyond typical tourism. Our small group tours (max 12 travelers) connect you with local cultures, hidden gems, and fellow adventurers.</p>
-          
-          <div class="stats-row">
-            <div class="stat-box">
-              <strong>15+</strong>
-              <span>Years of Experience</span>
-            </div>
-            
-            <div class="stat-box">
-              <strong>85</strong>
-              <span>Countries Explored</span>
-            </div>
-            
-            <div class="stat-box">
-              <strong>25,000+</strong>
-              <span>Happy Travelers</span>
-            </div>
-            
-            <div class="stat-box">
-              <strong>4.9/5</strong>
-              <span>Average Rating</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="tours" class="featured-tours-section">
-      <div class="container">
-        <div class="section-header-with-filter">
-          <h2>Featured Tours</h2>
-          
-          <div class="filter-buttons">
-            <button class="filter-btn active" data-category="all">All Tours</button>
-            <button class="filter-btn" data-category="adventure">Adventure</button>
-            <button class="filter-btn" data-category="cultural">Cultural</button>
-            <button class="filter-btn" data-category="wildlife">Wildlife</button>
-          </div>
-        </div>
-        
-        <div class="tours-grid">
-          <article class="tour-card" data-category="adventure">
-            <div class="tour-image-wrapper">
-              <img src="tour-patagonia.jpg" alt="Hikers on trail in Patagonia mountains" width="400" height="300" loading="lazy">
-              <div class="tour-badge">Adventure</div>
-              <div class="tour-price-badge">From $3,895</div>
-            </div>
-            
-            <div class="tour-content">
-              <div class="tour-meta">
-                <span class="tour-location">🇦🇷 🇨🇱 Argentina & Chile</span>
-                <span class="tour-duration">14 Days</span>
-              </div>
-              
-              <h3><a href="/tours/patagonia-explorer">Patagonia Explorer</a></h3>
-              <p>Trek through Torres del Paine, witness Perito Moreno Glacier, and explore the stunning landscapes of South America's wild frontier.</p>
-              
-              <ul class="tour-highlights">
-                <li>✓ Torres del Paine W Trek</li>
-                <li>✓ Perito Moreno Glacier</li>
-                <li>✓ El Chaltén hiking paradise</li>
-                <li>✓ Small group (max 12)</li>
-              </ul>
-              
-              <div class="tour-footer">
-                <div class="tour-dates">
-                  <strong>Next Departures:</strong>
-                  <p>Oct 15, Nov 5, Dec 1, 2026</p>
-                </div>
-                
-                <a href="/tours/patagonia-explorer" class="btn btn-outline">View Tour Details</a>
-              </div>
-            </div>
-          </article>
-          
-          <article class="tour-card featured-tour" data-category="cultural">
-            <div class="most-popular-badge">Most Popular</div>
-            <div class="tour-image-wrapper">
-              <img src="tour-japan.jpg" alt="Traditional Japanese temple in Kyoto" width="400" height="300" loading="lazy">
-              <div class="tour-badge">Cultural</div>
-              <div class="tour-price-badge">From $4,295</div>
-            </div>
-            
-            <div class="tour-content">
-              <div class="tour-meta">
-                <span class="tour-location">🇯🇵 Japan</span>
-                <span class="tour-duration">12 Days</span>
-              </div>
-              
-              <h3><a href="/tours/japan-discovery">Japan Discovery: Tokyo to Kyoto</a></h3>
-              <p>Experience the perfect blend of ancient tradition and modern innovation. From Tokyo's neon streets to Kyoto's serene temples.</p>
-              
-              <ul class="tour-highlights">
-                <li>✓ Bullet train experiences</li>
-                <li>✓ Traditional tea ceremony</li>
-                <li>✓ Mt. Fuji day trip</li>
-                <li>✓ Geisha district tour</li>
-              </ul>
-              
-              <div class="tour-footer">
-                <div class="tour-dates">
-                  <strong>Next Departures:</strong>
-                  <p>Apr 5, May 10, Sep 15, Oct 20</p>
-                </div>
-                
-                <a href="/tours/japan-discovery" class="btn btn-primary">View Tour Details</a>
-              </div>
-            </div>
-          </article>
-          
-          <article class="tour-card" data-category="wildlife">
-            <div class="tour-image-wrapper">
-              <img src="tour-safari.jpg" alt="Elephants walking at sunset in Tanzania" width="400" height="300" loading="lazy">
-              <div class="tour-badge">Wildlife</div>
-              <div class="tour-price-badge">From $5,495</div>
-            </div>
-            
-            <div class="tour-content">
-              <div class="tour-meta">
-                <span class="tour-location">🇹🇿 Tanzania</span>
-                <span class="tour-duration">10 Days</span>
-              </div>
-              
-              <h3><a href="/tours/tanzania-safari">Ultimate Tanzania Safari</a></h3>
-              <p>Witness the Great Migration, track the Big Five, and experience the magic of the Serengeti and Ngorongoro Crater.</p>
-              
-              <ul class="tour-highlights">
-                <li>✓ Serengeti game drives</li>
-                <li>✓ Ngorongoro Crater descent</li>
-                <li>✓ Luxury tented camps</li>
-                <li>✓ Expert wildlife guides</li>
-              </ul>
-              
-              <div class="tour-footer">
-                <div class="tour-dates">
-                  <strong>Next Departures:</strong>
-                  <p>Jul 10, Aug 5, Sep 20, 2026</p>
-                </div>
-                
-                <a href="/tours/tanzania-safari" class="btn btn-outline">View Tour Details</a>
-              </div>
-            </div>
-          </article>
-          
-          <article class="tour-card" data-category="adventure">
-            <div class="tour-image-wrapper">
-              <img src="tour-iceland.jpg" alt="Northern lights over Iceland landscape" width="400" height="300" loading="lazy">
-              <div class="tour-badge">Adventure</div>
-              <div class="tour-price-badge">From $3,295</div>
-            </div>
-            
-            <div class="tour-content">
-              <div class="tour-meta">
-                <span class="tour-location">🇮🇸 Iceland</span>
-                <span class="tour-duration">8 Days</span>
-              </div>
-              
-              <h3><a href="/tours/iceland-adventure">Iceland Winter Adventure</a></h3>
-              <p>Chase the Northern Lights, explore ice caves, soak in hot springs, and witness the raw power of Iceland's volcanic landscapes.</p>
-              
-              <ul class="tour-highlights">
-                <li>✓ Northern Lights hunting</li>
-                <li>✓ Ice cave exploration</li>
-                <li>✓ Golden Circle tour</li>
-                <li>✓ Blue Lagoon experience</li>
-              </ul>
-              
-              <div class="tour-footer">
-                <div class="tour-dates">
-                  <strong>Next Departures:</strong>
-                  <p>Nov 15, Dec 5, Jan 10, Feb 5</p>
-                </div>
-                
-                <a href="/tours/iceland-adventure" class="btn btn-outline">View Tour Details</a>
-              </div>
-            </div>
-          </article>
-          
-          <article class="tour-card" data-category="cultural">
-            <div class="tour-image-wrapper">
-              <img src="tour-morocco.jpg" alt="Colorful spices in Marrakech market" width="400" height="300" loading="lazy">
-              <div class="tour-badge">Cultural</div>
-              <div class="tour-price-badge">From $2,795</div>
-            </div>
-            
-            <div class="tour-content">
-              <div class="tour-meta">
-                <span class="tour-location">🇲🇦 Morocco</span>
-                <span class="tour-duration">10 Days</span>
-              </div>
-              
-              <h3><a href="/tours/morocco-magic">Morocco: From Souks to Sahara</a></h3>
-              <p>Immerse yourself in Morocco's vibrant culture, from bustling medinas to desert camps under starry skies.</p>
-              
-              <ul class="tour-highlights">
-                <li>✓ Marrakech & Fez exploration</li>
-                <li>✓ Sahara Desert camp</li>
-                <li>✓ Cooking class experience</li>
-                <li>✓ Atlas Mountains trek</li>
-              </ul>
-              
-              <div class="tour-footer">
-                <div class="tour-dates">
-                  <strong>Next Departures:</strong>
-                  <p>Mar 20, Apr 15, Oct 5, Nov 10</p>
-                </div>
-                
-                <a href="/tours/morocco-magic" class="btn btn-outline">View Tour Details</a>
-              </div>
-            </div>
-          </article>
-          
-          <article class="tour-card" data-category="adventure">
-            <div class="tour-image-wrapper">
-              <img src="tour-nepal.jpg" alt="Trekkers with view of Mount Everest" width="400" height="300" loading="lazy">
-              <div class="tour-badge">Adventure</div>
-              <div class="tour-price-badge">From $2,495</div>
-            </div>
-            
-            <div class="tour-content">
-              <div class="tour-meta">
-                <span class="tour-location">🇳🇵 Nepal</span>
-                <span class="tour-duration">15 Days</span>
-              </div>
-              
-              <h3><a href="/tours/everest-base-camp">Everest Base Camp Trek</a></h3>
-              <p>Stand in the shadow of the world's highest peak. This bucket-list trek takes you through Sherpa villages to Everest Base Camp.</p>
-              
-              <ul class="tour-highlights">
-                <li>✓ Trek to Everest Base Camp</li>
-                <li>✓ Kala Patthar sunrise (18,500 ft)</li>
-                <li>✓ Namche Bazaar & monasteries</li>
-                <li>✓ Experienced Sherpa guides</li>
-              </ul>
-              
-              <div class="tour-footer">
-                <div class="tour-dates">
-                  <strong>Next Departures:</strong>
-                  <p>Apr 1, May 1, Oct 1, Nov 1</p>
-                </div>
-                
-                <a href="/tours/everest-base-camp" class="btn btn-outline">View Tour Details</a>
-              </div>
-            </div>
-          </article>
-        </div>
-        
-        <div class="view-all-tours">
-          <a href="/all-tours" class="btn btn-outline btn-large">View All 120+ Tours</a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="destinations" class="destinations-section">
-      <div class="container">
-        <h2>Explore Our Destinations</h2>
-        <p class="section-intro">We offer tours to 85 countries across 7 continents</p>
-        
-        <div class="destinations-grid">
-          <a href="/destinations/europe" class="destination-card">
-            <img src="dest-europe.jpg" alt="European architecture and landscapes" width="400" height="300" loading="lazy">
-            <div class="destination-overlay">
-              <h3>Europe</h3>
-              <p>28 tours • 15 countries</p>
-            </div>
-          </a>
-          
-          <a href="/destinations/asia" class="destination-card">
-            <img src="dest-asia.jpg" alt="Asian temples and culture" width="400" height="300" loading="lazy">
-            <div class="destination-overlay">
-              <h3>Asia</h3>
-              <p>35 tours • 18 countries</p>
-            </div>
-          </a>
-          
-          <a href="/destinations/africa" class="destination-card">
-            <img src="dest-africa.jpg" alt="African wildlife and landscapes" width="400" height="300" loading="lazy">
-            <div class="destination-overlay">
-              <h3>Africa</h3>
-              <p>22 tours • 12 countries</p>
-            </div>
-          </a>
-          
-          <a href="/destinations/south-america" class="destination-card">
-            <img src="dest-south-america.jpg" alt="South American landscapes" width="400" height="300" loading="lazy">
-            <div class="destination-overlay">
-              <h3>South America</h3>
-              <p>18 tours • 8 countries</p>
-            </div>
-          </a>
-          
-          <a href="/destinations/oceania" class="destination-card">
-            <img src="dest-oceania.jpg" alt="Australian and Pacific islands" width="400" height="300" loading="lazy">
-            <div class="destination-overlay">
-              <h3>Oceania</h3>
-              <p>12 tours • 6 countries</p>
-            </div>
-          </a>
-          
-          <a href="/destinations/antarctica" class="destination-card">
-            <img src="dest-antarctica.jpg" alt="Antarctic ice and wildlife" width="400" height="300" loading="lazy">
-            <div class="destination-overlay">
-              <h3>Antarctica</h3>
-              <p>5 tours • 1 continent</p>
-            </div>
-          </a>
-        </div>
-      </div>
-    </section>
-    
-    <section id="travel-styles" class="travel-styles-section">
-      <div class="container">
-        <h2>Find Your Travel Style</h2>
-        
-        <div class="travel-styles-grid">
-          <article class="style-card">
-            <div class="style-icon" aria-hidden="true">⛰️</div>
-            <h3>Adventure</h3>
-            <p>For thrill-seekers and outdoor enthusiasts. Hiking, climbing, rafting, and more active experiences.</p>
-            <a href="/travel-styles/adventure">Browse Adventure Tours</a>
-          </article>
-          
-          <article class="style-card">
-            <div class="style-icon" aria-hidden="true">🏛️</div>
-            <h3>Cultural</h3>
-            <p>Immerse yourself in local traditions, history, and authentic cultural experiences with expert guides.</p>
-            <a href="/travel-styles/cultural">Browse Cultural Tours</a>
-          </article>
-          
-          <article class="style-card">
-            <div class="style-icon" aria-hidden="true">🦁</div>
-            <h3>Wildlife & Nature</h3>
-            <p>Get up close with incredible wildlife. Safaris, marine life encounters, and pristine natural environments.</p>
-            <a href="/travel-styles/wildlife">Browse Wildlife Tours</a>
-          </article>
-          
-          <article class="style-card">
-            <div class="style-icon" aria-hidden="true">⭐</div>
-            <h3>Luxury</h3>
-            <p>Elevated experiences with premium accommodations, exclusive access, and refined comfort throughout.</p>
-            <a href="/travel-styles/luxury">Browse Luxury Tours</a>
-          </article>
-          
-          <article class="style-card">
-            <div class="style-icon" aria-hidden="true">👨‍👩‍👧‍👦</div>
-            <h3>Family</h3>
-            <p>Family-friendly adventures designed for all ages. Educational, fun, and creating memories together.</p>
-            <a href="/travel-styles/family">Browse Family Tours</a>
-          </article>
-          
-          <article class="style-card">
-            <div class="style-icon" aria-hidden="true">🎒</div>
-            <h3>Solo Traveler</h3>
-            <p>Join fellow solo adventurers. No single supplements on select tours, plus built-in companionship.</p>
-            <a href="/travel-styles/solo">Browse Solo Tours</a>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="why-us" class="why-us-section">
-      <div class="container">
-        <h2>Why Travel with Wanderlust?</h2>
-        
-        <div class="why-us-grid">
-          <article class="feature-box">
-            <div class="feature-icon-large" aria-hidden="true">👥</div>
-            <h3>Small Groups</h3>
-            <p>Maximum 12 travelers per tour. Get personal attention, make real connections, and access places large groups can't go.</p>
-          </article>
-          
-          <article class="feature-box">
-            <div class="feature-icon-large" aria-hidden="true">🎓</div>
-            <h3>Expert Guides</h3>
-            <p>Our local guides are passionate storytellers and regional experts. They live where we travel and share insider knowledge.</p>
-          </article>
-          
-          <article class="feature-box">
-            <div class="feature-icon-large" aria-hidden="true">🏠</div>
-            <h3>Authentic Experiences</h3>
-            <p>Stay in boutique hotels, dine where locals eat, and participate in genuine cultural exchanges. No tourist traps.</p>
-          </article>
-          
-          <article class="feature-box">
-            <div class="feature-icon-large" aria-hidden="true">🌍</div>
-            <h3>Responsible Travel</h3>
-            <p>We're committed to sustainable tourism, supporting local communities, and minimizing environmental impact.</p>
-          </article>
-          
-          <article class="feature-box">
-            <div class="feature-icon-large" aria-hidden="true">✅</div>
-            <h3>Hassle-Free Planning</h3>
-            <p>Everything's arranged: accommodations, transportation, most meals, activities, and expert guidance throughout.</p>
-          </article>
-          
-          <article class="feature-box">
-            <div class="feature-icon-large" aria-hidden="true">💯</div>
-            <h3>Satisfaction Guaranteed</h3>
-            <p>4.9/5 average rating from 25,000+ travelers. If you're not satisfied, we'll make it right—that's our promise.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="testimonials-tours-section">
-      <div class="container">
-        <h2>Hear from Our Travelers</h2>
-        
-        <div class="testimonials-grid">
-          <article class="testimonial-card-tours">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"The Japan tour exceeded every expectation. Our guide Yuki was incredible—so knowledgeable and accommodating. The small group size made it feel like traveling with friends. Already booked my next Wanderlust tour!"</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="traveler-emma.jpg" alt="" width="60" height="60" loading="lazy">
-              <div>
-                <cite>Emma Richardson</cite>
-                <p>Japan Discovery Tour • March 2026</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card-tours">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"Best vacation of my life! The Tanzania safari was perfectly organized. We saw lions, elephants, and witnessed the Great Migration. Our guide's wildlife knowledge was unmatched. Worth every penny."</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="traveler-david.jpg" alt="" width="60" height="60" loading="lazy">
-              <div>
-                <cite>David & Lisa Chen</cite>
-                <p>Tanzania Safari • August 2025</p>
-              </div>
-            </footer>
-          </article>
-          
-          <article class="testimonial-card-tours">
-            <div class="rating" aria-label="5 stars">★★★★★</div>
-            <blockquote>
-              <p>"As a solo female traveler, I felt completely safe and welcomed. Met amazing people and pushed myself beyond my comfort zone on the Patagonia trek. Life-changing experience!"</p>
-            </blockquote>
-            <footer class="testimonial-author">
-              <img src="traveler-maria.jpg" alt="" width="60" height="60" loading="lazy">
-              <div>
-                <cite>Maria Santos</cite>
-                <p>Patagonia Explorer • November 2025</p>
-              </div>
-            </footer>
-          </article>
-        </div>
-        
-        <div class="review-summary">
-          <p><strong>4.9/5.0</strong> average rating • <strong>25,000+</strong> satisfied travelers • <strong>98%</strong> would recommend</p>
-        </div>
-      </div>
-    </section>
-    
-    <section class="planning-help-section">
-      <div class="container">
-        <div class="planning-content">
-          <h2>Need Help Planning?</h2>
-          <p>Our travel experts are here to answer questions and help you find the perfect tour</p>
-          
-          <div class="contact-options">
-            <div class="contact-option">
-              <span class="contact-icon" aria-hidden="true">📞</span>
-              <div>
-                <h3>Call Us</h3>
-                <p><a href="tel:+18885551234"><strong>(888) 555-1234</strong></a></p>
-                <p>Mon-Fri 9am-6pm EST</p>
-              </div>
-            </div>
-            
-            <div class="contact-option">
-              <span class="contact-icon" aria-hidden="true">💬</span>
-              <div>
-                <h3>Live Chat</h3>
-                <p><button class="btn-link" onclick="openChat()">Start a conversation</button></p>
-                <p>Available 7 days a week</p>
-              </div>
-            </div>
-            
-            <div class="contact-option">
-              <span class="contact-icon" aria-hidden="true">✉️</span>
-              <div>
-                <h3>Email Us</h3>
-                <p><a href="mailto:travel@wanderlustadv.com">travel@wanderlustadv.com</a></p>
-                <p>Response within 24 hours</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact" class="booking-inquiry-section">
-      <div class="container">
-        <h2>Request a Custom Quote</h2>
-        <p class="section-intro">Tell us about your dream trip and we'll create a personalized itinerary</p>
-        
-        <form class="inquiry-form" action="/request-quote" method="POST">
-          <div class="form-row">
-            <div class="form-group">
-              <label for="inquiry-name">Full Name *</label>
-              <input type="text" id="inquiry-name" name="name" required autocomplete="name">
-            </div>
-            
-            <div class="form-group">
-              <label for="inquiry-email">Email Address *</label>
-              <input type="email" id="inquiry-email" name="email" required autocomplete="email">
-            </div>
-          </div>
-          
-          <div class="form-row">
-            <div class="form-group">
-              <label for="inquiry-phone">Phone Number</label>
-              <input type="tel" id="inquiry-phone" name="phone" autocomplete="tel">
-            </div>
-            
-            <div class="form-group">
-              <label for="inquiry-travelers">Number of Travelers *</label>
-              <select id="inquiry-travelers" name="travelers" required>
-                <option value="">Select...</option>
-                <option value="1">1 traveler (solo)</option>
-                <option value="2">2 travelers</option>
-                <option value="3-4">3-4 travelers</option>
-                <option value="5-8">5-8 travelers</option>
-                <option value="9+">9+ travelers (private group)</option>
-              </select>
-            </div>
-          </div>
-          
-          <div class="form-row">
-            <div class="form-group">
-              <label for="inquiry-destination">Preferred Destination(s)</label>
-              <input type="text" id="inquiry-destination" name="destination" placeholder="e.g., Japan, Iceland, Morocco">
-            </div>
-            
-            <div class="form-group">
-              <label for="inquiry-dates">Preferred Travel Dates</label>
-              <input type="text" id="inquiry-dates" name="dates" placeholder="e.g., April 2027, Summer 2027">
-            </div>
-          </div>
-          
-          <div class="form-group">
-            <label for="inquiry-budget">Budget per Person (USD)</label>
-            <select id="inquiry-budget" name="budget">
-              <option value="">Prefer not to say</option>
-              <option value="under-2000">Under $2,000</option>
-              <option value="2000-3500">$2,000 - $3,500</option>
-              <option value="3500-5000">$3,500 - $5,000</option>
-              <option value="5000-7500">$5,000 - $7,500</option>
-              <option value="7500+">$7,500+</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="inquiry-interests">Tell us about your travel interests and expectations</label>
-            <textarea id="inquiry-interests" name="interests" rows="5" placeholder="What kind of experiences are you looking for? Any must-see destinations or activities? Physical fitness level? Accommodation preferences?"></textarea>
-          </div>
-          
-          <div class="form-group-checkbox">
-            <input type="checkbox" id="inquiry-newsletter" name="newsletter" value="yes">
-            <label for="inquiry-newsletter">Send me travel inspiration and special offers</label>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large">Request Quote</button>
-          
-          <p class="form-note"><small>We'll respond within 24 hours with a personalized itinerary and pricing</small></p>
-        </form>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <img src="wanderlust-logo-white.svg" alt="Wanderlust Adventures" width="180" height="45" loading="lazy">
-          <p>Small groups. Big experiences.</p>
-          
-          <div class="social-links" aria-label="Social media">
-            <a href="https://instagram.com/wanderlustadv" aria-label="Instagram">Instagram</a>
-            <a href="https://facebook.com/wanderlustadv" aria-label="Facebook">Facebook</a>
-            <a href="https://youtube.com/wanderlustadv" aria-label="YouTube">YouTube</a>
-            <a href="https://pinterest.com/wanderlustadv" aria-label="Pinterest">Pinterest</a>
-          </div>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Destinations</h3>
-          <ul>
-            <li><a href="/destinations/europe">Europe</a></li>
-            <li><a href="/destinations/asia">Asia</a></li>
-            <li><a href="/destinations/africa">Africa</a></li>
-            <li><a href="/destinations/south-america">South America</a></li>
-            <li><a href="/destinations">All Destinations</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Travel Styles</h3>
-          <ul>
-            <li><a href="/travel-styles/adventure">Adventure</a></li>
-            <li><a href="/travel-styles/cultural">Cultural</a></li>
-            <li><a href="/travel-styles/wildlife">Wildlife</a></li>
-            <li><a href="/travel-styles/luxury">Luxury</a></li>
-            <li><a href="/travel-styles/family">Family</a></li>
-            <li><a href="/travel-styles/solo">Solo Travel</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Resources</h3>
-          <ul>
-            <li><a href="/blog">Travel Blog</a></li>
-            <li><a href="/travel-guides">Travel Guides</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/reviews">Reviews</a></li>
-            <li><a href="/packing-lists">Packing Lists</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/sustainability">Sustainability</a></li>
-            <li><a href="/our-team">Our Team</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-certifications">
-        <p><strong>Certified & Trusted:</strong></p>
-        <div class="certifications">
-          <span>ASTA Member</span>
-          <span>Adventure Travel Trade Association</span>
-          <span>B Corp Certified</span>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Wanderlust Adventures. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms & Conditions</a>
-          <a href="/booking-terms">Booking Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="tours.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-404.html b/skills/html-coder/assets/util-404.html
deleted file mode 100644
index 08229d4dd..000000000
--- a/skills/html-coder/assets/util-404.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Page not found. The page you're looking for doesn't exist or has been moved.">
-  <meta name="robots" content="noindex, nofollow">
-  <title>404 - Page Not Found</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <main id="main" class="error-page">
-    <div class="error-container">
-      <div class="error-illustration">
-        <img src="404-illustration.svg" alt="" width="400" height="300" loading="eager">
-      </div>
-      
-      <div class="error-content">
-        <h1 class="error-code">404</h1>
-        <h2>Page Not Found</h2>
-        <p class="error-message">Oops! The page you're looking for doesn't exist. It might have been moved or deleted.</p>
-        
-        <div class="error-actions">
-          <a href="/" class="btn btn-primary">Go Home</a>
-          <button type="button" class="btn btn-outline" onclick="history.back()">Go Back</button>
-        </div>
-        
-        <div class="error-search">
-          <p>Try searching for what you need:</p>
-          <form action="/search" method="GET" class="search-form">
-            <label for="search" class="visually-hidden">Search</label>
-            <input type="search" id="search" name="q" placeholder="Search our site..." autocomplete="off">
-            <button type="submit" class="btn btn-primary">Search</button>
-          </form>
-        </div>
-        
-        <div class="helpful-links">
-          <h3>Popular Pages</h3>
-          <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/products">Products</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/contact">Contact Support</a></li>
-            <li><a href="/help">Help Center</a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </main>
-  
-  <footer class="error-footer">
-    <p>&copy; 2026 Company Name. All rights reserved.</p>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-500.html b/skills/html-coder/assets/util-500.html
deleted file mode 100644
index c4010a965..000000000
--- a/skills/html-coder/assets/util-500.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Internal server error. We're experiencing technical difficulties. Please try again later.">
-  <meta name="robots" content="noindex, nofollow">
-  <title>500 - Internal Server Error</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <main id="main" class="error-page">
-    <div class="error-container">
-      <div class="error-illustration">
-        <img src="500-illustration.svg" alt="" width="400" height="300" loading="eager">
-      </div>
-      
-      <div class="error-content">
-        <h1 class="error-code">500</h1>
-        <h2>Internal Server Error</h2>
-        <p class="error-message">Something went wrong on our end. We're working to fix the issue. Please try again in a few moments.</p>
-        
-        <div class="error-actions">
-          <a href="/" class="btn btn-primary">Go Home</a>
-          <button type="button" class="btn btn-outline" onclick="location.reload()">Refresh Page</button>
-        </div>
-        
-        <div class="error-info-box">
-          <h3>What can you do?</h3>
-          <ul>
-            <li><strong>Wait a moment</strong> and try refreshing the page</li>
-            <li><strong>Clear your browser cache</strong> and cookies, then try again</li>
-            <li><strong>Check our status page</strong> for any ongoing incidents: <a href="https://status.example.com" target="_blank" rel="noopener">status.example.com</a></li>
-            <li><strong>Contact support</strong> if the problem persists: <a href="mailto:support@example.com">support@example.com</a></li>
-          </ul>
-        </div>
-        
-        <div class="error-status">
-          <p><strong>Error ID:</strong> <code>ERR-2026-03-08-A7B3D9</code></p>
-          <p class="error-note"><small>Please include this error ID when contacting support</small></p>
-        </div>
-      </div>
-    </div>
-  </main>
-  
-  <footer class="error-footer">
-    <p>&copy; 2026 Company Name. All rights reserved.</p>
-    <nav aria-label="Support">
-      <a href="/help">Help Center</a>
-      <a href="/contact">Contact Support</a>
-      <a href="https://status.example.com">Status Page</a>
-    </nav>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-about.html b/skills/html-coder/assets/util-about.html
deleted file mode 100644
index c98c14df7..000000000
--- a/skills/html-coder/assets/util-about.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Learn about our company mission, values, team, and story. We're building innovative solutions to help teams work better together.">
-  <title>About Us - Our Story & Mission</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Company</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/products">Products</a></li>
-          <li><a href="/pricing">Pricing</a></li>
-          <li><a href="/about" aria-current="page">About</a></li>
-          <li><a href="/contact">Contact</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/login" class="btn-link">Sign In</a>
-          <a href="/signup" class="btn btn-primary">Get Started</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="about-hero">
-      <div class="container">
-        <h1>Building the Future of Collaboration</h1>
-        <p class="hero-subtitle">We're on a mission to help teams work smarter, not harder</p>
-      </div>
-    </section>
-    
-    <section class="about-story-section">
-      <div class="container">
-        <div class="story-content">
-          <h2>Our Story</h2>
-          
-          <p class="lead-paragraph">Founded in 2018, our company started with a simple observation: teams were struggling with too many disconnected tools, complicated workflows, and endless meetings.</p>
-          
-          <p>Three co-founders with backgrounds in software engineering, product design, and organizational psychology came together to build a better solution. We believed there had to be a simpler way for teams to collaborate and get work done.</p>
-          
-          <p>What started as a weekend project in a San Francisco garage has grown into a platform serving 100,000+ teams worldwide. Along the way, we've stayed true to our core belief: technology should empower people, not complicate their lives.</p>
-          
-          <p>Today, we're a team of 150+ people across three continents, united by a shared mission to make collaboration effortless for everyone.</p>
-        </div>
-      </div>
-    </section>
-    
-    <section class="mission-values-section">
-      <div class="container">
-        <div class="mission-box">
-          <h2>Our Mission</h2>
-          <p class="mission-statement">To empower every team to achieve more together by providing intuitive, powerful tools that simplify collaboration.</p>
-        </div>
-        
-        <div class="values-grid">
-          <h2>Our Values</h2>
-          
-          <article class="value-card">
-            <div class="value-icon" aria-hidden="true">👥</div>
-            <h3>People First</h3>
-            <p>We build for humans, not robots. Every feature is designed with real people and real workflows in mind.</p>
-          </article>
-          
-          <article class="value-card">
-            <div class="value-icon" aria-hidden="true">🎯</div>
-            <h3>Simplicity Wins</h3>
-            <p>Complex problems don't require complex solutions. We strive for elegance and clarity in everything we do.</p>
-          </article>
-          
-          <article class="value-card">
-            <div class="value-icon" aria-hidden="true">🚀</div>
-            <h3>Move Fast</h3>
-            <p>Speed matters. We ship early, learn quickly, and iterate constantly based on customer feedback.</p>
-          </article>
-          
-          <article class="value-card">
-            <div class="value-icon" aria-hidden="true">🌍</div>
-            <h3>Global Perspective</h3>
-            <p>Our customers span every timezone and culture. We build for a diverse, global audience.</p>
-          </article>
-          
-          <article class="value-card">
-            <div class="value-icon" aria-hidden="true">💪</div>
-            <h3>Own It</h3>
-            <p>We take responsibility for our work, our commitments, and our impact on customers and teammates.</p>
-          </article>
-          
-          <article class="value-card">
-            <div class="value-icon" aria-hidden="true">🌱</div>
-            <h3>Always Learning</h3>
-            <p>The best solution today might be obsolete tomorrow. We stay curious, humble, and open to new ideas.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="team-section">
-      <div class="container">
-        <h2>Meet the Leadership Team</h2>
-        
-        <div class="team-grid">
-          <article class="team-member-card">
-            <img src="team-sarah.jpg" alt="Sarah Chen" width="200" height="200" loading="lazy">
-            <h3>Sarah Chen</h3>
-            <p class="team-role">Co-founder & CEO</p>
-            <p class="team-bio">Former VP Product at Salesforce. Stanford CS. Passionate about human-centered design.</p>
-            <div class="team-social">
-              <a href="https://linkedin.com/in/sarahchen" aria-label="Sarah Chen on LinkedIn">LinkedIn</a>
-              <a href="https://twitter.com/sarahchen" aria-label="Sarah Chen on Twitter">Twitter</a>
-            </div>
-          </article>
-          
-          <article class="team-member-card">
-            <img src="team-marcus.jpg" alt="Marcus Johnson" width="200" height="200" loading="lazy">
-            <h3>Marcus Johnson</h3>
-            <p class="team-role">Co-founder & CTO</p>
-            <p class="team-bio">Built distributed systems at Google. MIT EECS. Believes in elegant, scalable architectures.</p>
-            <div class="team-social">
-              <a href="https://linkedin.com/in/marcusj" aria-label="Marcus Johnson on LinkedIn">LinkedIn</a>
-              <a href="https://github.com/marcusj" aria-label="Marcus Johnson on GitHub">GitHub</a>
-            </div>
-          </article>
-          
-          <article class="team-member-card">
-            <img src="team-priya.jpg" alt="Priya Patel" width="200" height="200" loading="lazy">
-            <h3>Priya Patel</h3>
-            <p class="team-role">Co-founder & Chief Design Officer</p>
-            <p class="team-bio">Design leader from IDEO. Yale Psychology PhD. Obsessed with user experience.</p>
-            <div class="team-social">
-              <a href="https://linkedin.com/in/priyapatel" aria-label="Priya Patel on LinkedIn">LinkedIn</a>
-              <a href="https://dribbble.com/priyapatel" aria-label="Priya Patel on Dribbble">Dribbble</a>
-            </div>
-          </article>
-          
-          <article class="team-member-card">
-            <img src="team-james.jpg" alt="James Kim" width="200" height="200" loading="lazy">
-            <h3>James Kim</h3>
-            <p class="team-role">VP of Engineering</p>
-            <p class="team-bio">Engineering leader from Stripe. Built payments infrastructure at scale.</p>
-            <div class="team-social">
-              <a href="https://linkedin.com/in/jameskim" aria-label="James Kim on LinkedIn">LinkedIn</a>
-            </div>
-          </article>
-          
-          <article class="team-member-card">
-            <img src="team-lisa.jpg" alt="Lisa Rodriguez" width="200" height="200" loading="lazy">
-            <h3>Lisa Rodriguez</h3>
-            <p class="team-role">VP of Customer Success</p>
-            <p class="team-bio">Customer advocate from HubSpot. Believes happy customers are the best growth strategy.</p>
-            <div class="team-social">
-              <a href="https://linkedin.com/in/lisarodriguez" aria-label="Lisa Rodriguez on LinkedIn">LinkedIn</a>
-            </div>
-          </article>
-          
-          <article class="team-member-card">
-            <img src="team-david.jpg" alt="David Thompson" width="200" height="200" loading="lazy">
-            <h3>David Thompson</h3>
-            <p class="team-role">VP of Sales</p>
-            <p class="team-bio">20 years in enterprise software sales. Focused on building long-term partnerships.</p>
-            <div class="team-social">
-              <a href="https://linkedin.com/in/davidthompson" aria-label="David Thompson on LinkedIn">LinkedIn</a>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="stats-section">
-      <div class="container">
-        <h2>By the Numbers</h2>
-        
-        <div class="stats-grid">
-          <div class="stat-box">
-            <strong>100,000+</strong>
-            <span>Teams using our platform</span>
-          </div>
-          
-          <div class="stat-box">
-            <strong>150+</strong>
-            <span>Team members worldwide</span>
-          </div>
-          
-          <div class="stat-box">
-            <strong>$40M</strong>
-            <span>Series B funding raised</span>
-          </div>
-          
-          <div class="stat-box">
-            <strong>99.9%</strong>
-            <span>Platform uptime</span>
-          </div>
-          
-          <div class="stat-box">
-            <strong>120+</strong>
-            <span>Countries served</span>
-          </div>
-          
-          <div class="stat-box">
-            <strong>4.8★</strong>
-            <span>Customer satisfaction</span>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="investors-section">
-      <div class="container">
-        <h2>Backed by Leading Investors</h2>
-        
-        <div class="investors-grid">
-          <img src="investor-sequoia.svg" alt="Sequoia Capital" width="140" height="50" loading="lazy">
-          <img src="investor-accel.svg" alt="Accel Partners" width="120" height="50" loading="lazy">
-          <img src="investor-yc.svg" alt="Y Combinator" width="80" height="50" loading="lazy">
-          <img src="investor-andreessen.svg" alt="Andreessen Horowitz" width="140" height="50" loading="lazy">
-        </div>
-      </div>
-    </section>
-    
-    <section class="careers-section">
-      <div class="container">
-        <h2>Join Our Team</h2>
-        <p>We're always looking for talented people who share our mission</p>
-        
-        <div class="careers-highlights">
-          <div class="highlight-item">
-            <span class="highlight-icon" aria-hidden="true">🏡</span>
-            <strong>Remote-First</strong>
-            <p>Work from anywhere</p>
-          </div>
-          
-          <div class="highlight-item">
-            <span class="highlight-icon" aria-hidden="true">🏥</span>
-            <strong>Great Benefits</strong>
-            <p>Health, dental, vision covered</p>
-          </div>
-          
-          <div class="highlight-item">
-            <span class="highlight-icon" aria-hidden="true">🌴</span>
-            <strong>Unlimited PTO</strong>
-            <p>Take time when you need it</p>
-          </div>
-          
-          <div class="highlight-item">
-            <span class="highlight-icon" aria-hidden="true">📚</span>
-            <strong>Learning Budget</strong>
-            <p>$2,000/year for growth</p>
-          </div>
-        </div>
-        
-        <a href="/careers" class="btn btn-primary btn-large">View Open Positions</a>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Company</h3>
-          <p>Building innovative solutions</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/updates">Updates</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Support</h3>
-          <ul>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/press">Press</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Company Name. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="main.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-contact.html b/skills/html-coder/assets/util-contact.html
deleted file mode 100644
index 1a65bacab..000000000
--- a/skills/html-coder/assets/util-contact.html
+++ /dev/null
@@ -1,307 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Contact us for support, sales inquiries, partnerships, or general questions. We're here to help.">
-  <title>Contact Us - Get in Touch</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Company</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/products">Products</a></li>
-          <li><a href="/pricing">Pricing</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/contact" aria-current="page">Contact</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/login" class="btn-link">Sign In</a>
-          <a href="/signup" class="btn btn-primary">Get Started</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="contact-hero">
-      <div class="container">
-        <h1>Get in Touch</h1>
-        <p class="hero-subtitle">Have a question or need help? We'd love to hear from you.</p>
-      </div>
-    </section>
-    
-    <section class="contact-methods-section">
-      <div class="container">
-        <div class="contact-methods-grid">
-          <article class="contact-method-card">
-            <div class="contact-icon" aria-hidden="true">💬</div>
-            <h2>Live Chat</h2>
-            <p>Chat with our support team for quick answers</p>
-            <p><strong>Available:</strong> Mon-Fri, 9am-6pm EST</p>
-            <button class="btn btn-primary" onclick="openLiveChat()">Start Chat</button>
-          </article>
-          
-          <article class="contact-method-card">
-            <div class="contact-icon" aria-hidden="true">✉️</div>
-            <h2>Email Support</h2>
-            <p>Send us a detailed message and we'll respond within 24 hours</p>
-            <p><strong>Email:</strong> <a href="mailto:support@example.com">support@example.com</a></p>
-            <a href="#contact-form" class="btn btn-outline">Send Message</a>
-          </article>
-          
-          <article class="contact-method-card">
-            <div class="contact-icon" aria-hidden="true">📞</div>
-            <h2>Phone</h2>
-            <p>Speak directly with our team</p>
-            <p><strong>US:</strong> <a href="tel:+18005551234">1-800-555-1234</a></p>
-            <p><strong>UK:</strong> <a href="tel:+442012345678">+44 20 1234 5678</a></p>
-            <p class="contact-hours"><small>Mon-Fri, 9am-6pm EST</small></p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section id="contact-form" class="contact-form-section">
-      <div class="container">
-        <div class="contact-form-layout">
-          <div class="contact-form-intro">
-            <h2>Send Us a Message</h2>
-            <p>Fill out the form below and we'll get back to you as soon as possible.</p>
-            
-            <div class="response-time-badge">
-              <span class="badge-icon">⚡</span>
-              <div>
-                <strong>Average response time</strong>
-                <p>Under 2 hours during business hours</p>
-              </div>
-            </div>
-          </div>
-          
-          <form class="contact-form" action="/contact" method="POST">
-            <div class="form-row">
-              <div class="form-group">
-                <label for="first-name">First Name *</label>
-                <input type="text" id="first-name" name="first_name" required autocomplete="given-name">
-              </div>
-              
-              <div class="form-group">
-                <label for="last-name">Last Name *</label>
-                <input type="text" id="last-name" name="last_name" required autocomplete="family-name">
-              </div>
-            </div>
-            
-            <div class="form-row">
-              <div class="form-group">
-                <label for="email">Email Address *</label>
-                <input type="email" id="email" name="email" required autocomplete="email">
-              </div>
-              
-              <div class="form-group">
-                <label for="phone">Phone Number</label>
-                <input type="tel" id="phone" name="phone" autocomplete="tel">
-              </div>
-            </div>
-            
-            <div class="form-group">
-              <label for="subject">Subject *</label>
-              <select id="subject" name="subject" required>
-                <option value="">Select a topic...</option>
-                <option value="support">Technical Support</option>
-                <option value="sales">Sales Inquiry</option>
-                <option value="billing">Billing Question</option>
-                <option value="partnership">Partnership Opportunity</option>
-                <option value="feedback">Product Feedback</option>
-                <option value="other">Other</option>
-              </select>
-            </div>
-            
-            <div class="form-group">
-              <label for="message">Message *</label>
-              <textarea id="message" name="message" rows="6" required placeholder="Tell us how we can help..."></textarea>
-              <small class="form-help-text">Please provide as much detail as possible</small>
-            </div>
-            
-            <div class="form-group-checkbox">
-              <input type="checkbox" id="newsletter" name="newsletter" value="yes">
-              <label for="newsletter">Send me product updates and company news</label>
-            </div>
-            
-            <button type="submit" class="btn btn-primary btn-large">Send Message</button>
-            
-            <p class="form-note"><small>By submitting this form, you agree to our <a href="/privacy">Privacy Policy</a></small></p>
-          </form>
-        </div>
-      </div>
-    </section>
-    
-    <section class="office-locations-section">
-      <div class="container">
-        <h2>Our Offices</h2>
-        
-        <div class="offices-grid">
-          <article class="office-card">
-            <h3>San Francisco (HQ)</h3>
-            <address>
-              123 Market Street<br>
-              Suite 500<br>
-              San Francisco, CA 94103<br>
-              United States
-            </address>
-            <p><a href="tel:+14155551234">+1 (415) 555-1234</a></p>
-            <p><a href="mailto:sf@example.com">sf@example.com</a></p>
-          </article>
-          
-          <article class="office-card">
-            <h3>London</h3>
-            <address>
-              45 Finsbury Pavement<br>
-              London EC2A 1PQ<br>
-              United Kingdom
-            </address>
-            <p><a href="tel:+442012345678">+44 20 1234 5678</a></p>
-            <p><a href="mailto:london@example.com">london@example.com</a></p>
-          </article>
-          
-          <article class="office-card">
-            <h3>Singapore</h3>
-            <address>
-              1 Raffles Place<br>
-              #40-02 One Raffles Place<br>
-              Singapore 048616
-            </address>
-            <p><a href="tel:+6562345678">+65 6234 5678</a></p>
-            <p><a href="mailto:singapore@example.com">singapore@example.com</a></p>
-          </article>
-        </div>
-      </div>
-    </section>
-    
-    <section class="department-contacts-section">
-      <div class="container">
-        <h2>Department Contacts</h2>
-        
-        <div class="departments-grid">
-          <div class="department">
-            <h3>💼 Sales</h3>
-            <p>Product demos and pricing information</p>
-            <p><a href="mailto:sales@example.com">sales@example.com</a></p>
-          </div>
-          
-          <div class="department">
-            <h3>🔧 Technical Support</h3>
-            <p>Help with technical issues</p>
-            <p><a href="mailto:support@example.com">support@example.com</a></p>
-          </div>
-          
-          <div class="department">
-            <h3>💳 Billing</h3>
-            <p>Questions about invoices and payments</p>
-            <p><a href="mailto:billing@example.com">billing@example.com</a></p>
-          </div>
-          
-          <div class="department">
-            <h3>📰 Press & Media</h3>
-            <p>Media inquiries and press releases</p>
-            <p><a href="mailto:press@example.com">press@example.com</a></p>
-          </div>
-          
-          <div class="department">
-            <h3>🤝 Partnerships</h3>
-            <p>Business development opportunities</p>
-            <p><a href="mailto:partners@example.com">partners@example.com</a></p>
-          </div>
-          
-          <div class="department">
-            <h3>💼 Careers</h3>
-            <p>Job opportunities and applications</p>
-            <p><a href="mailto:careers@example.com">careers@example.com</a></p>
-          </div>
-        </div>
-      </div>
-    </section>
-    
-    <section class="faq-preview-section">
-      <div class="container">
-        <h2>Frequently Asked Questions</h2>
-        <p>Looking for quick answers? Check out our FAQ page</p>
-        
-        <div class="faq-preview-items">
-          <div class="faq-preview-item">
-            <h3>What are your support hours?</h3>
-            <p>Our support team is available Monday-Friday, 9am-6pm EST via chat, email, and phone.</p>
-          </div>
-          
-          <div class="faq-preview-item">
-            <h3>How long does it take to get a response?</h3>
-            <p>We typically respond within 2 hours during business hours, and within 24 hours outside business hours.</p>
-          </div>
-          
-          <div class="faq-preview-item">
-            <h3>Do you offer enterprise support?</h3>
-            <p>Yes! Enterprise customers receive dedicated account managers and 24/7 priority support.</p>
-          </div>
-        </div>
-        
-        <a href="/faq" class="btn btn-outline">View All FAQs</a>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Company</h3>
-          <p>Building innovative solutions</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/updates">Product Updates</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Support</h3>
-          <ul>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About Us</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/press">Press</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Company Name. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="contact.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-faq.html b/skills/html-coder/assets/util-faq.html
deleted file mode 100644
index 0816c83a0..000000000
--- a/skills/html-coder/assets/util-faq.html
+++ /dev/null
@@ -1,402 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Find answers to frequently asked questions about our product, billing, technical support, and account management.">
-  <title>Frequently Asked Questions (FAQ)</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Company</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/products">Products</a></li>
-          <li><a href="/pricing">Pricing</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/contact">Contact</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/login" class="btn-link">Sign In</a>
-          <a href="/signup" class="btn btn-primary">Get Started</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="faq-hero">
-      <div class="container">
-        <h1>Frequently Asked Questions</h1>
-        <p class="hero-subtitle">Find answers to common questions about our product and services</p>
-        
-        <form class="faq-search-form" role="search">
-          <label for="faq-search" class="sr-only">Search FAQs</label>
-          <input 
-            type="search" 
-            id="faq-search" 
-            name="q" 
-            placeholder="Search for answers..." 
-            aria-label="Search FAQs">
-          <button type="submit" aria-label="Search">Search</button>
-        </form>
-      </div>
-    </section>
-    
-    <section class="faq-content">
-      <div class="container">
-        <div class="faq-categories">
-          <button class="category-btn active" data-category="all" aria-pressed="true">All Questions</button>
-          <button class="category-btn" data-category="general" aria-pressed="false">General</button>
-          <button class="category-btn" data-category="billing" aria-pressed="false">Billing</button>
-          <button class="category-btn" data-category="technical" aria-pressed="false">Technical</button>
-          <button class="category-btn" data-category="account" aria-pressed="false">Account</button>
-          <button class="category-btn" data-category="security" aria-pressed="false">Security</button>
-        </div>
-        
-        <!-- General -->
-        <article class="faq-section" data-category="general">
-          <h2>General Questions</h2>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>What is your product and what does it do?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Our product is a collaborative project management platform designed to help teams organize work, track progress, and communicate effectively. It combines task management, file sharing, team messaging, and reporting in one intuitive interface.</p>
-              <p>Key features include real-time collaboration, customizable workflows, integration with 50+ popular tools, and powerful analytics to help you understand team productivity.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>Who should use your product?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Our platform is ideal for teams of any size—from startups to enterprises—across various industries including software development, marketing, design, operations, and more.</p>
-              <p>If your team struggles with scattered tools, missed deadlines, or unclear priorities, our product can help streamline your workflow.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>Is there a free trial available?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Yes! We offer a 14-day free trial of our Professional plan with full access to all features. No credit card required to start your trial.</p>
-              <p>We also have a free Starter plan available indefinitely for small teams (up to 5 members) with basic features.</p>
-            </div>
-          </details>
-        </article>
-        
-        <!-- Billing -->
-        <article class="faq-section" data-category="billing">
-          <h2>Billing & Pricing</h2>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>How much does your product cost?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>We offer three pricing tiers:</p>
-              <ul>
-                <li><strong>Starter:</strong> Free (up to 5 team members, 10 projects)</li>
-                <li><strong>Professional:</strong> $29/month per user (unlimited projects, advanced features)</li>
-                <li><strong>Enterprise:</strong> Custom pricing (dedicated support, custom integrations, SSO)</li>
-              </ul>
-              <p>Annual billing is available with a 20% discount. <a href="/pricing">View detailed pricing</a></p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>Can I change my plan later?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Absolutely! You can upgrade or downgrade your plan at any time from your account settings.</p>
-              <p>When upgrading, you'll be charged a prorated amount for the remainder of your billing period. When downgrading, the change takes effect at the start of your next billing cycle.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>What payment methods do you accept?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>We accept all major credit cards (Visa, Mastercard, American Express, Discover) and PayPal.</p>
-              <p>Enterprise customers can pay via invoice (bank transfer or check). Contact our sales team to set up invoice billing.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>What is your refund policy?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>We offer a 30-day money-back guarantee. If you're not satisfied with our product within the first 30 days, contact us for a full refund.</p>
-              <p>After 30 days, subscriptions are non-refundable, but you can cancel anytime to prevent future charges.</p>
-            </div>
-          </details>
-        </article>
-        
-        <!-- Technical -->
-        <article class="faq-section" data-category="technical">
-          <h2>Technical Questions</h2>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>What browsers do you support?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Our platform works best on the latest versions of:</p>
-              <ul>
-                <li>Google Chrome (recommended)</li>
-                <li>Mozilla Firefox</li>
-                <li>Safari (macOS and iOS)</li>
-                <li>Microsoft Edge</li>
-              </ul>
-              <p>We recommend keeping your browser up to date for the best experience and security.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>Do you have mobile apps?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Yes! We have native mobile apps for both iOS (iPhone and iPad) and Android devices.</p>
-              <p>Download from the <a href="https://apps.apple.com" target="_blank" rel="noopener">App Store</a> or <a href="https://play.google.com" target="_blank" rel="noopener">Google Play Store</a>. All plans have access to mobile apps.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>What integrations are available?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>We integrate with 50+ popular tools including:</p>
-              <ul>
-                <li><strong>Communication:</strong> Slack, Microsoft Teams, Zoom</li>
-                <li><strong>File Storage:</strong> Google Drive, Dropbox, Box, OneDrive</li>
-                <li><strong>Development:</strong> GitHub, GitLab, Bitbucket, Jira</li>
-                <li><strong>Calendar:</strong> Google Calendar, Outlook Calendar</li>
-                <li><strong>CRM:</strong> Salesforce, HubSpot</li>
-              </ul>
-              <p>We also provide a REST API for custom integrations.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>Can I import data from another tool?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Yes! We provide import tools for popular platforms including Asana, Trello, Monday.com, and Basecamp.</p>
-              <p>You can also import data via CSV files. Our support team can help with large-scale migrations. <a href="/contact">Contact us</a> to discuss your migration needs.</p>
-            </div>
-          </details>
-        </article>
-        
-        <!-- Account -->
-        <article class="faq-section" data-category="account">
-          <h2>Account Management</h2>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>How do I add team members?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>To add team members:</p>
-              <ol>
-                <li>Go to Settings → Team Members</li>
-                <li>Click "Invite Members"</li>
-                <li>Enter email addresses (one per line or comma-separated)</li>
-                <li>Select their role (Admin, Member, or Guest)</li>
-                <li>Click "Send Invitations"</li>
-              </ol>
-              <p>Team members will receive an email invitation to join your workspace.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>What's the difference between Admin, Member, and Guest roles?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p><strong>Admins</strong> have full access including billing, team management, and all workspace settings.</p>
-              <p><strong>Members</strong> can create and manage projects, invite guests, but cannot access billing or remove admins.</p>
-              <p><strong>Guests</strong> have limited access to specific projects they're invited to. Great for clients or external collaborators.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>How do I delete my account?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>To delete your account:</p>
-              <ol>
-                <li>Go to Settings → Account</li>
-                <li>Scroll to the bottom and click "Delete Account"</li>
-                <li>Confirm deletion by typing your email address</li>
-              </ol>
-              <p><strong>Warning:</strong> This permanently deletes all your data and cannot be undone. Consider exporting your data first.</p>
-            </div>
-          </details>
-        </article>
-        
-        <!-- Security -->
-        <article class="faq-section" data-category="security">
-          <h2>Security & Privacy</h2>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>How secure is my data?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Security is our top priority. We use:</p>
-              <ul>
-                <li><strong>Encryption:</strong> 256-bit SSL/TLS encryption for data in transit, AES-256 encryption for data at rest</li>
-                <li><strong>Infrastructure:</strong> AWS with SOC 2 Type II compliance</li>
-                <li><strong>Backups:</strong> Automatic daily backups with 30-day retention</li>
-                <li><strong>Monitoring:</strong> 24/7 security monitoring and threat detection</li>
-              </ul>
-              <p>Read our full <a href="/security">Security Policy</a> for details.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>Do you support two-factor authentication (2FA)?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Yes! We strongly recommend enabling 2FA for all accounts. We support:</p>
-              <ul>
-                <li>Authenticator apps (Google Authenticator, Authy, etc.)</li>
-                <li>SMS verification</li>
-                <li>Hardware security keys (YubiKey, etc.)</li>
-              </ul>
-              <p>Enable 2FA in Settings → Security → Two-Factor Authentication.</p>
-            </div>
-          </details>
-          
-          <details class="faq-item">
-            <summary>
-              <h3>Are you GDPR compliant?</h3>
-              <span class="faq-icon" aria-hidden="true">+</span>
-            </summary>
-            <div class="faq-answer">
-              <p>Yes, we are fully GDPR compliant. We provide:</p>
-              <ul>
-                <li>Data portability (export your data anytime)</li>
-                <li>Right to deletion (delete your account and data)</li>
-                <li>Data processing agreements (DPA) for enterprise customers</li>
-                <li>Transparent privacy practices</li>
-              </ul>
-              <p>Read our <a href="/privacy">Privacy Policy</a> for complete details.</p>
-            </div>
-          </details>
-        </article>
-      </div>
-    </section>
-    
-    <section class="faq-help-section">
-      <div class="container">
-        <h2>Still Need Help?</h2>
-        <p>Can't find the answer you're looking for? Our support team is here to help.</p>
-        
-        <div class="help-options">
-          <div class="help-option">
-            <h3>Contact Support</h3>
-            <p>Email us at support@example.com</p>
-            <a href="/contact" class="btn btn-outline">Contact Us</a>
-          </div>
-          
-          <div class="help-option">
-            <h3>Help Center</h3>
-            <p>Browse guides and tutorials</p>
-            <a href="/help" class="btn btn-outline">Visit Help Center</a>
-          </div>
-          
-          <div class="help-option">
-            <h3>Live Chat</h3>
-            <p>Chat with us Mon-Fri 9am-6pm EST</p>
-            <button class="btn btn-primary" onclick="startChat()">Start Chat</button>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Company</h3>
-          <p>Building innovative solutions</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/updates">Updates</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Support</h3>
-          <ul>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/press">Press</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Company Name. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="faq.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-login.html b/skills/html-coder/assets/util-login.html
deleted file mode 100644
index de04d79f4..000000000
--- a/skills/html-coder/assets/util-login.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Sign in to your account to access your dashboard, settings, and personalized features.">
-  <meta name="robots" content="noindex, nofollow">
-  <title>Sign In | Your Account</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <main id="main" class="auth-page">
-    <div class="auth-container">
-      <div class="auth-branding">
-        <a href="/" class="logo-link">
-          <img src="logo.svg" alt="Company Logo" width="150" height="50" loading="eager">
-        </a>
-      </div>
-      
-      <div class="auth-card">
-        <h1>Welcome back</h1>
-        <p class="auth-subtitle">Sign in to your account to continue</p>
-        
-        <form class="auth-form" action="/login" method="POST">
-          <div class="form-group">
-            <label for="email">Email Address</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email" 
-              placeholder="you@example.com"
-              required 
-              autocomplete="email"
-              autofocus>
-          </div>
-          
-          <div class="form-group">
-            <div class="label-with-link">
-              <label for="password">Password</label>
-              <a href="/forgot-password" class="link-small">Forgot password?</a>
-            </div>
-            <input 
-              type="password" 
-              id="password" 
-              name="password" 
-              placeholder="Enter your password"
-              required 
-              autocomplete="current-password"
-              minlength="8">
-          </div>
-          
-          <div class="form-group-checkbox">
-            <input type="checkbox" id="remember" name="remember" value="yes">
-            <label for="remember">Remember me for 30 days</label>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large btn-full-width">Sign In</button>
-        </form>
-        
-        <div class="divider">
-          <span>Or continue with</span>
-        </div>
-        
-        <div class="social-auth-buttons">
-          <button type="button" class="btn btn-outline btn-social" onclick="loginWithGoogle()">
-            <img src="google-icon.svg" alt="" width="20" height="20" loading="lazy">
-            <span>Google</span>
-          </button>
-          
-          <button type="button" class="btn btn-outline btn-social" onclick="loginWithGithub()">
-            <img src="github-icon.svg" alt="" width="20" height="20" loading="lazy">
-            <span>GitHub</span>
-          </button>
-        </div>
-        
-        <p class="auth-footer-text">
-          Don't have an account? 
-          <a href="/signup">Sign up</a>
-        </p>
-      </div>
-      
-      <footer class="auth-footer">
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Service</a>
-          <a href="/help">Help Center</a>
-        </nav>
-      </footer>
-    </div>
-  </main>
-  
-  <script src="auth.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-pricing.html b/skills/html-coder/assets/util-pricing.html
deleted file mode 100644
index daad76ec3..000000000
--- a/skills/html-coder/assets/util-pricing.html
+++ /dev/null
@@ -1,346 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Simple, transparent pricing plans for teams of all sizes. Choose the plan that fits your needs with flexible monthly or annual billing.">
-  <title>Pricing - Choose Your Plan</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Company</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/products">Products</a></li>
-          <li><a href="/pricing" aria-current="page">Pricing</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/contact">Contact</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/login" class="btn-link">Sign In</a>
-          <a href="/signup" class="btn btn-primary">Get Started</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <section class="pricing-hero">
-      <div class="container">
-        <h1>Simple, Transparent Pricing</h1>
-        <p class="hero-subtitle">Choose the plan that fits your needs. No hidden fees. Cancel anytime.</p>
-        
-        <div class="billing-toggle">
-          <span class="toggle-label">Monthly</span>
-          <button 
-            type="button" 
-            class="toggle-switch" 
-            role="switch" 
-            aria-checked="false" 
-            aria-label="Switch to annual billing"
-            onclick="toggleBilling(this)">
-            <span class="toggle-slider"></span>
-          </button>
-          <span class="toggle-label">Annual<span class="save-badge">Save 20%</span></span>
-        </div>
-      </div>
-    </section>
-    
-    <section class="pricing-plans-section">
-      <div class="container">
-        <div class="pricing-grid">
-          <article class="pricing-card">
-            <div class="pricing-header">
-              <h2>Starter</h2>
-              <p class="pricing-description">Perfect for individuals and small teams getting started</p>
-            </div>
-            
-            <div class="pricing-price">
-              <span class="price-amount" data-monthly="$9" data-annual="$7.20">$9</span>
-              <span class="price-period">per user/month</span>
-            </div>
-            
-            <a href="/signup?plan=starter" class="btn btn-outline btn-large btn-full-width">Start Free Trial</a>
-            
-            <div class="pricing-features">
-              <h3>What's included:</h3>
-              <ul>
-                <li>✓ Up to 5 team members</li>
-                <li>✓ 10 projects</li>
-                <li>✓ 10GB storage</li>
-                <li>✓ Basic reporting</li>
-                <li>✓ Email support</li>
-                <li>✓ Mobile apps</li>
-                <li>✓ 2-factor authentication</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="pricing-card featured">
-            <div class="popular-badge">Most Popular</div>
-            <div class="pricing-header">
-              <h2>Professional</h2>
-              <p class="pricing-description">For growing teams that need more power and flexibility</p>
-            </div>
-            
-            <div class="pricing-price">
-              <span class="price-amount" data-monthly="$29" data-annual="$23.20">$29</span>
-              <span class="price-period">per user/month</span>
-            </div>
-            
-            <a href="/signup?plan=professional" class="btn btn-primary btn-large btn-full-width">Start Free Trial</a>
-            
-            <div class="pricing-features">
-              <h3>Everything in Starter, plus:</h3>
-              <ul>
-                <li>✓ Unlimited team members</li>
-                <li>✓ Unlimited projects</li>
-                <li>✓ 100GB storage per user</li>
-                <li>✓ Advanced reporting & analytics</li>
-                <li>✓ Priority email & chat support</li>
-                <li>✓ Custom fields & workflows</li>
-                <li>✓ Integrations (50+ apps)</li>
-                <li>✓ Advanced permissions</li>
-                <li>✓ Activity logs & audit trails</li>
-              </ul>
-            </div>
-          </article>
-          
-          <article class="pricing-card">
-            <div class="pricing-header">
-              <h2>Enterprise</h2>
-              <p class="pricing-description">Advanced features and support for large organizations</p>
-            </div>
-            
-            <div class="pricing-price">
-              <span class="price-amount">Custom</span>
-            </div>
-            
-            <a href="/contact-sales" class="btn btn-outline btn-large btn-full-width">Contact Sales</a>
-            
-            <div class="pricing-features">
-              <h3>Everything in Professional, plus:</h3>
-              <ul>
-                <li>✓ Unlimited storage</li>
-                <li>✓ Dedicated account manager</li>
-                <li>✓ 24/7 phone support</li>
-                <li>✓ 99.9% uptime SLA</li>
-                <li>✓ SSO & SAML</li>
-                <li>✓ Advanced security controls</li>
-                <li>✓ Custom integrations</li>
-                <li>✓ On-premise deployment option</li>
-                <li>✓ Training & onboarding</li>
-              </ul>
-            </div>
-          </article>
-        </div>
-        
-        <div class="pricing-trial-note">
-          <p>All plans include a <strong>14-day free trial</strong>. No credit card required.</p>
-        </div>
-      </div>
-    </section>
-    
-    <section class="comparison-table-section">
-      <div class="container">
-        <h2>Compare Plans</h2>
-        
-        <div class="comparison-table-wrapper">
-          <table class="comparison-table">
-            <thead>
-              <tr>
-                <th scope="col">Features</th>
-                <th scope="col">Starter</th>
-                <th scope="col">Professional</th>
-                <th scope="col">Enterprise</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">Team members</th>
-                <td>Up to 5</td>
-                <td>Unlimited</td>
-                <td>Unlimited</td>
-              </tr>
-              <tr>
-                <th scope="row">Projects</th>
-                <td>10</td>
-                <td>Unlimited</td>
-                <td>Unlimited</td>
-              </tr>
-              <tr>
-                <th scope="row">Storage</th>
-                <td>10GB total</td>
-                <td>100GB per user</td>
-                <td>Unlimited</td>
-              </tr>
-              <tr>
-                <th scope="row">Integrations</th>
-                <td>Basic (10 apps)</td>
-                <td>Advanced (50+ apps)</td>
-                <td>Custom + API access</td>
-              </tr>
-              <tr>
-                <th scope="row">Reporting</th>
-                <td>Basic</td>
-                <td>Advanced analytics</td>
-                <td>Custom reports</td>
-              </tr>
-              <tr>
-                <th scope="row">Support</th>
-                <td>Email</td>
-                <td>Email & chat (priority)</td>
-                <td>24/7 phone + dedicated manager</td>
-              </tr>
-              <tr>
-                <th scope="row">2FA / Security</th>
-                <td>✓</td>
-                <td>✓</td>
-                <td>✓ Advanced security</td>
-              </tr>
-              <tr>
-                <th scope="row">Activity logs</th>
-                <td>30 days</td>
-                <td>1 year</td>
-                <td>Unlimited</td>
-              </tr>
-              <tr>
-                <th scope="row">SSO / SAML</th>
-                <td>—</td>
-                <td>—</td>
-                <td>✓</td>
-              </tr>
-              <tr>
-                <th scope="row">SLA</th>
-                <td>—</td>
-                <td>99% uptime</td>
-                <td>99.9% uptime guaranteed</td>
-              </tr>
-              <tr>
-                <th scope="row">API access</th>
-                <td>Read-only</td>
-                <td>Full access</td>
-                <td>Full + custom webhooks</td>
-              </tr>
-              <tr>
-                <th scope="row">Training</th>
-                <td>Documentation</td>
-                <td>Webinars</td>
-                <td>Personalized onboarding</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </section>
-    
-    <section class="pricing-faq-section">
-      <div class="container">
-        <h2>Frequently Asked Questions</h2>
-        
-        <div class="faq-grid">
-          <article class="faq-item">
-            <h3>Can I change plans later?</h3>
-            <p>Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>What payment methods do you accept?</h3>
-            <p>We accept all major credit cards (Visa, Mastercard, American Express) and PayPal. Enterprise customers can pay by invoice.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>Is there a long-term contract?</h3>
-            <p>No. All plans are month-to-month or annual (for a discount). You can cancel anytime with no penalties.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>What happens when I reach my limit?</h3>
-            <p>We'll notify you when you're approaching your limits. You can upgrade your plan or remove inactive users/projects.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>Do you offer discounts for nonprofits?</h3>
-            <p>Yes! We offer 50% off for registered nonprofits and educational institutions. Contact sales for details.</p>
-          </article>
-          
-          <article class="faq-item">
-            <h3>Is my data secure?</h3>
-            <p>Absolutely. We use bank-level encryption, regular security audits, and are SOC 2 Type II certified. Your data is backed up daily.</p>
-          </article>
-        </div>
-        
-        <div class="faq-cta">
-          <p>Still have questions?</p>
-          <a href="/contact" class="btn btn-outline">Contact Sales</a>
-          <a href="/faq" class="btn-link">View All FAQs</a>
-        </div>
-      </div>
-    </section>
-    
-    <section class="pricing-cta-section">
-      <div class="container">
-        <h2>Ready to Get Started?</h2>
-        <p>Join thousands of teams using our platform</p>
-        <a href="/signup" class="btn btn-primary btn-large">Start Your Free Trial</a>
-        <p class="cta-note"><small>No credit card required • 14-day free trial • Cancel anytime</small></p>
-      </div>
-    </section>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Company</h3>
-          <p>Building innovative solutions</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/updates">Updates</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Support</h3>
-          <ul>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Company</h3>
-          <ul>
-            <li><a href="/about">About</a></li>
-            <li><a href="/careers">Careers</a></li>
-            <li><a href="/press">Press</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Company Name. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-  
-  <script src="pricing.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-privacy.html b/skills/html-coder/assets/util-privacy.html
deleted file mode 100644
index 5410a08ee..000000000
--- a/skills/html-coder/assets/util-privacy.html
+++ /dev/null
@@ -1,448 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Privacy Policy for our service. Learn how we collect, use, protect, and share your personal information.">
-  <meta name="robots" content="noindex, nofollow">
-  <title>Privacy Policy</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Company</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/products">Products</a></li>
-          <li><a href="/pricing">Pricing</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/contact">Contact</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/login" class="btn-link">Sign In</a>
-          <a href="/signup" class="btn btn-primary">Get Started</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <article class="legal-document">
-      <div class="container">
-        <header class="legal-header">
-          <h1>Privacy Policy</h1>
-          <p class="legal-meta">Last updated: <time datetime="2026-03-01">March 1, 2026</time></p>
-        </header>
-        
-        <nav class="legal-toc" aria-label="Table of contents">
-          <h2>Table of Contents</h2>
-          <ol>
-            <li><a href="#introduction">Introduction</a></li>
-            <li><a href="#information-collection">Information We Collect</a></li>
-            <li><a href="#information-use">How We Use Your Information</a></li>
-            <li><a href="#information-sharing">How We Share Your Information</a></li>
-            <li><a href="#data-retention">Data Retention</a></li>
-            <li><a href="#security">Data Security</a></li>
-            <li><a href="#cookies">Cookies and Tracking</a></li>
-            <li><a href="#your-rights">Your Privacy Rights</a></li>
-            <li><a href="#children">Children's Privacy</a></li>
-            <li><a href="#international">International Data Transfers</a></li>
-            <li><a href="#changes">Changes to This Policy</a></li>
-            <li><a href="#contact">Contact Us</a></li>
-          </ol>
-        </nav>
-        
-        <section class="legal-section" id="introduction">
-          <h2>1. Introduction</h2>
-          
-          <p>Welcome to Company Name. We respect your privacy and are committed to protecting your personal information. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our website, mobile application, and services (collectively, the "Service").</p>
-          
-          <p>By using the Service, you agree to the collection and use of information in accordance with this Privacy Policy. If you do not agree with this policy, please do not use the Service.</p>
-        </section>
-        
-        <section class="legal-section" id="information-collection">
-          <h2>2. Information We Collect</h2>
-          
-          <h3>2.1 Information You Provide to Us</h3>
-          
-          <p><strong>Account Information:</strong> When you register for an account, we collect:</p>
-          <ul>
-            <li>Name and email address</li>
-            <li>Password (encrypted)</li>
-            <li>Company name and job title (optional)</li>
-            <li>Profile picture (optional)</li>
-          </ul>
-          
-          <p><strong>Payment Information:</strong> When you make a purchase, we collect:</p>
-          <ul>
-            <li>Credit card information (processed securely by our payment processor)</li>
-            <li>Billing address</li>
-            <li>Transaction history</li>
-          </ul>
-          
-          <p><strong>User Content:</strong> We collect and store the content you create, upload, or share through the Service, including:</p>
-          <ul>
-            <li>Projects, tasks, and notes</li>
-            <li>Files and documents you upload</li>
-            <li>Comments and messages</li>
-            <li>Team and workspace data</li>
-          </ul>
-          
-          <p><strong>Communications:</strong> If you contact us, we may collect:</p>
-          <ul>
-            <li>Your email address and name</li>
-            <li>The content of your message</li>
-            <li>Support ticket information</li>
-          </ul>
-          
-          <h3>2.2 Information Collected Automatically</h3>
-          
-          <p><strong>Usage Data:</strong> We automatically collect information about how you use the Service:</p>
-          <ul>
-            <li>Pages viewed and features used</li>
-            <li>Time spent on the Service</li>
-            <li>Links clicked and search queries</li>
-            <li>Actions taken within the Service</li>
-          </ul>
-          
-          <p><strong>Device Information:</strong> We collect information about your device:</p>
-          <ul>
-            <li>IP address</li>
-            <li>Browser type and version</li>
-            <li>Operating system</li>
-            <li>Device identifiers</li>
-            <li>Mobile network information</li>
-          </ul>
-          
-          <p><strong>Location Data:</strong> We may collect approximate location information based on your IP address.</p>
-          
-          <h3>2.3 Information from Third Parties</h3>
-          
-          <p>We may receive information about you from third parties, such as:</p>
-          <ul>
-            <li>Social media platforms (if you connect your accounts)</li>
-            <li>Authentication services (Google, GitHub, etc.)</li>
-            <li>Analytics providers</li>
-            <li>Marketing partners</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="information-use">
-          <h2>3. How We Use Your Information</h2>
-          
-          <p>We use your information for the following purposes:</p>
-          
-          <h3>3.1 Provide and Improve the Service</h3>
-          <ul>
-            <li>Create and manage your account</li>
-            <li>Process transactions and send transaction notifications</li>
-            <li>Provide customer support</li>
-            <li>Develop new features and improve existing ones</li>
-            <li>Personalize your experience</li>
-          </ul>
-          
-          <h3>3.2 Communication</h3>
-          <ul>
-            <li>Send service updates and notifications</li>
-            <li>Respond to your inquiries</li>
-            <li>Send marketing communications (with your consent)</li>
-            <li>Conduct surveys and gather feedback</li>
-          </ul>
-          
-          <h3>3.3 Security and Compliance</h3>
-          <ul>
-            <li>Detect and prevent fraud, abuse, and security incidents</li>
-            <li>Debug and fix technical issues</li>
-            <li>Comply with legal obligations</li>
-            <li>Enforce our Terms of Service</li>
-          </ul>
-          
-          <h3>3.4 Analytics and Research</h3>
-          <ul>
-            <li>Analyze usage patterns and trends</li>
-            <li>Measure the effectiveness of marketing campaigns</li>
-            <li>Conduct research to improve our Service</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="information-sharing">
-          <h2>4. How We Share Your Information</h2>
-          
-          <p>We do not sell your personal information. We may share your information in the following circumstances:</p>
-          
-          <h3>4.1 With Your Consent</h3>
-          <p>We may share your information when you give us explicit permission to do so.</p>
-          
-          <h3>4.2 Service Providers</h3>
-          <p>We share information with third-party service providers who perform services on our behalf, including:</p>
-          <ul>
-            <li><strong>Cloud hosting:</strong> Amazon Web Services (AWS)</li>
-            <li><strong>Payment processing:</strong> Stripe</li>
-            <li><strong>Email delivery:</strong> SendGrid</li>
-            <li><strong>Analytics:</strong> Google Analytics, Mixpanel</li>
-            <li><strong>Customer support:</strong> Zendesk, Intercom</li>
-          </ul>
-          <p>These providers are contractually obligated to protect your information and use it only for the purposes we specify.</p>
-          
-          <h3>4.3 Business Transfers</h3>
-          <p>If we are involved in a merger, acquisition, or sale of assets, your information may be transferred as part of that transaction. We will notify you before your information becomes subject to a different privacy policy.</p>
-          
-          <h3>4.4 Legal Requirements</h3>
-          <p>We may disclose your information if required by law or in response to:</p>
-          <ul>
-            <li>Court orders or subpoenas</li>
-            <li>Law enforcement requests</li>
-            <li>Legal processes or government investigations</li>
-          </ul>
-          
-          <h3>4.5 Protection of Rights</h3>
-          <p>We may disclose information to:</p>
-          <ul>
-            <li>Protect our rights, property, or safety</li>
-            <li>Protect the rights, property, or safety of our users or others</li>
-            <li>Prevent fraud or abuse</li>
-            <li>Enforce our Terms of Service</li>
-          </ul>
-          
-          <h3>4.6 Aggregated Data</h3>
-          <p>We may share aggregated or de-identified information that cannot reasonably be used to identify you.</p>
-        </section>
-        
-        <section class="legal-section" id="data-retention">
-          <h2>5. Data Retention</h2>
-          
-          <p>We retain your personal information for as long as necessary to fulfill the purposes outlined in this Privacy Policy, unless a longer retention period is required or permitted by law.</p>
-          
-          <p><strong>Account Data:</strong> We retain your account information for as long as your account is active or as needed to provide you services.</p>
-          
-          <p><strong>After Account Deletion:</strong> When you delete your account, we will delete your personal information within 30 days, except where we are required to retain it for legal or compliance purposes.</p>
-          
-          <p><strong>Backup Data:</strong> Your information may remain in our backup systems for up to 90 days after deletion before being permanently removed.</p>
-        </section>
-        
-        <section class="legal-section" id="security">
-          <h2>6. Data Security</h2>
-          
-          <p>We implement appropriate technical and organizational measures to protect your information against unauthorized access, alteration, disclosure, or destruction.</p>
-          
-          <h3>6.1 Security Measures</h3>
-          <ul>
-            <li><strong>Encryption:</strong> Data in transit is encrypted using SSL/TLS; data at rest is encrypted using AES-256</li>
-            <li><strong>Access Controls:</strong> Strict access controls limit who can access your information</li>
-            <li><strong>Monitoring:</strong> 24/7 security monitoring and threat detection</li>
-            <li><strong>Regular Audits:</strong> Regular security audits and penetration testing</li>
-            <li><strong>Employee Training:</strong> Regular security training for all employees</li>
-          </ul>
-          
-          <h3>6.2 Your Responsibility</h3>
-          <p>You are responsible for maintaining the security of your account credentials. Use a strong, unique password and enable two-factor authentication.</p>
-          
-          <h3>6.3 No Guarantee</h3>
-          <p>While we strive to protect your information, no method of transmission over the internet or electronic storage is 100% secure. We cannot guarantee absolute security.</p>
-        </section>
-        
-        <section class="legal-section" id="cookies">
-          <h2>7. Cookies and Tracking Technologies</h2>
-          
-          <p>We use cookies and similar tracking technologies to collect information and improve our Service.</p>
-          
-          <h3>7.1 What Are Cookies?</h3>
-          <p>Cookies are small text files stored on your device by your web browser. They help us recognize you, remember your preferences, and understand how you use our Service.</p>
-          
-          <h3>7.2 Types of Cookies We Use</h3>
-          
-          <p><strong>Essential Cookies:</strong> Required for the Service to function. These include:</p>
-          <ul>
-            <li>Authentication and session management</li>
-            <li>Security and fraud prevention</li>
-          </ul>
-          
-          <p><strong>Functional Cookies:</strong> Enable enhanced functionality:</p>
-          <ul>
-            <li>Remember your preferences</li>
-            <li>Save your language selection</li>
-          </ul>
-          
-          <p><strong>Analytics Cookies:</strong> Help us understand how you use our Service:</p>
-          <ul>
-            <li>Google Analytics (measures traffic and usage patterns)</li>
-            <li>Mixpanel (tracks user behavior and feature usage)</li>
-          </ul>
-          
-          <p><strong>Advertising Cookies:</strong> Used to deliver relevant ads:</p>
-          <ul>
-            <li>Google Ads</li>
-            <li>Facebook Pixel</li>
-          </ul>
-          
-          <h3>7.3 Managing Cookies</h3>
-          <p>You can control cookies through your browser settings. Most browsers allow you to:</p>
-          <ul>
-            <li>View and delete cookies</li>
-            <li>Block third-party cookies</li>
-            <li>Block all cookies</li>
-            <li>Clear cookies when you close your browser</li>
-          </ul>
-          <p>Note that blocking cookies may affect your ability to use certain features of the Service.</p>
-          
-          <h3>7.4 Do Not Track</h3>
-          <p>Some browsers have a "Do Not Track" feature. We do not currently respond to Do Not Track signals.</p>
-        </section>
-        
-        <section class="legal-section" id="your-rights">
-          <h2>8. Your Privacy Rights</h2>
-          
-          <p>Depending on your location, you may have certain rights regarding your personal information:</p>
-          
-          <h3>8.1 Access and Portability</h3>
-          <p>You have the right to:</p>
-          <ul>
-            <li>Access your personal information</li>
-            <li>Request a copy of your data in a portable format</li>
-          </ul>
-          
-          <h3>8.2 Correction and Update</h3>
-          <p>You can update your account information at any time through your account settings or by contacting us.</p>
-          
-          <h3>8.3 Deletion</h3>
-          <p>You have the right to request deletion of your personal information. You can delete your account in your account settings or contact us.</p>
-          
-          <h3>8.4 Objection and Restriction</h3>
-          <p>You may object to certain processing of your information or request that we restrict processing in certain circumstances.</p>
-          
-          <h3>8.5 Withdraw Consent</h3>
-          <p>If processing is based on your consent, you have the right to withdraw consent at any time.</p>
-          
-          <h3>8.6 Opt-Out of Marketing</h3>
-          <p>You can opt out of marketing emails by clicking the "unsubscribe" link in any marketing email or updating your email preferences in your account settings.</p>
-          
-          <h3>8.7 California Privacy Rights (CCPA)</h3>
-          <p>If you are a California resident, you have additional rights under the California Consumer Privacy Act (CCPA):</p>
-          <ul>
-            <li>Right to know what personal information is collected, used, and shared</li>
-            <li>Right to delete personal information</li>
-            <li>Right to opt-out of the sale of personal information (we do not sell personal information)</li>
-            <li>Right to non-discrimination for exercising your CCPA rights</li>
-          </ul>
-          
-          <h3>8.8 European Privacy Rights (GDPR)</h3>
-          <p>If you are in the European Economic Area (EEA), you have rights under the General Data Protection Regulation (GDPR), including all the rights listed above.</p>
-          
-          <h3>8.9 How to Exercise Your Rights</h3>
-          <p>To exercise any of these rights, please contact us at <a href="mailto:privacy@example.com">privacy@example.com</a>. We will respond to your request within 30 days.</p>
-        </section>
-        
-        <section class="legal-section" id="children">
-          <h2>9. Children's Privacy</h2>
-          
-          <p>Our Service is not intended for children under 16 years of age. We do not knowingly collect personal information from children under 16.</p>
-          
-          <p>If you are a parent or guardian and believe that your child has provided us with personal information, please contact us. We will delete such information from our systems.</p>
-        </section>
-        
-        <section class="legal-section" id="international">
-          <h2>10. International Data Transfers</h2>
-          
-          <p>Your information may be transferred to and processed in countries other than your country of residence. These countries may have data protection laws that are different from the laws of your country.</p>
-          
-          <p>We use appropriate safeguards to protect your information when it is transferred internationally, including:</p>
-          <ul>
-            <li>Standard Contractual Clauses approved by the European Commission</li>
-            <li>Ensuring service providers are certified under the EU-U.S. Data Privacy Framework</li>
-            <li>Implementing appropriate technical and organizational measures</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="changes">
-          <h2>11. Changes to This Privacy Policy</h2>
-          
-          <p>We may update this Privacy Policy from time to time. We will notify you of any material changes by:</p>
-          <ul>
-            <li>Posting the new Privacy Policy on this page</li>
-            <li>Updating the "Last updated" date</li>
-            <li>Sending you an email notification (if you have an account)</li>
-          </ul>
-          
-          <p>Your continued use of the Service after changes become effective constitutes your acceptance of the revised Privacy Policy.</p>
-          
-          <p>We encourage you to review this Privacy Policy periodically to stay informed about how we protect your information.</p>
-        </section>
-        
-        <section class="legal-section" id="contact">
-          <h2>12. Contact Us</h2>
-          
-          <p>If you have questions or concerns about this Privacy Policy or our privacy practices, please contact us:</p>
-          
-          <address>
-            <p>
-              <strong>Privacy Team</strong><br>
-              Company Name, Inc.<br>
-              123 Main Street, Suite 500<br>
-              San Francisco, CA 94105<br>
-              United States
-            </p>
-            <p>
-              Email: <a href="mailto:privacy@example.com">privacy@example.com</a><br>
-              Phone: <a href="tel:+18005551234">1-800-555-1234</a>
-            </p>
-          </address>
-          
-          <p><strong>Data Protection Officer:</strong> If you are in the EEA, you can contact our Data Protection Officer at <a href="mailto:dpo@example.com">dpo@example.com</a>.</p>
-        </section>
-      </div>
-    </article>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Company</h3>
-          <p>Building innovative solutions</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/updates">Updates</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Support</h3>
-          <ul>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Legal</h3>
-          <ul>
-            <li><a href="/privacy">Privacy Policy</a></li>
-            <li><a href="/terms">Terms of Service</a></li>
-            <li><a href="/cookies">Cookie Policy</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Company Name. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-signup.html b/skills/html-coder/assets/util-signup.html
deleted file mode 100644
index d02f9e1e7..000000000
--- a/skills/html-coder/assets/util-signup.html
+++ /dev/null
@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Create a new account to get started with our platform. Free signup with email or social login.">
-  <meta name="robots" content="noindex, nofollow">
-  <title>Create Your Account | Sign Up</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <main id="main" class="auth-page">
-    <div class="auth-container">
-      <div class="auth-branding">
-        <a href="/" class="logo-link">
-          <img src="logo.svg" alt="Company Logo" width="150" height="50" loading="eager">
-        </a>
-      </div>
-      
-      <div class="auth-card">
-        <h1>Create your account</h1>
-        <p class="auth-subtitle">Get started with your free account</p>
-        
-        <div class="social-auth-buttons">
-          <button type="button" class="btn btn-outline btn-social" onclick="signupWithGoogle()">
-            <img src="google-icon.svg" alt="" width="20" height="20" loading="lazy">
-            <span>Continue with Google</span>
-          </button>
-          
-          <button type="button" class="btn btn-outline btn-social" onclick="signupWithGithub()">
-            <img src="github-icon.svg" alt="" width="20" height="20" loading="lazy">
-            <span>Continue with GitHub</span>
-          </button>
-        </div>
-        
-        <div class="divider">
-          <span>Or sign up with email</span>
-        </div>
-        
-        <form class="auth-form" action="/signup" method="POST">
-          <div class="form-row">
-            <div class="form-group">
-              <label for="first-name">First Name</label>
-              <input 
-                type="text" 
-                id="first-name" 
-                name="first_name" 
-                placeholder="John"
-                required 
-                autocomplete="given-name"
-                autofocus>
-            </div>
-            
-            <div class="form-group">
-              <label for="last-name">Last Name</label>
-              <input 
-                type="text" 
-                id="last-name" 
-                name="last_name" 
-                placeholder="Doe"
-                required 
-                autocomplete="family-name">
-            </div>
-          </div>
-          
-          <div class="form-group">
-            <label for="email">Email Address</label>
-            <input 
-              type="email" 
-              id="email" 
-              name="email" 
-              placeholder="you@example.com"
-              required 
-              autocomplete="email">
-          </div>
-          
-          <div class="form-group">
-            <label for="password">Password</label>
-            <input 
-              type="password" 
-              id="password" 
-              name="password" 
-              placeholder="Create a strong password"
-              required 
-              autocomplete="new-password"
-              minlength="8"
-              aria-describedby="password-requirements">
-            <small id="password-requirements" class="form-help-text">
-              Minimum 8 characters, including uppercase, lowercase, and number
-            </small>
-          </div>
-          
-          <div class="form-group">
-            <label for="confirm-password">Confirm Password</label>
-            <input 
-              type="password" 
-              id="confirm-password" 
-              name="confirm_password" 
-              placeholder="Re-enter your password"
-              required 
-              autocomplete="new-password"
-              minlength="8">
-          </div>
-          
-          <div class="form-group-checkbox">
-            <input type="checkbox" id="terms" name="terms" value="accepted" required>
-            <label for="terms">
-              I agree to the <a href="/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> and <a href="/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
-            </label>
-          </div>
-          
-          <div class="form-group-checkbox">
-            <input type="checkbox" id="newsletter" name="newsletter" value="yes">
-            <label for="newsletter">
-              Send me product updates and tips (optional)
-            </label>
-          </div>
-          
-          <button type="submit" class="btn btn-primary btn-large btn-full-width">Create Account</button>
-        </form>
-        
-        <p class="auth-footer-text">
-          Already have an account? 
-          <a href="/login">Sign in</a>
-        </p>
-      </div>
-      
-      <footer class="auth-footer">
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy Policy</a>
-          <a href="/terms">Terms of Service</a>
-          <a href="/help">Help Center</a>
-        </nav>
-      </footer>
-    </div>
-  </main>
-  
-  <script src="auth.js" defer></script>
-</body>
-</html>
diff --git a/skills/html-coder/assets/util-terms.html b/skills/html-coder/assets/util-terms.html
deleted file mode 100644
index cddbaf381..000000000
--- a/skills/html-coder/assets/util-terms.html
+++ /dev/null
@@ -1,331 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Terms of Service for using our platform. Read our terms and conditions for service usage, user responsibilities, and legal agreements.">
-  <meta name="robots" content="noindex, nofollow">
-  <title>Terms of Service</title>
-  <link rel="icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <a href="#main" class="skip-link">Skip to main content</a>
-  
-  <header class="header">
-    <div class="container">
-      <nav class="navbar" aria-label="Main navigation">
-        <a href="/" class="logo">Company</a>
-        
-        <ul class="nav-menu">
-          <li><a href="/products">Products</a></li>
-          <li><a href="/pricing">Pricing</a></li>
-          <li><a href="/about">About</a></li>
-          <li><a href="/contact">Contact</a></li>
-        </ul>
-        
-        <div class="nav-actions">
-          <a href="/login" class="btn-link">Sign In</a>
-          <a href="/signup" class="btn btn-primary">Get Started</a>
-        </div>
-      </nav>
-    </div>
-  </header>
-  
-  <main id="main">
-    <article class="legal-document">
-      <div class="container">
-        <header class="legal-header">
-          <h1>Terms of Service</h1>
-          <p class="legal-meta">Last updated: <time datetime="2026-03-01">March 1, 2026</time></p>
-        </header>
-        
-        <nav class="legal-toc" aria-label="Table of contents">
-          <h2>Table of Contents</h2>
-          <ol>
-            <li><a href="#acceptance">Acceptance of Terms</a></li>
-            <li><a href="#definitions">Definitions</a></li>
-            <li><a href="#account">Account Registration</a></li>
-            <li><a href="#use">Acceptable Use Policy</a></li>
-            <li><a href="#payment">Payment Terms</a></li>
-            <li><a href="#intellectual-property">Intellectual Property Rights</a></li>
-            <li><a href="#user-content">User Content</a></li>
-            <li><a href="#privacy">Privacy</a></li>
-            <li><a href="#termination">Termination</a></li>
-            <li><a href="#disclaimers">Disclaimers</a></li>
-            <li><a href="#limitation-liability">Limitation of Liability</a></li>
-            <li><a href="#indemnification">Indemnification</a></li>
-            <li><a href="#changes">Changes to Terms</a></li>
-            <li><a href="#governing-law">Governing Law</a></li>
-            <li><a href="#contact">Contact Information</a></li>
-          </ol>
-        </nav>
-        
-        <section class="legal-section" id="acceptance">
-          <h2>1. Acceptance of Terms</h2>
-          
-          <p>Welcome to our service. By accessing or using our website, mobile application, or any related services (collectively, the "Service"), you agree to be bound by these Terms of Service ("Terms").</p>
-          
-          <p>If you do not agree to these Terms, do not access or use the Service. If you are using the Service on behalf of an organization, you are agreeing to these Terms for that organization and representing that you have the authority to bind that organization to these Terms.</p>
-        </section>
-        
-        <section class="legal-section" id="definitions">
-          <h2>2. Definitions</h2>
-          
-          <p>For purposes of these Terms:</p>
-          
-          <ul>
-            <li><strong>"Company," "we," "us," or "our"</strong> refers to Company Name, Inc.</li>
-            <li><strong>"Service"</strong> refers to our website, applications, and related services.</li>
-            <li><strong>"User," "you," or "your"</strong> refers to the individual or entity using the Service.</li>
-            <li><strong>"Account"</strong> refers to your registered user account on the Service.</li>
-            <li><strong>"Content"</strong> refers to text, graphics, images, software, and other materials.</li>
-            <li><strong>"User Content"</strong> refers to Content that you submit, upload, or share through the Service.</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="account">
-          <h2>3. Account Registration</h2>
-          
-          <h3>3.1 Account Creation</h3>
-          <p>To use certain features of the Service, you must register for an account. You agree to provide accurate, current, and complete information during registration and to update such information to keep it accurate, current, and complete.</p>
-          
-          <h3>3.2 Account Security</h3>
-          <p>You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account. You agree to:</p>
-          <ul>
-            <li>Choose a strong password and keep it confidential</li>
-            <li>Notify us immediately of any unauthorized access to your account</li>
-            <li>Not share your account credentials with others</li>
-            <li>Log out of your account at the end of each session</li>
-          </ul>
-          
-          <h3>3.3 Account Eligibility</h3>
-          <p>You must be at least 16 years old to create an account. By creating an account, you represent that you meet this age requirement and that all information you provide is truthful and accurate.</p>
-        </section>
-        
-        <section class="legal-section" id="use">
-          <h2>4. Acceptable Use Policy</h2>
-          
-          <p>You agree to use the Service only for lawful purposes and in accordance with these Terms. You agree not to:</p>
-          
-          <ul>
-            <li>Violate any applicable laws or regulations</li>
-            <li>Infringe on intellectual property rights of others</li>
-            <li>Transmit viruses, malware, or other harmful code</li>
-            <li>Attempt to gain unauthorized access to the Service or other users' accounts</li>
-            <li>Use automated systems (bots, scrapers) without our written permission</li>
-            <li>Engage in any activity that interferes with or disrupts the Service</li>
-            <li>Harass, abuse, or harm other users</li>
-            <li>Impersonate any person or entity or misrepresent your affiliation</li>
-            <li>Collect or store personal data about other users without their consent</li>
-            <li>Use the Service to send spam, phishing attempts, or unsolicited communications</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="payment">
-          <h2>5. Payment Terms</h2>
-          
-          <h3>5.1 Billing</h3>
-          <p>Certain features of the Service require payment. You agree to pay all fees associated with your subscription plan. Fees are billed in advance on a monthly or annual basis and are non-refundable except as provided in Section 5.4.</p>
-          
-          <h3>5.2 Automatic Renewal</h3>
-          <p>Your subscription will automatically renew at the end of each billing period unless you cancel before the renewal date. You authorize us to charge your payment method on file for renewal fees.</p>
-          
-          <h3>5.3 Price Changes</h3>
-          <p>We may change our pricing at any time. Price changes will take effect at the start of the next billing cycle after we provide you with at least 30 days' notice.</p>
-          
-          <h3>5.4 Refund Policy</h3>
-          <p>We offer a 30-day money-back guarantee for new subscriptions. If you are not satisfied, contact us within 30 days of your initial payment for a full refund. After 30 days, payments are non-refundable.</p>
-          
-          <h3>5.5 Taxes</h3>
-          <p>All fees are exclusive of taxes. You are responsible for paying all applicable taxes associated with your use of the Service.</p>
-        </section>
-        
-        <section class="legal-section" id="intellectual-property">
-          <h2>6. Intellectual Property Rights</h2>
-          
-          <h3>6.1 Our Rights</h3>
-          <p>The Service and its original content, features, and functionality are owned by Company Name and are protected by international copyright, trademark, patent, trade secret, and other intellectual property laws.</p>
-          
-          <h3>6.2 License to Use</h3>
-          <p>Subject to these Terms, we grant you a limited, non-exclusive, non-transferable, revocable license to access and use the Service for your personal or internal business use.</p>
-          
-          <h3>6.3 Restrictions</h3>
-          <p>You may not:</p>
-          <ul>
-            <li>Copy, modify, or create derivative works of the Service</li>
-            <li>Reverse engineer, decompile, or disassemble any part of the Service</li>
-            <li>Remove or alter any copyright, trademark, or proprietary notices</li>
-            <li>Sell, rent, lease, sublicense, or transfer the Service to others</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="user-content">
-          <h2>7. User Content</h2>
-          
-          <h3>7.1 Ownership</h3>
-          <p>You retain all ownership rights to your User Content. By uploading User Content to the Service, you grant us a worldwide, non-exclusive, royalty-free license to use, store, reproduce, and display your User Content solely for the purpose of operating and providing the Service.</p>
-          
-          <h3>7.2 Responsibility</h3>
-          <p>You are solely responsible for your User Content. You represent and warrant that:</p>
-          <ul>
-            <li>You own or have the necessary rights to all User Content</li>
-            <li>Your User Content does not violate any third-party rights</li>
-            <li>Your User Content complies with these Terms and all applicable laws</li>
-          </ul>
-          
-          <h3>7.3 Content Removal</h3>
-          <p>We reserve the right to remove any User Content that violates these Terms or that we find objectionable, without notice.</p>
-        </section>
-        
-        <section class="legal-section" id="privacy">
-          <h2>8. Privacy</h2>
-          
-          <p>Your privacy is important to us. Our <a href="/privacy">Privacy Policy</a> explains how we collect, use, and protect your personal information. By using the Service, you agree to the collection and use of information in accordance with our Privacy Policy.</p>
-        </section>
-        
-        <section class="legal-section" id="termination">
-          <h2>9. Termination</h2>
-          
-          <h3>9.1 Termination by You</h3>
-          <p>You may terminate your account at any time by following the account deletion process in your account settings or by contacting us.</p>
-          
-          <h3>9.2 Termination by Us</h3>
-          <p>We may suspend or terminate your account immediately, without prior notice, if you breach these Terms or engage in conduct that we deem harmful to the Service or other users.</p>
-          
-          <h3>9.3 Effect of Termination</h3>
-          <p>Upon termination, your right to use the Service will immediately cease. We will delete your account and User Content in accordance with our data retention policies, except as required by law.</p>
-        </section>
-        
-        <section class="legal-section" id="disclaimers">
-          <h2>10. Disclaimers</h2>
-          
-          <p><strong>THE SERVICE IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.</strong></p>
-          
-          <p>We do not warrant that:</p>
-          <ul>
-            <li>The Service will be uninterrupted, secure, or error-free</li>
-            <li>Defects will be corrected</li>
-            <li>The Service is free of viruses or other harmful components</li>
-            <li>Results from using the Service will meet your requirements</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="limitation-liability">
-          <h2>11. Limitation of Liability</h2>
-          
-          <p><strong>TO THE MAXIMUM EXTENT PERMITTED BY LAW, IN NO EVENT SHALL COMPANY NAME BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS OR REVENUES, WHETHER INCURRED DIRECTLY OR INDIRECTLY, OR ANY LOSS OF DATA, USE, GOODWILL, OR OTHER INTANGIBLE LOSSES RESULTING FROM:</strong></p>
-          
-          <ul>
-            <li>Your use or inability to use the Service</li>
-            <li>Unauthorized access to or alteration of your data</li>
-            <li>Third-party conduct or content on the Service</li>
-            <li>Any other matter relating to the Service</li>
-          </ul>
-          
-          <p><strong>OUR TOTAL LIABILITY TO YOU FOR ALL CLAIMS ARISING OUT OF OR RELATING TO THESE TERMS OR THE SERVICE SHALL NOT EXCEED THE AMOUNT YOU PAID US IN THE TWELVE (12) MONTHS PRECEDING THE CLAIM, OR $100, WHICHEVER IS GREATER.</strong></p>
-        </section>
-        
-        <section class="legal-section" id="indemnification">
-          <h2>12. Indemnification</h2>
-          
-          <p>You agree to indemnify, defend, and hold harmless Company Name and its officers, directors, employees, and agents from any claims, liabilities, damages, losses, and expenses, including reasonable attorney fees, arising out of or in any way connected with:</p>
-          
-          <ul>
-            <li>Your access to or use of the Service</li>
-            <li>Your User Content</li>
-            <li>Your violation of these Terms</li>
-            <li>Your violation of any third-party rights</li>
-          </ul>
-        </section>
-        
-        <section class="legal-section" id="changes">
-          <h2>13. Changes to Terms</h2>
-          
-          <p>We reserve the right to modify these Terms at any time. We will notify you of material changes by posting the updated Terms on this page and updating the "Last updated" date.</p>
-          
-          <p>Your continued use of the Service after changes become effective constitutes your acceptance of the revised Terms. If you do not agree to the new Terms, you must stop using the Service.</p>
-        </section>
-        
-        <section class="legal-section" id="governing-law">
-          <h2>14. Governing Law and Dispute Resolution</h2>
-          
-          <h3>14.1 Governing Law</h3>
-          <p>These Terms shall be governed by and construed in accordance with the laws of the State of California, United States, without regard to its conflict of law provisions.</p>
-          
-          <h3>14.2 Dispute Resolution</h3>
-          <p>Any dispute arising out of or relating to these Terms or the Service shall be resolved through binding arbitration in accordance with the rules of the American Arbitration Association, except that either party may seek injunctive relief in court.</p>
-          
-          <h3>14.3 Class Action Waiver</h3>
-          <p>You agree that any proceedings to resolve disputes will be conducted on an individual basis and not in a class, consolidated, or representative action.</p>
-        </section>
-        
-        <section class="legal-section" id="contact">
-          <h2>15. Contact Information</h2>
-          
-          <p>If you have questions about these Terms, please contact us:</p>
-          
-          <address>
-            <p>
-              <strong>Company Name, Inc.</strong><br>
-              123 Main Street, Suite 500<br>
-              San Francisco, CA 94105<br>
-              United States
-            </p>
-            <p>
-              Email: <a href="mailto:legal@example.com">legal@example.com</a><br>
-              Phone: <a href="tel:+18005551234">1-800-555-1234</a>
-            </p>
-          </address>
-        </section>
-      </div>
-    </article>
-  </main>
-  
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-section">
-          <h3>Company</h3>
-          <p>Building innovative solutions</p>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Product</h3>
-          <ul>
-            <li><a href="/features">Features</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/updates">Updates</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Support</h3>
-          <ul>
-            <li><a href="/help">Help Center</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/contact">Contact</a></li>
-          </ul>
-        </div>
-        
-        <div class="footer-section">
-          <h3>Legal</h3>
-          <ul>
-            <li><a href="/privacy">Privacy Policy</a></li>
-            <li><a href="/terms">Terms of Service</a></li>
-            <li><a href="/cookies">Cookie Policy</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="footer-bottom">
-        <p>&copy; 2026 Company Name. All rights reserved.</p>
-        <nav aria-label="Legal">
-          <a href="/privacy">Privacy</a>
-          <a href="/terms">Terms</a>
-        </nav>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>
diff --git a/skills/html-coder/references/getting-started.md b/skills/html-coder/references/getting-started.md
deleted file mode 100644
index 261f8c2ec..000000000
--- a/skills/html-coder/references/getting-started.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# Getting Started with HTML
-
-This guide introduces HTML fundamentals and helps you create your first web pages.
-
-## What is HTML?
-
-HTML (HyperText Markup Language) is a markup language that uses elements to structure and define content on web pages. Elements consist of tags that wrap content to control how it displays and behaves.
-
-**Basic concept**: Unstructured text appears on one line. Adding HTML elements like `<p>` for paragraphs and `<ul>`/`<li>` for lists structures content appropriately.
-
-## Document Structure
-
-Every HTML document follows this basic structure:
-
-```html
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>My Page Title</title>
-  </head>
-  <body>
-    <!-- Your content here -->
-  </body>
-</html>
-```
-
-### Key Components
-
-- **`<!DOCTYPE html>`** - Required declaration that ensures browsers display the page correctly
-- **`<html>`** - Root element that wraps all content; includes `lang` attribute for language
-- **`<head>`** - Container for metadata (not visible on page): keywords, descriptions, CSS links, character sets
-- **`<meta charset="utf-8">`** - Sets character encoding to UTF-8 for international text support
-- **`<meta name="viewport">`** - Ensures responsive display on mobile devices
-- **`<title>`** - Page title shown in browser tab and bookmarks
-- **`<body>`** - Contains all visible content displayed to users
-
-## Essential HTML Elements
-
-### Headings
-
-Six heading levels organize content hierarchy:
-
-```html
-<h1>Main Title</h1>
-<h2>Section Heading</h2>
-<h3>Subsection</h3>
-<h4>Sub-subsection</h4>
-```
-
-Use `<h1>` for main titles, `<h2>`-`<h6>` for nested subsections. Don't skip levels.
-
-### Paragraphs
-
-Wrap text in paragraph tags:
-
-```html
-<p>This is a paragraph of text.</p>
-<p>This is another paragraph.</p>
-```
-
-### Lists
-
-**Unordered lists** (bullets) for items where order doesn't matter:
-
-```html
-<ul>
-  <li>First item</li>
-  <li>Second item</li>
-  <li>Third item</li>
-</ul>
-```
-
-**Ordered lists** (numbered) for sequential items:
-
-```html
-<ol>
-  <li>Step one</li>
-  <li>Step two</li>
-  <li>Step three</li>
-</ol>
-```
-
-### Links
-
-Create hyperlinks with the anchor element:
-
-```html
-<a href="https://example.com">Link Text</a>
-```
-
-- `href` attribute specifies the destination URL
-- Always include the protocol (`https://` or `http://`)
-- Link text should be descriptive
-
-### Images
-
-Embed images with proper attributes:
-
-```html
-<img src="images/photo.jpg" alt="Description of image" />
-```
-
-- `src` - Path to image file
-- `alt` - Alternative text for accessibility and when images don't load
-- Images are "empty elements" (no closing tag)
-- Alt text should meaningfully describe the image content
-
-### Nesting Elements
-
-Elements can contain other elements:
-
-```html
-<html>
-  <body>
-    <h1>My Heading</h1>
-    <p>My paragraph with <strong>bold text</strong>.</p>
-  </body>
-</html>
-```
-
-All elements must be properly nested - if you open element A, then B, you must close B before closing A.
-
-## HTML Syntax Rules
-
-1. **Tags**: Most elements have opening `<tag>` and closing `</tag>` tags
-2. **Empty elements**: Some elements like `<img>`, `<br>`, `<meta>` have no closing tag
-3. **Case insensitivity**: `<P>` and `<p>` are equivalent, but lowercase is standard practice
-4. **Attributes**: Provide additional information about elements (e.g., `href`, `src`, `alt`)
-5. **Comments**: Add notes with `<!-- comment text -->` - not displayed in browser
-
-## Creating Your First Page
-
-1. Create a new file named `index.html`
-2. Add the basic document structure
-3. Add a title in the `<head>`
-4. Add content in the `<body>`: headings, paragraphs, images, lists, links
-5. Open the file in a web browser to view
-
-## Best Practices
-
-- Always include `<!DOCTYPE html>` at the top
-- Use semantic elements that describe content meaning
-- Always close tags (except empty elements)
-- Use lowercase for tag names and attributes
-- Quote attribute values
-- Include `alt` text for all images
-- Use proper heading hierarchy
-- Validate your HTML regularly
-
-## Resources
-
-- [MDN: Creating Your First Website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content)
-- [MDN: Structuring Content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
-- [W3Schools: HTML Basics](https://www.w3schools.com/html/html_basic.asp)
-- [W3Schools: HTML Elements](https://www.w3schools.com/html/html_elements.asp)
diff --git a/skills/html-coder/references/glossary-global-attributes.md b/skills/html-coder/references/global-attributes.md
similarity index 100%
rename from skills/html-coder/references/glossary-global-attributes.md
rename to skills/html-coder/references/global-attributes.md
diff --git a/skills/html-coder/references/glossary-attributes.md b/skills/html-coder/references/glossary-attributes.md
deleted file mode 100644
index 370ed2df6..000000000
--- a/skills/html-coder/references/glossary-attributes.md
+++ /dev/null
@@ -1,527 +0,0 @@
-# HTML Attributes Glossary
-
-Complete reference of HTML attributes organized by category and element.
-
-## Global Attributes
-
-Attributes that can be used on **any** HTML element:
-
-| Attribute | Description | Values | Example |
-|-----------|-------------|--------|---------|
-| `accesskey` | Keyboard shortcut | Character | `accesskey="s"` |
-| `class` | CSS class(es) | Space-separated classes | `class="btn primary"` |
-| `contenteditable` | Editable content | `true`, `false` | `contenteditable="true"` |
-| `data-*` | Custom data | Any value | `data-user-id="123"` |
-| `dir` | Text direction | `ltr`, `rtl`, `auto` | `dir="rtl"` |
-| `draggable` | Draggable element | `true`, `false` | `draggable="true"` |
-| `hidden` | Hide element | Boolean | `hidden` |
-| `id` | Unique identifier | Unique string | `id="header"` |
-| `inert` | Inert subtree | Boolean | `inert` |
-| `inputmode` | Virtual keyboard type | See table below | `inputmode="numeric"` |
-| `is` | Custom element | Element name | `is="my-element"` |
-| `itemid` | Microdata item ID | URL | `itemid="urn:isbn:123"` |
-| `itemprop` | Microdata property | Property name | `itemprop="name"` |
-| `itemref` | Microdata reference | ID references | `itemref="ref1 ref2"` |
-| `itemscope` | Microdata scope | Boolean | `itemscope` |
-| `itemtype` | Microdata type | URL | `itemtype="https://schema.org/Person"` |
-| `lang` | Language | Language code | `lang="en"`, `lang="es"` |
-| `nonce` | CSP nonce | Random string | `nonce="r@nd0m"` |
-| `part` | Shadow part name | Part name | `part="button"` |
-| `slot` | Slot name | Slot identifier | `slot="header"` |
-| `spellcheck` | Spell checking | `true`, `false` | `spellcheck="false"` |
-| `style` | Inline CSS | CSS declarations | `style="color: red;"` |
-| `tabindex` | Tab order | Integer | `tabindex="0"`, `tabindex="-1"` |
-| `title` | Advisory information | Text | `title="Click for more info"` |
-| `translate` | Translation support | `yes`, `no` | `translate="no"` |
-
-### Inputmode Values
-
-| Value | Description | Keyboard Type |
-|-------|-------------|---------------|
-| `none` | No virtual keyboard | N/A |
-| `text` | Standard text | Full keyboard |
-| `decimal` | Decimal numbers | Numeric with decimal |
-| `numeric` | Numeric only | Number pad |
-| `tel` | Telephone | Phone number pad |
-| `search` | Search | Search-optimized |
-| `email` | Email address | Email keyboard |
-| `url` | URL | URL keyboard |
-
-## ARIA Attributes
-
-Accessibility attributes (prefix `aria-`):
-
-### ARIA Roles
-| Attribute | Description | Example |
-|-----------|-------------|---------|
-| `role` | Element role | `role="button"`, `role="navigation"` |
-
-### ARIA States and Properties
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `aria-activedescendant` | Active child element | ID |
-| `aria-atomic` | Entire region announced | `true`, `false` |
-| `aria-autocomplete` | Autocomplete type | `none`, `inline`, `list`, `both` |
-| `aria-busy` | Loading state | `true`, `false` |
-| `aria-checked` | Checkbox/radio state | `true`, `false`, `mixed` |
-| `aria-colcount` | Total columns | Integer |
-| `aria-colindex` | Column index | Integer |
-| `aria-colspan` | Column span | Integer |
-| `aria-controls` | Controlled elements | ID references |
-| `aria-current` | Current item | `page`, `step`, `location`, `date`, `time`, `true`, `false` |
-| `aria-describedby` | Description reference | ID references |
-| `aria-details` | Details reference | ID reference |
-| `aria-disabled` | Disabled state | `true`, `false` |
-| `aria-dropeffect` | Drag-drop operation | `copy`, `move`, `link`, `execute`, `popup`, `none` |
-| `aria-errormessage` | Error message reference | ID reference |
-| `aria-expanded` | Expanded state | `true`, `false` |
-| `aria-flowto` | Reading order | ID references |
-| `aria-grabbed` | Grabbed state | `true`, `false` |
-| `aria-haspopup` | Popup type | `true`, `false`, `menu`, `listbox`, `tree`, `grid`, `dialog` |
-| `aria-hidden` | Hidden from screen readers | `true`, `false` |
-| `aria-invalid` | Validation state | `true`, `false`, `grammar`, `spelling` |
-| `aria-keyshortcuts` | Keyboard shortcuts | Text |
-| `aria-label` | Accessible label | Text |
-| `aria-labelledby` | Label reference | ID references |
-| `aria-level` | Hierarchical level | Integer |
-| `aria-live` | Live region | `off`, `polite`, `assertive` |
-| `aria-modal` | Modal dialog | `true`, `false` |
-| `aria-multiline` | Multi-line input | `true`, `false` |
-| `aria-multiselectable` | Multi-selection | `true`, `false` |
-| `aria-orientation` | Orientation | `horizontal`, `vertical` |
-| `aria-owns` | Owned elements | ID references |
-| `aria-placeholder` | Placeholder text | Text |
-| `aria-posinset` | Position in set | Integer |
-| `aria-pressed` | Pressed state | `true`, `false`, `mixed` |
-| `aria-readonly` | Read-only state | `true`, `false` |
-| `aria-relevant` | Relevant changes | `additions`, `removals`, `text`, `all` |
-| `aria-required` | Required field | `true`, `false` |
-| `aria-roledescription` | Role description | Text |
-| `aria-rowcount` | Total rows | Integer |
-| `aria-rowindex` | Row index | Integer |
-| `aria-rowspan` | Row span | Integer |
-| `aria-selected` | Selected state | `true`, `false` |
-| `aria-setsize` | Set size | Integer |
-| `aria-sort` | Sort order | `ascending`, `descending`, `none`, `other` |
-| `aria-valuemax` | Maximum value | Number |
-| `aria-valuemin` | Minimum value | Number |
-| `aria-valuenow` | Current value | Number |
-| `aria-valuetext` | Value as text | Text |
-
-## Link Attributes (`<a>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `href` | Target URL | URL |
-| `target` | Where to open | `_self`, `_blank`, `_parent`, `_top`, frame name |
-| `download` | Download filename | Filename (optional) |
-| `rel` | Relationship | See Link Relationships below |
-| `hreflang` | Target language | Language code |
-| `type` | MIME type | MIME type |
-| `ping` | Ping URLs | Space-separated URLs |
-| `referrerpolicy` | Referrer policy | See Referrer Policy below |
-
-### Link Relationships (`rel`)
-
-| Value | Description | Usage |
-|-------|-------------|-------|
-| `alternate` | Alternate version | RSS feed, translations |
-| `author` | Author page | `<link rel="author">` |
-| `bookmark` | Permalink | Bookmark for section |
-| `canonical` | Canonical URL | Preferred version |
-| `dns-prefetch` | DNS prefetch | `<link rel="dns-prefetch">` |
-| `external` | External site | Links to other domains |
-| `help` | Help document | Help/support page |
-| `icon` | Favicon | `<link rel="icon">` |
-| `license` | License | Copyright/license page |
-| `manifest` | Web manifest | PWA manifest file |
-| `modulepreload` | Module preload | ES6 module preload |
-| `next` | Next page | Pagination |
-| `nofollow` | Don't follow | SEO: don't follow link |
-| `noopener` | No opener reference | Security for `_blank` |
-| `noreferrer` | No referrer | Don't send referrer |
-| `opener` | Has opener | Opposite of noopener |
-| `pingback` | Pingback URL | Blog pingbacks |
-| `preconnect` | Preconnect | Early connection |
-| `prefetch` | Prefetch resource | Future navigation |
-| `preload` | Preload resource | Current page resource |
-| `prerender` | Prerender page | Next page prerender |
-| `prev` | Previous page | Pagination |
-| `search` | Search tool | Search functionality |
-| `stylesheet` | CSS stylesheet | `<link rel="stylesheet">` |
-| `tag` | Tag/keyword | Tag for content |
-
-### Referrer Policy
-
-| Value | Description |
-|-------|-------------|
-| `no-referrer` | Never send referrer |
-| `no-referrer-when-downgrade` | Don't send on HTTPS→HTTP (default) |
-| `origin` | Send origin only |
-| `origin-when-cross-origin` | Full URL same-origin, origin only cross-origin |
-| `same-origin` | Send only same-origin |
-| `strict-origin` | Origin only, not on downgrade |
-| `strict-origin-when-cross-origin` | Full same-origin, origin cross-origin, none downgrade |
-| `unsafe-url` | Always send full URL |
-
-## Image Attributes (`<img>`)
-
-| Attribute | Description | Required | Example |
-|-----------|-------------|----------|---------|
-| `src` | Image URL | Yes | `src="image.jpg"` |
-| `alt` | Alternative text | Yes | `alt="Description"` |
-| `width` | Image width | No | `width="800"` |
-| `height` | Image height | No | `height="600"` |
-| `srcset` | Responsive sources | No | `srcset="img-400.jpg 400w, img-800.jpg 800w"` |
-| `sizes` | Image sizes | No | `sizes="(max-width: 600px) 400px, 800px"` |
-| `loading` | Loading strategy | No | `loading="lazy"`, `loading="eager"` |
-| `decoding` | Decode strategy | No | `decoding="async"`, `decoding="sync"`, `decoding="auto"` |
-| `crossorigin` | CORS mode | No | `crossorigin="anonymous"` |
-| `ismap` | Server-side map | No | `ismap` (boolean) |
-| `usemap` | Client-side map | No | `usemap="#mapname"` |
-| `referrerpolicy` | Referrer policy | No | See Referrer Policy above |
-
-## Form Attributes (`<form>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `action` | Submit URL | URL |
-| `method` | HTTP method | `GET`, `POST` |
-| `enctype` | Encoding type | `application/x-www-form-urlencoded` (default), `multipart/form-data`, `text/plain` |
-| `accept-charset` | Character encodings | Space-separated encodings |
-| `autocomplete` | Autocomplete | `on`, `off` |
-| `name` | Form name | String |
-| `novalidate` | Skip validation | Boolean |
-| `target` | Response target | `_self`, `_blank`, `_parent`, `_top` |
-| `rel` | Link relationship | See Link Relationships |
-
-## Input Attributes (`<input>`)
-
-### Universal Input Attributes
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `type` | Input type | See Input Types below |
-| `name` | Field name | String |
-| `value` | Initial value | String |
-| `id` | Unique ID | String |
-| `required` | Required field | Boolean |
-| `disabled` | Disabled field | Boolean |
-| `readonly` | Read-only | Boolean |
-| `autofocus` | Auto focus | Boolean |
-| `autocomplete` | Autocomplete | See Autocomplete Values below |
-| `placeholder` | Placeholder text | String |
-| `form` | Associated form | Form ID |
-
-### Input Types
-
-| Type | Description | Additional Attributes |
-|------|-------------|----------------------|
-| `text` | Single-line text | `maxlength`, `minlength`, `pattern`, `size` |
-| `password` | Password field | `maxlength`, `minlength`, `pattern`, `size` |
-| `email` | Email address | `maxlength`, `minlength`, `multiple`, `pattern`, `size` |
-| `tel` | Telephone | `maxlength`, `minlength`, `pattern`, `size` |
-| `url` | URL | `maxlength`, `minlength`, `pattern`, `size` |
-| `search` | Search field | `maxlength`, `minlength`, `pattern`, `size` |
-| `number` | Numeric input | `min`, `max`, `step` |
-| `range` | Slider | `min`, `max`, `step` |
-| `date` | Date picker | `min`, `max`, `step` |
-| `time` | Time picker | `min`, `max`, `step` |
-| `datetime-local` | Date and time | `min`, `max`, `step` |
-| `month` | Month picker | `min`, `max`, `step` |
-| `week` | Week picker | `min`, `max`, `step` |
-| `color` | Color picker | N/A |
-| `checkbox` | Checkbox | `checked` |
-| `radio` | Radio button | `checked` |
-| `file` | File upload | `accept`, `multiple`, `capture` |
-| `submit` | Submit button | `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget` |
-| `reset` | Reset button | N/A |
-| `button` | Generic button | N/A |
-| `image` | Image button | `src`, `alt`, `width`, `height`, `formaction`, etc. |
-| `hidden` | Hidden field | N/A |
-
-### Type-Specific Attributes
-
-| Attribute | Applies To | Description |
-|-----------|------------|-------------|
-| `accept` | `file` | File types accepted | 
-| `capture` | `file` | Camera capture |
-| `checked` | `checkbox`, `radio` | Pre-checked state |
-| `max` | `number`, `range`, date/time | Maximum value |
-| `maxlength` | `text`, `password`, `email`, etc. | Maximum length |
-| `min` | `number`, `range`, date/time | Minimum value |
-| `minlength` | `text`, `password`, `email`, etc. | Minimum length |
-| `multiple` | `email`, `file` | Accept multiple values |
-| `pattern` | `text`, `password`, `email`, etc. | Regex validation |
-| `size` | `text`, `password`, `email`, etc. | Visible width |
-| `step` | `number`, `range`, date/time | Step increment |
-| `list` | Most types | Datalist reference |
-
-### Autocomplete Values
-
-Common values for `autocomplete` attribute:
-
-| Value | Description |
-|-------|-------------|
-| `off` | Disable autocomplete |
-| `on` | Enable autocomplete |
-| `name` | Full name |
-| `given-name` | First name |
-| `additional-name` | Middle name |
-| `family-name` | Last name |
-| `nickname` | Nickname |
-| `email` | Email address |
-| `username` | Username |
-| `new-password` | New password |
-| `current-password` | Current password |
-| `tel` | Phone number |
-| `tel-country-code` | Country code |
-| `tel-national` | National number |
-| `street-address` | Street address |
-| `address-line1` | Address line 1 |
-| `address-line2` | Address line 2 |
-| `address-level1` | State/province |
-| `address-level2` | City |
-| `postal-code` | Postal/ZIP code |
-| `country` | Country code |
-| `country-name` | Country name |
-| `cc-name` | Cardholder name |
-| `cc-number` | Credit card number |
-| `cc-exp` | Expiration date |
-| `cc-exp-month` | Expiration month |
-| `cc-exp-year` | Expiration year |
-| `cc-csc` | Security code |
-| `cc-type` | Card type |
-| `bday` | Birthday |
-| `bday-day` | Birth day |
-| `bday-month` | Birth month |
-| `bday-year` | Birth year |
-| `sex` | Gender |
-| `url` | Website URL |
-| `photo` | Photo URL |
-
-## Button Attributes (`<button>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `type` | Button type | `submit`, `reset`, `button` |
-| `name` | Button name | String |
-| `value` | Button value | String |
-| `disabled` | Disabled state | Boolean |
-| `form` | Associated form | Form ID |
-| `formaction` | Submit URL override | URL |
-| `formenctype` | Encoding override | See Form `enctype` |
-| `formmethod` | Method override | `GET`, `POST` |
-| `formnovalidate` | Skip validation | Boolean |
-| `formtarget` | Target override | See Form `target` |
-
-## Select Attributes (`<select>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `name` | Field name | String |
-| `size` | Visible options | Integer |
-| `multiple` | Multiple selection | Boolean |
-| `required` | Required field | Boolean |
-| `disabled` | Disabled state | Boolean |
-| `autofocus` | Auto focus | Boolean |
-| `form` | Associated form | Form ID |
-
-## Option Attributes (`<option>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `value` | Option value | String |
-| `label` | Option label | String |
-| `selected` | Pre-selected | Boolean |
-| `disabled` | Disabled option | Boolean |
-
-## Textarea Attributes (`<textarea>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `name` | Field name | String |
-| `rows` | Visible rows | Integer |
-| `cols` | Visible columns | Integer |
-| `maxlength` | Maximum length | Integer |
-| `minlength` | Minimum length | Integer |
-| `placeholder` | Placeholder text | String |
-| `required` | Required field | Boolean |
-| `disabled` | Disabled state | Boolean |
-| `readonly` | Read-only | Boolean |
-| `autofocus` | Auto focus | Boolean |
-| `autocomplete` | Autocomplete | `on`, `off` |
-| `spellcheck` | Spell check | `true`, `false` |
-| `wrap` | Text wrapping | `soft`, `hard` |
-| `form` | Associated form | Form ID |
-
-## Media Attributes (`<audio>`, `<video>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `src` | Media source | URL |
-| `controls` | Show controls | Boolean |
-| `autoplay` | Auto play | Boolean |
-| `loop` | Loop playback | Boolean |
-| `muted` | Muted audio | Boolean |
-| `preload` | Preload strategy | `none`, `metadata`, `auto` |
-| `poster` | Poster image (video only) | URL |
-| `width` | Width (video only) | Integer |
-| `height` | Height (video only) | Integer |
-| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
-| `playsinline` | Inline playback (mobile) | Boolean |
-
-## Script Attributes (`<script>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `src` | Script URL | URL |
-| `type` | MIME type | `text/javascript` (default), `module` |
-| `async` | Async loading | Boolean |
-| `defer` | Deferred loading | Boolean |
-| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
-| `integrity` | SRI hash | Hash string |
-| `nomodule` | Fallback for old browsers | Boolean |
-| `nonce` | CSP nonce | Random string |
-| `referrerpolicy` | Referrer policy | See Referrer Policy |
-
-## Table Attributes
-
-### Table (`<table>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `border` | Border (deprecated) | Integer (use CSS) |
-| `cellspacing` | Cell spacing (deprecated) | Integer (use CSS) |
-| `cellpadding` | Cell padding (deprecated) | Integer (use CSS) |
-
-### Table Cell (`<td>`, `<th>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `colspan` | Column span | Integer |
-| `rowspan` | Row span | Integer |
-| `headers` | Header references | Space-separated IDs |
-| `scope` | Header scope (`<th>` only) | `row`, `col`, `rowgroup`, `colgroup` |
-
-## Iframe Attributes (`<iframe>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `src` | Frame URL | URL |
-| `srcdoc` | Inline HTML | HTML string |
-| `name` | Frame name | String |
-| `width` | Frame width | Integer or percentage |
-| `height` | Frame height | Integer or percentage |
-| `sandbox` | Security restrictions | See Sandbox below |
-| `allow` | Feature policy | Semicolon-separated policies |
-| `allowfullscreen` | Allow fullscreen | Boolean |
-| `allowpaymentrequest` | Allow payment | Boolean |
-| `loading` | Loading strategy | `lazy`, `eager` |
-| `referrerpolicy` | Referrer policy | See Referrer Policy |
-
-### Sandbox Values
-
-| Value | Description |
-|-------|-------------|
-| (empty) | All restrictions |
-| `allow-forms` | Allow form submission |
-| `allow-modals` | Allow modals |
-| `allow-orientation-lock` | Allow screen orientation |
-| `allow-pointer-lock` | Allow pointer lock |
-| `allow-popups` | Allow popups |
-| `allow-popups-to-escape-sandbox` | Popups inherit sandbox |
-| `allow-presentation` | Allow presentation API |
-| `allow-same-origin` | Treat as same origin |
-| `allow-scripts` | Allow scripts |
-| `allow-top-navigation` | Allow top navigation |
-| `allow-top-navigation-by-user-activation` | Allow with user action |
-
-## Meta Attributes (`<meta>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `charset` | Character encoding | `UTF-8` (most common) |
-| `name` | Metadata name | `description`, `keywords`, `author`, `viewport`, etc. |
-| `content` | Metadata content | String |
-| `http-equiv` | HTTP header | `content-type`, `refresh`, `content-security-policy`, etc. |
-| `property` | Property name (Open Graph) | `og:title`, `og:image`, etc. |
-
-## Progress/Meter Attributes
-
-### Progress (`<progress>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `value` | Current value | Number |
-| `max` | Maximum value | Number |
-
-### Meter (`<meter>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `value` | Current value | Number |
-| `min` | Minimum value | Number |
-| `max` | Maximum value | Number |
-| `low` | Low threshold | Number |
-| `high` | High threshold | Number |
-| `optimum` | Optimum value | Number |
-
-## Details Attributes (`<details>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `open` | Initially open | Boolean |
-
-## Dialog Attributes (`<dialog>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `open` | Visible dialog | Boolean |
-
-## Canvas Attributes (`<canvas>`)
-
-| Attribute | Description | Values |
-|-----------|-------------|--------|
-| `width` | Canvas width | Integer (pixels) |
-| `height` | Canvas height | Integer (pixels) |
-
-## Quick Reference
-
-### Most Common Attributes
-
-```html
-<!-- Links -->
-<a href="url" target="_blank" rel="noopener">Link</a>
-
-<!-- Images -->
-<img src="image.jpg" alt="Description" width="800" height="600" loading="lazy">
-
-<!-- Forms -->
-<form action="/submit" method="POST">
-  <input type="text" name="username" required>
-  <button type="submit">Submit</button>
-</form>
-
-<!-- Containers -->
-<div id="container" class="wrapper" data-role="main"></div>
-
-<!-- Media -->
-<video src="video.mp4" controls poster="poster.jpg" preload="metadata"></video>
-
-<!-- Scripts -->
-<script src="app.js" defer></script>
-
-<!-- Metadata -->
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-```
-
-## Notes
-
-- **Boolean attributes**: Presence = true, absence = false (e.g., `disabled`, `required`)
-- **Global attributes**: Can be used on any element
-- **Deprecated attributes**: Many presentational attributes deprecated (use CSS instead)
-- **Validation**: Use W3C Validator to check attribute usage
-- **Accessibility**: ARIA attributes enhance accessibility for screen readers
diff --git a/skills/html-coder/references/glossary-events.md b/skills/html-coder/references/glossary-events.md
deleted file mode 100644
index a456c0e44..000000000
--- a/skills/html-coder/references/glossary-events.md
+++ /dev/null
@@ -1,495 +0,0 @@
-# HTML Event Attributes Glossary
-
-Complete reference for HTML event handler attributes (inline event handlers).
-
-## What Are Event Attributes?
-
-Event attributes (also called inline event handlers) are HTML attributes that execute JavaScript code when specific events occur. They all start with `on` followed by the event name (e.g., `onclick`, `onload`, `onsubmit`).
-
-## ⚠️ Important Note
-
-**Modern best practice**: Use JavaScript `.addEventListener()` instead of inline event attributes for better:
-- **Separation of concerns** (HTML structure vs behavior)
-- **Multiple handlers** per event
-- **Easier maintenance**
-- **Content Security Policy (CSP) compatibility**
-
-```html
-<!-- ❌ Avoid: Inline handler -->
-<button onclick="alert('Clicked')">Click</button>
-
-<!-- ✅ Prefer: Event listener -->
-<button id="myBtn">Click</button>
-<script>
-  document.getElementById('myBtn').addEventListener('click', function() {
-    alert('Clicked');
-  });
-</script>
-```
-
-## Window Events
-
-Events that occur on the window object:
-
-| Event Attribute | When It Fires | Example |
-|-----------------|---------------|---------|
-| `onafterprint` | After print dialog closes | `<body onafterprint="handleAfterPrint()">` |
-| `onbeforeprint` | Before print dialog opens | `<body onbeforeprint="handleBeforePrint()">` |
-| `onbeforeunload` | Before page unload | `<body onbeforeunload="return 'Leave page?'">` |
-| `onerror` | When error occurs | `<body onerror="handleError()">` |
-| `onhashchange` | When URL hash changes | `<body onhashchange="handleHashChange()">` |
-| `onload` | When page/element loads | `<body onload="init()">` |
-| `onmessage` | When message received (postMessage) | `<body onmessage="handleMessage()">` |
-| `onoffline` | When browser goes offline | `<body onoffline="handleOffline()">` |
-| `ononline` | When browser goes online | `<body ononline="handleOnline()">` |
-| `onpagehide` | When navigating away | `<body onpagehide="handlePageHide()">` |
-| `onpageshow` | When navigating to page | `<body onpageshow="handlePageShow()">` |
-| `onpopstate` | When history state changes | `<body onpopstate="handlePopState()">` |
-| `onresize` | When window is resized | `<body onresize="handleResize()">` |
-| `onstorage` | When storage changes | `<body onstorage="handleStorage()">` |
-| `onunload` | When page is unloaded | `<body onunload="cleanup()">` |
-
-**Example**:
-```html
-<body onload="console.log('Page loaded')" onresize="console.log('Window resized')">
-  <h1>Welcome</h1>
-</body>
-```
-
-## Mouse Events
-
-Events triggered by mouse actions:
-
-| Event Attribute | When It Fires | Example |
-|-----------------|---------------|---------|
-| `onclick` | Element is clicked | `<button onclick="handleClick()">Click</button>` |
-| `oncontextmenu` | Right-click (context menu) | `<div oncontextmenu="return false">No right-click</div>` |
-| `ondblclick` | Element is double-clicked | `<div ondblclick="handleDoubleClick()">Double-click</div>` |
-| `onmousedown` | Mouse button pressed down | `<button onmousedown="handleMouseDown()">Press</button>` |
-| `onmouseenter` | Mouse enters element | `<div onmouseenter="highlight()">Hover</div>` |
-| `onmouseleave` | Mouse leaves element | `<div onmouseleave="unhighlight()">Hover</div>` |
-| `onmousemove` | Mouse moves over element | `<div onmousemove="trackMouse()">Move mouse</div>` |
-| `onmouseout` | Mouse moves out (bubbles) | `<div onmouseout="handleOut()">Hover out</div>` |
-| `onmouseover` | Mouse moves over (bubbles) | `<div onmouseover="handleOver()">Hover over</div>` |
-| `onmouseup` | Mouse button released | `<button onmouseup="handleMouseUp()">Release</button>` |
-
-**Mouse Event Differences**:
-- **`onmouseenter` vs `onmouseover`**: `enter` doesn't bubble, `over` does
-- **`onmouseleave` vs `onmouseout`**: `leave` doesn't bubble, `out` does
-- **`onclick`**: Fires on mousedown + mouseup
-
-**Example**:
-```html
-<button 
-  onmouseenter="this.style.backgroundColor='blue'"
-  onmouseleave="this.style.backgroundColor=''">
-  Hover me
-</button>
-```
-
-## Keyboard Events
-
-Events triggered by keyboard actions:
-
-| Event Attribute | When It Fires | Example |
-|-----------------|---------------|---------|
-| `onkeydown` | Key is pressed down | `<input onkeydown="handleKeyDown(event)">` |
-| `onkeypress` | Key is pressed (deprecated) | `<input onkeypress="handleKeyPress(event)">` |
-| `onkeyup` | Key is released | `<input onkeyup="handleKeyUp(event)">` |
-
-**Note**: `onkeypress` is deprecated. Use `onkeydown` instead.
-
-**Example**:
-```html
-<input 
-  type="text" 
-  onkeydown="if(event.key === 'Enter') submitForm()"
-  placeholder="Press Enter to submit">
-```
-
-## Form Events
-
-Events related to forms and form controls:
-
-| Event Attribute | When It Fires | Applies To |
-|-----------------|---------------|------------|
-| `onblur` | Element loses focus | Input, textarea, select |
-| `onchange` | Value changes and loses focus | Input, textarea, select |
-| `onfocus` | Element gains focus | Input, textarea, select |
-| `onfocusin` | Element about to gain focus (bubbles) | Input, textarea, select |
-| `onfocusout` | Element about to lose focus (bubbles) | Input, textarea, select |
-| `oninput` | Value changes (immediately) | Input, textarea |
-| `oninvalid` | Input validation fails | Input, textarea, select |
-| `onreset` | Form is reset | Form |
-| `onsearch` | User initiates search | Input type="search" |
-| `onselect` | Text is selected | Input, textarea |
-| `onsubmit` | Form is submitted | Form |
-
-**Event Differences**:
-- **`oninput`**: Fires immediately on every change
-- **`onchange`**: Fires when value changes AND element loses focus
-- **`onblur` vs `onfocusout`**: `blur` doesn't bubble, `focusout` does
-- **`onfocus` vs `onfocusin`**: `focus` doesn't bubble, `focusin` does
-
-**Example**:
-```html
-<form onsubmit="return validateForm()">
-  <input 
-    type="text" 
-    name="username"
-    oninput="checkAvailability(this.value)"
-    onblur="validateUsername(this.value)"
-    onfocus="showHint()"
-    required>
-  <button type="submit">Submit</button>
-</form>
-
-<input 
-  type="search" 
-  onsearch="performSearch(this.value)"
-  placeholder="Search...">
-```
-
-## Clipboard Events
-
-Events triggered by clipboard operations:
-
-| Event Attribute | When It Fires | Example |
-|-----------------|---------------|---------|
-| `oncopy` | Content is copied | `<p oncopy="alert('Copied!')">Copy this</p>` |
-| `oncut` | Content is cut | `<input oncut="handleCut()">` |
-| `onpaste` | Content is pasted | `<input onpaste="handlePaste(event)">` |
-
-**Example**:
-```html
-<input 
-  type="text" 
-  onpaste="event.preventDefault(); alert('Paste disabled')"
-  placeholder="Cannot paste here">
-```
-
-## Drag Events
-
-Events for drag-and-drop operations:
-
-| Event Attribute | When It Fires | Target |
-|-----------------|---------------|--------|
-| `ondrag` | Element is being dragged | Draggable element |
-| `ondragend` | Drag operation ends | Draggable element |
-| `ondragenter` | Dragged element enters drop target | Drop target |
-| `ondragleave` | Dragged element leaves drop target | Drop target |
-| `ondragover` | Dragged element is over drop target | Drop target |
-| `ondragstart` | Drag operation starts | Draggable element |
-| `ondrop` | Element is dropped | Drop target |
-
-**Example**:
-```html
-<div 
-  draggable="true" 
-  ondragstart="event.dataTransfer.setData('text', this.id)">
-  Drag me
-</div>
-
-<div 
-  ondragover="event.preventDefault()"
-  ondrop="handleDrop(event)">
-  Drop here
-</div>
-```
-
-## Media Events
-
-Events for audio and video elements:
-
-| Event Attribute | When It Fires |
-|-----------------|---------------|
-| `onabort` | Media loading aborted |
-| `oncanplay` | Media can start playing |
-| `oncanplaythrough` | Media can play without buffering |
-| `ondurationchange` | Duration changes |
-| `onemptied` | Media becomes empty |
-| `onended` | Media playback ends |
-| `onerror` | Error loading media |
-| `onloadeddata` | Media data loaded |
-| `onloadedmetadata` | Metadata loaded |
-| `onloadstart` | Browser starts loading |
-| `onpause` | Media is paused |
-| `onplay` | Media starts playing |
-| `onplaying` | Media is playing after pause/buffer |
-| `onprogress` | Browser is downloading media |
-| `onratechange` | Playback speed changes |
-| `onseeked` | Seeking completes |
-| `onseeking` | Seeking starts |
-| `onstalled` | Browser trying to get media data |
-| `onsuspend` | Browser stops getting media data |
-| `ontimeupdate` | Current playback time changes |
-| `onvolumechange` | Volume changes |
-| `onwaiting` | Media paused waiting for data |
-
-**Example**:
-```html
-<video 
-  src="video.mp4" 
-  controls
-  onplay="console.log('Playing')"
-  onpause="console.log('Paused')"
-  onended="console.log('Finished')">
-</video>
-
-<audio 
-  src="audio.mp3"
-  onloadedmetadata="showDuration()"
-  ontimeupdate="updateProgress()">
-</audio>
-```
-
-## Miscellaneous Events
-
-Other useful event attributes:
-
-| Event Attribute | When It Fires | Applies To |
-|-----------------|---------------|------------|
-| `onscroll` | Element is scrolled | Scrollable elements |
-| `ontoggle` | Details element toggled | `<details>` |
-| `onwheel` | Mouse wheel scrolled | Any element |
-
-**Example**:
-```html
-<div onscroll="handleScroll()" style="height: 200px; overflow: auto;">
-  <p>Scrollable content...</p>
-</div>
-
-<details ontoggle="console.log('Toggled')">
-  <summary>Click to toggle</summary>
-  <p>Hidden content</p>
-</details>
-```
-
-## Animation and Transition Events
-
-CSS animation and transition events:
-
-| Event Attribute | When It Fires |
-|-----------------|---------------|
-| `onanimationend` | CSS animation completes |
-| `onanimationiteration` | CSS animation repeats |
-| `onanimationstart` | CSS animation starts |
-| `ontransitionend` | CSS transition completes |
-| `ontransitioncancel` | CSS transition cancelled |
-| `ontransitionrun` | CSS transition starts |
-
-**Example**:
-```html
-<div 
-  class="animated"
-  onanimationend="console.log('Animation finished')"
-  onanimationstart="console.log('Animation started')">
-  Animated element
-</div>
-```
-
-## Touch Events (Mobile)
-
-Touch events for mobile devices:
-
-| Event Attribute | When It Fires |
-|-----------------|---------------|
-| `ontouchcancel` | Touch interrupted |
-| `ontouchend` | Touch ends |
-| `ontouchmove` | Touch moves |
-| `ontouchstart` | Touch starts |
-
-**Example**:
-```html
-<div 
-  ontouchstart="handleTouchStart(event)"
-  ontouchmove="handleTouchMove(event)"
-  ontouchend="handleTouchEnd(event)">
-  Touch me (mobile)
-</div>
-```
-
-## Event Object
-
-All event handlers receive an event object with useful properties:
-
-```html
-<button onclick="handleClick(event)">Click</button>
-
-<script>
-function handleClick(event) {
-  console.log('Event type:', event.type);           // 'click'
-  console.log('Target element:', event.target);     // <button>
-  console.log('Mouse X:', event.clientX);           // X coordinate
-  console.log('Mouse Y:', event.clientY);           // Y coordinate
-  
-  event.preventDefault();  // Prevent default action
-  event.stopPropagation(); // Stop event bubbling
-}
-</script>
-```
-
-## Common Patterns
-
-### Prevent Default Behavior
-
-```html
-<!-- Prevent form submission -->
-<form onsubmit="return false">...</form>
-<form onsubmit="event.preventDefault()">...</form>
-
-<!-- Prevent link navigation -->
-<a href="#" onclick="return false">Don't navigate</a>
-
-<!-- Prevent right-click menu -->
-<div oncontextmenu="return false">No right-click</div>
-```
-
-### Access Element
-
-```html
-<!-- Using 'this' keyword -->
-<button onclick="console.log(this.textContent)">Click</button>
-
-<!-- Using event.target -->
-<button onclick="console.log(event.target.textContent)">Click</button>
-
-<!-- Passing 'this' explicitly -->
-<button onclick="handleClick(this)">Click</button>
-```
-
-### Conditional Execution
-
-```html
-<!-- Check key pressed -->
-<input onkeydown="if(event.key === 'Enter') submitForm()">
-
-<!-- Check Ctrl key -->
-<div onclick="if(event.ctrlKey) console.log('Ctrl + Click')">Click</div>
-
-<!-- Check button (0=left, 1=middle, 2=right) -->
-<div onmousedown="if(event.button === 2) console.log('Right click')">Click</div>
-```
-
-## Best Practices
-
-### ✅ Do
-
-1. **Use `addEventListener()` instead** of inline handlers
-2. **Call `preventDefault()`** to stop default behavior
-3. **Call `stopPropagation()`** to prevent bubbling when needed
-4. **Pass `event` object** to handlers for access to event details
-5. **Return false** to prevent default (works for some events)
-6. **Use semantic events** (onclick for clickable, onsubmit for forms)
-
-### ❌ Don't
-
-1. **Don't use inline handlers in production** (violates CSP, hard to maintain)
-2. **Don't use `onkeypress`** (deprecated, use `onkeydown`)
-3. **Don't forget to prevent default** when needed (links, forms)
-4. **Don't mix inline and addEventListener** (confusing)
-5. **Don't put complex logic inline** (use external functions)
-6. **Don't use `onclick` on non-interactive elements** (use buttons/links)
-
-## Modern Alternative: addEventListener()
-
-**Why addEventListener is better**:
-
-```html
-<!-- ❌ Inline: Limited to one handler -->
-<button onclick="doA()">Click</button>
-
-<!-- ✅ addEventListener: Multiple handlers -->
-<button id="btn">Click</button>
-<script>
-  const btn = document.getElementById('btn');
-  btn.addEventListener('click', doA);
-  btn.addEventListener('click', doB);  // Both run!
-  btn.addEventListener('click', doC);  // All three run!
-</script>
-```
-
-**Separation of concerns**:
-
-```html
-<!-- ❌ Inline: Mixed HTML and JavaScript -->
-<button onclick="alert('Clicked')">Click</button>
-
-<!-- ✅ Separate: Clean HTML, JS in script -->
-<button id="myBtn">Click</button>
-<script>
-  document.getElementById('myBtn').addEventListener('click', function() {
-    alert('Clicked');
-  });
-</script>
-```
-
-**CSP compatibility**:
-
-```html
-<!-- ❌ Inline: Blocked by strict CSP -->
-<button onclick="alert('Blocked')">Click</button>
-
-<!-- ✅ External: Allowed by CSP -->
-<button id="btn">Click</button>
-<script src="app.js"></script>
-<!-- app.js: document.getElementById('btn').addEventListener('click', ...) -->
-```
-
-## Quick Reference Table
-
-### Most Common Events
-
-| Event | Use For | Example |
-|-------|---------|---------|
-| `onclick` | Click actions | Buttons, links |
-| `onsubmit` | Form submission | Forms |
-| `oninput` | Real-time input | Search, validation |
-| `onchange` | Final value change | Select, checkbox |
-| `onload` | Page/image load | Body, images |
-| `onkeydown` | Keyboard shortcuts | Inputs, body |
-| `onmouseenter` | Hover effects | Any element |
-| `onfocus` | Input focus | Form fields |
-| `onblur` | Input unfocus | Form fields |
-
-### Event Order
-
-**Mouse Click**:
-1. `onmousedown`
-2. `onmouseup`
-3. `onclick`
-
-**Form Submission**:
-1. `onsubmit` (can prevent)
-2. Form submits
-
-**Input Change**:
-1. `oninput` (every keystroke)
-2. `onchange` (on blur)
-
-**Page Load**:
-1. `DOMContentLoaded` (not an attribute)
-2. `onload`
-
-## Debugging Events
-
-```html
-<!-- Log all event details -->
-<button onclick="console.log(event)">Debug Event</button>
-
-<!-- See event properties -->
-<div onclick="console.table({
-  type: event.type,
-  target: event.target.tagName,
-  x: event.clientX,
-  y: event.clientY,
-  ctrlKey: event.ctrlKey,
-  shiftKey: event.shiftKey
-})">Click to inspect</div>
-```
-
-## Resource
-
-For complete reference, see:
-- **MDN Event Reference**: https://developer.mozilla.org/en-US/docs/Web/Events
-- **addEventListener()**: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
diff --git a/skills/html-coder/references/glossary-tags.md b/skills/html-coder/references/glossary-tags.md
deleted file mode 100644
index da263e343..000000000
--- a/skills/html-coder/references/glossary-tags.md
+++ /dev/null
@@ -1,383 +0,0 @@
-# HTML Tags Glossary
-
-Quick reference for all HTML elements organized by category.
-
-## Document Structure
-
-| Tag | Description | Usage |
-|-----|-------------|-------|
-| `<!DOCTYPE>` | Document type declaration | `<!DOCTYPE html>` |
-| `<html>` | Root element | Contains entire HTML document |
-| `<head>` | Document metadata container | Information about the document |
-| `<title>` | Document title | Shown in browser tab/title bar |
-| `<body>` | Document body | Visible page content |
-| `<base>` | Base URL for relative URLs | `<base href="https://example.com/">` |
-| `<link>` | External resource link | CSS files, favicons, etc. |
-| `<meta>` | Metadata | Charset, viewport, description, etc. |
-| `<style>` | Internal CSS | Embedded stylesheets |
-
-## Metadata Elements
-
-| Tag | Description | Common Use |
-|-----|-------------|------------|
-| `<meta charset>` | Character encoding | `<meta charset="UTF-8">` |
-| `<meta name>` | Named metadata | Description, keywords, author |
-| `<meta property>` | Property metadata | Open Graph, Twitter Cards |
-| `<meta http-equiv>` | HTTP header equivalent | Content-Type, refresh, CSP |
-| `<meta viewport>` | Viewport settings | Mobile responsive design |
-
-## Content Sectioning
-
-| Tag | Description | Purpose |
-|-----|-------------|---------|
-| `<header>` | Header section | Site/page/article header |
-| `<nav>` | Navigation section | Navigation links |
-| `<main>` | Main content | Primary page content (unique) |
-| `<section>` | Generic section | Thematic grouping of content |
-| `<article>` | Self-contained content | Blog post, news article, forum post |
-| `<aside>` | Tangential content | Sidebars, pull quotes, ads |
-| `<footer>` | Footer section | Site/page/article footer |
-| `<h1>` to `<h6>` | Headings | Content hierarchy (H1 most important) |
-| `<address>` | Contact information | Author/owner contact details |
-
-## Text Content
-
-| Tag | Description | Usage |
-|-----|-------------|-------|
-| `<div>` | Generic container | Block-level grouping (no semantic meaning) |
-| `<p>` | Paragraph | Text paragraphs |
-| `<hr>` | Thematic break | Horizontal rule/separator |
-| `<pre>` | Preformatted text | Code blocks, ASCII art |
-| `<blockquote>` | Block quotation | Long quotes with optional `cite` |
-| `<ol>` | Ordered list | Numbered list |
-| `<ul>` | Unordered list | Bulleted list |
-| `<li>` | List item | Item in `<ol>`, `<ul>`, or `<menu>` |
-| `<dl>` | Description list | Term-definition pairs |
-| `<dt>` | Description term | Term in description list |
-| `<dd>` | Description details | Definition in description list |
-| `<figure>` | Self-contained content | Images, diagrams, code with caption |
-| `<figcaption>` | Figure caption | Caption for `<figure>` |
-
-## Inline Text Semantics
-
-| Tag | Description | Purpose |
-|-----|-------------|---------|
-| `<a>` | Anchor/hyperlink | Links to other pages/resources |
-| `<span>` | Generic inline container | Inline grouping (no semantic meaning) |
-| `<strong>` | Strong importance | Bold text (semantic) |
-| `<em>` | Emphasis | Italic text (semantic) |
-| `<b>` | Bold text | Bold (presentational, use CSS instead) |
-| `<i>` | Italic text | Italic (presentational, use CSS instead) |
-| `<u>` | Underlined text | Underline (avoid, looks like link) |
-| `<s>` | Strikethrough | Incorrect/irrelevant text |
-| `<mark>` | Highlighted text | Marked/highlighted for reference |
-| `<small>` | Fine print | Side comments, legal text |
-| `<abbr>` | Abbreviation | Abbreviations with `title` |
-| `<cite>` | Citation | Title of creative work |
-| `<code>` | Inline code | Code snippets |
-| `<kbd>` | Keyboard input | Keyboard keys to press |
-| `<samp>` | Sample output | Computer program output |
-| `<var>` | Variable | Mathematical/programming variable |
-| `<time>` | Date/time | Machine-readable date/time |
-| `<data>` | Machine-readable content | Data with value attribute |
-| `<q>` | Inline quotation | Short inline quotes |
-| `<dfn>` | Definition term | Term being defined |
-| `<sub>` | Subscript | H₂O |
-| `<sup>` | Superscript | x² |
-| `<del>` | Deleted text | Removed content (with `<ins>`) |
-| `<ins>` | Inserted text | Added content (with `<del>`) |
-| `<br>` | Line break | Force line break |
-| `<wbr>` | Word break opportunity | Suggest line break point |
-| `<bdi>` | Bidirectional isolate | Text with different direction |
-| `<bdo>` | Bidirectional override | Override text direction |
-| `<ruby>` | Ruby annotation | East Asian typography |
-| `<rt>` | Ruby text | Pronunciation guide in `<ruby>` |
-| `<rp>` | Ruby parenthesis | Fallback for browsers without ruby |
-
-## Images and Multimedia
-
-| Tag | Description | Usage |
-|-----|-------------|-------|
-| `<img>` | Image | Embed raster images |
-| `<picture>` | Responsive image container | Art direction, multiple formats |
-| `<source>` | Media source | Source for `<picture>`, `<audio>`, `<video>` |
-| `<audio>` | Audio content | Embed audio files |
-| `<video>` | Video content | Embed video files |
-| `<track>` | Text track | Subtitles, captions for video/audio |
-| `<map>` | Image map | Define clickable areas in image |
-| `<area>` | Image map area | Clickable region in `<map>` |
-| `<svg>` | Scalable Vector Graphics | Inline vector graphics |
-| `<canvas>` | Graphics canvas | Drawing surface for JavaScript |
-
-## Embedded Content
-
-| Tag | Description | Purpose |
-|-----|-------------|---------|
-| `<iframe>` | Inline frame | Embed external content |
-| `<embed>` | External content | Embed plugins (legacy) |
-| `<object>` | External object | Embed multimedia, PDFs |
-| `<param>` | Object parameters | Parameters for `<object>` |
-| `<portal>` | Portal element | Preview/navigate to other pages |
-
-## Scripting
-
-| Tag | Description | Usage |
-|-----|-------------|-------|
-| `<script>` | JavaScript | Embed or link JavaScript |
-| `<noscript>` | No script fallback | Content when JavaScript disabled |
-| `<template>` | Content template | HTML template for cloning |
-| `<slot>` | Web component slot | Placeholder in web components |
-
-## Tables
-
-| Tag | Description | Purpose |
-|-----|-------------|---------|
-| `<table>` | Table | Tabular data |
-| `<caption>` | Table caption | Table title/description |
-| `<thead>` | Table header | Header rows |
-| `<tbody>` | Table body | Main table content |
-| `<tfoot>` | Table footer | Footer rows |
-| `<tr>` | Table row | Row of cells |
-| `<th>` | Header cell | Column/row header |
-| `<td>` | Data cell | Table data |
-| `<col>` | Column | Column properties |
-| `<colgroup>` | Column group | Group of columns |
-
-## Forms
-
-| Tag | Description | Purpose |
-|-----|-------------|---------|
-| `<form>` | Form | User input form |
-| `<input>` | Input field | Various input types |
-| `<label>` | Input label | Label for form control |
-| `<button>` | Button | Clickable button |
-| `<select>` | Dropdown | Selection list |
-| `<option>` | Select option | Option in `<select>` |
-| `<optgroup>` | Option group | Group options in `<select>` |
-| `<textarea>` | Multi-line text | Large text input |
-| `<fieldset>` | Field grouping | Group related form fields |
-| `<legend>` | Fieldset caption | Title for `<fieldset>` |
-| `<datalist>` | Input suggestions | Predefined options for input |
-| `<output>` | Calculation result | Result of calculation |
-| `<progress>` | Progress bar | Task progress indicator |
-| `<meter>` | Measurement gauge | Scalar measurement |
-
-## Interactive Elements
-
-| Tag | Description | Usage |
-|-----|-------------|-------|
-| `<details>` | Disclosure widget | Expandable content |
-| `<summary>` | Details summary | Title for `<details>` |
-| `<dialog>` | Dialog box | Modal or non-modal dialog |
-| `<menu>` | Menu | List of commands (experimental) |
-
-## Web Components
-
-| Tag | Description | Purpose |
-|-----|-------------|---------|
-| `<template>` | Content template | Reusable HTML template |
-| `<slot>` | Content slot | Placeholder in shadow DOM |
-| Custom elements | User-defined elements | `<my-component>` |
-
-## Deprecated/Obsolete Elements
-
-❌ **Do not use these elements** (use CSS or semantic alternatives instead):
-
-| Tag | Reason | Alternative |
-|-----|--------|-------------|
-| `<acronym>` | Obsolete | Use `<abbr>` |
-| `<applet>` | Obsolete | Use `<object>` or `<embed>` |
-| `<basefont>` | Obsolete | Use CSS `font` properties |
-| `<big>` | Obsolete | Use CSS `font-size` |
-| `<blink>` | Obsolete | Use CSS `animation` |
-| `<center>` | Obsolete | Use CSS `text-align: center` |
-| `<dir>` | Obsolete | Use `<ul>` |
-| `<font>` | Obsolete | Use CSS `color`, `font-family`, `font-size` |
-| `<frame>` | Obsolete | Use `<iframe>` or CSS layout |
-| `<frameset>` | Obsolete | Use CSS layout |
-| `<marquee>` | Obsolete | Use CSS `animation` |
-| `<nobr>` | Obsolete | Use CSS `white-space: nowrap` |
-| `<noframes>` | Obsolete | N/A (frames obsolete) |
-| `<plaintext>` | Obsolete | Use `<pre>` or `<code>` |
-| `<spacer>` | Obsolete | Use CSS `margin`, `padding` |
-| `<strike>` | Obsolete | Use `<del>` or `<s>` |
-| `<tt>` | Obsolete | Use `<code>` or `<kbd>` |
-| `<xmp>` | Obsolete | Use `<pre>` or `<code>` |
-
-## Elements by Display Type
-
-### Block-Level Elements (Default)
-
-Display as block (full width, new line):
-
-```
-<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, 
-<dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, 
-<h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <pre>, 
-<section>, <table>, <ul>, <video>
-```
-
-### Inline Elements (Default)
-
-Display inline (no line break):
-
-```
-<a>, <abbr>, <b>, <bdi>, <bdo>, <br>, <button>, <cite>, <code>, 
-<data>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <mark>, 
-<q>, <s>, <samp>, <select>, <small>, <span>, <strong>, <sub>, 
-<sup>, <textarea>, <time>, <u>, <var>, <wbr>
-```
-
-### Void Elements (Self-Closing)
-
-Cannot have content:
-
-```
-<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, 
-<meta>, <param>, <source>, <track>, <wbr>
-```
-
-## Elements by Purpose
-
-### Navigation
-```
-<nav>, <a>, <menu>
-```
-
-### Grouping Content
-```
-<div>, <section>, <article>, <aside>, <header>, <footer>, <main>
-```
-
-### Text Formatting
-```
-<p>, <h1>-<h6>, <strong>, <em>, <mark>, <del>, <ins>
-```
-
-### Lists
-```
-<ul>, <ol>, <li>, <dl>, <dt>, <dd>
-```
-
-### Forms
-```
-<form>, <input>, <textarea>, <select>, <button>, <label>, <fieldset>, <legend>
-```
-
-### Media
-```
-<img>, <audio>, <video>, <picture>, <source>, <track>
-```
-
-### Tables
-```
-<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <caption>
-```
-
-### Code/Programming
-```
-<code>, <pre>, <kbd>, <samp>, <var>
-```
-
-## Quick Reference by Use Case
-
-### Basic Page Structure
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Page Title</title>
-  </head>
-  <body>
-    <header>Header</header>
-    <nav>Navigation</nav>
-    <main>Main Content</main>
-    <footer>Footer</footer>
-  </body>
-</html>
-```
-
-### Content Organization
-```html
-<article>
-  <header>
-    <h1>Article Title</h1>
-    <time>Date</time>
-  </header>
-  <section>
-    <h2>Section</h2>
-    <p>Content</p>
-  </section>
-  <footer>Article footer</footer>
-</article>
-```
-
-### Text Semantics
-```html
-<p>Normal text with <strong>important</strong> and <em>emphasized</em> parts.</p>
-<p>Use <code>code</code> for inline code and <pre> for blocks.</p>
-<p><abbr title="HyperText Markup Language">HTML</abbr> example.</p>
-```
-
-### Forms
-```html
-<form>
-  <label for="name">Name:</label>
-  <input type="text" id="name" name="name">
-  <button type="submit">Submit</button>
-</form>
-```
-
-### Media
-```html
-<img src="image.jpg" alt="Description">
-<video controls>
-  <source src="video.mp4" type="video/mp4">
-</video>
-<audio controls>
-  <source src="audio.mp3" type="audio/mpeg">
-</audio>
-```
-
-### Lists
-```html
-<!-- Unordered -->
-<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-</ul>
-
-<!-- Ordered -->
-<ol>
-  <li>First</li>
-  <li>Second</li>
-</ol>
-
-<!-- Description -->
-<dl>
-  <dt>Term</dt>
-  <dd>Definition</dd>
-</dl>
-```
-
-### Tables
-```html
-<table>
-  <caption>Table Title</caption>
-  <thead>
-    <tr><th>Header</th></tr>
-  </thead>
-  <tbody>
-    <tr><td>Data</td></tr>
-  </tbody>
-</table>
-```
-
-## Notes
-
-- **Semantic HTML**: Prefer semantic elements (`<article>`, `<nav>`, etc.) over generic `<div>` and `<span>`
-- **Accessibility**: Use proper structure and attributes (alt, labels, ARIA)
-- **Void elements**: Self-closing tags like `<img>`, `<br>`, `<input>` don't need closing tags
-- **Block vs Inline**: Can be changed with CSS `display` property
-- **Nesting rules**: Some elements cannot contain others (e.g., `<p>` cannot contain `<div>`)
diff --git a/skills/html-coder/references/glossary-ui-ux.md b/skills/html-coder/references/glossary-ui-ux.md
deleted file mode 100644
index ce46f2c9e..000000000
--- a/skills/html-coder/references/glossary-ui-ux.md
+++ /dev/null
@@ -1,461 +0,0 @@
-# UI/UX Terminology Glossary
-
-Quick reference for user interface and user experience terms in HTML context.
-
-## A
-
-**Accessibility (a11y)**  
-Design practice ensuring websites are usable by people with disabilities. Includes screen reader support, keyboard navigation, sufficient color contrast, and semantic HTML.
-
-**Accordion**  
-Collapsible content sections where clicking one section expands it while collapsing others. Often built with `<details>` and `<summary>`.
-
-**Active State**  
-Visual indication when an element is being interacted with (e.g., button being pressed). CSS: `:active` pseudo-class.
-
-**ARIA (Accessible Rich Internet Applications)**  
-Set of attributes (`aria-*`) that make web content more accessible to assistive technologies.
-
-**Alt Text**  
-Alternative text for images (`alt` attribute) read by screen readers and shown when image fails to load.
-
-**Anchor**  
-Link element (`<a>`) that navigates to another location, either on same page or different URL.
-
-**Above the Fold**  
-Content visible without scrolling when page first loads. Critical for first impressions and performance.
-
-## B
-
-**Breadcrumb Navigation**  
-Secondary navigation showing user's location in site hierarchy (Home > Products > Electronics > Laptops).
-
-**Button**  
-Interactive element (`<button>`) that triggers an action. Should be keyboard accessible.
-
-**Baseline Grid**  
-Vertical rhythm system for consistent spacing and alignment of text and elements.
-
-## C
-
-**Call-to-Action (CTA)**  
-Element (usually button) prompting user to take specific action (e.g., "Sign Up", "Buy Now").
-
-**Caption**  
-Descriptive text for tables (`<caption>`) or figures (`<figcaption>`). Important for accessibility.
-
-**Card**  
-Self-contained content block (article preview, product) typically using `<article>` or `<div>`.
-
-**Checkbox**  
-Input allowing multiple selections from options. HTML: `<input type="checkbox">`.
-
-**Click Area**  
-Interactive region of an element. Should be minimum 44×44px for touch targets per accessibility guidelines.
-
-**Contrast Ratio**  
-Difference in luminance between text and background. WCAG requires 4.5:1 for normal text, 3:1 for large text.
-
-**Content Hierarchy**  
-Organization of content by importance using headings (`<h1>`-`<h6>`), visual weight, and spacing.
-
-**Cursor**  
-Mouse pointer appearance. Changed with CSS `cursor` property (pointer for clickable, text for editable, etc.).
-
-## D
-
-**Dialog**  
-Modal or non-modal overlay window. HTML: `<dialog>` element or custom implementation.
-
-**Disabled State**  
-Non-interactive state of form element. HTML: `disabled` attribute. Should be visually distinct.
-
-**Disclosure Widget**  
-Collapsible content section. HTML: `<details>` with `<summary>`.
-
-**Dropdown**  
-Selection list that expands to show options. HTML: `<select>` or custom with `<ul>`.
-
-## E
-
-**Empty State**  
-UI shown when no content is available (e.g., empty shopping cart, no search results).
-
-**Error Message**  
-Feedback indicating problem with user input. Should be clear, specific, and suggest solution.
-
-**Error State**  
-Visual indication of invalid input. Often uses red color and error icon with descriptive message.
-
-## F
-
-**Favicon**  
-Small icon displayed in browser tab. HTML: `<link rel="icon" href="favicon.ico">`.
-
-**Fieldset**  
-Group of related form fields. HTML: `<fieldset>` with `<legend>` for group label.
-
-**Focus State**  
-Visual indication of keyboard-focused element. CSS: `:focus` pseudo-class. Essential for accessibility.
-
-**Focus Trap**  
-Constraint keeping keyboard focus within modal or dialog. Prevents tabbing to background content.
-
-**Footer**  
-Bottom section of page or article. HTML: `<footer>`. Typically contains copyright, links, contact info.
-
-**Form**  
-Collection of input fields for user data entry. HTML: `<form>`.
-
-**Form Validation**  
-Checking user input for correctness. Can be HTML5 attributes (`required`, `pattern`) or JavaScript.
-
-## G
-
-**Global Navigation**  
-Primary site-wide navigation menu. HTML: `<nav>` element.
-
-**Grid**  
-Layout system organizing content in rows and columns. HTML: `<table>` for data, CSS Grid for layout.
-
-**Grouping**  
-Organizing related elements together visually and semantically for better understanding.
-
-## H
-
-**Hamburger Menu**  
-Three-line icon (☰) revealing mobile navigation menu when clicked. Common mobile pattern.
-
-**Header**  
-Top section of page or article. HTML: `<header>`. Contains branding, navigation, titles.
-
-**Heading**  
-Content title indicating hierarchy. HTML: `<h1>` (most important) to `<h6>` (least important).
-
-**Hero Section**  
-Prominent banner at page top, typically with large image, headline, and CTA.
-
-**Hidden Content**  
-Content not displayed but present in HTML. Can be conditionally shown. HTML: `hidden` attribute.
-
-**Hover State**  
-Visual change when mouse cursor is over element. CSS: `:hover` pseudo-class.
-
-**Hyperlink**  
-Clickable link to another page or resource. HTML: `<a href="url">`.
-
-## I
-
-**Icon**  
-Small graphic representing action or concept. Can be image, SVG, or icon font.
-
-**Input**  
-Form field for user data entry. HTML: `<input>` with various types.
-
-**Input Mask**  
-Format constraint on input (e.g., phone number: (555) 123-4567).
-
-**Interactive Element**  
-Element user can interact with (buttons, links, form fields). Must be keyboard accessible.
-
-**Invalid State**  
-Indication that form field contains invalid data. Use `aria-invalid="true"`.
-
-## J
-
-**Jump Link**  
-Link navigating to specific section on same page using fragment identifier (`href="#section-id"`).
-
-## K
-
-**Keyboard Navigation**  
-Navigating website using keyboard only (Tab, Enter, Space, Arrows). Essential for accessibility.
-
-**Keyboard Shortcut**  
-Key combination triggering action. HTML: `accesskey` attribute (limited browser support).
-
-## L
-
-**Label**  
-Text describing form field. HTML: `<label for="field-id">`. Essential for accessibility.
-
-**Landmark**  
-Major page region identified by semantic HTML or ARIA roles (navigation, main, complementary).
-
-**Landing Page**  
-Entry page designed for specific purpose (product launch, campaign, lead generation).
-
-**Layout**  
-Arrangement of elements on page. Use semantic HTML and CSS (Flexbox, Grid).
-
-**Legend**  
-Caption for fieldset. HTML: `<legend>`. Describes group of form fields.
-
-**Link**  
-Navigational element. HTML: `<a>`. Should have descriptive text, not "click here".
-
-**List**  
-Collection of items. HTML: `<ul>` (unordered), `<ol>` (ordered), `<dl>` (description).
-
-**Loading State**  
-Visual indication of background process (spinner, progress bar, skeleton screen).
-
-**Logo**  
-Brand identifier, typically image in header. Should link to homepage.
-
-## M
-
-**Main Content**  
-Primary unique content of page. HTML: `<main>`. One per page, excludes repeated content.
-
-**Menu**  
-List of navigation links or actions. HTML: `<nav>` with `<ul>` or `<menu>`.
-
-**Meta Description**  
-Page summary for search engines. HTML: `<meta name="description" content="...">`.
-
-**Microdata**  
-Structured data markup using `itemscope`, `itemprop` attributes for SEO.
-
-**Mobile-First**  
-Design approach starting with mobile layout, then enhancing for larger screens.
-
-**Modal**  
-Overlay dialog requiring interaction before returning to main content. Use `<dialog>` or custom.
-
-**Multi-Step Form**  
-Form split across multiple pages or sections (wizard pattern). Show progress indicator.
-
-## N
-
-**Navigation**  
-System for moving through website. HTML: `<nav>`. Should be consistent and predictable.
-
-**Notification**  
-Message alerting user to event or status change. Use `role="alert"` for urgent messages.
-
-## O
-
-**Onboarding**  
-Process introducing new users to product/service through tutorials or walkthroughs.
-
-**Option**  
-Choice in select dropdown. HTML: `<option>` within `<select>`.
-
-**Overlay**  
-Content layer displayed over main page (modal, tooltip, dropdown).
-
-## P
-
-**Pagination**  
-Breaking content across multiple pages with navigation controls (Previous, Next, page numbers).
-
-**Placeholder**  
-Example text in empty form field. HTML: `placeholder` attribute. Should NOT replace label.
-
-**Primary Action**  
-Most important action on page (e.g., "Submit", "Buy Now"). Should be visually prominent.
-
-**Progress Indicator**  
-Visual representation of task completion. HTML: `<progress>` or custom implementation.
-
-**Prototype**  
-Early version of design/feature for testing concepts before full development.
-
-## R
-
-**Radio Button**  
-Input allowing single selection from options. HTML: `<input type="radio" name="group">`.
-
-**Readability**  
-How easily text can be read and understood. Affected by font, size, spacing, contrast, line length.
-
-**Responsive Design**  
-Adapting layout to different screen sizes. Use `<meta name="viewport">` and CSS media queries.
-
-**Required Field**  
-Form field that must be completed. HTML: `required` attribute. Mark visually (asterisk).
-
-## S
-
-**Screen Reader**  
-Assistive technology reading page content aloud for visually impaired users.
-
-**Scrollbar**  
-Interface for scrolling through content. Avoid hiding unless providing alternative.
-
-**Search**  
-Functionality for finding content. HTML: `<input type="search">` in form with `role="search"`.
-
-**Section**  
-Thematic content grouping. HTML: `<section>` or `<article>`.
-
-**Select**  
-Dropdown menu for choosing option(s). HTML: `<select>` with `<option>` elements.
-
-**Semantic HTML**  
-Using HTML elements that convey meaning (e.g., `<nav>`, `<article>`) rather than generic `<div>`.
-
-**Sidebar**  
-Secondary content area alongside main content. HTML: `<aside>`.
-
-**Skip Link**  
-Link allowing keyboard users to jump past navigation to main content. Essential for accessibility.
-
-**Slider**  
-Input for selecting value from range. HTML: `<input type="range">` or custom carousel.
-
-**Sticky Navigation**  
-Navigation that remains visible while scrolling. CSS: `position: sticky`.
-
-**Submit Button**  
-Button submitting form data. HTML: `<button type="submit">` or `<input type="submit">`.
-
-**Success State**  
-Positive feedback indicating successful action (green checkmark, success message).
-
-## T
-
-**Tab Order**  
-Sequence keyboard focus moves when pressing Tab key. Control with `tabindex`.
-
-**Tabindex**  
-Attribute controlling keyboard focus order. Use `0` for natural order, `-1` to exclude from tab order.
-
-**Table**  
-Structured data in rows and columns. HTML: `<table>`. Use `<th scope>` for accessibility.
-
-**Textarea**  
-Multi-line text input. HTML: `<textarea>`.
-
-**Toast Notification**  
-Temporary message appearing briefly then disappearing. Announce with `aria-live="polite"`.
-
-**Toggle**  
-Control switching between two states (on/off, show/hide). Often checkbox styled as switch.
-
-**Tooltip**  
-Small popup showing additional info on hover. Use `title` attribute or custom ARIA implementation.
-
-**Touch Target**  
-Interactive area for touch input. Minimum 44×44px per WCAG guidelines.
-
-## U
-
-**User Flow**  
-Path users take through website to complete task. Optimize for common goals.
-
-**User Testing**  
-Observing real users interacting with website to identify usability issues.
-
-## V
-
-**Validation**  
-Checking user input correctness. HTML5: `required`, `pattern`, `type`. Show clear error messages.
-
-**Viewport**  
-Visible area of webpage. Set with `<meta name="viewport" content="width=device-width, initial-scale=1">`.
-
-**Visual Hierarchy**  
-Organizing content by visual importance using size, color, spacing, contrast.
-
-**Visually Hidden**  
-Content hidden visually but available to screen readers. Important for accessibility.
-
-## W
-
-**WCAG (Web Content Accessibility Guidelines)**  
-International standard for web accessibility. Levels: A (minimum), AA (recommended), AAA (enhanced).
-
-**Web Form**  
-Interactive form collecting user input. Use proper labels, validation, error messages.
-
-**White Space**  
-Empty space around elements. Essential for readability and visual hierarchy. Don't fear it.
-
-**Widget**  
-Interactive UI component (calendar picker, autocomplete, color picker).
-
-**Wireframe**  
-Low-fidelity sketch showing page layout and content structure without detailed design.
-
-**Wizard**  
-Multi-step process guiding user through complex task. Show progress and allow back navigation.
-
-## Z
-
-**Z-Index**  
-CSS property controlling stacking order of overlapping elements (modals, dropdowns).
-
----
-
-## Common UX Patterns in HTML
-
-### Navigation Patterns
-- **Primary Navigation**: Main site menu in `<nav>`
-- **Breadcrumbs**: Showing current location in hierarchy
-- **Pagination**: Navigating through lists or search results
-- **Tabs**: Switching between related content sections
-- **Hamburger Menu**: Mobile-friendly collapsible navigation
-
-### Form Patterns
-- **Single-Column Layout**: Easier to scan and complete
-- **Field Labels**: Above or beside fields, not as placeholders only
-- **Inline Validation**: Real-time feedback as user types
-- **Required Fields**: Clearly marked with asterisk or "required"
-- **Error Messages**: Specific, helpful, near relevant field
-- **Success Confirmation**: Clear feedback after submission
-
-### Content Patterns
-- **Cards**: Contained content previews
-- **Hero Section**: Prominent banner with key message and CTA
-- **F-Pattern**: Users scan in F-shape, place important content accordingly
-- **Accordion**: Expandable/collapsible content sections
-- **Modal**: Focus attention on specific task or information
-
-### Feedback Patterns
-- **Loading Indicators**: Show progress during wait times
-- **Toast Notifications**: Brief temporary messages
-- **Inline Messages**: Success/error feedback near relevant content
-- **Empty States**: Guidance when no content available
-- **Confirmation Dialogs**: Prevent accidental destructive actions
-
-## Accessibility Quick Reference
-
-### Must-Have Features
-- ✅ All images have `alt` text
-- ✅ Form inputs have associated `<label>`
-- ✅ Proper heading hierarchy (`<h1>` → `<h2>` → `<h3>`)
-- ✅ Sufficient color contrast (4.5:1 minimum)
-- ✅ Keyboard navigation works (test with Tab key)
-- ✅ Focus indicators visible
-- ✅ Skip navigation link provided
-- ✅ Language declared (`<html lang="en">`)
-
-### ARIA Essentials
-- `role` - Define element purpose
-- `aria-label` - Provide accessible name
-- `aria-labelledby` - Reference label by ID
-- `aria-describedby` - Reference description by ID
-- `aria-hidden` - Hide from screen readers
-- `aria-live` - Announce dynamic content changes
-- `aria-expanded` - Indicate expanded/collapsed state
-- `aria-current` - Indicate current page/step
-
-## Mobile UX Considerations
-
-- **Viewport Meta Tag**: `<meta name="viewport" content="width=device-width, initial-scale=1">`
-- **Touch Targets**: Minimum 44×44px clickable areas
-- **Readable Text**: Minimum 16px font size
-- **Thumb-Friendly**: Place important actions within reach
-- **Minimize Input**: Use appropriate input types (`tel`, `email`, `date`)
-- **Responsive Images**: Use `srcset` and `<picture>` for different screen sizes
-
-## Resources
-
-- **WCAG Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
-- **A11y Project**: https://www.a11yproject.com/
-- **Nielsen Norman Group**: https://www.nngroup.com/
-- **Material Design**: https://material.io/design
-- **Inclusive Components**: https://inclusive-components.design/
-- **WebAIM**: https://webaim.org/
diff --git a/skills/html-coder/references/glossary.md b/skills/html-coder/references/glossary.md
new file mode 100644
index 000000000..e8ab48442
--- /dev/null
+++ b/skills/html-coder/references/glossary.md
@@ -0,0 +1,1409 @@
+# HTML Glossary
+
+Quick reference for all HTML elements organized by category.
+
+## HTML Tag Glossary
+
+### Document Structure
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<!DOCTYPE>` | Document type declaration | `<!DOCTYPE html>` |
+| `<html>` | Root element | Contains entire HTML document |
+| `<head>` | Document metadata container | Information about the document |
+| `<title>` | Document title | Shown in browser tab/title bar |
+| `<body>` | Document body | Visible page content |
+| `<base>` | Base URL for relative URLs | `<base href="https://example.com/">` |
+| `<link>` | External resource link | CSS files, favicons, etc. |
+| `<meta>` | Metadata | Charset, viewport, description, etc. |
+| `<style>` | Internal CSS | Embedded stylesheets |
+
+### Metadata Elements
+
+| Tag | Description | Common Use |
+|-----|-------------|------------|
+| `<meta charset>` | Character encoding | `<meta charset="UTF-8">` |
+| `<meta name>` | Named metadata | Description, keywords, author |
+| `<meta property>` | Property metadata | Open Graph, Twitter Cards |
+| `<meta http-equiv>` | HTTP header equivalent | Content-Type, refresh, CSP |
+| `<meta viewport>` | Viewport settings | Mobile responsive design |
+
+### Content Sectioning
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<header>` | Header section | Site/page/article header |
+| `<nav>` | Navigation section | Navigation links |
+| `<main>` | Main content | Primary page content (unique) |
+| `<section>` | Generic section | Thematic grouping of content |
+| `<article>` | Self-contained content | Blog post, news article, forum post |
+| `<aside>` | Tangential content | Sidebars, pull quotes, ads |
+| `<footer>` | Footer section | Site/page/article footer |
+| `<h1>` to `<h6>` | Headings | Content hierarchy (H1 most important) |
+| `<address>` | Contact information | Author/owner contact details |
+
+### Text Content
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<div>` | Generic container | Block-level grouping (no semantic meaning) |
+| `<p>` | Paragraph | Text paragraphs |
+| `<hr>` | Thematic break | Horizontal rule/separator |
+| `<pre>` | Preformatted text | Code blocks, ASCII art |
+| `<blockquote>` | Block quotation | Long quotes with optional `cite` |
+| `<ol>` | Ordered list | Numbered list |
+| `<ul>` | Unordered list | Bulleted list |
+| `<li>` | List item | Item in `<ol>`, `<ul>`, or `<menu>` |
+| `<dl>` | Description list | Term-definition pairs |
+| `<dt>` | Description term | Term in description list |
+| `<dd>` | Description details | Definition in description list |
+| `<figure>` | Self-contained content | Images, diagrams, code with caption |
+| `<figcaption>` | Figure caption | Caption for `<figure>` |
+
+### Inline Text Semantics
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<a>` | Anchor/hyperlink | Links to other pages/resources |
+| `<span>` | Generic inline container | Inline grouping (no semantic meaning) |
+| `<strong>` | Strong importance | Bold text (semantic) |
+| `<em>` | Emphasis | Italic text (semantic) |
+| `<b>` | Bold text | Bold (presentational, use CSS instead) |
+| `<i>` | Italic text | Italic (presentational, use CSS instead) |
+| `<u>` | Underlined text | Underline (avoid, looks like link) |
+| `<s>` | Strikethrough | Incorrect/irrelevant text |
+| `<mark>` | Highlighted text | Marked/highlighted for reference |
+| `<small>` | Fine print | Side comments, legal text |
+| `<abbr>` | Abbreviation | Abbreviations with `title` |
+| `<cite>` | Citation | Title of creative work |
+| `<code>` | Inline code | Code snippets |
+| `<kbd>` | Keyboard input | Keyboard keys to press |
+| `<samp>` | Sample output | Computer program output |
+| `<var>` | Variable | Mathematical/programming variable |
+| `<time>` | Date/time | Machine-readable date/time |
+| `<data>` | Machine-readable content | Data with value attribute |
+| `<q>` | Inline quotation | Short inline quotes |
+| `<dfn>` | Definition term | Term being defined |
+| `<sub>` | Subscript | H₂O |
+| `<sup>` | Superscript | x² |
+| `<del>` | Deleted text | Removed content (with `<ins>`) |
+| `<ins>` | Inserted text | Added content (with `<del>`) |
+| `<br>` | Line break | Force line break |
+| `<wbr>` | Word break opportunity | Suggest line break point |
+| `<bdi>` | Bidirectional isolate | Text with different direction |
+| `<bdo>` | Bidirectional override | Override text direction |
+| `<ruby>` | Ruby annotation | East Asian typography |
+| `<rt>` | Ruby text | Pronunciation guide in `<ruby>` |
+| `<rp>` | Ruby parenthesis | Fallback for browsers without ruby |
+
+### Images and Multimedia
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<img>` | Image | Embed raster images |
+| `<picture>` | Responsive image container | Art direction, multiple formats |
+| `<source>` | Media source | Source for `<picture>`, `<audio>`, `<video>` |
+| `<audio>` | Audio content | Embed audio files |
+| `<video>` | Video content | Embed video files |
+| `<track>` | Text track | Subtitles, captions for video/audio |
+| `<map>` | Image map | Define clickable areas in image |
+| `<area>` | Image map area | Clickable region in `<map>` |
+| `<svg>` | Scalable Vector Graphics | Inline vector graphics |
+| `<canvas>` | Graphics canvas | Drawing surface for JavaScript |
+
+### Embedded Content
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<iframe>` | Inline frame | Embed external content |
+| `<embed>` | External content | Embed plugins (legacy) |
+| `<object>` | External object | Embed multimedia, PDFs |
+| `<param>` | Object parameters | Parameters for `<object>` |
+| `<portal>` | Portal element | Preview/navigate to other pages |
+
+### Scripting
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<script>` | JavaScript | Embed or link JavaScript |
+| `<noscript>` | No script fallback | Content when JavaScript disabled |
+| `<template>` | Content template | HTML template for cloning |
+| `<slot>` | Web component slot | Placeholder in web components |
+
+### Tables
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<table>` | Table | Tabular data |
+| `<caption>` | Table caption | Table title/description |
+| `<thead>` | Table header | Header rows |
+| `<tbody>` | Table body | Main table content |
+| `<tfoot>` | Table footer | Footer rows |
+| `<tr>` | Table row | Row of cells |
+| `<th>` | Header cell | Column/row header |
+| `<td>` | Data cell | Table data |
+| `<col>` | Column | Column properties |
+| `<colgroup>` | Column group | Group of columns |
+
+### Forms
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<form>` | Form | User input form |
+| `<input>` | Input field | Various input types |
+| `<label>` | Input label | Label for form control |
+| `<button>` | Button | Clickable button |
+| `<select>` | Dropdown | Selection list |
+| `<option>` | Select option | Option in `<select>` |
+| `<optgroup>` | Option group | Group options in `<select>` |
+| `<textarea>` | Multi-line text | Large text input |
+| `<fieldset>` | Field grouping | Group related form fields |
+| `<legend>` | Fieldset caption | Title for `<fieldset>` |
+| `<datalist>` | Input suggestions | Predefined options for input |
+| `<output>` | Calculation result | Result of calculation |
+| `<progress>` | Progress bar | Task progress indicator |
+| `<meter>` | Measurement gauge | Scalar measurement |
+
+### Interactive Elements
+
+| Tag | Description | Usage |
+|-----|-------------|-------|
+| `<details>` | Disclosure widget | Expandable content |
+| `<summary>` | Details summary | Title for `<details>` |
+| `<dialog>` | Dialog box | Modal or non-modal dialog |
+| `<menu>` | Menu | List of commands (experimental) |
+
+### Web Components
+
+| Tag | Description | Purpose |
+|-----|-------------|---------|
+| `<template>` | Content template | Reusable HTML template |
+| `<slot>` | Content slot | Placeholder in shadow DOM |
+| Custom elements | User-defined elements | `<my-component>` |
+
+### Deprecated/Obsolete Elements
+
+❌ **Do not use these elements** (use CSS or semantic alternatives instead):
+
+| Tag | Reason | Alternative |
+|-----|--------|-------------|
+| `<acronym>` | Obsolete | Use `<abbr>` |
+| `<applet>` | Obsolete | Use `<object>` or `<embed>` |
+| `<basefont>` | Obsolete | Use CSS `font` properties |
+| `<big>` | Obsolete | Use CSS `font-size` |
+| `<blink>` | Obsolete | Use CSS `animation` |
+| `<center>` | Obsolete | Use CSS `text-align: center` |
+| `<dir>` | Obsolete | Use `<ul>` |
+| `<font>` | Obsolete | Use CSS `color`, `font-family`, `font-size` |
+| `<frame>` | Obsolete | Use `<iframe>` or CSS layout |
+| `<frameset>` | Obsolete | Use CSS layout |
+| `<marquee>` | Obsolete | Use CSS `animation` |
+| `<nobr>` | Obsolete | Use CSS `white-space: nowrap` |
+| `<noframes>` | Obsolete | N/A (frames obsolete) |
+| `<plaintext>` | Obsolete | Use `<pre>` or `<code>` |
+| `<spacer>` | Obsolete | Use CSS `margin`, `padding` |
+| `<strike>` | Obsolete | Use `<del>` or `<s>` |
+| `<tt>` | Obsolete | Use `<code>` or `<kbd>` |
+| `<xmp>` | Obsolete | Use `<pre>` or `<code>` |
+
+### Elements by Display Type
+
+### Block-Level Elements (Default)
+
+Display as block (full width, new line):
+
+```
+<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, 
+<dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, 
+<h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <pre>, 
+<section>, <table>, <ul>, <video>
+```
+
+### Inline Elements (Default)
+
+Display inline (no line break):
+
+```
+<a>, <abbr>, <b>, <bdi>, <bdo>, <br>, <button>, <cite>, <code>, 
+<data>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <mark>, 
+<q>, <s>, <samp>, <select>, <small>, <span>, <strong>, <sub>, 
+<sup>, <textarea>, <time>, <u>, <var>, <wbr>
+```
+
+### Void Elements (Self-Closing)
+
+Cannot have content:
+
+```
+<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, 
+<meta>, <param>, <source>, <track>, <wbr>
+```
+
+### Elements by Purpose
+
+### Navigation
+```
+<nav>, <a>, <menu>
+```
+
+### Grouping Content
+```
+<div>, <section>, <article>, <aside>, <header>, <footer>, <main>
+```
+
+### Text Formatting
+```
+<p>, <h1>-<h6>, <strong>, <em>, <mark>, <del>, <ins>
+```
+
+### Lists
+```
+<ul>, <ol>, <li>, <dl>, <dt>, <dd>
+```
+
+### Forms
+```
+<form>, <input>, <textarea>, <select>, <button>, <label>, <fieldset>, <legend>
+```
+
+### Media
+```
+<img>, <audio>, <video>, <picture>, <source>, <track>
+```
+
+### Tables
+```
+<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <caption>
+```
+
+### Code/Programming
+```
+<code>, <pre>, <kbd>, <samp>, <var>
+```
+
+### Quick Reference by Use Case
+
+### Basic Page Structure
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Page Title</title>
+  </head>
+  <body>
+    <header>Header</header>
+    <nav>Navigation</nav>
+    <main>Main Content</main>
+    <footer>Footer</footer>
+  </body>
+</html>
+```
+
+### Content Organization
+```html
+<article>
+  <header>
+    <h1>Article Title</h1>
+    <time>Date</time>
+  </header>
+  <section>
+    <h2>Section</h2>
+    <p>Content</p>
+  </section>
+  <footer>Article footer</footer>
+</article>
+```
+
+### Text Semantics
+```html
+<p>Normal text with <strong>important</strong> and <em>emphasized</em> parts.</p>
+<p>Use <code>code</code> for inline code and <pre> for blocks.</p>
+<p><abbr title="HyperText Markup Language">HTML</abbr> example.</p>
+```
+
+### Forms
+```html
+<form>
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name">
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Media
+```html
+<img src="image.jpg" alt="Description">
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+</video>
+<audio controls>
+  <source src="audio.mp3" type="audio/mpeg">
+</audio>
+```
+
+### Lists
+```html
+<!-- Unordered -->
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+<!-- Ordered -->
+<ol>
+  <li>First</li>
+  <li>Second</li>
+</ol>
+
+<!-- Description -->
+<dl>
+  <dt>Term</dt>
+  <dd>Definition</dd>
+</dl>
+```
+
+### Tables
+```html
+<table>
+  <caption>Table Title</caption>
+  <thead>
+    <tr><th>Header</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Data</td></tr>
+  </tbody>
+</table>
+```
+
+### Notes
+
+- **Semantic HTML**: Prefer semantic elements (`<article>`, `<nav>`, etc.) over generic `<div>` and `<span>`
+- **Accessibility**: Use proper structure and attributes (alt, labels, ARIA)
+- **Void elements**: Self-closing tags like `<img>`, `<br>`, `<input>` don't need closing tags
+- **Block vs Inline**: Can be changed with CSS `display` property
+- **Nesting rules**: Some elements cannot contain others (e.g., `<p>` cannot contain `<div>`)
+
+## HTML Attributes Glossary
+
+Complete reference of HTML attributes organized by category and element.
+
+### Global Attributes
+
+Attributes that can be used on **any** HTML element:
+
+| Attribute | Description | Values | Example |
+|-----------|-------------|--------|---------|
+| `accesskey` | Keyboard shortcut | Character | `accesskey="s"` |
+| `class` | CSS class(es) | Space-separated classes | `class="btn primary"` |
+| `contenteditable` | Editable content | `true`, `false` | `contenteditable="true"` |
+| `data-*` | Custom data | Any value | `data-user-id="123"` |
+| `dir` | Text direction | `ltr`, `rtl`, `auto` | `dir="rtl"` |
+| `draggable` | Draggable element | `true`, `false` | `draggable="true"` |
+| `hidden` | Hide element | Boolean | `hidden` |
+| `id` | Unique identifier | Unique string | `id="header"` |
+| `inert` | Inert subtree | Boolean | `inert` |
+| `inputmode` | Virtual keyboard type | See table below | `inputmode="numeric"` |
+| `is` | Custom element | Element name | `is="my-element"` |
+| `itemid` | Microdata item ID | URL | `itemid="urn:isbn:123"` |
+| `itemprop` | Microdata property | Property name | `itemprop="name"` |
+| `itemref` | Microdata reference | ID references | `itemref="ref1 ref2"` |
+| `itemscope` | Microdata scope | Boolean | `itemscope` |
+| `itemtype` | Microdata type | URL | `itemtype="https://schema.org/Person"` |
+| `lang` | Language | Language code | `lang="en"`, `lang="es"` |
+| `nonce` | CSP nonce | Random string | `nonce="r@nd0m"` |
+| `part` | Shadow part name | Part name | `part="button"` |
+| `slot` | Slot name | Slot identifier | `slot="header"` |
+| `spellcheck` | Spell checking | `true`, `false` | `spellcheck="false"` |
+| `style` | Inline CSS | CSS declarations | `style="color: red;"` |
+| `tabindex` | Tab order | Integer | `tabindex="0"`, `tabindex="-1"` |
+| `title` | Advisory information | Text | `title="Click for more info"` |
+| `translate` | Translation support | `yes`, `no` | `translate="no"` |
+
+#### Inputmode Values
+
+| Value | Description | Keyboard Type |
+|-------|-------------|---------------|
+| `none` | No virtual keyboard | N/A |
+| `text` | Standard text | Full keyboard |
+| `decimal` | Decimal numbers | Numeric with decimal |
+| `numeric` | Numeric only | Number pad |
+| `tel` | Telephone | Phone number pad |
+| `search` | Search | Search-optimized |
+| `email` | Email address | Email keyboard |
+| `url` | URL | URL keyboard |
+
+### ARIA Attributes
+
+Accessibility attributes (prefix `aria-`):
+
+#### ARIA Roles
+| Attribute | Description | Example |
+|-----------|-------------|---------|
+| `role` | Element role | `role="button"`, `role="navigation"` |
+
+#### ARIA States and Properties
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `aria-activedescendant` | Active child element | ID |
+| `aria-atomic` | Entire region announced | `true`, `false` |
+| `aria-autocomplete` | Autocomplete type | `none`, `inline`, `list`, `both` |
+| `aria-busy` | Loading state | `true`, `false` |
+| `aria-checked` | Checkbox/radio state | `true`, `false`, `mixed` |
+| `aria-colcount` | Total columns | Integer |
+| `aria-colindex` | Column index | Integer |
+| `aria-colspan` | Column span | Integer |
+| `aria-controls` | Controlled elements | ID references |
+| `aria-current` | Current item | `page`, `step`, `location`, `date`, `time`, `true`, `false` |
+| `aria-describedby` | Description reference | ID references |
+| `aria-details` | Details reference | ID reference |
+| `aria-disabled` | Disabled state | `true`, `false` |
+| `aria-dropeffect` | Drag-drop operation | `copy`, `move`, `link`, `execute`, `popup`, `none` |
+| `aria-errormessage` | Error message reference | ID reference |
+| `aria-expanded` | Expanded state | `true`, `false` |
+| `aria-flowto` | Reading order | ID references |
+| `aria-grabbed` | Grabbed state | `true`, `false` |
+| `aria-haspopup` | Popup type | `true`, `false`, `menu`, `listbox`, `tree`, `grid`, `dialog` |
+| `aria-hidden` | Hidden from screen readers | `true`, `false` |
+| `aria-invalid` | Validation state | `true`, `false`, `grammar`, `spelling` |
+| `aria-keyshortcuts` | Keyboard shortcuts | Text |
+| `aria-label` | Accessible label | Text |
+| `aria-labelledby` | Label reference | ID references |
+| `aria-level` | Hierarchical level | Integer |
+| `aria-live` | Live region | `off`, `polite`, `assertive` |
+| `aria-modal` | Modal dialog | `true`, `false` |
+| `aria-multiline` | Multi-line input | `true`, `false` |
+| `aria-multiselectable` | Multi-selection | `true`, `false` |
+| `aria-orientation` | Orientation | `horizontal`, `vertical` |
+| `aria-owns` | Owned elements | ID references |
+| `aria-placeholder` | Placeholder text | Text |
+| `aria-posinset` | Position in set | Integer |
+| `aria-pressed` | Pressed state | `true`, `false`, `mixed` |
+| `aria-readonly` | Read-only state | `true`, `false` |
+| `aria-relevant` | Relevant changes | `additions`, `removals`, `text`, `all` |
+| `aria-required` | Required field | `true`, `false` |
+| `aria-roledescription` | Role description | Text |
+| `aria-rowcount` | Total rows | Integer |
+| `aria-rowindex` | Row index | Integer |
+| `aria-rowspan` | Row span | Integer |
+| `aria-selected` | Selected state | `true`, `false` |
+| `aria-setsize` | Set size | Integer |
+| `aria-sort` | Sort order | `ascending`, `descending`, `none`, `other` |
+| `aria-valuemax` | Maximum value | Number |
+| `aria-valuemin` | Minimum value | Number |
+| `aria-valuenow` | Current value | Number |
+| `aria-valuetext` | Value as text | Text |
+
+### Link Attributes (`<a>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `href` | Target URL | URL |
+| `target` | Where to open | `_self`, `_blank`, `_parent`, `_top`, frame name |
+| `download` | Download filename | Filename (optional) |
+| `rel` | Relationship | See Link Relationships below |
+| `hreflang` | Target language | Language code |
+| `type` | MIME type | MIME type |
+| `ping` | Ping URLs | Space-separated URLs |
+| `referrerpolicy` | Referrer policy | See Referrer Policy below |
+
+#### Link Relationships (`rel`)
+
+| Value | Description | Usage |
+|-------|-------------|-------|
+| `alternate` | Alternate version | RSS feed, translations |
+| `author` | Author page | `<link rel="author">` |
+| `bookmark` | Permalink | Bookmark for section |
+| `canonical` | Canonical URL | Preferred version |
+| `dns-prefetch` | DNS prefetch | `<link rel="dns-prefetch">` |
+| `external` | External site | Links to other domains |
+| `help` | Help document | Help/support page |
+| `icon` | Favicon | `<link rel="icon">` |
+| `license` | License | Copyright/license page |
+| `manifest` | Web manifest | PWA manifest file |
+| `modulepreload` | Module preload | ES6 module preload |
+| `next` | Next page | Pagination |
+| `nofollow` | Don't follow | SEO: don't follow link |
+| `noopener` | No opener reference | Security for `_blank` |
+| `noreferrer` | No referrer | Don't send referrer |
+| `opener` | Has opener | Opposite of noopener |
+| `pingback` | Pingback URL | Blog pingbacks |
+| `preconnect` | Preconnect | Early connection |
+| `prefetch` | Prefetch resource | Future navigation |
+| `preload` | Preload resource | Current page resource |
+| `prerender` | Prerender page | Next page prerender |
+| `prev` | Previous page | Pagination |
+| `search` | Search tool | Search functionality |
+| `stylesheet` | CSS stylesheet | `<link rel="stylesheet">` |
+| `tag` | Tag/keyword | Tag for content |
+
+#### Referrer Policy
+
+| Value | Description |
+|-------|-------------|
+| `no-referrer` | Never send referrer |
+| `no-referrer-when-downgrade` | Don't send on HTTPS→HTTP (default) |
+| `origin` | Send origin only |
+| `origin-when-cross-origin` | Full URL same-origin, origin only cross-origin |
+| `same-origin` | Send only same-origin |
+| `strict-origin` | Origin only, not on downgrade |
+| `strict-origin-when-cross-origin` | Full same-origin, origin cross-origin, none downgrade |
+| `unsafe-url` | Always send full URL |
+
+### Image Attributes (`<img>`)
+
+| Attribute | Description | Required | Example |
+|-----------|-------------|----------|---------|
+| `src` | Image URL | Yes | `src="image.jpg"` |
+| `alt` | Alternative text | Yes | `alt="Description"` |
+| `width` | Image width | No | `width="800"` |
+| `height` | Image height | No | `height="600"` |
+| `srcset` | Responsive sources | No | `srcset="img-400.jpg 400w, img-800.jpg 800w"` |
+| `sizes` | Image sizes | No | `sizes="(max-width: 600px) 400px, 800px"` |
+| `loading` | Loading strategy | No | `loading="lazy"`, `loading="eager"` |
+| `decoding` | Decode strategy | No | `decoding="async"`, `decoding="sync"`, `decoding="auto"` |
+| `crossorigin` | CORS mode | No | `crossorigin="anonymous"` |
+| `ismap` | Server-side map | No | `ismap` (boolean) |
+| `usemap` | Client-side map | No | `usemap="#mapname"` |
+| `referrerpolicy` | Referrer policy | No | See Referrer Policy above |
+
+### Form Attributes (`<form>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `action` | Submit URL | URL |
+| `method` | HTTP method | `GET`, `POST` |
+| `enctype` | Encoding type | `application/x-www-form-urlencoded` (default), `multipart/form-data`, `text/plain` |
+| `accept-charset` | Character encodings | Space-separated encodings |
+| `autocomplete` | Autocomplete | `on`, `off` |
+| `name` | Form name | String |
+| `novalidate` | Skip validation | Boolean |
+| `target` | Response target | `_self`, `_blank`, `_parent`, `_top` |
+| `rel` | Link relationship | See Link Relationships |
+
+### Input Attributes (`<input>`)
+
+#### Universal Input Attributes
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `type` | Input type | See Input Types below |
+| `name` | Field name | String |
+| `value` | Initial value | String |
+| `id` | Unique ID | String |
+| `required` | Required field | Boolean |
+| `disabled` | Disabled field | Boolean |
+| `readonly` | Read-only | Boolean |
+| `autofocus` | Auto focus | Boolean |
+| `autocomplete` | Autocomplete | See Autocomplete Values below |
+| `placeholder` | Placeholder text | String |
+| `form` | Associated form | Form ID |
+
+#### Input Types
+
+| Type | Description | Additional Attributes |
+|------|-------------|----------------------|
+| `text` | Single-line text | `maxlength`, `minlength`, `pattern`, `size` |
+| `password` | Password field | `maxlength`, `minlength`, `pattern`, `size` |
+| `email` | Email address | `maxlength`, `minlength`, `multiple`, `pattern`, `size` |
+| `tel` | Telephone | `maxlength`, `minlength`, `pattern`, `size` |
+| `url` | URL | `maxlength`, `minlength`, `pattern`, `size` |
+| `search` | Search field | `maxlength`, `minlength`, `pattern`, `size` |
+| `number` | Numeric input | `min`, `max`, `step` |
+| `range` | Slider | `min`, `max`, `step` |
+| `date` | Date picker | `min`, `max`, `step` |
+| `time` | Time picker | `min`, `max`, `step` |
+| `datetime-local` | Date and time | `min`, `max`, `step` |
+| `month` | Month picker | `min`, `max`, `step` |
+| `week` | Week picker | `min`, `max`, `step` |
+| `color` | Color picker | N/A |
+| `checkbox` | Checkbox | `checked` |
+| `radio` | Radio button | `checked` |
+| `file` | File upload | `accept`, `multiple`, `capture` |
+| `submit` | Submit button | `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget` |
+| `reset` | Reset button | N/A |
+| `button` | Generic button | N/A |
+| `image` | Image button | `src`, `alt`, `width`, `height`, `formaction`, etc. |
+| `hidden` | Hidden field | N/A |
+
+#### Type-Specific Attributes
+
+| Attribute | Applies To | Description |
+|-----------|------------|-------------|
+| `accept` | `file` | File types accepted | 
+| `capture` | `file` | Camera capture |
+| `checked` | `checkbox`, `radio` | Pre-checked state |
+| `max` | `number`, `range`, date/time | Maximum value |
+| `maxlength` | `text`, `password`, `email`, etc. | Maximum length |
+| `min` | `number`, `range`, date/time | Minimum value |
+| `minlength` | `text`, `password`, `email`, etc. | Minimum length |
+| `multiple` | `email`, `file` | Accept multiple values |
+| `pattern` | `text`, `password`, `email`, etc. | Regex validation |
+| `size` | `text`, `password`, `email`, etc. | Visible width |
+| `step` | `number`, `range`, date/time | Step increment |
+| `list` | Most types | Datalist reference |
+
+#### Autocomplete Values
+
+Common values for `autocomplete` attribute:
+
+| Value | Description |
+|-------|-------------|
+| `off` | Disable autocomplete |
+| `on` | Enable autocomplete |
+| `name` | Full name |
+| `given-name` | First name |
+| `additional-name` | Middle name |
+| `family-name` | Last name |
+| `nickname` | Nickname |
+| `email` | Email address |
+| `username` | Username |
+| `new-password` | New password |
+| `current-password` | Current password |
+| `tel` | Phone number |
+| `tel-country-code` | Country code |
+| `tel-national` | National number |
+| `street-address` | Street address |
+| `address-line1` | Address line 1 |
+| `address-line2` | Address line 2 |
+| `address-level1` | State/province |
+| `address-level2` | City |
+| `postal-code` | Postal/ZIP code |
+| `country` | Country code |
+| `country-name` | Country name |
+| `cc-name` | Cardholder name |
+| `cc-number` | Credit card number |
+| `cc-exp` | Expiration date |
+| `cc-exp-month` | Expiration month |
+| `cc-exp-year` | Expiration year |
+| `cc-csc` | Security code |
+| `cc-type` | Card type |
+| `bday` | Birthday |
+| `bday-day` | Birth day |
+| `bday-month` | Birth month |
+| `bday-year` | Birth year |
+| `sex` | Gender |
+| `url` | Website URL |
+| `photo` | Photo URL |
+
+### Button Attributes (`<button>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `type` | Button type | `submit`, `reset`, `button` |
+| `name` | Button name | String |
+| `value` | Button value | String |
+| `disabled` | Disabled state | Boolean |
+| `form` | Associated form | Form ID |
+| `formaction` | Submit URL override | URL |
+| `formenctype` | Encoding override | See Form `enctype` |
+| `formmethod` | Method override | `GET`, `POST` |
+| `formnovalidate` | Skip validation | Boolean |
+| `formtarget` | Target override | See Form `target` |
+
+### Select Attributes (`<select>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `name` | Field name | String |
+| `size` | Visible options | Integer |
+| `multiple` | Multiple selection | Boolean |
+| `required` | Required field | Boolean |
+| `disabled` | Disabled state | Boolean |
+| `autofocus` | Auto focus | Boolean |
+| `form` | Associated form | Form ID |
+
+### Option Attributes (`<option>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `value` | Option value | String |
+| `label` | Option label | String |
+| `selected` | Pre-selected | Boolean |
+| `disabled` | Disabled option | Boolean |
+
+### Textarea Attributes (`<textarea>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `name` | Field name | String |
+| `rows` | Visible rows | Integer |
+| `cols` | Visible columns | Integer |
+| `maxlength` | Maximum length | Integer |
+| `minlength` | Minimum length | Integer |
+| `placeholder` | Placeholder text | String |
+| `required` | Required field | Boolean |
+| `disabled` | Disabled state | Boolean |
+| `readonly` | Read-only | Boolean |
+| `autofocus` | Auto focus | Boolean |
+| `autocomplete` | Autocomplete | `on`, `off` |
+| `spellcheck` | Spell check | `true`, `false` |
+| `wrap` | Text wrapping | `soft`, `hard` |
+| `form` | Associated form | Form ID |
+
+### Media Attributes (`<audio>`, `<video>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `src` | Media source | URL |
+| `controls` | Show controls | Boolean |
+| `autoplay` | Auto play | Boolean |
+| `loop` | Loop playback | Boolean |
+| `muted` | Muted audio | Boolean |
+| `preload` | Preload strategy | `none`, `metadata`, `auto` |
+| `poster` | Poster image (video only) | URL |
+| `width` | Width (video only) | Integer |
+| `height` | Height (video only) | Integer |
+| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
+| `playsinline` | Inline playback (mobile) | Boolean |
+
+### Script Attributes (`<script>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `src` | Script URL | URL |
+| `type` | MIME type | `text/javascript` (default), `module` |
+| `async` | Async loading | Boolean |
+| `defer` | Deferred loading | Boolean |
+| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
+| `integrity` | SRI hash | Hash string |
+| `nomodule` | Fallback for old browsers | Boolean |
+| `nonce` | CSP nonce | Random string |
+| `referrerpolicy` | Referrer policy | See Referrer Policy |
+
+### Table Attributes
+
+#### Table (`<table>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `border` | Border (deprecated) | Integer (use CSS) |
+| `cellspacing` | Cell spacing (deprecated) | Integer (use CSS) |
+| `cellpadding` | Cell padding (deprecated) | Integer (use CSS) |
+
+#### Table Cell (`<td>`, `<th>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `colspan` | Column span | Integer |
+| `rowspan` | Row span | Integer |
+| `headers` | Header references | Space-separated IDs |
+| `scope` | Header scope (`<th>` only) | `row`, `col`, `rowgroup`, `colgroup` |
+
+### Iframe Attributes (`<iframe>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `src` | Frame URL | URL |
+| `srcdoc` | Inline HTML | HTML string |
+| `name` | Frame name | String |
+| `width` | Frame width | Integer or percentage |
+| `height` | Frame height | Integer or percentage |
+| `sandbox` | Security restrictions | See Sandbox below |
+| `allow` | Feature policy | Semicolon-separated policies |
+| `allowfullscreen` | Allow fullscreen | Boolean |
+| `allowpaymentrequest` | Allow payment | Boolean |
+| `loading` | Loading strategy | `lazy`, `eager` |
+| `referrerpolicy` | Referrer policy | See Referrer Policy |
+
+#### Sandbox Values
+
+| Value | Description |
+|-------|-------------|
+| (empty) | All restrictions |
+| `allow-forms` | Allow form submission |
+| `allow-modals` | Allow modals |
+| `allow-orientation-lock` | Allow screen orientation |
+| `allow-pointer-lock` | Allow pointer lock |
+| `allow-popups` | Allow popups |
+| `allow-popups-to-escape-sandbox` | Popups inherit sandbox |
+| `allow-presentation` | Allow presentation API |
+| `allow-same-origin` | Treat as same origin |
+| `allow-scripts` | Allow scripts |
+| `allow-top-navigation` | Allow top navigation |
+| `allow-top-navigation-by-user-activation` | Allow with user action |
+
+### Meta Attributes (`<meta>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `charset` | Character encoding | `UTF-8` (most common) |
+| `name` | Metadata name | `description`, `keywords`, `author`, `viewport`, etc. |
+| `content` | Metadata content | String |
+| `http-equiv` | HTTP header | `content-type`, `refresh`, `content-security-policy`, etc. |
+| `property` | Property name (Open Graph) | `og:title`, `og:image`, etc. |
+
+### Progress/Meter Attributes
+
+#### Progress (`<progress>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `value` | Current value | Number |
+| `max` | Maximum value | Number |
+
+#### Meter (`<meter>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `value` | Current value | Number |
+| `min` | Minimum value | Number |
+| `max` | Maximum value | Number |
+| `low` | Low threshold | Number |
+| `high` | High threshold | Number |
+| `optimum` | Optimum value | Number |
+
+### Details Attributes (`<details>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `open` | Initially open | Boolean |
+
+### Dialog Attributes (`<dialog>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `open` | Visible dialog | Boolean |
+
+### Canvas Attributes (`<canvas>`)
+
+| Attribute | Description | Values |
+|-----------|-------------|--------|
+| `width` | Canvas width | Integer (pixels) |
+| `height` | Canvas height | Integer (pixels) |
+
+### Quick Reference
+
+#### Most Common Attributes
+
+```html
+<!-- Links -->
+<a href="url" target="_blank" rel="noopener">Link</a>
+
+<!-- Images -->
+<img src="image.jpg" alt="Description" width="800" height="600" loading="lazy">
+
+<!-- Forms -->
+<form action="/submit" method="POST">
+  <input type="text" name="username" required>
+  <button type="submit">Submit</button>
+</form>
+
+<!-- Containers -->
+<div id="container" class="wrapper" data-role="main"></div>
+
+<!-- Media -->
+<video src="video.mp4" controls poster="poster.jpg" preload="metadata"></video>
+
+<!-- Scripts -->
+<script src="app.js" defer></script>
+
+<!-- Metadata -->
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
+
+### Notes
+
+- **Boolean attributes**: Presence = true, absence = false (e.g., `disabled`, `required`)
+- **Global attributes**: Can be used on any element
+- **Deprecated attributes**: Many presentational attributes deprecated (use CSS instead)
+- **Validation**: Use W3C Validator to check attribute usage
+- **Accessibility**: ARIA attributes enhance accessibility for screen readers
+
+## HTML Event Attributes Glossary
+
+Complete reference for HTML event handler attributes (inline event handlers).
+
+### What Are Event Attributes?
+
+Event attributes (also called inline event handlers) are HTML attributes that execute JavaScript code when specific events occur. They all start with `on` followed by the event name (e.g., `onclick`, `onload`, `onsubmit`).
+
+### ⚠️ Important Note
+
+**Modern best practice**: Use JavaScript `.addEventListener()` instead of inline event attributes for better:
+- **Separation of concerns** (HTML structure vs behavior)
+- **Multiple handlers** per event
+- **Easier maintenance**
+- **Content Security Policy (CSP) compatibility**
+
+```html
+<!-- ❌ Avoid: Inline handler -->
+<button onclick="alert('Clicked')">Click</button>
+
+<!-- ✅ Prefer: Event listener -->
+<button id="myBtn">Click</button>
+<script>
+  document.getElementById('myBtn').addEventListener('click', function() {
+    alert('Clicked');
+  });
+</script>
+```
+
+### Window Events
+
+Events that occur on the window object:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `onafterprint` | After print dialog closes | `<body onafterprint="handleAfterPrint()">` |
+| `onbeforeprint` | Before print dialog opens | `<body onbeforeprint="handleBeforePrint()">` |
+| `onbeforeunload` | Before page unload | `<body onbeforeunload="return 'Leave page?'">` |
+| `onerror` | When error occurs | `<body onerror="handleError()">` |
+| `onhashchange` | When URL hash changes | `<body onhashchange="handleHashChange()">` |
+| `onload` | When page/element loads | `<body onload="init()">` |
+| `onmessage` | When message received (postMessage) | `<body onmessage="handleMessage()">` |
+| `onoffline` | When browser goes offline | `<body onoffline="handleOffline()">` |
+| `ononline` | When browser goes online | `<body ononline="handleOnline()">` |
+| `onpagehide` | When navigating away | `<body onpagehide="handlePageHide()">` |
+| `onpageshow` | When navigating to page | `<body onpageshow="handlePageShow()">` |
+| `onpopstate` | When history state changes | `<body onpopstate="handlePopState()">` |
+| `onresize` | When window is resized | `<body onresize="handleResize()">` |
+| `onstorage` | When storage changes | `<body onstorage="handleStorage()">` |
+| `onunload` | When page is unloaded | `<body onunload="cleanup()">` |
+
+**Example**:
+```html
+<body onload="console.log('Page loaded')" onresize="console.log('Window resized')">
+  <h1>Welcome</h1>
+</body>
+```
+
+### Mouse Events
+
+Events triggered by mouse actions:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `onclick` | Element is clicked | `<button onclick="handleClick()">Click</button>` |
+| `oncontextmenu` | Right-click (context menu) | `<div oncontextmenu="return false">No right-click</div>` |
+| `ondblclick` | Element is double-clicked | `<div ondblclick="handleDoubleClick()">Double-click</div>` |
+| `onmousedown` | Mouse button pressed down | `<button onmousedown="handleMouseDown()">Press</button>` |
+| `onmouseenter` | Mouse enters element | `<div onmouseenter="highlight()">Hover</div>` |
+| `onmouseleave` | Mouse leaves element | `<div onmouseleave="unhighlight()">Hover</div>` |
+| `onmousemove` | Mouse moves over element | `<div onmousemove="trackMouse()">Move mouse</div>` |
+| `onmouseout` | Mouse moves out (bubbles) | `<div onmouseout="handleOut()">Hover out</div>` |
+| `onmouseover` | Mouse moves over (bubbles) | `<div onmouseover="handleOver()">Hover over</div>` |
+| `onmouseup` | Mouse button released | `<button onmouseup="handleMouseUp()">Release</button>` |
+
+**Mouse Event Differences**:
+- **`onmouseenter` vs `onmouseover`**: `enter` doesn't bubble, `over` does
+- **`onmouseleave` vs `onmouseout`**: `leave` doesn't bubble, `out` does
+- **`onclick`**: Fires on mousedown + mouseup
+
+**Example**:
+```html
+<button 
+  onmouseenter="this.style.backgroundColor='blue'"
+  onmouseleave="this.style.backgroundColor=''">
+  Hover me
+</button>
+```
+
+### Keyboard Events
+
+Events triggered by keyboard actions:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `onkeydown` | Key is pressed down | `<input onkeydown="handleKeyDown(event)">` |
+| `onkeypress` | Key is pressed (deprecated) | `<input onkeypress="handleKeyPress(event)">` |
+| `onkeyup` | Key is released | `<input onkeyup="handleKeyUp(event)">` |
+
+**Note**: `onkeypress` is deprecated. Use `onkeydown` instead.
+
+**Example**:
+```html
+<input 
+  type="text" 
+  onkeydown="if(event.key === 'Enter') submitForm()"
+  placeholder="Press Enter to submit">
+```
+
+### Form Events
+
+Events related to forms and form controls:
+
+| Event Attribute | When It Fires | Applies To |
+|-----------------|---------------|------------|
+| `onblur` | Element loses focus | Input, textarea, select |
+| `onchange` | Value changes and loses focus | Input, textarea, select |
+| `onfocus` | Element gains focus | Input, textarea, select |
+| `onfocusin` | Element about to gain focus (bubbles) | Input, textarea, select |
+| `onfocusout` | Element about to lose focus (bubbles) | Input, textarea, select |
+| `oninput` | Value changes (immediately) | Input, textarea |
+| `oninvalid` | Input validation fails | Input, textarea, select |
+| `onreset` | Form is reset | Form |
+| `onsearch` | User initiates search | Input type="search" |
+| `onselect` | Text is selected | Input, textarea |
+| `onsubmit` | Form is submitted | Form |
+
+**Event Differences**:
+- **`oninput`**: Fires immediately on every change
+- **`onchange`**: Fires when value changes AND element loses focus
+- **`onblur` vs `onfocusout`**: `blur` doesn't bubble, `focusout` does
+- **`onfocus` vs `onfocusin`**: `focus` doesn't bubble, `focusin` does
+
+**Example**:
+```html
+<form onsubmit="return validateForm()">
+  <input 
+    type="text" 
+    name="username"
+    oninput="checkAvailability(this.value)"
+    onblur="validateUsername(this.value)"
+    onfocus="showHint()"
+    required>
+  <button type="submit">Submit</button>
+</form>
+
+<input 
+  type="search" 
+  onsearch="performSearch(this.value)"
+  placeholder="Search...">
+```
+
+### Clipboard Events
+
+Events triggered by clipboard operations:
+
+| Event Attribute | When It Fires | Example |
+|-----------------|---------------|---------|
+| `oncopy` | Content is copied | `<p oncopy="alert('Copied!')">Copy this</p>` |
+| `oncut` | Content is cut | `<input oncut="handleCut()">` |
+| `onpaste` | Content is pasted | `<input onpaste="handlePaste(event)">` |
+
+**Example**:
+```html
+<input 
+  type="text" 
+  onpaste="event.preventDefault(); alert('Paste disabled')"
+  placeholder="Cannot paste here">
+```
+
+### Drag Events
+
+Events for drag-and-drop operations:
+
+| Event Attribute | When It Fires | Target |
+|-----------------|---------------|--------|
+| `ondrag` | Element is being dragged | Draggable element |
+| `ondragend` | Drag operation ends | Draggable element |
+| `ondragenter` | Dragged element enters drop target | Drop target |
+| `ondragleave` | Dragged element leaves drop target | Drop target |
+| `ondragover` | Dragged element is over drop target | Drop target |
+| `ondragstart` | Drag operation starts | Draggable element |
+| `ondrop` | Element is dropped | Drop target |
+
+**Example**:
+```html
+<div 
+  draggable="true" 
+  ondragstart="event.dataTransfer.setData('text', this.id)">
+  Drag me
+</div>
+
+<div 
+  ondragover="event.preventDefault()"
+  ondrop="handleDrop(event)">
+  Drop here
+</div>
+```
+
+### Media Events
+
+Events for audio and video elements:
+
+| Event Attribute | When It Fires |
+|-----------------|---------------|
+| `onabort` | Media loading aborted |
+| `oncanplay` | Media can start playing |
+| `oncanplaythrough` | Media can play without buffering |
+| `ondurationchange` | Duration changes |
+| `onemptied` | Media becomes empty |
+| `onended` | Media playback ends |
+| `onerror` | Error loading media |
+| `onloadeddata` | Media data loaded |
+| `onloadedmetadata` | Metadata loaded |
+| `onloadstart` | Browser starts loading |
+| `onpause` | Media is paused |
+| `onplay` | Media starts playing |
+| `onplaying` | Media is playing after pause/buffer |
+| `onprogress` | Browser is downloading media |
+| `onratechange` | Playback speed changes |
+| `onseeked` | Seeking completes |
+| `onseeking` | Seeking starts |
+| `onstalled` | Browser trying to get media data |
+| `onsuspend` | Browser stops getting media data |
+| `ontimeupdate` | Current playback time changes |
+| `onvolumechange` | Volume changes |
+| `onwaiting` | Media paused waiting for data |
+
+**Example**:
+```html
+<video 
+  src="video.mp4" 
+  controls
+  onplay="console.log('Playing')"
+  onpause="console.log('Paused')"
+  onended="console.log('Finished')">
+</video>
+
+<audio 
+  src="audio.mp3"
+  onloadedmetadata="showDuration()"
+  ontimeupdate="updateProgress()">
+</audio>
+```
+
+### Miscellaneous Events
+
+Other useful event attributes:
+
+| Event Attribute | When It Fires | Applies To |
+|-----------------|---------------|------------|
+| `onscroll` | Element is scrolled | Scrollable elements |
+| `ontoggle` | Details element toggled | `<details>` |
+| `onwheel` | Mouse wheel scrolled | Any element |
+
+**Example**:
+```html
+<div onscroll="handleScroll()" style="height: 200px; overflow: auto;">
+  <p>Scrollable content...</p>
+</div>
+
+<details ontoggle="console.log('Toggled')">
+  <summary>Click to toggle</summary>
+  <p>Hidden content</p>
+</details>
+```
+
+### Animation and Transition Events
+
+CSS animation and transition events:
+
+| Event Attribute | When It Fires |
+|-----------------|---------------|
+| `onanimationend` | CSS animation completes |
+| `onanimationiteration` | CSS animation repeats |
+| `onanimationstart` | CSS animation starts |
+| `ontransitionend` | CSS transition completes |
+| `ontransitioncancel` | CSS transition cancelled |
+| `ontransitionrun` | CSS transition starts |
+
+**Example**:
+```html
+<div 
+  class="animated"
+  onanimationend="console.log('Animation finished')"
+  onanimationstart="console.log('Animation started')">
+  Animated element
+</div>
+```
+
+### Touch Events (Mobile)
+
+Touch events for mobile devices:
+
+| Event Attribute | When It Fires |
+|-----------------|---------------|
+| `ontouchcancel` | Touch interrupted |
+| `ontouchend` | Touch ends |
+| `ontouchmove` | Touch moves |
+| `ontouchstart` | Touch starts |
+
+**Example**:
+```html
+<div 
+  ontouchstart="handleTouchStart(event)"
+  ontouchmove="handleTouchMove(event)"
+  ontouchend="handleTouchEnd(event)">
+  Touch me (mobile)
+</div>
+```
+
+### Event Object
+
+All event handlers receive an event object with useful properties:
+
+```html
+<button onclick="handleClick(event)">Click</button>
+
+<script>
+function handleClick(event) {
+  console.log('Event type:', event.type);           // 'click'
+  console.log('Target element:', event.target);     // <button>
+  console.log('Mouse X:', event.clientX);           // X coordinate
+  console.log('Mouse Y:', event.clientY);           // Y coordinate
+  
+  event.preventDefault();  // Prevent default action
+  event.stopPropagation(); // Stop event bubbling
+}
+</script>
+```
+
+### Common Patterns
+
+#### Prevent Default Behavior
+
+```html
+<!-- Prevent form submission -->
+<form onsubmit="return false">...</form>
+<form onsubmit="event.preventDefault()">...</form>
+
+<!-- Prevent link navigation -->
+<a href="#" onclick="return false">Don't navigate</a>
+
+<!-- Prevent right-click menu -->
+<div oncontextmenu="return false">No right-click</div>
+```
+
+#### Access Element
+
+```html
+<!-- Using 'this' keyword -->
+<button onclick="console.log(this.textContent)">Click</button>
+
+<!-- Using event.target -->
+<button onclick="console.log(event.target.textContent)">Click</button>
+
+<!-- Passing 'this' explicitly -->
+<button onclick="handleClick(this)">Click</button>
+```
+
+#### Conditional Execution
+
+```html
+<!-- Check key pressed -->
+<input onkeydown="if(event.key === 'Enter') submitForm()">
+
+<!-- Check Ctrl key -->
+<div onclick="if(event.ctrlKey) console.log('Ctrl + Click')">Click</div>
+
+<!-- Check button (0=left, 1=middle, 2=right) -->
+<div onmousedown="if(event.button === 2) console.log('Right click')">Click</div>
+```
+
+### Best Practices
+
+#### ✅ Do
+
+1. **Use `addEventListener()` instead** of inline handlers
+2. **Call `preventDefault()`** to stop default behavior
+3. **Call `stopPropagation()`** to prevent bubbling when needed
+4. **Pass `event` object** to handlers for access to event details
+5. **Return false** to prevent default (works for some events)
+6. **Use semantic events** (onclick for clickable, onsubmit for forms)
+
+#### ❌ Don't
+
+1. **Don't use inline handlers in production** (violates CSP, hard to maintain)
+2. **Don't use `onkeypress`** (deprecated, use `onkeydown`)
+3. **Don't forget to prevent default** when needed (links, forms)
+4. **Don't mix inline and addEventListener** (confusing)
+5. **Don't put complex logic inline** (use external functions)
+6. **Don't use `onclick` on non-interactive elements** (use buttons/links)
+
+### Modern Alternative: addEventListener()
+
+**Why addEventListener is better**:
+
+```html
+<!-- ❌ Inline: Limited to one handler -->
+<button onclick="doA()">Click</button>
+
+<!-- ✅ addEventListener: Multiple handlers -->
+<button id="btn">Click</button>
+<script>
+  const btn = document.getElementById('btn');
+  btn.addEventListener('click', doA);
+  btn.addEventListener('click', doB);  // Both run!
+  btn.addEventListener('click', doC);  // All three run!
+</script>
+```
+
+**Separation of concerns**:
+
+```html
+<!-- ❌ Inline: Mixed HTML and JavaScript -->
+<button onclick="alert('Clicked')">Click</button>
+
+<!-- ✅ Separate: Clean HTML, JS in script -->
+<button id="myBtn">Click</button>
+<script>
+  document.getElementById('myBtn').addEventListener('click', function() {
+    alert('Clicked');
+  });
+</script>
+```
+
+**CSP compatibility**:
+
+```html
+<!-- ❌ Inline: Blocked by strict CSP -->
+<button onclick="alert('Blocked')">Click</button>
+
+<!-- ✅ External: Allowed by CSP -->
+<button id="btn">Click</button>
+<script src="app.js"></script>
+<!-- app.js: document.getElementById('btn').addEventListener('click', ...) -->
+```
+
+### Quick Reference Table
+
+#### Most Common Events
+
+| Event | Use For | Example |
+|-------|---------|---------|
+| `onclick` | Click actions | Buttons, links |
+| `onsubmit` | Form submission | Forms |
+| `oninput` | Real-time input | Search, validation |
+| `onchange` | Final value change | Select, checkbox |
+| `onload` | Page/image load | Body, images |
+| `onkeydown` | Keyboard shortcuts | Inputs, body |
+| `onmouseenter` | Hover effects | Any element |
+| `onfocus` | Input focus | Form fields |
+| `onblur` | Input unfocus | Form fields |
+
+#### Event Order
+
+**Mouse Click**:
+1. `onmousedown`
+2. `onmouseup`
+3. `onclick`
+
+**Form Submission**:
+1. `onsubmit` (can prevent)
+2. Form submits
+
+**Input Change**:
+1. `oninput` (every keystroke)
+2. `onchange` (on blur)
+
+**Page Load**:
+1. `DOMContentLoaded` (not an attribute)
+2. `onload`
+
+### Debugging Events
+
+```html
+<!-- Log all event details -->
+<button onclick="console.log(event)">Debug Event</button>
+
+<!-- See event properties -->
+<div onclick="console.table({
+  type: event.type,
+  target: event.target.tagName,
+  x: event.clientX,
+  y: event.clientY,
+  ctrlKey: event.ctrlKey,
+  shiftKey: event.shiftKey
+})">Click to inspect</div>
+```
+
+### Resource
+
+For complete reference, see:
+- **MDN Event Reference**: https://developer.mozilla.org/en-US/docs/Web/Events
+- **addEventListener()**: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
diff --git a/skills/html-coder/references/how-to.md b/skills/html-coder/references/how-to.md
deleted file mode 100644
index 162e467a3..000000000
--- a/skills/html-coder/references/how-to.md
+++ /dev/null
@@ -1,652 +0,0 @@
-# HTML How-To Guides
-
-Practical guides for specific HTML tasks and techniques.
-
-## Define Terms with HTML
-
-HTML provides semantic elements for defining keywords and creating glossaries.
-
-### Inline Definitions with `<dfn>`
-
-Mark the first occurrence of a keyword being defined:
-
-```html
-<p><dfn>Firefox</dfn> is the web browser created by the Mozilla Foundation.</p>
-```
-
-The `<dfn>` element wraps the term being defined, not the definition itself. The paragraph containing it provides the definition.
-
-### Defining Abbreviations
-
-Combine `<dfn>` with `<abbr>` for abbreviations:
-
-```html
-<p>
-  <dfn><abbr>HTML</abbr> (HyperText Markup Language)</dfn>
-  is a markup language used to structure documents on the web.
-</p>
-```
-
-**Note**: Don't rely on the `title` attribute for expanding abbreviations - it's not accessible. Always provide the expansion inline.
-
-### Improve Accessibility
-
-Link terms to definitions explicitly using `aria-describedby`:
-
-```html
-<p>
-  <span id="firefox-def">
-    <dfn aria-describedby="firefox-def">Firefox</dfn>
-    is the web browser created by the Mozilla Foundation.
-  </span>
-</p>
-```
-
-### Description Lists
-
-For glossaries, dictionaries, FAQs, or key-value pairs, use description lists:
-
-```html
-<dl>
-  <dt>HTML</dt>
-  <dd>HyperText Markup Language - structures web documents</dd>
-  
-  <dt>CSS</dt>
-  <dd>Cascading Style Sheets - styles web documents</dd>
-  
-  <dt>JavaScript</dt>
-  <dd>Programming language for web interactivity</dd>
-</dl>
-```
-
-**Structure**:
-- `<dl>` - Description list wrapper
-- `<dt>` - Term being described
-- `<dd>` - Description of the term
-
-**Patterns**:
-- Multiple `<dt>` in a row: following `<dd>` applies to all
-- Multiple `<dd>` in a row: all apply to the last `<dt>`
-
-**Style with CSS**:
-```css
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-left: 2em;
-  margin-bottom: 0.5em;
-}
-```
-
-**Not suitable for**: Dialog or conversation markup (speakers don't describe each other).
-
-## Use Data Attributes
-
-Custom data attributes (`data-*`) store extra information on HTML elements without hacks.
-
-### HTML Syntax
-
-Any attribute starting with `data-` is a data attribute:
-
-```html
-<article 
-  id="electric-cars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-  <!-- Content -->
-</article>
-```
-
-### JavaScript Access
-
-Access via the `dataset` property (dashes become camelCase):
-
-```javascript
-const article = document.querySelector('#electric-cars');
-
-// Read
-console.log(article.dataset.columns);      // "3"
-console.log(article.dataset.indexNumber);  // "12314" (camelCase)
-console.log(article.dataset.parent);       // "cars"
-
-// Write
-article.dataset.columns = "4";
-
-// Query with data attributes
-const articles = document.querySelectorAll('[data-columns]');
-const threeCol = document.querySelectorAll('[data-columns="3"]');
-```
-
-### CSS Access
-
-Use data attributes in CSS selectors and generated content:
-
-```css
-/* Style based on data attribute */
-article[data-columns="3"] {
-  width: 400px;
-}
-
-article[data-columns="4"] {
-  width: 600px;
-}
-
-/* Display data value */
-article::before {
-  content: attr(data-parent);
-}
-```
-
-### Style Variants Pattern
-
-Instead of multiple classes:
-
-```html
-<!-- Traditional approach -->
-<div class="callout callout--note">...</div>
-<div class="callout callout--warning">...</div>
-
-<!-- Data attribute approach -->
-<div class="callout" data-variant="note">...</div>
-<div class="callout" data-variant="warning">...</div>
-```
-
-```css
-.callout {
-  margin: 0.5em 0;
-  padding: 0.5em;
-  border-radius: 4px;
-  border: 2px solid;
-}
-
-.callout:not([data-variant]) {
-  border-color: rgb(15 15 15);
-  background-color: rgb(15 15 15 / 0.2);
-}
-
-.callout[data-variant="note"] {
-  border-color: rgb(15 15 235);
-  background-color: rgb(15 15 235 / 0.2);
-}
-
-.callout[data-variant="warning"] {
-  border-color: rgb(235 15 15);
-  background-color: rgb(235 15 15 / 0.2);
-}
-```
-
-**Benefits**:
-- Eliminates invalid states (multiple variants simultaneously)
-- Better for static analysis and type checking
-- Intuitive toggling: `element.dataset.variant = "warning"`
-
-### Lazy Loading Pattern
-
-Store initial data in `data-*` attributes, load on demand:
-
-```html
-<img data-src="large-image.jpg" alt="Description">
-```
-
-```javascript
-const images = document.querySelectorAll('img[data-src]');
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach(entry => {
-    if (entry.isIntersecting) {
-      const img = entry.target;
-      img.src = img.dataset.src;
-      delete img.dataset.src;
-      observer.unobserve(img);
-    }
-  });
-});
-
-images.forEach(img => observer.observe(img));
-```
-
-### Important Cautions
-
-**Don't use data attributes for**:
-- Content that should be visible and accessible
-- Content that search engines should index
-
-Data attributes are for:
-- Storing configuration or state
-- JavaScript-only data
-- Associating non-visible metadata
-
-## Author Fast-Loading HTML Pages
-
-Optimize page load performance for better user experience and reduced server load.
-
-### Reduce Page Weight
-
-**Minimize files**:
-- Remove unnecessary whitespace and comments
-- Move inline CSS to external stylesheets
-- Move inline scripts to external files
-- Use minification tools (HTML Tidy, Terser, etc.)
-
-**Compress assets**:
-- Enable gzip/brotli compression on server
-- Minify and compress images
-- Optimize and compress SVG files
-
-### Minimize HTTP Requests
-
-**Reduce file count**:
-- Combine CSS files where possible
-- Combine JavaScript files
-- Use CSS sprites for multiple background images
-- Inline critical CSS for above-the-fold content
-
-**Each file requires**:
-- DNS lookup
-- TCP connection
-- HTTP request/response
-- Parsing and execution time
-
-### Use a Content Delivery Network (CDN)
-
-**Benefits**:
-- Reduced latency through geographic distribution
-- Cached content served from nearest node
-- Offloads traffic from origin server
-- Often includes automatic optimization
-
-### Reduce Domain Lookups
-
-Each unique domain requires DNS lookup time. Minimize different domains for:
-- CSS files
-- JavaScript files
-- Image sources
-- External resources
-
-Balance with parallel download limits (browsers typically allow 6 connections per domain).
-
-### Cache Reused Content
-
-**Set proper cache headers**:
-- `Last-Modified` - File modification timestamp
-- `ETag` - Resource version identifier
-- `Cache-Control` - Caching directives
-- `Expires` - Expiration date
-
-```http
-Cache-Control: public, max-age=31536000
-ETag: "abc123"
-Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT
-```
-
-**For static files**: Server usually handles automatically
-**For dynamic pages**: Manually set caching headers when appropriate
-
-### Optimize Loading Order
-
-**Page structure**:
-1. HTML content (above-the-fold first)
-2. Critical CSS required for initial display
-3. Deferred JavaScript after content
-4. Additional resources loaded progressively
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Page Title</title>
-  <!-- Critical CSS inline or linked -->
-  <link rel="stylesheet" href="critical.css">
-</head>
-<body>
-  <!-- Main content here -->
-  <main>
-    <h1>Content</h1>
-    <p>Visible content loads first...</p>
-  </main>
-  
-  <!-- Scripts at end of body -->
-  <script src="script.js" defer></script>
-</body>
-</html>
-```
-
-### Reduce Inline Scripts
-
-**Problems with inline scripts**:
-- Block HTML parsing
-- Can't be cached
-- `document.write()` is particularly harmful
-
-**Better approach**:
-```html
-<!-- Bad: Inline script blocks parsing -->
-<script>
-  document.write('<div>Content</div>');
-</script>
-
-<!-- Good: External script with async/defer -->
-<script src="script.js" defer></script>
-
-<!-- Good: Modern DOM manipulation -->
-<script>
-  const div = document.createElement('div');
-  div.textContent = 'Content';
-  document.body.appendChild(div);
-</script>
-```
-
-### Use Async and Defer
-
-**Script loading attributes**:
-
-```html
-<!-- Defer: Load in parallel, execute after HTML parsing -->
-<script src="script.js" defer></script>
-
-<!-- Async: Load and execute independently, don't block -->
-<script src="analytics.js" async></script>
-
-<!-- Regular: Blocks parsing (avoid) -->
-<script src="script.js"></script>
-```
-
-**When to use**:
-- `defer` - Scripts that need DOM or maintain order
-- `async` - Independent scripts (analytics, ads)
-- Neither - Only if script must run immediately
-
-### Use Modern CSS and Valid Markup
-
-**Benefits of valid HTML**:
-- No browser error correction needed
-- Faster parsing
-- Tools can pre-process reliably
-- Better for minification
-
-**Valid markup allows**:
-- HTML Tidy whitespace removal
-- Tree shaking unused code
-- Better compression ratios
-
-### Avoid Layout Tables
-
-**Don't use tables for layout** (legacy method):
-```html
-<!-- Bad: Table layout -->
-<table>
-  <tr>
-    <td>Sidebar</td>
-    <td>Main content</td>
-  </tr>
-</table>
-```
-
-**Use modern CSS layout**:
-```css
-/* Good: Flexbox layout */
-.container {
-  display: flex;
-}
-
-/* Good: Grid layout */
-.container {
-  display: grid;
-  grid-template-columns: 250px 1fr;
-}
-```
-
-**Tables are for tabular data only.**
-
-### Specify Image and Table Dimensions
-
-**Improves loading**:
-- Browser reserves space immediately
-- No reflow when content loads
-- Smoother page appearance
-
-```html
-<!-- Specify dimensions -->
-<img src="photo.jpg" width="800" height="600" alt="Photo">
-
-<!-- For tables -->
-<table style="table-layout: fixed; width: 100%;">
-  <colgroup>
-    <col style="width: 200px;">
-    <col style="width: 400px;">
-  </colgroup>
-  <!-- table content -->
-</table>
-```
-
-### Use Lazy Loading
-
-**Defer image loading until needed**:
-
-```html
-<!-- Lazy load images -->
-<img src="photo.jpg" loading="lazy" alt="Description">
-
-<!-- Eager loading (default) -->
-<img src="hero.jpg" loading="eager" alt="Hero image">
-```
-
-**How it works**:
-- `loading="eager"` - Load immediately (default)
-- `loading="lazy"` - Load when near viewport
-- Reduces initial page load time
-- Saves bandwidth for images never seen
-
-**Check if loaded**:
-```javascript
-const img = document.querySelector('img');
-if (img.complete) {
-  console.log('Image loaded');
-}
-```
-
-### Optimize Images and SVGs
-
-**Image optimization**:
-- Compress before uploading (Photoshop, TinyPNG, etc.)
-- Use appropriate format (JPEG for photos, PNG for graphics, WebP for modern browsers)
-- Serve scaled images (don't send 2000px image for 300px display)
-- Use responsive images (`srcset`, `<picture>`)
-
-**SVG optimization**:
-- Remove unnecessary metadata
-- Enable gzip compression on server
-- Use SVGO or similar tools
-- Inline small SVGs to avoid HTTP request
-
-## Use Cross-Origin Images
-
-Enable cross-origin image use in `<canvas>` elements.
-
-### The Problem
-
-Canvas tainted by cross-origin images cannot be read:
-
-```javascript
-const canvas = document.querySelector('canvas');
-const ctx = canvas.getContext('2d');
-const img = new Image();
-img.src = 'https://other-domain.com/image.jpg';
-img.onload = () => {
-  ctx.drawImage(img, 0, 0);
-  // This will throw security error:
-  canvas.toDataURL();  // Error: canvas is tainted
-};
-```
-
-### The Solution
-
-Use CORS-enabled images:
-
-```javascript
-const img = new Image();
-img.crossOrigin = 'anonymous';  // or 'use-credentials'
-img.src = 'https://other-domain.com/image.jpg';
-```
-
-```html
-<img src="https://other-domain.com/image.jpg" crossorigin="anonymous">
-```
-
-### Server Requirements
-
-Server must send CORS headers:
-
-```http
-Access-Control-Allow-Origin: *
-```
-
-Or specific origin:
-
-```http
-Access-Control-Allow-Origin: https://your-domain.com
-```
-
-## Add Image Maps
-
-Create clickable regions on images.
-
-### Basic Image Map
-
-```html
-<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
-
-<map name="workmap">
-  <area shape="rect" coords="34,44,270,350" 
-        href="computer.html" alt="Computer">
-  <area shape="rect" coords="290,172,333,250" 
-        href="phone.html" alt="Phone">
-  <area shape="circle" coords="337,300,44" 
-        href="coffee.html" alt="Coffee">
-</map>
-```
-
-### Shape Types
-
-**Rectangle**: `shape="rect" coords="x1,y1,x2,y2"`
-- x1,y1 = top-left corner
-- x2,y2 = bottom-right corner
-
-**Circle**: `shape="circle" coords="x,y,radius"`
-- x,y = center point
-- radius = circle radius
-
-**Polygon**: `shape="poly" coords="x1,y1,x2,y2,x3,y3,..."`
-- Each pair is a vertex point
-
-**Default**: `shape="default"` - entire image
-
-### JavaScript Interaction
-
-```javascript
-const areas = document.querySelectorAll('area');
-areas.forEach(area => {
-  area.addEventListener('click', (e) => {
-    e.preventDefault();
-    console.log('Clicked:', area.alt);
-    // Custom behavior
-  });
-});
-```
-
-## Add JavaScript to Your Web Page
-
-Multiple ways to include JavaScript in HTML.
-
-### Inline JavaScript
-
-```html
-<button onclick="alert('Clicked!')">Click Me</button>
-```
-
-**Pros**: Quick for tiny scripts
-**Cons**: Not maintainable, no caching, violates separation of concerns
-
-### Internal Script
-
-```html
-<script>
-  function doSomething() {
-    console.log('Doing something');
-  }
-  
-  document.addEventListener('DOMContentLoaded', () => {
-    doSomething();
-  });
-</script>
-```
-
-**Pros**: No external request
-**Cons**: Not cached, not reusable
-
-### External Script (Recommended)
-
-```html
-<script src="script.js"></script>
-```
-
-**Pros**: Cached, reusable, maintainable, separates concerns
-**Cons**: Additional HTTP request (minimal with caching)
-
-### Script Placement
-
-**End of body** (traditional):
-```html
-<body>
-  <!-- content -->
-  <script src="script.js"></script>
-</body>
-```
-
-**Head with defer** (modern):
-```html
-<head>
-  <script src="script.js" defer></script>
-</head>
-```
-
-**Head with async** (independent scripts):
-```html
-<head>
-  <script src="analytics.js" async></script>
-</head>
-```
-
-### Module Scripts
-
-```html
-<script type="module" src="module.js"></script>
-```
-
-**Features**:
-- Deferred by default
-- Strict mode enabled
-- Can use import/export
-- Separate scope
-
-## Best Practices
-
-1. **Semantic HTML**: Use elements that convey meaning (`<dfn>`, `<dl>`, `<abbr>`)
-2. **Data attributes**: Store JavaScript-only data, not visible content
-3. **Performance**: Minimize requests, optimize images, use lazy loading
-4. **Valid markup**: Enables optimization tools and faster parsing
-5. **External resources**: Use external CSS/JS files for caching
-6. **Async loading**: Use `async`/`defer` for non-critical scripts
-7. **Accessibility**: Keep visible content in HTML, not data attributes
-8. **Progressive enhancement**: Content loads first, enhancement after
-
-## Resources
-
-- [MDN: Define Terms](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Define_terms_with_HTML)
-- [MDN: Use Data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes)
-- [MDN: Fast-Loading Pages](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Author_fast-loading_HTML_pages)
-- [MDN: CORS Enabled Images](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/CORS_enabled_image)
-- [MDN: Add JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page)
diff --git a/skills/html-coder/references/quickstart.md b/skills/html-coder/references/quickstart.md
deleted file mode 100644
index 546b7f015..000000000
--- a/skills/html-coder/references/quickstart.md
+++ /dev/null
@@ -1,273 +0,0 @@
-# HTML Quickstart Cheatsheet
-
-A quick reference guide for HTML syntax and common element patterns. Use semantic HTML tags for their meaning, not their appearance - styling should be handled with CSS.
-
-## Inline Elements
-
-Inline elements appear side-by-side horizontally and only take up as much width as needed. They fit together like words in a sentence.
-
-| Purpose | Element | Example |
-|---------|---------|---------|
-| **Link** | `<a>` | `<a href="https://example.com">Link text</a>` |
-| **Image** | `<img>` | `<img src="photo.jpg" alt="Description" width="250" />` |
-| **Inline container** | `<span>` | `<span class="highlight">grouped text</span>` |
-| **Emphasized text** | `<em>` | `<em>Emphasized text</em>` (semantic emphasis) |
-| **Italic text** | `<i>` | `<i>Italic styling</i>` (visual only) |
-| **Strong importance** | `<strong>` | `<strong>Important text</strong>` (semantic) |
-| **Bold text** | `<b>` | `<b>Bold styling</b>` (visual only) |
-| **Highlighted text** | `<mark>` | `<mark>Highlighted content</mark>` |
-| **Strikethrough** | `<s>` | `<s>Struck through text</s>` |
-| **Subscript** | `<sub>` | `H<sub>2</sub>O` |
-| **Superscript** | `<sup>` | `x<sup>2</sup>` |
-| **Small text** | `<small>` | `<small>Fine print</small>` |
-| **Code** | `<code>` | `<code>console.log()</code>` |
-| **Inline quote** | `<q>` | `<q>Short quote</q>` (adds quotes automatically) |
-| **Citation** | `<cite>` | `<cite>Book Title</cite>` |
-| **Address** | `<address>` | `<address>123 Main St</address>` |
-| **Time/Date** | `<time>` | `<time datetime="2026-03-08">March 8, 2026</time>` |
-| **Line break** | `<br>` | `Line 1<br>Line 2` |
-| **Word break opportunity** | `<wbr>` | `Long<wbr>word<wbr>here` |
-| **Audio** | `<audio>` | `<audio controls><source src="file.mp3"></audio>` |
-| **Video** | `<video>` | `<video controls src="file.mp4"></video>` |
-
-### Semantic vs Visual Elements
-
-**Use semantic elements when the meaning matters:**
-- `<em>` for emphasis (screen readers will stress it)
-- `<strong>` for importance
-- `<code>` for code snippets
-- `<cite>` for titles of works
-
-**Use visual elements for pure styling:**
-- `<i>` for italic styling without semantic meaning
-- `<b>` for bold styling without semantic importance
-
-## Block Elements
-
-Block elements take up the full width of their container and stack vertically like paragraphs or building blocks.
-
-| Purpose | Element | Example |
-|---------|---------|---------|
-| **Paragraph** | `<p>` | `<p>Paragraph text</p>` |
-| **Headings** | `<h1>`-`<h6>` | `<h1>Main Title</h1>` through `<h6>` |
-| **Horizontal rule** | `<hr>` | `<hr>` (creates dividing line) |
-| **Block quote** | `<blockquote>` | `<blockquote>Long quoted text</blockquote>` |
-| **Unordered list** | `<ul>` + `<li>` | `<ul><li>Item</li><li>Item</li></ul>` |
-| **Ordered list** | `<ol>` + `<li>` | `<ol><li>First</li><li>Second</li></ol>` |
-| **Definition list** | `<dl>`, `<dt>`, `<dd>` | `<dl><dt>Term</dt><dd>Definition</dd></dl>` |
-| **Collapsible details** | `<details>` + `<summary>` | `<details><summary>Title</summary>Content</details>` |
-
-### Heading Hierarchy
-
-Always maintain proper heading structure:
-
-```html
-<h1>Page Title</h1>
-  <h2>Section</h2>
-    <h3>Subsection</h3>
-    <h3>Another Subsection</h3>
-  <h2>Another Section</h2>
-```
-
-**Rules:**
-- Use only one `<h1>` per page
-- Don't skip levels (h1 → h3)
-- Headings represent document structure, not font size
-
-### List Types
-
-**Unordered (bulleted)** - Order doesn't matter:
-```html
-<ul>
-  <li>Apples</li>
-  <li>Oranges</li>
-  <li>Bananas</li>
-</ul>
-```
-
-**Ordered (numbered)** - Order is significant:
-```html
-<ol>
-  <li>Mix ingredients</li>
-  <li>Bake at 350°F</li>
-  <li>Cool before serving</li>
-</ol>
-```
-
-**Definition list** - Term and definition pairs:
-```html
-<dl>
-  <dt>HTML</dt>
-  <dd>HyperText Markup Language</dd>
-  <dt>CSS</dt>
-  <dd>Cascading Style Sheets</dd>
-</dl>
-```
-
-## Common Patterns
-
-### Link Patterns
-
-```html
-<!-- External link -->
-<a href="https://example.com">External Site</a>
-
-<!-- Internal link -->
-<a href="/about.html">About Page</a>
-
-<!-- Email link -->
-<a href="mailto:email@example.com">Email Us</a>
-
-<!-- Phone link -->
-<a href="tel:+1234567890">Call Us</a>
-
-<!-- Download link -->
-<a href="document.pdf" download>Download PDF</a>
-
-<!-- Open in new tab -->
-<a href="https://example.com" target="_blank" rel="noopener">New Tab</a>
-```
-
-### Image Patterns
-
-```html
-<!-- Basic image -->
-<img src="photo.jpg" alt="Description">
-
-<!-- Image with dimensions -->
-<img src="photo.jpg" alt="Description" width="300" height="200">
-
-<!-- Lazy loading -->
-<img src="photo.jpg" alt="Description" loading="lazy">
-
-<!-- Responsive image -->
-<picture>
-  <source media="(min-width: 800px)" srcset="large.jpg">
-  <source media="(min-width: 400px)" srcset="medium.jpg">
-  <img src="small.jpg" alt="Description">
-</picture>
-```
-
-### Multimedia
-
-```html
-<!-- Audio player -->
-<audio controls>
-  <source src="audio.mp3" type="audio/mpeg">
-  <source src="audio.ogg" type="audio/ogg">
-  Your browser doesn't support audio.
-</audio>
-
-<!-- Video player -->
-<video controls width="640" height="360">
-  <source src="video.mp4" type="video/mp4">
-  <source src="video.webm" type="video/webm">
-  Your browser doesn't support video.
-</video>
-```
-
-## Document Structure Template
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Page description">
-  <title>Page Title</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header>
-    <h1>Site Title</h1>
-    <nav>
-      <ul>
-        <li><a href="/">Home</a></li>
-        <li><a href="/about">About</a></li>
-      </ul>
-    </nav>
-  </header>
-  
-  <main>
-    <article>
-      <h2>Article Title</h2>
-      <p>Content here...</p>
-    </article>
-  </main>
-  
-  <aside>
-    <h3>Sidebar</h3>
-  </aside>
-  
-  <footer>
-    <p>&copy; 2026 Company Name</p>
-  </footer>
-  
-  <script src="script.js"></script>
-</body>
-</html>
-```
-
-## Accessibility Quick Tips
-
-1. **Always include `alt` text** for images
-2. **Use semantic elements** (`<nav>`, `<article>`, `<aside>`)
-3. **Maintain heading hierarchy** (h1 → h2 → h3)
-4. **Label form inputs** with `<label for="id">`
-5. **Use `<button>` for buttons**, not `<div>` or `<a>`
-6. **Provide text alternatives** for non-text content
-7. **Ensure sufficient color contrast**
-8. **Make interactive elements keyboard accessible**
-
-## Common Attributes
-
-### Global Attributes (work on all elements)
-
-- `id="unique-id"` - Unique identifier
-- `class="class-name"` - CSS class name(s)
-- `style="color: red;"` - Inline styles (avoid when possible)
-- `title="Tooltip text"` - Tooltip on hover
-- `lang="en"` - Language of content
-- `hidden` - Hide element
-- `data-*="value"` - Custom data attributes
-- `aria-*="value"` - Accessibility attributes
-
-### Common Element-Specific Attributes
-
-**Links (`<a>`)**:
-- `href` - Destination URL
-- `target` - Where to open link (_blank, _self)
-- `rel` - Relationship (noopener, nofollow, etc.)
-
-**Images (`<img>`)**:
-- `src` - Image source path
-- `alt` - Alternative text (required!)
-- `width`, `height` - Dimensions
-- `loading` - lazy, eager
-
-**Forms**:
-- `action` - Form submission URL
-- `method` - HTTP method (get, post)
-- `name` - Field name
-- `value` - Field value
-- `required` - Field is required
-- `placeholder` - Hint text
-
-## Quick Reference
-
-**Empty/void elements** (no closing tag needed):
-`<img>`, `<br>`, `<hr>`, `<input>`, `<meta>`, `<link>`
-
-**Always lowercase** tag names and attributes (best practice)
-
-**Quote attribute values**: `<a href="link">` not `<a href=link>`
-
-**Nest properly**: If you open A then B, close B before A
-
-**Comments**: `<!-- This is a comment -->`
-
-## Resources
-
-- [MDN HTML Cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
-- [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
diff --git a/skills/html-coder/references/reference.md b/skills/html-coder/references/reference.md
deleted file mode 100644
index 1e3d1fdd9..000000000
--- a/skills/html-coder/references/reference.md
+++ /dev/null
@@ -1,290 +0,0 @@
-# HTML Element Reference
-
-Comprehensive reference of all HTML elements organized by category.
-
-## Main Root
-
-**`<html>`**  
-Top-level container for an HTML document. All other elements must be nested within it. Also called the root element.
-
-## Document Metadata
-
-Metadata provides information about the page for browsers, search engines, and other software.
-
-| Element | Purpose |
-|---------|---------|
-| `<base>` | Sets the base URL for all relative URLs in the document (only one per document) |
-| `<head>` | Container for document metadata like title, scripts, and stylesheets |
-| `<link>` | Links to external resources (commonly CSS files, favicons, mobile icons) |
-| `<meta>` | Defines metadata not representable by other meta elements |
-| `<style>` | Contains CSS styling information for the document |
-| `<title>` | Specifies the document title shown in browser tabs (text only, no HTML) |
-
-## Sectioning Root
-
-**`<body>`**  
-Contains the main content of the HTML document. Only one per document.
-
-## Content Sectioning
-
-Organize document content into logical sections with clear structure and hierarchy.
-
-| Element | Purpose |
-|---------|---------|
-| `<address>` | Marks contact information for a person, people, or organization |
-| `<article>` | Self-contained content suitable for independent distribution (blog post, forum post, news article) |
-| `<aside>` | Content indirectly related to main content (sidebars, call-out boxes) |
-| `<footer>` | Footer section containing authorship, copyright, or related document links |
-| `<header>` | Introductory content, navigation aids, logos, search forms |
-| `<h1>` to `<h6>` | Six levels of section headings (h1 highest, h6 lowest) |
-| `<hgroup>` | Groups heading with secondary content like subheadings or taglines |
-| `<main>` | Dominant content of the document body (central topic or functionality) |
-| `<nav>` | Navigation links section (menus, tables of contents, indexes) |
-| `<section>` | Standalone thematic section (should typically have a heading) |
-| `<search>` | Container for search or filtering controls |
-
-## Text Content
-
-Structure blocks or sections of text content within the body.
-
-| Element | Purpose |
-|---------|---------|
-| `<blockquote>` | Extended quotation from another source (use `cite` attribute for URL) |
-| `<dd>` | Description or value for preceding term in a description list |
-| `<div>` | Generic container with no semantic meaning (style with CSS or layout parent) |
-| `<dl>` | Description list wrapper for term-definition pairs |
-| `<dt>` | Term being described in a description list |
-| `<figcaption>` | Caption or legend for parent `<figure>` |
-| `<figure>` | Self-contained content with optional caption |
-| `<hr>` | Thematic break between content (scene change, topic shift) |
-| `<li>` | List item within `<ol>`, `<ul>`, or `<menu>` |
-| `<menu>` | Semantic alternative to `<ul>` (treated identically by browsers) |
-| `<ol>` | Ordered (numbered) list |
-| `<p>` | Paragraph of text or related content grouping |
-| `<pre>` | Preformatted text preserving whitespace exactly as written |
-| `<ul>` | Unordered (bulleted) list |
-
-## Inline Text Semantics
-
-Define meaning, structure, or styling for words, lines, or text portions.
-
-| Element | Purpose |
-|---------|---------|
-| `<a>` | Hyperlink to URLs, files, email addresses, page locations (requires `href`) |
-| `<abbr>` | Abbreviation or acronym (expand inline, not via `title`) |
-| `<b>` | Draws attention without special importance (typically bold) |
-| `<bdi>` | Isolates text from surrounding bidirectional algorithm |
-| `<bdo>` | Overrides text directionality |
-| `<br>` | Line break (for addresses, poems where line division matters) |
-| `<cite>` | Title of a creative work |
-| `<code>` | Inline code fragment (monospace by default) |
-| `<data>` | Links content with machine-readable translation |
-| `<dfn>` | Term being defined in current context |
-| `<em>` | Stress emphasis (can nest for stronger emphasis) |
-| `<i>` | Text set off for technical terms, idiomatic phrases, thoughts |
-| `<kbd>` | User input from keyboard or other input device |
-| `<mark>` | Highlighted text for reference or notation |
-| `<q>` | Short inline quotation (browsers add quotation marks) |
-| `<rp>` | Fallback parentheses for browsers not supporting ruby annotations |
-| `<rt>` | Ruby text component (pronunciation, translation for East Asian typography) |
-| `<ruby>` | Small annotations rendered near base text (usually pronunciation) |
-| `<s>` | Strikethrough for no-longer-relevant or inaccurate content |
-| `<samp>` | Sample or quoted output from computer program |
-| `<small>` | Side comments, fine print, copyright, legal text |
-| `<span>` | Generic inline container with no semantic meaning |
-| `<strong>` | Strong importance, seriousness, or urgency (typically bold) |
-| `<sub>` | Subscript text |
-| `<sup>` | Superscript text |
-| `<time>` | Specific time period (use `datetime` for machine-readable format) |
-| `<u>` | Non-textual annotation indicated by underline |
-| `<var>` | Variable name in mathematical or programming context |
-| `<wbr>` | Optional line break opportunity |
-
-## Image and Multimedia
-
-Embed images, audio, video, and other multimedia resources.
-
-| Element | Purpose |
-|---------|---------|
-| `<area>` | Clickable area within image map |
-| `<audio>` | Embeds sound content (supports multiple sources via `<source>`) |
-| `<img>` | Embeds an image |
-| `<map>` | Defines image map with clickable regions |
-| `<track>` | Text tracks for media elements (subtitles, captions in WebVTT format) |
-| `<video>` | Embeds video content (supports multiple sources) |
-
-## Embedded Content
-
-Embed external content beyond standard multimedia.
-
-| Element | Purpose |
-|---------|---------|
-| `<embed>` | Embeds external content from plugins or applications |
-| `<fencedframe>` | Nested browsing context with enhanced privacy (like `<iframe>` with more features) |
-| `<iframe>` | Embeds another HTML page within current page |
-| `<object>` | External resource treated as image, nested context, or plugin content |
-| `<picture>` | Container for multiple image sources for responsive images |
-| `<source>` | Multiple media resources for `<picture>`, `<audio>`, or `<video>` |
-
-## SVG and MathML
-
-**`<svg>`**  
-Container for SVG graphics (vector images, charts, diagrams).
-
-**`<math>`**  
-Top-level element for MathML mathematical notation.
-
-## Scripting
-
-Enable dynamic content and web applications.
-
-| Element | Purpose |
-|---------|---------|
-| `<canvas>` | Container for drawing graphics via JavaScript or WebGL |
-| `<noscript>` | Content displayed when scripts are disabled or unsupported |
-| `<script>` | Embeds or references executable code (typically JavaScript) |
-
-## Demarcating Edits
-
-Indicate document changes or revisions.
-
-| Element | Purpose |
-|---------|---------|
-| `<del>` | Text deleted from document (track changes, diffs) |
-| `<ins>` | Text added to document |
-
-## Table Content
-
-Create and structure tabular data.
-
-| Element | Purpose |
-|---------|---------|
-| `<caption>` | Table title or caption |
-| `<col>` | Column definition within `<colgroup>` (must have no `span` on parent) |
-| `<colgroup>` | Group of columns in a table |
-| `<table>` | Container for tabular data displayed in rows and columns |
-| `<tbody>` | Main body rows of a table |
-| `<td>` | Data cell within a table row |
-| `<tfoot>` | Footer rows with summary information |
-| `<th>` | Header cell for group of table cells (use `scope` and `headers` for relationships) |
-| `<thead>` | Header rows with column information |
-| `<tr>` | Row of cells in a table |
-
-## Forms
-
-Interactive controls for user input and data submission.
-
-| Element | Purpose |
-|---------|---------|
-| `<button>` | Interactive button activated by user action |
-| `<datalist>` | Set of `<option>` elements providing suggestions for other controls |
-| `<fieldset>` | Groups related form controls and labels |
-| `<form>` | Document section containing interactive submission controls |
-| `<input>` | Interactive control with many types for different data (text, checkbox, file, etc.) |
-| `<label>` | Caption for form control |
-| `<legend>` | Caption for parent `<fieldset>` |
-| `<meter>` | Scalar value within known range or fractional value |
-| `<optgroup>` | Groups options within `<select>` |
-| `<option>` | Item within `<select>`, `<optgroup>`, or `<datalist>` |
-| `<output>` | Container for calculation results or user action outcomes |
-| `<progress>` | Task completion indicator (progress bar) |
-| `<select>` | Dropdown menu of options |
-| `<selectedcontent>` | Displays currently selected option in closed `<select>` |
-| `<textarea>` | Multi-line plain text editing control |
-
-## Interactive Elements
-
-Create interactive user interface components.
-
-| Element | Purpose |
-|---------|---------|
-| `<details>` | Disclosure widget revealing content when toggled open |
-| `<dialog>` | Dialog box, modal, or interactive component |
-| `navigator.geolocation` | JavaScript Geolocation API for accessing user's location (not an HTML element) |
-| `<summary>` | Summary or label for `<details>` disclosure box |
-
-## Web Components
-
-Create and use custom elements as standard HTML.
-
-| Element | Purpose |
-|---------|---------|
-| `<slot>` | Placeholder in web component filled with custom markup |
-| `<template>` | HTML held for later instantiation via JavaScript |
-
-## Obsolete and Deprecated Elements
-
-**Do not use these elements.** They are deprecated and should be replaced in existing projects.
-
-| Element | Deprecated Purpose | Modern Alternative |
-|---------|-------------------|-------------------|
-| `<acronym>` | Indicated acronyms | Use `<abbr>` |
-| `<big>` | Larger font size | Use CSS `font-size` |
-| `<center>` | Centered content | Use CSS `text-align: center` |
-| `<content>` | Shadow DOM insertion point | Use `<slot>` |
-| `<dir>` | Directory list | Use `<ul>` |
-| `<font>` | Font styling | Use CSS `font` properties |
-| `<frame>`, `<frameset>` | Frame-based layout | Use modern layout techniques |
-| `<image>` | Image embed | Use `<img>` |
-| `<marquee>` | Scrolling text | Use CSS animations |
-| `<menuitem>` | Context menu command | Use modern menu patterns |
-| `<nobr>` | Prevent line breaks | Use CSS `white-space: nowrap` |
-| `<noembed>` | Fallback for embed | Use content between `<object>` tags |
-| `<noframes>` | Frame fallback | Don't use frames |
-| `<param>` | Object parameters | Use data attributes |
-| `<plaintext>` | Raw text rendering | Use `<pre>` with proper escaping |
-| `<rb>`, `<rtc>` | Ruby annotation parts | Use `<ruby>`, `<rt>`, `<rp>` |
-| `<shadow>` | Shadow DOM insertion | Use `<slot>` |
-| `<strike>` | Strikethrough | Use `<s>` or `<del>` |
-| `<tt>` | Teletype (monospace) | Use CSS `font-family: monospace` |
-| `<xmp>` | Example markup | Use `<pre>` with proper escaping |
-
-## Element Categories Overview
-
-**Metadata elements**: `<base>`, `<head>`, `<link>`, `<meta>`, `<style>`, `<title>`
-
-**Sectioning elements**: `<article>`, `<aside>`, `<nav>`, `<section>`
-
-**Heading elements**: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<hgroup>`
-
-**Phrasing elements**: `<a>`, `<abbr>`, `<b>`, `<br>`, `<cite>`, `<code>`, `<data>`, `<em>`, `<i>`, `<kbd>`, `<mark>`, `<q>`, `<s>`, `<samp>`, `<small>`, `<span>`, `<strong>`, `<sub>`, `<sup>`, `<time>`, `<u>`, `<var>`, and others
-
-**Flow elements**: Most elements that appear in document body
-
-**Interactive elements**: `<a>`, `<button>`, `<details>`, `<embed>`, `<iframe>`, `<input>`, `<label>`, `<select>`, `<textarea>`, and others with user interaction
-
-**Void elements** (no closing tag): `<area>`, `<base>`, `<br>`, `<col>`, `<embed>`, `<hr>`, `<img>`, `<input>`, `<link>`, `<meta>`, `<source>`, `<track>`, `<wbr>`
-
-## Usage Guidelines
-
-1. **Choose semantic elements**: Use elements that convey meaning (e.g., `<nav>` for navigation, not `<div class="nav">`)
-2. **Avoid deprecated elements**: Never use elements from the obsolete list
-3. **Use void elements correctly**: Don't add closing tags to self-closing elements
-4. **Nest properly**: Ensure elements are closed in correct order
-5. **Provide accessibility**: Use semantic HTML and proper attributes (alt, aria-*, etc.)
-6. **Validate markup**: Use HTML validators to catch errors
-7. **Consider content categories**: Understand which elements can contain which others
-
-## Quick Selection Guide
-
-**For text**: Use `<p>` for paragraphs, heading elements for structure, inline elements for emphasis
-
-**For layout**: Use `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`, `<section>`, `<article>`
-
-**For lists**: Use `<ul>` (unordered), `<ol>` (ordered), `<dl>` (definitions)
-
-**For data tables**: Use `<table>` with proper structure (`<thead>`, `<tbody>`, `<tfoot>`)
-
-**For forms**: Use `<form>` with `<input>`, `<label>`, `<select>`, `<textarea>`, `<button>`
-
-**For media**: Use `<img>`, `<video>`, `<audio>`, `<picture>` for responsive images
-
-**For interactive widgets**: Use `<details>`, `<dialog>`, form elements
-
-**For grouping**: Use `<div>` (block) or `<span>` (inline) when no semantic element fits
-
-## Resources
-
-- [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
-- [WHATWG HTML Living Standard](https://html.spec.whatwg.org/)
-- [W3C HTML Specification](https://www.w3.org/TR/html/)
diff --git a/skills/html-coder/references/ui-ux.md b/skills/html-coder/references/ui-ux.md
deleted file mode 100644
index 420eabd0a..000000000
--- a/skills/html-coder/references/ui-ux.md
+++ /dev/null
@@ -1,856 +0,0 @@
-# HTML UI/UX Best Practices
-
-Comprehensive guide to creating accessible, usable, and user-friendly HTML interfaces.
-
-## Core UI/UX Principles
-
-### 1. Accessibility First
-
-Design for all users, including those with disabilities.
-
-**Screen Reader Support**:
-```html
-<!-- Proper heading hierarchy -->
-<h1>Main Title</h1>
-<h2>Section Title</h2>
-<h3>Subsection Title</h3>
-
-<!-- Descriptive link text -->
-<a href="products.html">View our products</a>
-<!-- NOT: <a href="products.html">Click here</a> -->
-
-<!-- Image alt text -->
-<img src="product.jpg" alt="Red leather handbag with gold chain strap">
-
-<!-- Form labels -->
-<label for="email">Email Address:</label>
-<input type="email" id="email" name="email" required>
-```
-
-**Keyboard Navigation**:
-```html
-<!-- All interactive elements should be keyboard accessible -->
-<button>Click Me</button>
-<a href="#section">Jump to Section</a>
-
-<!-- Custom interactive elements need tabindex and ARIA -->
-<div role="button" tabindex="0" aria-label="Custom button">
-  Click
-</div>
-
-<!-- Skip to main content link -->
-<a href="#main" class="skip-link">Skip to main content</a>
-<main id="main">
-  <!-- Content -->
-</main>
-```
-
-### 2. Semantic HTML
-
-Use meaningful HTML elements that convey structure and purpose.
-
-```html
-<!-- ✅ Good: Semantic structure -->
-<article>
-  <header>
-    <h1>Article Title</h1>
-    <time datetime="2024-01-15">January 15, 2024</time>
-  </header>
-  
-  <p>Article content...</p>
-  
-  <footer>
-    <p>Author: John Doe</p>
-  </footer>
-</article>
-
-<!-- ❌ Bad: Generic divs -->
-<div class="article">
-  <div class="header">
-    <div class="title">Article Title</div>
-    <div class="date">January 15, 2024</div>
-  </div>
-  <div class="content">Article content...</div>
-</div>
-```
-
-### 3. Mobile-First Design
-
-Design for mobile devices first, then enhance for larger screens.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <!-- Essential viewport meta tag -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mobile-First Page</title>
-</head>
-<body>
-  <!-- Touch-friendly button sizes (minimum 44x44px) -->
-  <button style="min-width: 44px; min-height: 44px;">Tap Me</button>
-  
-  <!-- Readable text (minimum 16px) -->
-  <p style="font-size: 16px;">Easy to read on mobile</p>
-  
-  <!-- Mobile-friendly navigation -->
-  <nav>
-    <button id="menuToggle" aria-label="Toggle menu">☰</button>
-    <ul id="menu">
-      <li><a href="#home">Home</a></li>
-      <li><a href="#about">About</a></li>
-      <li><a href="#contact">Contact</a></li>
-    </ul>
-  </nav>
-</body>
-</html>
-```
-
-## Form UI/UX Best Practices
-
-### Well-Designed Forms
-
-```html
-<form action="/submit" method="post">
-  <!-- Group related fields -->
-  <fieldset>
-    <legend>Personal Information</legend>
-    
-    <!-- Always associate labels with inputs -->
-    <div class="form-group">
-      <label for="firstName">First Name</label>
-      <input 
-        type="text" 
-        id="firstName" 
-        name="firstName" 
-        required
-        aria-required="true"
-        autocomplete="given-name">
-    </div>
-    
-    <div class="form-group">
-      <label for="email">Email Address</label>
-      <input 
-        type="email" 
-        id="email" 
-        name="email" 
-        required
-        aria-required="true"
-        aria-describedby="emailHelp"
-        autocomplete="email">
-      <small id="emailHelp">We'll never share your email.</small>
-    </div>
-  </fieldset>
-  
-  <!-- Clear call-to-action -->
-  <button type="submit">Submit Application</button>
-  <button type="reset">Clear Form</button>
-</form>
-```
-
-### Input Types for Better UX
-
-```html
-<!-- Use appropriate input types for mobile keyboards -->
-<input type="tel" placeholder="Phone number">
-<input type="email" placeholder="Email address">
-<input type="url" placeholder="Website URL">
-<input type="number" placeholder="Age" min="18" max="120">
-<input type="date" placeholder="Birth date">
-<input type="search" placeholder="Search...">
-```
-
-### Form Validation Feedback
-
-```html
-<form>
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input 
-      type="text" 
-      id="username" 
-      name="username"
-      required
-      minlength="3"
-      maxlength="20"
-      pattern="[a-zA-Z0-9]+"
-      aria-describedby="usernameError">
-    
-    <!-- Error message (shown when invalid) -->
-    <span id="usernameError" class="error" role="alert" style="display: none;">
-      Username must be 3-20 alphanumeric characters
-    </span>
-  </div>
-  
-  <button type="submit">Register</button>
-</form>
-```
-
-### Placeholder vs Label
-
-```html
-<!-- ✅ Good: Label + placeholder -->
-<label for="search">Search</label>
-<input type="search" id="search" placeholder="Enter keyword...">
-
-<!-- ❌ Bad: Placeholder only (inaccessible) -->
-<input type="text" placeholder="Email address">
-```
-
-## Navigation Best Practices
-
-### Clear Navigation Structure
-
-```html
-<header>
-  <nav aria-label="Main navigation">
-    <ul>
-      <li><a href="#home" aria-current="page">Home</a></li>
-      <li><a href="#about">About</a></li>
-      <li><a href="#services">Services</a></li>
-      <li><a href="#contact">Contact</a></li>
-    </ul>
-  </nav>
-</header>
-```
-
-### Breadcrumb Navigation
-
-```html
-<nav aria-label="Breadcrumb">
-  <ol>
-    <li><a href="/">Home</a></li>
-    <li><a href="/products">Products</a></li>
-    <li><a href="/products/electronics">Electronics</a></li>
-    <li aria-current="page">Laptops</li>
-  </ol>
-</nav>
-```
-
-### Mobile Navigation
-
-```html
-<!-- Hamburger menu pattern -->
-<header>
-  <button 
-    id="menuToggle" 
-    aria-expanded="false" 
-    aria-controls="mainMenu"
-    aria-label="Toggle navigation menu">
-    ☰
-  </button>
-  
-  <nav id="mainMenu" hidden>
-    <ul>
-      <li><a href="#home">Home</a></li>
-      <li><a href="#about">About</a></li>
-      <li><a href="#services">Services</a></li>
-      <li><a href="#contact">Contact</a></li>
-    </ul>
-  </nav>
-</header>
-```
-
-## Content Layout Best Practices
-
-### Visual Hierarchy
-
-```html
-<!-- Clear hierarchy with headings -->
-<article>
-  <h1>Main Topic</h1>
-  
-  <section>
-    <h2>Subtopic A</h2>
-    <p>Content for subtopic A...</p>
-    
-    <h3>Detail A1</h3>
-    <p>Detailed information...</p>
-    
-    <h3>Detail A2</h3>
-    <p>More details...</p>
-  </section>
-  
-  <section>
-    <h2>Subtopic B</h2>
-    <p>Content for subtopic B...</p>
-  </section>
-</article>
-```
-
-### Scannable Content
-
-```html
-<!-- Use lists for scannable content -->
-<article>
-  <h2>Product Features</h2>
-  <ul>
-    <li>Fast performance</li>
-    <li>Easy to use</li>
-    <li>Secure encryption</li>
-    <li>24/7 support</li>
-  </ul>
-  
-  <!-- Use paragraphs for readable content -->
-  <h2>Description</h2>
-  <p>Our product offers the best solution for your needs...</p>
-</article>
-```
-
-### White Space
-
-```html
-<!-- Use semantic elements that naturally create spacing -->
-<section>
-  <h2>Section Title</h2>
-  <p>First paragraph of content.</p>
-  <p>Second paragraph with proper spacing.</p>
-</section>
-
-<section>
-  <h2>Another Section</h2>
-  <p>Content visually separated from previous section.</p>
-</section>
-```
-
-## Interactive Elements
-
-### Buttons vs Links
-
-```html
-<!-- ✅ Button: For actions -->
-<button type="button" onclick="saveData()">Save</button>
-<button type="submit">Submit Form</button>
-
-<!-- ✅ Link: For navigation -->
-<a href="page.html">Go to Page</a>
-<a href="#section">Jump to Section</a>
-
-<!-- ❌ Bad: Link styled as button for actions -->
-<a href="#" onclick="saveData()">Save</a>
-
-<!-- ❌ Bad: Button for navigation -->
-<button onclick="location.href='page.html'">Go to Page</button>
-```
-
-### Call-to-Action (CTA)
-
-```html
-<!-- Clear, action-oriented CTA buttons -->
-<section>
-  <h2>Get Started Today</h2>
-  <p>Join thousands of satisfied customers.</p>
-  
-  <!-- Primary CTA -->
-  <button class="btn-primary">Start Free Trial</button>
-  
-  <!-- Secondary CTA -->
-  <a href="#learn-more" class="btn-secondary">Learn More</a>
-</section>
-```
-
-### Loading States
-
-```html
-<!-- Button with loading state -->
-<button type="submit" id="submitBtn">
-  <span class="btn-text">Submit</span>
-  <span class="btn-spinner" hidden aria-hidden="true">⏳</span>
-</button>
-
-<!-- Loading indicator for content -->
-<div id="content" aria-busy="false" aria-live="polite">
-  <p>Content loading...</p>
-</div>
-```
-
-## Tables for Data
-
-### Accessible Data Tables
-
-```html
-<table>
-  <caption>Quarterly Sales Report 2024</caption>
-  <thead>
-    <tr>
-      <th scope="col">Quarter</th>
-      <th scope="col">Revenue</th>
-      <th scope="col">Growth</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Q1</th>
-      <td>$125,000</td>
-      <td>+12%</td>
-    </tr>
-    <tr>
-      <th scope="row">Q2</th>
-      <td>$140,000</td>
-      <td>+15%</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-### Responsive Tables
-
-```html
-<!-- Option 1: Horizontal scroll -->
-<div style="overflow-x: auto;">
-  <table>
-    <!-- Table content -->
-  </table>
-</div>
-
-<!-- Option 2: Stacked layout with data attributes -->
-<table class="responsive-table">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Email</th>
-      <th>Phone</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td data-label="Name">John Doe</td>
-      <td data-label="Email">john@example.com</td>
-      <td data-label="Phone">(555) 123-4567</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## Media and Images
-
-### Responsive Images
-
-```html
-<!-- Responsive image with srcset -->
-<img 
-  src="image-800w.jpg"
-  srcset="image-400w.jpg 400w,
-          image-800w.jpg 800w,
-          image-1200w.jpg 1200w"
-  sizes="(max-width: 600px) 400px,
-         (max-width: 1000px) 800px,
-         1200px"
-  alt="Product showcase">
-
-<!-- Art direction with picture -->
-<picture>
-  <source media="(min-width: 800px)" srcset="wide.jpg">
-  <source media="(min-width: 400px)" srcset="medium.jpg">
-  <img src="narrow.jpg" alt="Responsive design example">
-</picture>
-```
-
-### Context-Aware Alt Text
-
-```html
-<!-- ✅ Good: Descriptive alt text -->
-<img src="sunset.jpg" alt="Golden sunset over mountain peaks">
-
-<!-- ✅ Good: Decorative image (empty alt) -->
-<img src="decorative-line.png" alt="" role="presentation">
-
-<!-- ✅ Good: Functional image -->
-<button>
-  <img src="search-icon.svg" alt="Search">
-</button>
-
-<!-- ❌ Bad: Generic alt text -->
-<img src="photo.jpg" alt="Image">
-<img src="pic.jpg" alt="Picture of something">
-```
-
-### Video Best Practices
-
-```html
-<video 
-  controls 
-  preload="metadata"
-  poster="video-poster.jpg"
-  width="640" 
-  height="360">
-  
-  <source src="video.mp4" type="video/mp4">
-  <source src="video.webm" type="video/webm">
-  
-  <!-- Subtitles for accessibility -->
-  <track 
-    kind="subtitles" 
-    src="subtitles-en.vtt" 
-    srclang="en" 
-    label="English"
-    default>
-  
-  <track 
-    kind="subtitles" 
-    src="subtitles-es.vtt" 
-    srclang="es" 
-    label="Español">
-  
-  <!-- Fallback text -->
-  <p>Your browser doesn't support HTML5 video. 
-     <a href="video.mp4">Download the video</a>.</p>
-</video>
-```
-
-## Error Handling and Feedback
-
-### Error Messages
-
-```html
-<!-- Form with error feedback -->
-<form>
-  <div class="form-group" aria-invalid="true">
-    <label for="username">Username</label>
-    <input 
-      type="text" 
-      id="username" 
-      name="username"
-      aria-describedby="usernameError"
-      class="invalid">
-    
-    <div id="usernameError" role="alert" class="error-message">
-      ❌ Username must be at least 3 characters
-    </div>
-  </div>
-  
-  <button type="submit">Submit</button>
-</form>
-```
-
-### Success Messages
-
-```html
-<!-- Success notification -->
-<div role="status" aria-live="polite" class="success-message">
-  ✅ Your changes have been saved successfully!
-</div>
-
-<!-- Success state for forms -->
-<form>
-  <div class="form-group">
-    <label for="email">Email</label>
-    <input 
-      type="email" 
-      id="email" 
-      aria-describedby="emailSuccess"
-      class="valid">
-    
-    <div id="emailSuccess" class="success-feedback">
-      ✓ Valid email address
-    </div>
-  </div>
-</form>
-```
-
-### 404 Error Pages
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>404 - Page Not Found</title>
-</head>
-<body>
-  <main>
-    <h1>404 - Page Not Found</h1>
-    <p>Sorry, the page you're looking for doesn't exist.</p>
-    
-    <!-- Helpful navigation -->
-    <nav aria-label="Error page navigation">
-      <ul>
-        <li><a href="/">Go to Homepage</a></li>
-        <li><a href="/sitemap">View Sitemap</a></li>
-        <li><a href="/search">Search</a></li>
-        <li><a href="/contact">Contact Support</a></li>
-      </ul>
-    </nav>
-  </main>
-</body>
-</html>
-```
-
-## Progress Indicators
-
-### Progress Bar
-
-```html
-<!-- Determinate progress -->
-<label for="uploadProgress">Upload Progress:</label>
-<progress id="uploadProgress" value="70" max="100">70%</progress>
-
-<!-- Indeterminate progress (no value) -->
-<progress>Loading...</progress>
-```
-
-### Step Indicators
-
-```html
-<nav aria-label="Progress">
-  <ol class="steps">
-    <li class="completed" aria-current="false">
-      <span class="step-number">1</span>
-      <span class="step-label">Account Info</span>
-    </li>
-    <li class="active" aria-current="step">
-      <span class="step-number">2</span>
-      <span class="step-label">Payment</span>
-    </li>
-    <li class="pending" aria-current="false">
-      <span class="step-number">3</span>
-      <span class="step-label">Confirmation</span>
-    </li>
-  </ol>
-</nav>
-```
-
-## Modals and Dialogs
-
-### Accessible Modal
-
-```html
-<!-- Trigger button -->
-<button id="openModal" aria-haspopup="dialog">Open Modal</button>
-
-<!-- Modal dialog -->
-<div 
-  id="modal" 
-  role="dialog" 
-  aria-labelledby="modalTitle"
-  aria-describedby="modalDesc"
-  aria-modal="true"
-  hidden>
-  
-  <div class="modal-content">
-    <header>
-      <h2 id="modalTitle">Confirm Action</h2>
-      <button 
-        id="closeModal" 
-        aria-label="Close modal"
-        type="button">✕</button>
-    </header>
-    
-    <div id="modalDesc">
-      <p>Are you sure you want to proceed?</p>
-    </div>
-    
-    <footer>
-      <button type="button" class="btn-primary">Confirm</button>
-      <button type="button" class="btn-secondary">Cancel</button>
-    </footer>
-  </div>
-</div>
-```
-
-## Search UI
-
-### Search Form
-
-```html
-<form role="search" action="/search" method="get">
-  <label for="siteSearch">Search this site:</label>
-  <input 
-    type="search" 
-    id="siteSearch" 
-    name="q"
-    placeholder="Enter keywords..."
-    autocomplete="off"
-    aria-label="Search">
-  
-  <button type="submit">
-    <span class="visually-hidden">Search</span>
-    <svg aria-hidden="true"><!-- Search icon --></svg>
-  </button>
-</form>
-```
-
-### Search Results
-
-```html
-<section aria-label="Search results">
-  <h2>Search Results for "keyword"</h2>
-  <p role="status">Found 42 results in 0.15 seconds</p>
-  
-  <ul class="results-list">
-    <li>
-      <article>
-        <h3><a href="/page1">Result Title 1</a></h3>
-        <p>Result description...</p>
-      </article>
-    </li>
-    <li>
-      <article>
-        <h3><a href="/page2">Result Title 2</a></h3>
-        <p>Result description...</p>
-      </article>
-    </li>
-  </ul>
-  
-  <!-- Pagination -->
-  <nav aria-label="Search results pages">
-    <ul class="pagination">
-      <li><a href="?page=1" aria-label="Page 1" aria-current="page">1</a></li>
-      <li><a href="?page=2" aria-label="Page 2">2</a></li>
-      <li><a href="?page=3" aria-label="Page 3">3</a></li>
-    </ul>
-  </nav>
-</section>
-```
-
-## Cards and Content Blocks
-
-### Card Component
-
-```html
-<article class="card">
-  <img src="product.jpg" alt="Product name" class="card-image">
-  
-  <div class="card-content">
-    <h3 class="card-title">Product Name</h3>
-    <p class="card-description">Brief description of the product...</p>
-    
-    <div class="card-meta">
-      <span class="price">$29.99</span>
-      <span class="rating" aria-label="Rating: 4.5 out of 5 stars">
-        ★★★★☆ 4.5
-      </span>
-    </div>
-  </div>
-  
-  <div class="card-actions">
-    <button class="btn-primary">Add to Cart</button>
-    <button class="btn-secondary">Learn More</button>
-  </div>
-</article>
-```
-
-## Performance Considerations
-
-### Lazy Loading
-
-```html
-<!-- Lazy load images below the fold -->
-<img 
-  src="placeholder.jpg" 
-  data-src="actual-image.jpg"
-  loading="lazy"
-  alt="Description">
-
-<!-- Lazy load iframes -->
-<iframe 
-  src="video.html"
-  loading="lazy"
-  title="Video player"></iframe>
-```
-
-### Critical Content First
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Fast Loading Page</title>
-  
-  <!-- Critical CSS inline -->
-  <style>
-    /* Above-the-fold styles */
-    .hero { /* styles */ }
-  </style>
-  
-  <!-- Defer non-critical CSS -->
-  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
-</head>
-<body>
-  <!-- Critical content first -->
-  <header>
-    <h1>Main Heading</h1>
-  </header>
-  
-  <!-- Non-critical content can load later -->
-  <section>
-    <!-- Content -->
-  </section>
-</body>
-</html>
-```
-
-## Accessibility Checklist
-
-### ✅ Essential Accessibility Features
-
-- [ ] **All images have alt text** (or `alt=""` for decorative)
-- [ ] **Form inputs have labels** (using `<label>` with `for`)
-- [ ] **Headings follow logical hierarchy** (H1 → H2 → H3)
-- [ ] **Links have descriptive text** (not "click here")
-- [ ] **Color contrast meets WCAG AA** (4.5:1 for normal text)
-- [ ] **Keyboard navigation works** (Tab, Enter, Space, Arrows)
-- [ ] **Focus visible on interactive elements**
-- [ ] **ARIA used correctly** (roles, states, properties)
-- [ ] **Skip navigation link provided**
-- [ ] **Language declared** (`<html lang="en">`)
-- [ ] **Viewport meta tag included** (for mobile)
-- [ ] **Forms have proper validation** (with clear error messages)
-- [ ] **Videos have captions/subtitles**
-- [ ] **Tables have proper headers** (`<th scope>`)
-- [ ] **Page title is descriptive**
-
-## Common UX Mistakes to Avoid
-
-### ❌ Don't Do These
-
-1. **Tiny tap targets** (minimum 44x44px for touch)
-2. **Disabled form submit buttons** (show errors instead)
-3. **Poor error messages** ("Error 402" vs "Email format invalid")
-4. **Fake loading spinners** (be honest about loading states)
-5. **Confusing navigation** (inconsistent menu locations)
-6. **Hiding important info** (critical data in tooltips)
-7. **Auto-playing media** (audio/video without user action)
-8. **Captchas that are impossible** (use accessible alternatives)
-9. **Required field only marked with color** (use text/symbol too)
-10. **Removing focus outline** without alternative
-11. **Infinite scroll without pagination** (accessibility issue)
-12. **Modal without keyboard trap** (can't escape with ESC or Tab)
-13. **Links that open in new tab** without warning
-14. **Justifying text** (creates irregular spacing, hard to read)
-15. **Using placeholders as labels** (disappear when typing)
-
-## Best Practices Summary
-
-### ✅ Always Do
-
-1. **Test with keyboard only** (no mouse)
-2. **Test with screen reader** (NVDA, JAWS, VoiceOver)
-3. **Use semantic HTML** (not divs for everything)
-4. **Provide visible focus states**
-5. **Write descriptive error messages**
-6. **Make clickable areas large enough** (44x44px minimum)
-7. **Use proper heading hierarchy**
-8. **Provide text alternatives** for non-text content
-9. **Test on mobile devices**
-10. **Ensure sufficient color contrast**
-11. **Allow users to control motion** (respect `prefers-reduced-motion`)
-12. **Provide clear feedback** for all user actions
-13. **Make forms easy to complete**
-14. **Use loading indicators** for async operations
-15. **Test across different browsers**
-
-## Resources
-
-- **WCAG 2.1 Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
-- **MDN Accessibility**: https://developer.mozilla.org/en-US/docs/Web/Accessibility
-- **A11y Project**: https://www.a11yproject.com/
-- **WebAIM**: https://webaim.org/
-- **Color Contrast Checker**: https://webaim.org/resources/contrastchecker/
-- **WAVE Tool**: https://wave.webaim.org/
-- **axe DevTools**: https://www.deque.com/axe/devtools/
-- **Material Design**: https://material.io/design
-- **Nielsen Norman Group**: https://www.nngroup.com/
-- **Inclusive Components**: https://inclusive-components.design/

From a3fb58f6b4b21869890dd5a894f94e3ceb0bca0b Mon Sep 17 00:00:00 2001
From: jhauga <johnhaugabook@gmail.com>
Date: Mon, 9 Mar 2026 19:38:42 -0400
Subject: [PATCH 5/6] changes to new skill html-coder

---
 skills/html-coder/SKILL.md | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/skills/html-coder/SKILL.md b/skills/html-coder/SKILL.md
index bca054d83..0f40ab848 100644
--- a/skills/html-coder/SKILL.md
+++ b/skills/html-coder/SKILL.md
@@ -22,17 +22,21 @@ Expert skill for professional HTML development with focus on semantic markup, ac
 
 - **Semantic HTML**: Document structure, content sections, accessibility-first markup
 - **Forms**: All input types, validation attributes, fieldsets, labels
-- **Media**: Responsive images, audio/video, Canvas, SVG  
+- **Media**: Responsive images, audio/video, Canvas, SVG
 - **HTML5 APIs**: Web Storage, Geolocation, Drag & Drop, Web Workers
 - **Accessibility**: ARIA, screen reader support, WCAG compliance
 
 ## Essential References
 
 Core documentation for HTML experts:
-- `references/reference.md` - Complete HTML element and attribute reference
-- `references/essentials.md` - Semantic markup, validation, responsive techniques
-- `references/quickstart.md` - Fast reference cheatsheet
-- `references/standards.md` - HTML5 specifications and standards
+
+- [`references/add-css-style.md`](references/add-css-style.md) - Add CSS via `link` tag, inline, or embedded in html
+- [`references/add-javascript.md`](references/add-javascript.md) - Add JavaScript via `script src="link.js"` tag, inline `script`, or embedded in html
+- [`references/attributes.md`](references/attributes.md) - HTML attribute essentials
+- [`references/essentials.md`](references/essentials.md) - Semantic markup, validation, responsive techniques
+- [`references/global-attributes.md`](references/global-attributes.md) - Complete global attribute information
+- [`references/glossary.md`](references/glossary.md) - Complete HTML element and attribute reference
+- [`references/standards.md`](references/standards.md) - HTML5 specifications and standards
 
 ## Best Practices
 
@@ -72,7 +76,7 @@ Core documentation for HTML experts:
   <fieldset>
     <legend>Contact</legend>
     <label for="email">Email:</label>
-    <input type="email" id="email" name="email" required 
+    <input type="email" id="email" name="email" required
            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
     <button type="submit">Send</button>
   </fieldset>
@@ -101,5 +105,3 @@ Core documentation for HTML experts:
 - **MDN Web Docs**: https://developer.mozilla.org/en-US/docs/Web/HTML
 
 ---
-
-**Collaborates with**: `make-skill-template` for creating new skills, `finalize-agent-prompt` for prompt refinement.

From 8785e2f9d36b758581e130fd3eb7fde946c4344d Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Mon, 9 Mar 2026 19:49:49 -0400
Subject: [PATCH 6/6] Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .codespellrc                                      | 7 +------
 skills/html-coder/references/essentials.md        | 2 +-
 skills/html-coder/references/global-attributes.md | 4 ++--
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/.codespellrc b/.codespellrc
index a6ae83db5..489669932 100644
--- a/.codespellrc
+++ b/.codespellrc
@@ -42,12 +42,7 @@
 
 # aNULL - HTTPS configuration cipher string
 
-# brunch - A late morning meal, combining breakfast and lunch
-
-# capela - Portuguese word for chapel
-
-ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afterall,deques,dateA,dateB,TE,FillIn,alle,vai,LOD,InOut,pixelX,aNULL,brunch,capela
-
+ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afterall,deques,dateA,dateB,TE,FillIn,alle,vai,LOD,InOut,pixelX,aNULL
 # Skip certain files and directories
 
 skip = .git,node_modules,package-lock.json,*.lock,website/build,website/.docusaurus
diff --git a/skills/html-coder/references/essentials.md b/skills/html-coder/references/essentials.md
index 1fe65c9d0..c4f63c6a7 100644
--- a/skills/html-coder/references/essentials.md
+++ b/skills/html-coder/references/essentials.md
@@ -27,7 +27,7 @@ Comments add notes to code without affecting display. Browsers ignore comments.
 - Can be used as content in most elements
 - **Cannot** be used inside tags (e.g., within attributes)
 - **Cannot** be nested
-- Not allowed in `<script>`, `<style>`, `<title>`, `<textarea>` (raw text elements)
+- In raw-text/RCDATA elements like `<script>`, `<style>`, `<title>`, and `<textarea>`, the `<!--` / `-->` sequences are treated as literal text, not HTML comments (they may affect JS/CSS if used)
 - First `-->` after `<!--` closes the comment
 
 **Example**:
diff --git a/skills/html-coder/references/global-attributes.md b/skills/html-coder/references/global-attributes.md
index 235b5f326..008c0d10e 100644
--- a/skills/html-coder/references/global-attributes.md
+++ b/skills/html-coder/references/global-attributes.md
@@ -277,7 +277,7 @@ Global attributes are attributes that can be applied to **any HTML element**, re
 - Used for fragment identifiers (`#main-header` in URLs)
 - Used with `<label for="id">` to associate labels with inputs
 - Convention: lowercase with hyphens or camelCase
-- Cannot start with a number
+- May start with a number, but such IDs need escaping in some CSS selectors (for example, `#\31 23` to select `id="123"`)
 
 ---
 
@@ -292,7 +292,7 @@ Global attributes are attributes that can be applied to **any HTML element**, re
 <div inert>
   <button>Cannot be clicked</button>
   <a href="#">Cannot be focused</a>
-  <input type="text">Cannot be edited</input>
+  <input type="text" value="Cannot be edited" />
 </div>
 ```