Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ssmurfgg04-gif/context-m --skill portfolio-detailgit clone --depth 1 https://github.com/ssmurfgg04-gif/context-mWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/ssmurfgg04-gif/context-m/portfolio-detail)<a href="https://agentmods.dev/skills/ssmurfgg04-gif/context-m/portfolio-detail"><img src="https://agentmods.dev/badge/skills/ssmurfgg04-gif/context-m/portfolio-detail/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/ssmurfgg04-gif/context-m/portfolio-detail"><img src="https://agentmods.dev/badge/skills/ssmurfgg04-gif/context-m/portfolio-detail.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00154 | $0.04340 |
| Opus 5 | $0.00077 | $0.02170 |
| Sonnet 5 | $0.00031 | $0.00868 |
| Haiku 4.5 | $0.00015 | $0.00434 |
Grade A, and why
portfolio-detail scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
100% identical to portfolio-detail — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 249 lines — stays where its author put it; the contents beside it link to each section on GitHub.
portfolio-detail — 中式工作室 / 隶书作品集（带二级详情页）
一句话特征
横排文字行 + hover 浮现右侧大图 + 阿里妈妈刀隶体艺术大字 + 黑白纯色 + light/dark + hash 路由详情页 + 列表/画册双视图。
与其他作品集 skill 的差别
| skill | 核心模式 | 适合谁 |
|---|---|---|
portfolio-gen |
无限拖拽画布 + tile 平铺 | 摄影师 / 平面设计师挂样品 |
portfolio-museum-gen |
英雄轮播 + 大卡 + 瀑布流 + 详情页（影像策展感） | 视频/影像/装置艺术家 |
industrial-archive-gen |
黑框翻页封面 + 侧栏档案 + 北欧工业 | 实物产品 / 器物 / 硬件 |
lishu-portfolio-gen |
横排文字行 + hover 显示右侧缩略图 + 隶书大字 + 中式克制 | 装帧 / 字体 / 工艺 / 中式工作室 |
如果用户的项目是「书 / 字体 / 展览 / 静物 / 中草药 / 茶 / 陶 / 木 / 纸 / 香」这一类需要克制典雅气质的——用这一份。
何时触发
用户说：
- "做个中式 / 东方 / 古典风格的作品集"
- "做个隶书风格的网站 / 工作室主页"
- "做个白屋风格的作品集" / "做个像 Gurgel D'Alfonso 那样的横排列表网站"
- "lishu-portfolio-gen ..."
并提供：
- 工作室描述（必需）：名字、主理人、城市、学科、几件作品的标题与故事
- 作品图片（可选）：URL / 上传 / 路径。没有也能跑（用 picsum 占位）
如果用户完全没给作品标题 → 必须问一次至少有哪几件作品要展示。 如果用户只给了标题没给详情 → 自己写：每件作品都生成 1 句 lead + 3 段 prose + 6-8 行 specs + 3-6 张 picsum 图 + 几条 credits。语气与作品类型匹配（书 → 装帧 / 字 → 字体 / 物 → 静物 / 展 → 展览视觉）。
两种运行模式
模式 A · Claude Code / 本地（有文件系统）
- 用
Bash列文件夹、sips探每张图宽高 - 输出位置：
~/Desktop/{slug}-portfolio.html（单文件，所有图片走 URL） - 如果用户给了本地图片：拷到
~/Desktop/{slug}-portfolio-images/并改 src 为相对路径
模式 B · GLM / 在线对话（无文件系统）
- 用户拖入 zip 解压后能看到 4 份文件
- 只输出一份完整 HTML 字符串，包在
```html代码块里 - 用户上传图片但没给 URL → 全用
https://picsum.photos/id/{id}/{w}/{h}占位（用已知存在的 ID） - 不要尝试访问本地文件、不要建议命令行操作
判断：如果你无法 Read 看到本地图片 → 默认走 B。
文件分工
| 文件 | 角色 | 怎么用 |
|---|---|---|
reference.html |
完整成品参考 — 白屋 BAIWU 6 件作品 | 看：list 项的措辞、prose 语气、specs 词汇、JSON 字段密度 |
template.html |
空骨架 — 同样的 CSS/JS/路由系统，2 件示例 + 20 个 SWAP 标记 | 在它的基础上改，输出最终 HTML |
README.md |
用户视角的使用说明 | 模型不用看 |
SKILL.md |
给模型看的工作流（本文件） | 必读 |
核心规则：所有改动基于 template.html；从 reference.html 学怎么写（语气、字数、tag 用词），但不要复制具体内容。
工作步骤
1. 读两份 HTML
- 先读
reference.html体会"完整后长什么样"（特别是works-dataJSON 的字段密度和 prose 语气） - 再读
template.html找 20 个 SWAP 位置
不要改 JS / 不要改 CSS / 不要改详情页路由系统 / 不要改字体引入。 SWAP 都在 HTML 文本和 JSON 数据里。
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 249 lines · 154 tokens per session scan A 164ac0a3f335
portfolio-detail is a skill published in the GitHub repository ssmurfgg04-gif/context-m (2 stars, last pushed yesterday), licensed Apache-2.0. It adds 154 tokens to every session and 4,340 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to portfolio-detail, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
gsd-sketch
Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode).
gsd-ui-phase
Generate UI design contract (UI-SPEC.md) for frontend phases.
gsd-ui-review
Retroactive 6-pillar visual audit of implemented frontend code.
userinterface-wiki
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend
Two-mode frontend skill: (1) authoring — accessibility, responsive layout, loading/error states, performance, DESIGN.md authoring, visual direction; (2) critique — READ-only scored review of built UI against anchored rubric, AI-slop detection, two isolated assessments. Router invokes mode via context.