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 anymouschina/TapCanvas --skill aesthetic-auditgit clone --depth 1 https://github.com/anymouschina/TapCanvasWrote 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/anymouschina/tapcanvas/aesthetic-audit)<a href="https://agentmods.dev/skills/anymouschina/tapcanvas/aesthetic-audit"><img src="https://agentmods.dev/badge/skills/anymouschina/tapcanvas/aesthetic-audit/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/anymouschina/tapcanvas/aesthetic-audit"><img src="https://agentmods.dev/badge/skills/anymouschina/tapcanvas/aesthetic-audit.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 124 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 127 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
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.00063 | $0.01615 |
| Opus 5 | $0.00032 | $0.00807 |
| Sonnet 5 | $0.00013 | $0.00323 |
| Haiku 4.5 | $0.00006 | $0.00161 |
Grade A, and why
aesthetic-audit 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 11d 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.
How it starts
The opening of the file, as written. The whole thing — 132 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Aesthetic Audit (Commercial)
该 skill 用于“审美判断”在商业项目中的落地：
- 不是泛泛而谈“好不好看”，而是将审美转化为可执行的改动：信息层级、栅格与间距系统、字体层级、色彩与对比度、组件一致性、CTA 可见性、移动端适配、信任要素。
- 默认以 转化/可用性/品牌一致性/可维护性 为目标约束。
适用输入：
- 视觉资产图：主视觉/卖点图/细节图/规格图（单张或整套）
- 网页：URL（可本地/线上）或桌面/移动端截图
- 源码：页面路由 + 组件/样式文件（React/Next/Vue/Vite/Tailwind/SCSS/CSS-in-JS 等均可）
输出交付（强制结构）：
- 一句话结论（页面意图 + 当前最大问题）
- P0/P1/P2 问题清单（现象-影响-原因假设-修改建议）
- 样式 tokens（可落地的字体/间距/色彩/圆角/阴影/栅格）
- Quick wins（3-7 条不大改结构、立刻提升质感/转化的改法）
- 若提供源码：改动建议落地到文件路径（或直接修改）+ 验证步骤
审查原则 (Commercial Aesthetics)
优先级从高到低：
- 清晰度：3 秒内用户能否看懂“卖什么/给谁/最大利益/下一步做什么”
- 层级：标题/副标题/正文/注释/参数/CTA 的视觉权重是否正确
- 一致性：栅格、间距、字体、颜色、圆角、阴影、icon、图片色调是否成体系
- 信任：证据链是否完整（对比/数据/口碑/保障/资质/售后）且表达克制
- 效率：减少认知负担；移动端首屏与滚动节奏合理
- 可访问性：对比度、字号、点击热区、键盘/读屏基础
反模式（看到就优先修）：
- 同一层级文本用不同字号/字重/颜色
- 间距无规律（到处是 17/23/29 这类魔法数）
- 过多强调手段叠加（颜色+加粗+描边+阴影+动画）
- CTA 不突出或被装饰/次要信息抢权重
- 证据表达过度“像P图/像假数据”，导致信任下降
审查流程
A. 网页（有 URL）
- 先获取 桌面/移动 的首屏与全页视图
- 只基于渲染结果做第一轮审查（避免被实现细节带偏）
- 再结合源码定位：组件边界、布局系统、tokens来源、断点策略
推荐视口：
- Desktop: 1440x900 (fold) + full page
- Mobile: 390x844 (fold) + full page
B. 只有截图/图片
- 按“信息层级/对齐栅格/间距节奏/字体/颜色/证据链/移动端”逐项检查
- 输出 tokens + Quick wins
- 如需落地，要求用户提供对应页面/组件路径
C. 有源码（需要落地改）
- 先找页面入口：route -> page component -> section components
- 找样式入口：global css/tailwind config/theme tokens/component css
- 小步改：先建立 tokens，再做版式/组件一致性
- 验证：桌面/移动、长文案/短文案、极端数据、加载状态
输出模板 (Must Follow)
1) 一句话结论
- 这页在卖/表达：...
- 当前最大问题：...（一句话）
2) P0 / P1 / P2
每条必须用同一格式：
- 现象：
- 影响：
- 原因假设：
- 修改建议（可执行）：
P0：直接影响“看懂/信任/CTA/移动端可用性” P1：影响质感、一致性、阅读效率 P2：细节优化（微交互、细节对齐、边界情况）
3) Tokens 建议（落地优先）
给出一套可直接映射到 CSS variables / Tailwind theme 的 tokens：
- Typography: H1/H2/H3/Body/Caption 的 font-size, line-height, font-weight
- Spacing scale: 4/8/12/16/24/32/48/64/96 (不要碎值)
- Grid: max width, gutter, breakpoints
- Color: bg/surface/text/muted/border/brand/accent/success/warn/danger
- Radius: 8/12/16
- Shadow: 1-2 档（轻）
4) Quick wins
- 3-7 条，必须是“不大改结构但效果立竿见影”的改法
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.
- 11d ago First seen · 132 lines · 63 tokens per session scan A da078097a516
aesthetic-audit is a skill published in the GitHub repository anymouschina/TapCanvas (603 stars, last pushed today), licensed MIT. It adds 63 tokens to every session and 1,615 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns…
cursor-reveal-hero
Build, repair, tune, and validate interactive cursor-trail mask reveal hero effects in frontend projects. Use when implementing canvas-based base/reveal compositing, soft radial cursor masks, fading cursor trails, reveal debug controls, full-screen hero scenes without site text, or browser smoke checks for cursor…
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…