Cinematic ai Visual Prompt Hub

# Cinematic AI Visual Prompt Hub Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build and publish a public GitHub Pages learning site that collects cinematic AI visual/video prompting knowledge, then add the entry to the user's GitHub profile and portfolio.

**Architecture:** React + Vite static app hosted on GitHub Pages. Content lives in versioned local data modules, validation scripts enforce source coverage and schema, and Playwright smoke tests verify the rendered learning flow.

**Tech Stack:** React, Vite, CSS modules/global CSS, Node validation scripts, Playwright smoke script, GitHub Actions Pages deployment.

## Global Constraints

- The site must be public and suitable for GitHub Pages.
- The site must use the reference page only for style/taxonomy inspiration, not wholesale copying of third-party content or media.
- Search must cover official docs, GitHub, Chinese web, Zhihu, Douyin web results, Xiaohongshu web results, YouTube, and X/Twitter public results where accessible.
- Research output must record source platform and access limitations.
- The first screen must be the usable learning experience, not a generic landing page.
- Use React + Vite unless an existing project constraint makes that impossible.
- No hidden backend or runtime secret is allowed; all production data must be static.
- Validation must prove all nine modules exist and required platforms are represented or explicitly marked as access-limited.
- Final delivery must include a public repo URL, live Pages URL, profile entry, portfolio entry, and verification evidence.

---

## File Structure

- Create `package.json`: scripts for dev, build, preview, validation, smoke.
- Create `index.html`: Vite mount point and metadata.
- Create `vite.config.js`: GitHub Pages base path `/cinematic-ai-visual-prompt-hub/`.
- Create `src/main.jsx`: React entry.
- Create `src/App.jsx`: app shell, layout composition, search/filter state, modal state.
- Create `src/styles.css`: design tokens, responsive layout, animation, components.
- Create `src/data/modules.js`: nine module definitions and palette metadata.
- Create `src/data/sources.js`: curated source index from research.
- Create `src/data/terms.js`: original term/prompt cards tied to source IDs.
- Create `src/lib/search.js`: normalized search/filter helpers.
- Create `tools/validate-data.mjs`: schema, duplicate, module, platform, and source reference checks.
- Create `tools/smoke-check.mjs`: local static server plus Playwright desktop/mobile checks.
- Create `.github/workflows/pages.yml`: build and deploy GitHub Pages.
- Modify `README.md`: user-facing introduction, local commands, source policy.
- Later modify `/Users/siuserxiaowei/siuserxiaowei/README.md`: add repo/live entry without reverting existing user changes.
- Later clone/modify `siuserxiaowei.github.io`: add portfolio entry without disturbing unrelated state.

---

### Task 1: Scaffold React/Vite App and Validation Harness

**Files:**
- Create: `package.json`
- Create: `index.html`
- Create: `vite.config.js`
- Create: `src/main.jsx`
- Create: `src/App.jsx`
- Create: `src/styles.css`
- Create: `src/data/modules.js`
- Create: `src/data/sources.js`
- Create: `src/data/terms.js`
- Create: `src/lib/search.js`
- Create: `tools/validate-data.mjs`
- Create: `tools/smoke-check.mjs`
- Modify: `README.md`

**Interfaces:**
- Produces `modules`, `sources`, and `terms` named exports consumed by app and validators.
- Produces `filterTerms({ terms, sources, query, moduleId, platform })` returning an array of enriched term cards.

- [ ] **Step 1: Add app dependencies and scripts**

Create `package.json` with scripts: