What is the tech stack and directory structure?

详细分析这个项目的技术栈和目录结构

完美！现在我有了全面的信息。让我提供详细的分析：

##📊 Transitions.dev 项目 - 详细技术栈与目录结构分析

###一、项目概览

Transitions.dev 是一个交互式 CSS 过渡（Transitions）效果库，提供 18 个生产级的 CSS 动画片段，可直接复制粘贴到任何项目中。该项目同时作为 AI 编码工具的代理技能（Agent Skill）发布。

核心特点：

• 🎨 18 个预制CSS动画转换效果
• 📋 完整的参考文档和使用指南
• 🤖 AI Agent Skill 支持（可通过 npx skills add 安装）
• ♿ 无障碍性考虑（prefers-reduced-motion 支持）
• 🎯 零框架依赖，即插即用

###二、技术栈

###三、项目目录结构

transitions.dev/
├── 📄 package.json              # 项目配置（构建脚本）
├── 📄 README.md                 # 项目说明和使用指南
│
├── 📁 assets/                   # 静态资源
│   ├── 📁 avatars/              # 用户头像示例（6张）
│   ├── 📄 favicon-*.png         # Favicon（多尺寸/主题）
│   ├── 📄 *.svg                 # 图标（bell、theme、close等）
│   └── 📄 og-image*.jpg         # 社交分享OG图像
│
├── 📁 build/                    # 构建工具链
│   ├── 📄 extract.mjs           # 关键生成器（⭐ 685行）
│   │   └─ 功能：解析 index.html，提取 PROTO_TEMPLATES 和 CSS 变量
│   │   └─ 生成 skills/ 目录下的所有文件和模板
│   │
│   ├── 📁 snippets/             # 代码片段库
│   │   └── p13-clear.js         # 输入清除功能的JS片段
│   │
│   └── 📁 templates/            # Markdown 模板
│       ├── reference.md.tmpl    # 单个转换效果的参考文档模板
│       └── skill.md.tmpl        # AI Skill 的完整SKILL.md模板
│
├── 📁 skills/transitions-dev/   # 发布的 Agent Skill 包
│   ├── 📄 SKILL.md              # 技能清单（完整决策规则和用法）
│   ├── 📄 _root.css             # 通用CSS变量定义
│   │   └─ 142行，定义所有 --resize-*, --badge-*, ... 变量
│   │
│   └── 📄 NN-name.md            # 18个单独的转换效果参考文件
│       ├── 01-card-resize.md         (53行)
│       ├── 02-number-pop-in.md       (119行)
│       ├── 03-notification-badge.md  (110行)
│       ├── 04-text-states-swap.md    (97行)
│       ├── 05-menu-dropdown.md       (105行)
│       ├── 06-modal.md
│       ├── 07-panel-reveal.md
│       ├── 08-page-side-by-side.md
│       ├── 09-icon-swap.md
│       ├── 10-success-check.md
│       ├── 11-avatar-group-hover.md
│       ├── 12-error-state-shake.md
│       ├── 13-input-clear-dissolve.md
│       ├── 14-skeleton-reveal.md
│       ├── 15-shimmer-text.md
│       ├── 16-tabs-sliding.md
│       ├── 17-tooltip.md
│       └── 18-texts-reveal.md
│
├── 📄 index.html                # ⭐ 主展示页面（8370行）
│   ├─ 完整的18个动画演示
│   ├─ 内联 PROTO_TEMPLATES 对象
│   ├─ :root { --pX-* } CSS变量定义
│   ├─ 复制按钮逻辑
│   └─ React示例代码片段
│
├── 📄 prototypes.html           # 动画原型编辑器（4062行）
│   ├─ 每个转换的实时调试界面
│   ├─ 参数动态调整（duration、easing、distance）
│   └─ 实时预览
│
├── 📄 skill.html                # AI Skill 营销页面（4018行）
│   └─ 安装说明 + Skill特性展示
│
├── 📄 example.html              # 模态框示例演示（2870行）
│   └─ "普通输出" vs "用Skill优化后" 对比
│
├── 📄 demo2.html                # 额外演示页面
│
├── 📄 robots.txt                # SEO爬虫指南
├── 📄 sitemap.xml               # 网站地图
├── 📄 site.webmanifest          # PWA清单
└── 📄 CNAME                     # GitHub Pages 域名配置

