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 lovstudio/skills --skill install-designgit clone --depth 1 https://github.com/lovstudio/skillsWrote 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/lovstudio/skills/install-design)<a href="https://agentmods.dev/skills/lovstudio/skills/install-design"><img src="https://agentmods.dev/badge/skills/lovstudio/skills/install-design/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/lovstudio/skills/install-design"><img src="https://agentmods.dev/badge/skills/lovstudio/skills/install-design.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.00037 | $0.00807 |
| Opus 5.5 | $0.00015 | $0.00323 |
| Sonnet 5.5 | $0.00007 | $0.00161 |
| Haiku 4.5 | $0.00004 | $0.00081 |
Grade A, and why
lov-install-design 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 1mo 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
88% identical to lov-better-css — 31 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.
What it actually says
设计系统接入
将项目品牌设计规范映射到已有前端样式与组件系统。
Triggers
Activate when
- “将项目品牌设计规范映射到已有前端样式与组件系统。”
- “Install a project design system.”
Do not activate when
- 只是查询本 Skill 的说明，或请求与上述结果无关的任务；不执行实际业务操作。
- 用户仅要预览或审查时，不进入修改、提交或发布分支。
Execution boundary
自然语言请求即可触发；无需旧 slash 路径、参数插值或指定助手。明确解析当前请求中的 项目、目标文件、选项与输出位置；用当前宿主实际提供的文件、搜索、CLI 和浏览器能力。 项目依赖版本与外部 API 在执行时核实，不能假设示例是现行配置。随包脚本从 Skill 根解析， 业务文件从目标项目根解析。先读当前状态，保护已有未提交内容与其他任务的暂存区。 分析、预览请求保持只读；修改、提交、推送、部署和发布各依当前请求的明确范围执行。 不绕过保护、自动发送消息、强制结束用户进程或抢前台。失败保留可诊断原始错误。
Workflow
-
从项目或 Profile 读取品牌设计规范、字体与资产，识别框架、Tailwind 版本和已有 token；不存在规范时用现有 UI 归纳安全默认值。
-
将颜色、文字、圆角和间距映射到 semantic token，保留主题和暗色模式；不把作者品牌或错误的陶土色值硬编码给所有项目。
-
按项目当前技术栈增加必要样式依赖和组件，复用 shadcn 等现有库；只安装需要的组件，不覆盖整个配置。
-
设计说明放项目规范或设计文档。全局配置仅在用户明确指定全局范围时修改，不能用 cwd 判断授权。
-
Logo 按平台资产事实源增量接入，桌面图标与网页图标分别验证；不删除既有图标目录或启动服务抢前台。
-
运行构建并检查代表性页面、断点、暗色、焦点和对比度，记录未验证的 UI 状态。
Composition
执行前读取 能力组合，按明确制品交接相邻能力。
Runtime context (shared)
运行前读取本包 skill.yaml 与 Profile 合同。优先级为当前请求、
项目上下文、本 Skill records、共享 preferences、brand/user Profile、安全默认值。
只读取声明字段；没有专用运行时的宿主可使用 scripts/profile_store.py 读取共享 Profile。
配置缺失只问影响结果的一个问题。用户明确要求长期保存的值通过该脚本原子写入，
报告实际路径；不保存推断、凭据或其他任务的资料。
What ships with it
12 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.
- cases/cases.json 653 B
- CHANGELOG.md 285 B
- LICENSE 1.0 KB
- pricing-card.yaml 425 B
- README.md 1.0 KB
- references/skill-composition.md 849 B
- references/user-profile.md 2.7 KB
- scripts/profile_store.py 8.3 KB runs code
- scripts/validate_skill.py 26 KB runs code
- skill-card.md 1.1 KB
- skill-card.yaml 1.5 KB
- skill.yaml 2.2 KB
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.
- 1mo ago First seen · 68 lines · 37 tokens per session scan A 709f65d9c279
lov-install-design is a skill published in the GitHub repository lovstudio/skills (72 stars, last pushed 6d ago), licensed MIT. It adds 37 tokens to every session and 807 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 88% identical to lov-better-css, differing in 31 lines, and is treated as a copy.
Other skills, from other repositories
shadcn
Current best-practices guide for shadcn/ui applications. Before applying primitive-specific guidance, inspect whether the checked-in components use Radix UI or Base UI; current shadcn supports both (Base UI is the default for new projects) and their composition APIs differ. Component installs and upgrades go through…
grill-design
Decide a UI design by building several genuinely different working prototypes and comparing them side by side, in rounds, until the choice is locked. Use when asked to "grill the design", "design this screen", "show me options", "prototype some variants", "what should this look like", "I can't decide on a layout".
anthropic-frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
visual-verification
Inspect rendered UI or graphics and verify affected interactions when implementing a visual change or auditing an interface.
ui-design
Accessible, responsive frontend UI and UX design.
emil-animation-polish
Use for Emil Kowalski inspired web UI animation polish: CSS transitions, custom easing, duration choices, press feedback, hover/touch behavior, tooltip delay logic, origin-aware popovers, small blur-assisted state transitions, and audits for interfaces that should feel smooth, fast, responsive, and tasteful. Pair with…