[Product Homepage Design] Implementation

.claude/claude-backup-10534/skills/vitest-html-testing/SKILL.md

@@ -0,0 +1,6 @@
+---
+name: vitest-html-testing
+description: Use when testing static HTML pages with Vitest and jsdom. Covers loading HTML fixtures, querying DOM elements, validating CSS file contents, and testing accessibility/SEO attributes.
+---
+
+See [README.md](references/README.md) for full documentation.

.claude/claude-backup-10534/skills/vitest-html-testing/references/README.md

@@ -0,0 +1,90 @@
+# Vitest + jsdom HTML Testing
+
+## Overview
+
+This skill documents the testing approach for the MirDB homepage project. All homepage scenarios use Vitest with jsdom to test static HTML pages. Tests load the HTML file from disk, query the DOM, and validate structure, content, and CSS.
+
+## When to Use This Skill
+
+Use this skill when users request:
+
+- Writing tests for static HTML pages (unit tests with jsdom)
+- Validating HTML structure, heading hierarchy, or semantic elements
+- Testing CSS classes, hover states, or focus states via CSS file inspection
+- Checking link attributes (href, target, rel) for security and correctness
+- Validating image elements (src, alt, dimensions)
+
+## Core Capabilities
+
+### 1. Loading HTML in jsdom
+
+The MirDB homepage is a static site with no build step. Tests load `index.html` directly:
+
+```js
+import { JSDOM } from 'jsdom';
+import fs from 'node:fs';
+import path from 'node:path';
+
+function loadDOM() {
+  const html = fs.readFileSync(
+    path.resolve(__dirname, '../index.html'),
+    'utf-8'
+  );
+  return new JSDOM(html, { url: 'http://localhost:8080' });
+}
+```
+
+### 2. DOM Query Patterns
+
+```js
+// Element existence
+const hero = document.getElementById('hero');
+expect(hero).not.toBeNull();
+
+// Scoped queries
+const headline = document.querySelector('#hero h1');
+expect(headline.tagName).toBe('H1');
+
+// Word count validation
+const text = element.textContent.trim();
+const wordCount = text.split(/\s+/).length;
+expect(wordCount).toBeGreaterThanOrEqual(5);
+
+// Link attributes
+expect(link.getAttribute('target')).toBe('_blank');
+expect(link.getAttribute('rel')).toMatch(/noopener/);
+
+// CSS file content check
+const css = fs.readFileSync('css/hero.css', 'utf-8');
+expect(css).toMatch(/\.hero-cta-primary:hover/);
+```
+
+### 3. Asset Validation
+
+```js
+const img = document.querySelector('header img');
+const src = img.getAttribute('src');
+const assetPath = path.resolve(__dirname, '..', src);
+expect(fs.existsSync(assetPath)).toBe(true);
+```
+
+## Best Practices
+
+- Load DOM fresh in `beforeEach` to avoid test pollution
+- Use scoped selectors (`#hero h1` not just `h1`) for precise targeting
+- Validate both DOM presence AND CSS file content for style tests
+- Use `toMatch()` with regex for flexible string matching (URLs, class names)
+- Check file existence on disk for asset integrity tests
+- Organize tests by test case ID matching the scenario definition
+
+## Test File Structure
+
+Each test file follows this convention:
+
+```
+describe('Section Name', () => {
+  describe('Test Case N: Description', () => {
+    it('should verify specific assertion', () => { ... });
+  });
+});
+```

.claude/skills/cross-browser-static-testing/SKILL.md

@@ -0,0 +1,6 @@
+---
+name: cross-browser-static-testing
+description: Use Vitest + jsdom to analyze HTML, CSS, and JS for cross-browser compatibility without requiring actual browser automation. Tests verify feature support by inspecting code rather than runtime behavior.
+---
+
+See [README.md](references/README.md) for full documentation.

.claude/skills/cross-browser-static-testing/references/README.md

