[DOMAIN from CSV]

` + `border-radius: 50%` + `@keyframes` animation - "glitch effect" → `clip-path` or `text-shadow` with staggered animations - "network diagram" → SVG with animated edges - "scroll descent" → IntersectionObserver + CSS color transitions ### Step 3: Generate HTML Structure **Minimal boilerplate:** ```html [DOMAIN from CSV] [CONTENT FROM DESIGN SPEC] ``` ### Step 4: Build CSS from Spec **Template approach:** 1. Define `:root` variables from design palette 2. Create base layout (section structure) 3. Implement typography system with `clamp()` 4. Build animations/effects from spec description 5. Add responsive breakpoints (600px, 1024px) 6. Add `@media (prefers-reduced-motion: reduce)` block **CSS File Size Target:** 300-600 lines per site ### Step 5: Add JavaScript (if needed) **Only if design specifies:** - Scroll-triggered animations → IntersectionObserver - Interactive elements → event listeners - Generative elements → loops to create DOM nodes - Animations → `@keyframes` primarily, JS for complex choreography **JS File Size Target:** 100-200 lines per site ## Pattern-Specific Implementation Notes ### Pattern: Stacked Sections - Example: hangul.day, historical.quest, bada.day - Structure: `

` elements, full viewport height - Key CSS: `min-height: 100vh`, alternating background colors - Animations: Scroll-triggered opacity/translateY via IntersectionObserver ### Pattern: Dashboard Grid - Example: diplomatic.bar - Structure: `display: grid`, panel-based layout - Key CSS: Grid columns, border styling, hover states - Interactions: Panel scale on hover, status indicator pulses ### Pattern: F-Pattern / Signal Bands - Example: hil.st - Structure: Content on left, decorative zone on right - Key CSS: Two-column layout, border-bottom dividers - Animations: Scan lines, glitch effects, particle drift ### Pattern: Card Grid - Example: [To be implemented] - Structure: `grid-template-columns: repeat(auto-fit, ...)` - Key CSS: Hover lift effect with `transform: translateY(-8px)` - Interaction: Scale/shadow on hover ### Pattern: Single Column - Example: [To be implemented] - Structure: Centered narrow column (max-width: 600-800px) - Key CSS: Auto margins, generous gutters - Layout: Clean, reading-focused ## Rapid Implementation Checklist For each site, complete in this order: - [ ] **1. Read DESIGN.md** (5 min) - Extract colors, fonts, layout structure - Identify key visual effects - Note unique interactions - [ ] **2. Create HTML** (10 min) - Semantic structure from spec - Use domain name + theme as content placeholder - Add all required font preconnects - [ ] **3. Write CSS** (20 min) - Define color palette in `:root` - Build layout system (grid/flex) - Implement typography scale - Add animations from spec - Responsive breakpoints - [ ] **4. Add JavaScript** (10 min, if needed) - Scroll observers - Event listeners - Animation triggers - [ ] **5. Quality Check** (5 min) - Visual matches design intent - Layout responsive at 320px, 768px, 1440px - No console errors - File sizes reasonable (HTML < 300 lines, CSS < 600, JS < 200) **Total time per site: 25-50 minutes** ## Batch Grouping Strategy ### Group A: Stacked Sections (95 sites) Sites like: hangul.day, historical.quest, bada.day, hanun.ai, diplomatic.day, etc. **Shared template structure:** ```html

Content

Description

``` **CSS base (reuse with variations):** - Min-height 100vh sections - Alternating background colors - Scroll-triggered transitions - IntersectionObserver for animation **Implementation time:** 30 min per site ### Group B: Dashboard / Grid Layouts (60 sites) Sites like: diplomatic.bar, haskell.quest, bada.studio, etc. **Template structure:** ```html

``` **CSS base:** - Grid layout system - Border styling and hover effects - Status indicators - Pulse animations **Implementation time:** 35 min per site ### Group C: Minimal / Single Column (70 sites) Sites like: graphers.dev, minimalist designs **Template:** ```html

``` **CSS:** - Max-width container - Clean typography - Minimal animation - Reading-focused layout **Implementation time:** 20 min per site ### Group D: Complex / Unique Layouts (30 sites) Sites with novel structures, interactive elements **Custom per-site** — no template **Implementation time:** 45-60 min per site ### Group E: Decorative / Effects-Heavy (306 sites) Remaining sites with specialized effects: glitch, particles, network diagrams, data viz **Per-site customization** with pattern libraries for common effects: - Particle systems (bubble rise, dot drift) - Glitch animations (clip-path, text-shadow) - Network diagrams (SVG nodes and edges) - Wave patterns (SVG morph animations) **Implementation time:** 25-40 min per site ## Scaling Timeline **At 30 min/site average:** - Week 1: 80 sites (8 hrs/day × 5 days) - Week 2: 80 sites - Week 3: 80 sites - Week 4: 80 sites - Week 5: 80 sites - Week 6: 81 sites (remaining) + QA **Total: ~3-4 weeks for full batch** **With 2-3 concurrent implementers: 1-2 weeks** ## Quality Standards ### Visual Fidelity - Design intent captured (colors, typography, layout) - Key aesthetic elements present (animations, effects, patterns) - No strict pixel-perfect requirement (responsive design expected to vary) ### Responsiveness - Works on mobile (320px) - Works on tablet (768px) - Works on desktop (1440px) - No horizontal scroll - Text readable at all sizes ### Performance - No requirement for optimization (CSS/JS can be verbose) - No image asset requirement (CSS/SVG generation OK) - File sizes not constrained ### Accessibility - **SKIPPED** per new directive - No WCAG compliance requirement - No focus states required ### Code Quality - Valid HTML - Valid CSS - No console errors - Semantic structure preferred but not required ## Resources ### Reference Implementations - `hangul.day-v1/` — Stacked sections + holographic text - `hil.st-v1/` — Signal bands + glitch effects - `bada.day-v1/` — Ocean depth zones + particles - `diplomatic.bar-v1/` — Dashboard grid + network - `historical.quest-v1/` — Timeline descent + seapunk ### Data Source - `sites.csv` — Domain names + themes for all 561 sites - `.smbatcher/Batch_001.md` — All site specifications - `/sites/[domain]-v1/DESIGN.md` — Detailed design specs for each ### Tool Commands ```bash # Check remaining unimplemented sites grep -c "^FILE" /sites/*/index.html # or check REGISTRY.md for implementation status (update to 'I') ``` ## Next Steps 1. **Assign implementers** to pattern groups 2. **Implement Group A & B first** (highest volume, clearest patterns) 3. **Track progress** in REGISTRY.md (status: 'I' for implemented) 4. **QA pass** — visual verification of all 561 sites 5. **Deploy** to production ## Notes - No need for perfect optimization (ignore Lighthouse scores) - Use rich resources (CSS animations, SVG, generative effects) - Each site can diverge significantly from others (no rigid template) - Prioritize visual impact and design-intent accuracy - Speed is the primary metric