文件统计：
- 总行数：19,320 行（4个HTML文件）
- HTML主体：index.html(8370) + prototypes.html(4062) + skill.html(4018) + example.html(2870)
- 构建脚本：extract.mjs(685行)
- Skill文件：18个参考 + 1个SKILL.md + 1个_root.css
- 静态资源：20+个（图片/图标/SVG）

###四、核心模块详解

####4.1 index.html（主页 - 8370行）

职责： 项目的核心展示页面，包含所有18个动画的实现和演示

关键组成部分：

1️⃣ 元数据和SEO（第1-100行）
   - Open Graph标签（OG Image）
   - Twitter Card
   - Schema.org 结构化数据
   - Favicon + Apple Touch Icon
   - Google Fonts 预加载

2️⃣ 主题系统（第97-107行）
   - 系统偏好颜色方案检测
   - 会话级主题切换（不持久化）
   - 响应式主题配色

3️⃣ 全局样式（第108行之后）
   - CSS自定义属性（CSS Variables）
   - :root块定义所有 --pX-* 变量
   - Motion tokens（duration、easing、distance、scale、blur）
   - Keyframes定义

4️⃣ PROTO_TEMPLATES对象（第5685行）
   - 18个转换效果的模板定义
   - 每个包含：name、usage、vars、css、js等
   - 用于复制按钮生成代码片段

5️⃣ JavaScript逻辑（第5588-8370行）
   ├─ 主题切换（theme toggle）
   ├─ 原型卡片处理（prototype card handlers）
   ├─ CSS变量读取（readMs函数）
   ├─ 复制剪贴板功能
   └─ 原型交互管理

CSS变量层级结构：

:root {
  /* 1️⃣ Motion Tokens - 原子层（所有转换共享） */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.45, 0.64, 1);
  /* ... */

  /* 2️⃣ Prototype-Specific Variables（每个转换独有） */
  --p1-dur: 500ms;        /* Notification Badge */
  --p2-dur: 300ms;        /* Card Resize */
  /* ... p1 through p18 ... */
}

####4.2 build/extract.mjs（关键生成器 - 685行）

职责： 将 index.html 的实时代码转换为可分发的 Skill 文件

工作流程：

index.html
    ↓
    ├─ 提取 PROTO_TEMPLATES（JS对象）
    │  └─ 通过平衡括号匹配和VM沙箱评估
    ├─ 提取 :root 块中的 --pX-* 默认值
    ├─ 提取 Motion Tokens（--duration-*、--ease-* 等）
    └─ 使用 build/templates/ 渲染
         ├─ skills/transitions-dev/SKILL.md
         ├─ skills/transitions-dev/_root.css
         └─ skills/transitions-dev/NN-name.md（18个）

核心函数：

extractObjectLiteral(source, marker)
  └─ 用于提取 PROTO_TEMPLATES（敬重字符串边界、转义符）

PROTO_TEMPLATES 解析
  └─ 通过 vm.createContext 沙箱安全评估

变量映射
  └─ defaults.set(--p1-dur, 500ms)
  └─ tokens.set(--duration-fast, 250ms)
  └─ 最终转换为语义名称（--badge-dur、--resize-ease 等）

####4.3 skills/transitions-dev/ （Agent Skill包）

SKILL.md（177行） - AI代理的完整"脑"：

📋 核心章节：
├─ Quick reference（18个转换的速查表）
├─ Decision rules（UI模式→转换映射）
│  ├─ 通知徽章 = "触发器+小圆点" 
│  ├─ 下拉菜单 = "触发器+展开面板"
│  ├─ 模态框 = "触发器+居中重叠面板"
│  ├─ 卡片调整 = "元素宽高变化"
│  └─ ...（12个更多规则）
│
├─ Commands（四个命名动词）
│  ├─ transitions reveal = 列出所有18个
│  ├─ transitions review = 审计项目动画
│  ├─ transitions apply = 安装最佳匹配转换
│  └─ transitions refine = 对齐到Motion Tokens
│
├─ Motion tokens（七个表格）
│  ├─ Durations（40ms ~ 500ms，7个等级）
│  ├─ Easings（6个easing函数）
│  ├─ Distances（4px ~ 30px）
│  ├─ Scales（0.96 ~ 0.99）
│  └─ Blur（2px ~ 8px）
│
├─ Output format（5步安装流程）
├─ Common mistakes（8个常见错误）
└─ Reference files（18个.md的索引）