@@ -0,0 +1,112 @@
+# Cross-Browser Static Testing
+
+## Overview
+
+Use Vitest + jsdom to analyze HTML, CSS, and JS for cross-browser compatibility without requiring actual browser automation. Tests verify feature support by inspecting code rather than runtime behavior.
+
+## When to Use This Skill
+
+Use this skill when users request:
+
+- Testing cross-browser compatibility of static websites
+- Validating CSS feature support across target browsers
+- Checking JS API compatibility without runtime execution
+- Projects already using Vitest + jsdom for unit tests
+
+## Core Capabilities
+
+### 1. Load HTML into jsdom
+
+```javascript
+import { JSDOM } from 'jsdom';
+
+function loadDOM() {
+  const html = readFileSync(resolve(__dirname, '../index.html'), 'utf-8');
+  return new JSDOM(html, { url: 'http://localhost:8080' });
+}
+```
+
+### 2. Aggregate all CSS for analysis
+
+```javascript
+function getAllCSS() {
+  const paths = [
+    resolve(__dirname, '../css/base.css'),
+    resolve(__dirname, '../css/hero.css'),
+    // ... other CSS files
+  ];
+  return paths
+    .filter(p => existsSync(p))
+    .map(p => readFileSync(p, 'utf-8'))
+    .join('\n');
+}
+```
+
+### 3. Test browser-specific features
+
+```javascript
+describe('Chrome Compatibility', () => {
+  it('renders hero section correctly', () => {
+    const dom = loadDOM();
+    const hero = dom.window.document.getElementById('hero');
+    expect(hero).not.toBeNull();
+  });
+});
+```
+
+### 4. Verify CSS feature support
+
+```javascript
+it('uses CSS Grid (supported in all latest browsers)', () => {
+  const css = getAllCSS();
+  expect(css).toContain('display: grid');
+});
+```
+
+### 5. Check JS compatibility
+
+```javascript
+it('uses ES5-compatible syntax for broad support', () => {
+  const js = readFileSync(jsPath, 'utf-8');
+  expect(js).toContain('var ');
+  expect(js).not.toContain('=>');
+});
+```
+
+## Key Assertions
+
+### CSS Verification
+- `display: grid` / `display: flex` for layout support
+- `position: sticky` for header behavior
+- `scroll-behavior: smooth` for smooth scrolling
+- `var(--*)` for CSS custom properties
+- Vendor prefixes: `-webkit-font-smoothing`, `-moz-osx-font-smoothing`
+
+### JS Verification
+- `var` instead of `let`/`const` for maximum compatibility
+- `function` declarations instead of arrow functions
+- `addEventListener` for event handling
+- `querySelector`/`querySelectorAll` for DOM selection
+- `classList` API for class manipulation
+- `passive: true` for scroll event listeners
+
+### HTML Verification
+- All major sections present in DOM
+- Navigation links functional
+- External links have `rel="noopener noreferrer"`
+- Scripts loaded with `defer`
+- Viewport meta tag present
+
+## Best Practices
+
+- Use mobile-first CSS to provide fallbacks for older browsers
+- Verify vendor prefixes are present where historically needed
+- Test that JS uses ES5-compatible syntax for maximum browser support
+- Check that all script and stylesheet references resolve to existing files
+- Validate semantic HTML landmarks for accessibility consistency
+
+## Resources
+
+### references/
+
+- `README.md` - This documentation

.claude/skills/vitest-html-testing/SKILL.md

@@ -0,0 +1,6 @@
+---
+name: vitest-html-testing
+description: Use when testing static HTML pages with Vitest and jsdom. Covers loading HTML fixtures, querying DOM elements, validating CSS file contents, and testing accessibility/SEO attributes.
+---
+
+See [README.md](references/README.md) for full documentation.

.claude/skills/vitest-html-testing/references/README.md

@@ -0,0 +1,90 @@
+# Vitest + jsdom HTML Testing
+
+## Overview
+
+This skill documents the testing approach for the MirDB homepage project. All homepage scenarios use Vitest with jsdom to test static HTML pages. Tests load the HTML file from disk, query the DOM, and validate structure, content, and CSS.
+
+## When to Use This Skill
+
+Use this skill when users request:
+
+- Writing tests for static HTML pages (unit tests with jsdom)
+- Validating HTML structure, heading hierarchy, or semantic elements
+- Testing CSS classes, hover states, or focus states via CSS file inspection
+- Checking link attributes (href, target, rel) for security and correctness
+- Validating image elements (src, alt, dimensions)
+
+## Core Capabilities
+
+### 1. Loading HTML in jsdom
+
+The MirDB homepage is a static site with no build step. Tests load `index.html` directly:
+
+```js
+import { JSDOM } from 'jsdom';
+import fs from 'node:fs';
+import path from 'node:path';
+
+function loadDOM() {
+  const html = fs.readFileSync(
+    path.resolve(__dirname, '../index.html'),
+    'utf-8'
+  );
+  return new JSDOM(html, { url: 'http://localhost:8080' });
+}
+```
+
+### 2. DOM Query Patterns
+
+```js
+// Element existence
+const hero = document.getElementById('hero');
+expect(hero).not.toBeNull();
+
+// Scoped queries
+const headline = document.querySelector('#hero h1');
+expect(headline.tagName).toBe('H1');
+
+// Word count validation
+const text = element.textContent.trim();
+const wordCount = text.split(/\s+/).length;
+expect(wordCount).toBeGreaterThanOrEqual(5);
+
+// Link attributes
+expect(link.getAttribute('target')).toBe('_blank');
+expect(link.getAttribute('rel')).toMatch(/noopener/);
+
+// CSS file content check
+const css = fs.readFileSync('css/hero.css', 'utf-8');
+expect(css).toMatch(/\.hero-cta-primary:hover/);
+```
+
+### 3. Asset Validation
+
+```js
+const img = document.querySelector('header img');
+const src = img.getAttribute('src');
+const assetPath = path.resolve(__dirname, '..', src);
+expect(fs.existsSync(assetPath)).toBe(true);
+```
+
+## Best Practices
+
+- Load DOM fresh in `beforeEach` to avoid test pollution
+- Use scoped selectors (`#hero h1` not just `h1`) for precise targeting
+- Validate both DOM presence AND CSS file content for style tests
+- Use `toMatch()` with regex for flexible string matching (URLs, class names)
+- Check file existence on disk for asset integrity tests
+- Organize tests by test case ID matching the scenario definition
+
+## Test File Structure
+
+Each test file follows this convention:
+
+```
+describe('Section Name', () => {
+  describe('Test Case N: Description', () => {
+    it('should verify specific assertion', () => { ... });
+  });
+});
+```

.gitignore

@@ -1,2 +1,4 @@
 /target
 **/*.rs.bk
+.something/
+node_modules/