selfdriven-interactive-info-site-build

Files (1)

• SKILL.md

SKILL.md (first lines)

# selfdriven Interactive Info Site Builder

Turn conceptual sketches, notebook photos, and framework descriptions into polished, single-file interactive HTML info websites using the selfdriven brand system.

## Overview

This skill captures the end-to-end workflow for building a selfdriven-branded interactive information site — from interpreting a rough conceptual sketch through iterative refinement to a production-quality self-contained HTML file. It was derived from the workflow used to build the Digital Interaction Framework site and encodes the patterns, decisions, and lessons learned.

### Trigger Contexts

Use this skill when the user:
- Uploads a photo of handwritten notes, whiteboard sketches, or notebook diagrams and asks to turn them into a website
- Asks for an "interactive info site", "info website", "knowledge base page", or "framework site"
- Wants to present a conceptual framework (layers, stages, tiers, matrices) as an interactive web experience
- Mentions turning research, papers, or structured thinking into a selfdriven-branded webapp
- Asks to create a selfdriven property landing page or documentation site from scratch

### Prerequisite Skills

Always read these skills before starting:
1. **`selfdriven-ecosystem`** — brand system, design tokens, typography, visual language, domain family
2. **`selfdriven-digital-interaction-framework`** — if the content relates to the trust framework specifically
3. **`frontend-design`** — for design thinking and aesthetic guidance

## Workflow

### Phase 1 — Interpret the Source Material

When the user provides a sketch, photo, or description:

1. **Identify the conceptual structure**: Look for layers, hierarchies, stages, categories, relationships, and flows. Name them explicitly.
2. **Map to interactive patterns**: Each concept type maps to a UI pattern:
   - Layers/stack → Accordion with timeline dots
   - Stages/sequence → Horizontal flow with clickable detail panels
   - Categories/domains → Card grid or tabbed interface
   - Relationships/network → Canvas animation or node grid
   - Comparisons → Tables with hover highlighting
   - Decisions/records → Clickable chip strip with expandable detail panels
3. **Identify the information hierarchy**: What's the hero message? What are the nav sections? What's the depth of detail per section?
4. **Don't ask too many questions**: Interpret and build. The user can refine iteratively.

### Phase 2 — Build the First Version

Create a single self-contained HTML file. Key principles:

#### File Structure
```
Single .html file containing:
├── <style> — all CSS including light/dark mode tokens
├── <nav> — fixed, blurred backdrop on scroll
├── <hero> — full-viewport with eyebrow, headline, subtitle, CTAs, stat strip
├── <section> per nav link — each a full content section
├── <footer> — links, optional audio player
└── <script> — all interactivity (accordion, tabs, observers, canvas)
```

#### Brand System (from selfdriven-ecosystem skill)
- **Fonts**: Poppins (300–900) + JetBrains Mono — loaded via Google Fonts
- **Colours**: CSS variables with full light/dark mode support
- **Cards**: 20px radius, 1px border, 3px accent top-bar on hover
- **Buttons**: Pill-shaped (999px radius) for CTAs
- **Nav**: Fixed, `backdrop-filter: blur(16px)` on scroll
- **Dark sections**: Use `var(--text)` as background; in dark mode use `#141414` against `#0a0a0a`
- **Animations**: `IntersectionObserver` with staggered `transitionDelay` for reveals

#### Critical Implementation Details

**Navigation links** — NEVER use `<a href="#section">` anchors. These trigger popups in artifact viewers. Always use:
```html
<a href="javascript:void(0)" data-target="sectionId">Link Text</a>
```
With JS:
```javascript
navLinks.forEach(a => {
  a.addEventListener('click', (e) => {
    e.preventDefault();
    document.getElementById(a.dataset.target).scrollIntoView({ behavior: 'smooth' });
  });
});
```

**Hero CTA buttons** — Same issue. Use `<button>` with `onclick`:
```html
<button class="btn-primary" onclick="document.getElementById('target').scrollIntoView({behavior:'smooth'})">
  Explore ↓
</button>
```

**Accordion panels** — Prevent child clicks from collapsing parent:
```javascript
layer.addEventListener('click', (e) => {
  if (e.target.closest('.layer-panel')) return; // Don't collapse from panel clicks
  // ... toggle logic
});
```

**Interactive sub-elements within accordions** — When a panel contains clickable items (e.g. tech tags that switch content), use `e.stopPropagation()` and `data-*` attributes:
```javascript
tag.addEventListener('click', (e) => {
  e.stopPropagation();
  // Switch displayed content based on tag.dataset.tech
});
```

**Canvas animations** — Always use transparent background so the canvas blends with its section:
```html
<div style="background: transparent; border: 1px solid rgba(255,255,255,0.08);">
  <canvas id="myCanvas" style="width: 100%; height: 420px; display: block;"></canvas>
</div>
```
Initialise via IntersectionObserver (don't run animation until visible). Handle `window.resize` with `ctx.setTransform(1,0,0,1,0,0)` before re-scaling.

**Logo embedding** — When user provides a logo file:
1. Check if it's actually a JPEG disguised as PNG (common with uploads)
2. If background is solid black, remove it by replacing near-black pixels with transparent in Python/Pillow
3. Resize to nav height (30–36px) maintaining aspect ratio
4. Base64 encode as PNG and embed inline: `<img src="data:image/png;base64,...">`
5. Make the logo a scroll-to-top button

From selfdriven-octo/skillzeb, CC0-1.0.

More from selfdriven-octo/skillzeb