Dramagon 技能市场

配图占位

页面：技能市场（空态 / 6 卡片网格 / 抽屉打开态）

状态：Topbar breadcrumb / Hero title + subtitle / 4 tab 横条 / 7 chip 筛选行 / 3 列技能网格（≤1024px 自动 2 列，≤640px 自动 1 列）/ 右侧 360px 详情抽屉

重点区域：技能卡 44×44 圆形图标（绯红 → 橙渐变）+ 标题 + 2 行描述 + 右上角红章；抽屉 description / example / models 三段；底部「加入 chat 编辑器」CTA

脱敏要求：隐藏用户名、session id、模型清单原文

用途

技能市场是 5 类官方能力 + 团队共享技能的展示与发起入口，承担三类任务：

浏览与筛选 —— Hero + 4 tab（全部 / 官方 / 团队 / 我的）+ 7 chip（分镜 / 海报 / 剧情 / 镜头语言 / 角色 / 配音 / 剪辑）客户端筛选；当前官方 tab 包含全部 5 个官方技能（路由器 / 工作流创作 / 素材管线 / 运行诊断 / 发布助手）。
查看详情 —— 点击技能卡打开右侧 360px 玻璃拟态详情抽屉，分 description / example / models 三段展示；底部「加入 chat 编辑器」CTA 把技能绑定到 chat session。
发起会话 —— 「加入 chat 编辑器」按钮触发 POST /api/chat/sessions 创建新 session，并把 skill metadata 写入 session，跳转到 /home/chat/[sessionId] 继续创作。

页面布局遵循玻璃拟态（Glassmorphism）暗色主题，对齐 .design/dramagon-redesign/pages/skills.html 设计稿。

使用前准备

必须登录：未登录访问 /[locale]/skills 不会被强制重定向，但「加入 chat 编辑器」按钮会因 401 失败；建议先登录。
浏览器支持 ES2022：路由使用 dynamic = 'force-dynamic'，需要浏览器能解析顶层 await 与可选链。
可选：技能市场为只读浏览 + 跳转入口，不依赖任何业务配置。

操作步骤

打开技能市场，使用顶部标签和分类 chip 筛选技能。
点击技能卡，在右侧抽屉核对说明、示例和适用模型。
登录后点击「加入 chat 编辑器」，创建会话并继续创作。

结果与状态

筛选会立即更新卡片网格；加入成功后页面跳转到新建的 chat 会话。团队或个人技能尚未配置时显示空态。

路由与文件

入口：src/app/[locale]/skills/page.tsx（dynamic = 'force-dynamic'，与 chat-home 一致）。
客户端编排：src/app/[locale]/skills/_components/SkillsWorkspace.tsx（Hero + Tabs + Chips + Grid + Drawer 编排）。
类别映射：src/app/[locale]/skills/_lib/skill-category.ts（PUBLIC_SKILLS.manifest.id → chip 7 档分类，纯函数）。
通用组件：src/components/skills/parts/SkillCard.tsx + SkillDetailDrawer.tsx + SkillGrid.tsx + index.ts（barrel）。
数据源：src/lib/public-skills/catalog.ts（PUBLIC_SKILLS 5 条官方技能 + 客户端筛选）。

i18n

新增 namespace：skills（zh + en 镜像 100%）。必填 keys：page / tabs / chips / empty / actions / detail / toast。

注册位置：src/i18n.ts 三处同步（destructure + dynamic import + messages return）。

权限和边界

「加入 chat 编辑器」按钮本轮仅创建空 session 并跳转到 /home/chat/[id]；后续需要：
1. 把 skill metadata（id / title / description）写入 session 持久层，便于 chat editor 自动加载「skill 上下文」 chip；
2. 在 ChatStream / PromptEditor 中检测 session.metadata.skillId，自动注入「从 X 技能开始」 chip 卡片；
3. 团队 tab / 我的 tab 的技能列表需要后端 API（GET /api/skills/team、GET /api/skills/mine），目前显示空态。
团队 / 我的 tab 的技能由后续平台 Skill 服务（.learnings/FEATURE_REQUESTS.md P2）落地后接进。
详情抽屉的「适用模型」目前来自 manifest.outputs + cliContract.binary/minVersion，后续接入真实模型目录后改为「从 model-pricing 拉取推荐模型」。

常见问题

点击「加入 chat 编辑器」没有跳转？

先确认已经登录；未登录请求会返回 401，且不会创建会话。