_root.css（142行） - 通用CSS基础：

:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  /* ... 18 transitions × 3-8 variables per = 100+ custom properties ... */
}

每个参考文件（如 01-card-resize.md）的结构：

1️⃣ When to use     - 适用场景
2️⃣ HTML usage      - DOM钩子（.t-resize class）
3️⃣ Tunable vars    - 可调参数表
4️⃣ CSS            - 完整片段（含prefers-reduced-motion）
5️⃣ JavaScript      - 如需要的JS编排（可选）
6️⃣ Notes          - 特殊考虑

###五、18个转换效果一览

###六、开发工作流

####开发人员工作流

# 1. 本地开发 - 运行展示网站
python3 -m http.server 8765
# 访问 http://127.0.0.1:8765/

# 2. 在 index.html 中：
#    - 调整 CSS 变量（:root 块）
#    - 修改 PROTO_TEMPLATES 中的 CSS/HTML
#    - 测试交互

# 3. 重新生成 Skill 文件
npm run build
# → build/extract.mjs 解析 index.html
# → 生成/更新 skills/transitions-dev/ 下的所有文件

# 4. 提交变更（index.html 和生成的 Skill）

####AI Agent工作流（通过 SKILL.md）

用户: "transitions apply" / "transitions review"
  ↓
AI Agent 读取 SKILL.md
  ├─ 查看 Decision rules 章节
  ├─ 匹配用户代码到规则
  ├─ 选择最佳转换
  └─ 从相应的 NN-name.md 复制代码
      └─ 按 Output format 的5步指南安装

###七、技术亮点

###八、关键文件关系图

┌─────────────────────────────────────────────────────────────┐
│                     index.html (主源文件)                      │
│                      8370 行 - 演示页面                       │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ :root { --pX-dur, --pX-ease, ... }    (CSS变量定义) │   │
│  │ var PROTO_TEMPLATES = { ... }         (18个模板)    │   │
│  │ <script> theme toggle + interactions   (交互脚本)   │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                              ↓
                    npm run build (调用)
                              ↓
┌─────────────────────────────────────────────────────────────┐
│              build/extract.mjs (生成器 - 685行)              │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ 1. 解析 PROTO_TEMPLATES（平衡括号 + VM沙箱）      │   │
│  │ 2. 提取 :root {...} 的默认值                       │   │
│  │ 3. 映射 --pX-* → 语义名称（--badge-*, etc）      │   │
│  │ 4. 使用模板渲染输出                               │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
        ↓                          ↓                       ↓
┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐
│ SKILL.md         │  │ _root.css        │  │ 01-18.md 文件    │
│ (177行)          │  │ (142行)          │  │ (各50-120行)     │
│ 决策规则 + 命令  │  │ 通用变量定义     │  │ 单个参考文档     │
│ Motion Tokens    │  │ 18个转换的vars   │  │ 即插即用片段     │
└──────────────────┘  └──────────────────┘  └──────────────────┘
        ↑─────────────────────────────────────────────↑
                 skills/transitions-dev/ 目录
        （可通过 npx skills add 分发给AI Agent）

###九、文件大小概览

总计：~430KB（包含图片）
  ├─ HTML文件：~365KB（含内联CSS/JS）
  │  ├─ index.html        357KB
  │  ├─ prototypes.html   ~20KB
  │  ├─ skill.html        ~20KB
  │  └─ example.html      ~15KB
  │
  ├─ 构建脚本：34KB
  │  └─ build/extract.mjs 34KB
  │
  ├─ Skill文件：~50KB
  │  ├─ SKILL.md          ~14KB
  │  ├─ _root.css         4KB
  │  └─ 18 × reference.md ~32KB
  │
  └─ 静态资源：~40KB
     └─ assets/          （icons、favicons、OG images）

###十、总结

transitions.dev 是一个精心设计的项目，展示了以下工程能力：

1. 代码即文档 - HTML演示本身就是源文件
2. 自动化流程 - 演示 → Skill分发（一个npm命令）
3. 可访问性设计 - 考虑了运动偏好、主题、SEO
4. AI就绪 - SKILL.md 包含完整的决策规则和命令定义
5. 零依赖架构 - 纯前端技术栈，无npm包依赖
6. 易用性 - 复制按钮直接生成生产代码

这个项目是 "可复制粘贴的UI设计模式库" 和 "AI编码助手扩展" 的完美融合！