wave-mosaic-web-themelisted
Install: claude install-skill black-yt/skills
# Wave Mosaic Web Theme
## 文件导航
| 序号 | 文件内容概览 | 关键词 | 触发时机 | 文件路径 |
| --- | --- | --- | --- | --- |
| 1 | 说明 Wave Mosaic 主题的视觉目标和约束，覆盖固定全屏 canvas 动态方块、4 种背景颜色、CSS 变量、Space Grotesk 字体、透明卡片、低噪声 hover/glow 和性能参数。 | wave mosaic、canvas background、dynamic tiles、4 backgrounds、CSS variables、Space Grotesk、theme switcher、transparent cards、hover glow、performance、24fps、mosaic grid | 触发本 skill 后默认读取；设计页面视觉方向前；判断是否需要 canvas 背景或 4 色切换前；调整动态方块参数、字体、透明质感或组件风格前读取 | `SKILL.md` |
| 2 | 提供可直接复刻的 HTML/CSS/JS 实现，包含 `<head>` 字体和 favicon、固定 canvas、主题按钮、`data-theme` 切换、CSS 变量、背景绘制脚本和页面结构骨架。 | HTML、CSS、JavaScript、`<head>`、favicon、Google Fonts、`#wave-canvas`、`data-theme`、theme dots、canvas draw loop、responsive、copyable template | 需要生成完整页面文件前；复刻一模一样的背景和主题切换前；迁移到 GitHub Pages 前；检查 favicon/字体/canvas/主题按钮是否缺失时必须读取 | [references/theme-implementation.md](references/theme-implementation.md) |
## 使用原则
- 用这个 skill 复刻一种低噪声、高级、学术/技术感的网页主题。
- 必须包含固定全屏 canvas 动态方块背景，背景位于内容下方且不拦截点击。
- 必须包含 4 种背景颜色：`white`、`yellow`、`blue`、`dark`。
- 背景颜色切换使用 `<html data-theme="...">`；默认白色背景不设置 `data-theme`。
- 颜色必须由 CSS custom properties 驱动，不要在组件里散落硬编码主题色。
- 字体优先使用 `Space Grotesk`，中文/系统 fallback 使用 `Noto Sans SC`、`Inter`、`ui-sans-serif`。
- 页面主体保持透明，让 canvas wave-mosaic 背景可见。
- 组件风格使用轻微边框、低饱和渐变、细腻 hover 和主题色 glow，不使用大面积高饱和渐变。
## 必读实现
完整可复制实现见 [references/theme-implementation.md](references/theme-implementation.md)。
需要写页面时：
1. 先复制参考文件中的 `head` 字体和 favicon 配置。
2. 复制 4 种背景颜色的 CSS 变量。
3. 复制 `#theme-switcher` 和 `.theme-dot` 样式。
4. 复制 c