用 assets/ 目录造一个品牌化输出技能

mkdir -p .claude/skills/brand-report/{assets/font,references}
touch .claude/skills/brand-report/SKILL.md

brand-report/
├── SKILL.md          # 必需：导航与流程
├── assets/           # 本教程主角：用于输出的素材
│   ├── report-template.html
│   ├── brand.css
│   ├── logo.png
│   └── font/
└── references/       # 按需读入的补充文档
    └── tokens.md

<!-- .claude/skills/brand-report/assets/report-template.html -->
<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>{{TITLE}}</title>
  <link rel="stylesheet" href="brand.css">
</head>
<body>
  <header>
    <img src="logo.png" alt="logo" height="40">
    <h1>{{TITLE}}</h1>
  </header>
  <section class="period">报告周期：{{PERIOD}}</section>
  <section class="metrics">{{METRICS}}</section>
  <section class="highlights">{{HIGHLIGHTS}}</section>
  <footer>© 2026 · 内部使用</footer>
</body>
</html>

:root { --primary:#0b5fff; --ink:#1f2330; --muted:#6b7280; }
body{font-family:'BrandSans',system-ui,sans-serif;color:var(--ink);max-width:880px;margin:40px auto;padding:0 24px}
header{display:flex;align-items:center;gap:16px;border-bottom:3px solid var(--primary);padding-bottom:12px}
h1{font-size:22px;margin:0}
.period{color:var(--muted);margin:16px 0;font-size:14px}
.metrics table{border-collapse:collapse;width:100%}
.metrics th,.metrics td{border:1px solid #e5e7eb;padding:8px 12px;text-align:left}
.metrics th{background:#f8fafc}
footer{margin-top:40px;color:var(--muted);font-size:12px;border-top:1px solid #eee;padding-top:12px}

---
name: brand-report
description: This skill should be used when the user asks to "generate a weekly report", "create a branded report", "生成品牌周报", "导出带 Logo 的 HTML 报告", or needs on-brand standalone HTML output. Uses bundled brand assets (logo, fonts, CSS, HTML template) so every report stays visually consistent without re-deriving the style from prose.
allowed-tools: Read Write Bash(cp *) Bash(mkdir *) Bash(cp -r *)
---

# 品牌化 HTML 周报生成

Generate a standalone, on-brand HTML weekly report. Brand fidelity comes from the bundled asset files, not from re-styling in the prompt.

## Bundled assets

All brand files live under `${CLAUDE_SKILL_DIR}/assets/` and are **used in output, not loaded into context**:

- `assets/report-template.html` — full scaffold with header, footer, and token placeholders
- `assets/brand.css` — brand palette, typography, spacing
- `assets/logo.png` — company logo, copied next to the report
- `assets/font/` — brand web fonts referenced by `brand.css`

## Procedure

1. Determine the reporting period from `$ARGUMENTS` (e.g. `2026-W26`). If absent, use the current ISO week.
2. Read the data source (a CSV/JSON path, or values given in the prompt).
3. Scaffold the output deterministically by copying assets:
   ```!
   OUT="./out/report-$1.html"
   mkdir -p ./out
   cp "${CLAUDE_SKILL_DIR}/assets/report-template.html" "$OUT"
   cp "${CLAUDE_SKILL_DIR}/assets/logo.png"      ./out/logo.png
   cp "${CLAUDE_SKILL_DIR}/assets/brand.css"     ./out/brand.css
   cp -r "${CLAUDE_SKILL_DIR}/assets/font"       ./out/font
   ```
4. Fill tokens `{{TITLE}}` `{{PERIOD}}` `{{METRICS}}` `{{HIGHLIGHTS}}` in `$OUT` with real values. Preserve all brand markup; only replace token text.
5. For a self-contained file, inline `logo.png` as a base64 data URI and inline `brand.css` into a `<style>` block.
6. Reply with the output path and a one-line metric summary.

## Style rules

- Never re-derive palette or fonts from prose; always copy from `assets/`.
- Keep the template section order; do not reorder header/metrics/highlights/footer.
- If a token has no data, replace it with an em dash `—`; never delete the section.

## Additional resources

- For the full token list and edge cases, see `references/tokens.md`.

disable-model-invocation: true

paths: "**/*.{csv,json}", "**/weekly-data/**"

# 在项目根目录启动
claude
# 对话里输入：
生成 2026-W26 的品牌周报，数据见 ./data/week26.csv

flowchart TD
    A[技能目录 brand-report/] --> B[第1层: 元数据]
    A --> C[第2层: SKILL.md 正文]
    A --> D[第3层: 附属资源]
    B --> B1["name + description<br/>始终在上下文, ~100词/截断1536字符"]
    C --> C1["技能触发时加载<br/>目标 1500-2000 词"]
    D --> D1["scripts/ → 执行, 不读入"]
    D --> D2["references/ → 按需读入上下文"]
    D --> D3["assets/ → 既不读入也不执行<br/>★本教程主角★"]
    style D3 fill:#ffe4b5,stroke:#d97706,stroke-width:2px

sequenceDiagram
    participant U as 用户
    participant CC as Claude Code
    participant SH as Shell(!cmd注入)
    participant FS as 文件系统
    U->>CC: 生成 2026-W26 品牌周报
    CC->>CC: 加载 SKILL.md 正文(触发)
    CC->>SH: 执行 cp ${CLAUDE_SKILL_DIR}/assets/* ./out/
    SH->>FS: 复制 模板/Logo/CSS/字体
    SH-->>CC: 占位符替换为复制结果
    CC->>FS: 读取 ./data/week26.csv
    CC->>FS: 填充 {{METRICS}} 等token, 写 report.html
    CC-->>U: 返回 out/report-2026-W26.html

注入结果再被填进 `{{HIGHLIGHTS}}`。固定版式 + 动态数据，两全其美。

**模式 B：自包含产物（base64 内联）。** 当输出要发邮件、贴 wiki 时，外部依赖的 `logo.png`/`brand.css` 会丢。让模型在填充后把图片转 base64、把 CSS 塞进 `<style>`，得到单文件 HTML。指令写在 SKILL.md 的第 5 步即可，资产仍由 `cp` 提供，只是最终内联。

**模式 C：多模板资产。** 在 `assets/` 放多个模板（`report.html`、`slide-deck.pptx`、`one-pager.html`），用 `$ARGUMENTS[0]` 选模板：

```bash
cp "${CLAUDE_SKILL_DIR}/assets/$1-template.${2:-html}" "$OUT"