Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/Light0305/Light-skillsnpx agentmods add skills/light0305/light-skills/light-frontend-designWrote 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/light0305/light-skills/light-frontend-design)<a href="https://agentmods.dev/skills/light0305/light-skills/light-frontend-design"><img src="https://agentmods.dev/badge/skills/light0305/light-skills/light-frontend-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/light0305/light-skills/light-frontend-design"><img src="https://agentmods.dev/badge/skills/light0305/light-skills/light-frontend-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, 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 83 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.00459 | $0.06551 |
| Opus 5 | $0.00230 | $0.03275 |
| Sonnet 5 | $0.00092 | $0.01310 |
| Haiku 4.5 | $0.00046 | $0.00655 |
Grade A, and why
light-frontend-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 10d 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 — 221 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端设计（frontend-design）—— 按需工程技能 · 可落地 + 反 AI-slop + 视觉无障碍
你是 Light 的前端设计归属方：任何任务一旦涉及「做界面 / 做网页 / 做应用 UI / 改造现有前端 / 选配色字体设计系统」, 你被按需调用。Light 的可验证组合是【反 AI-slop 机检 + WCAG 复用 visual_qa + 可数版面门 + 真实 Chromium QA + 在线找灵感 + 决策点不替用户拍板】。不宣称市场永久唯一；交付不是一张图或空话，而是 能在真实浏览器里跑起来的前端代码 + 为什么这么设计的决策说明。
一句话定位：把「做个好看的界面」从「丢一张 AI 味十足的渲染图」升级成「先问场景与方向 → 在线找灵感学审美 → 出能跑的 React/Tailwind/shadcn 代码（有记忆点、适配场景）→ 四路自查（对比度/反 slop/版面/真实浏览器）+ 渲染回看 → 修到无 critical」； 把「确定性脏活」（WCAG 对比度判定、AI-slop 痕迹检测、可数版面体检）干净利落地机检掉，把「设计方向」这件 AI 不该自主的事 降级成「推荐 + AskUserQuestion」。对标判据唯一真相源 =
docs/competitors/frontend-design.md（Round 2 R1：8 真·同类设计 skill 实搜读码，ui-ux-pro-max 95.4K★/taste-skill 49.4K★ 等头部 + 机制锚分表； 诚实校正：反 slop/a11y 清单/组件找料是同类共识，头部已覆盖——Light 增量=输出质量机检门[ai_tell_lint 可复现机标 + contrast_lint 真算 WCAG 比值，非 ui-ux-pro-max 的"清单写 4.5:1"] + 零本地库在线找 + 决策点不替用户拍板，非"想到 AI-slop"）。
门型诚实（与科研主线 13 技能根本不同——开做前必读）
frontend-design 不是科研 DAG 节点（一手核实，非转述）：
run_checkpoint.py STAGE_GATES/reroute.py ROUTES/orchestrator-spec.md三处 grepfrontend零命中 ⇒ 非主线阶段、非 STAGE_GATES 闸门、非回边发起方、无上下游 DAG 接线。 当前公开版的工程/IP off-DAG 技能（frontend / system-design / patent-disclosure / software-copyright）是「做系统/界面/软件作品/成果转化材料时用，按需」，不在 §4.3 的 13 技能主线上。所以本技能是 纯工具（复用
_shared/visual_qa）：emits: none、不产light.findings.v1、不被run_checkpoint聚合、绝不阻断主线。 四个自查脚本是技能自己的质量条（供自身 fix-loop），不是科研主线 verdict。 它确实消费_shared/visual_qa（contrast_lint 复用其 WCAG 数学，同 figure 的 figure_visual_qa 先例）——这是复用不是接 DAG。
增量边界（诚实，别把裸模型自带常识当本技能贡献）：「留白好看」「对比度要够」「别滥用紫渐变」「typography 要克制」—— 都是强 Opus 自带常识，近零增量。本技能真正超出裸模型的是： ①
ai_tell_lint.py机械抓 AI-slop 痕迹（T1–T8 可核可复现，不靠「我觉得有 AI 味」）； ②contrast_lint.py复用_shared/visual_qa把 WCAG 落成机检门（确定性 PASS/FAIL，不靠「看着还行」）； ③audit_checklist.py可数版面门（R1–R7 带数字阈值，不靠「布局挺好」）； ④ 在线找灵感零本地库（Awwwards 实测可达 +npm view当天核版本，不吃本地腐朽库）； ⑤ 决策点纪律（把「定方向/栈/配色」这件 AI 结构性不该自主的事，降级成「推荐 + AskUserQuestion」）。 诚实落后项见文末「名实对齐」。
What ships with it
16 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.
- assets/gsap-horizontal-pan.tsx 2.4 KB
- assets/gsap-sticky-stack.tsx 2.5 KB
- assets/motion-scroll-reveal.tsx 1.9 KB
- references.md 5.4 KB
- references/design-systems-map.md 3.6 KB
- references/ecosystem-2026.md 5.1 KB
- references/fonts-and-colors.md 2.5 KB
- references/redesign-audit.md 3.2 KB
- references/resource-map.md 11 KB
- references/visual-a11y-rules.md 3.6 KB
- scripts/ai_tell_lint.py 12 KB runs code
- scripts/audit_checklist.py 11 KB runs code
- scripts/browser_qa.py 12 KB runs code
- scripts/contrast_lint.py 14 KB runs code
- scripts/design_delivery_gate.py 39 KB runs code
- templates/frontend-delivery.example.json 1.4 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.
- 10d ago First seen · 221 lines · 459 tokens per session scan A 13d53e3f6ca1
light-frontend-design is a skill published in the GitHub repository Light0305/Light-skills (617 stars, last pushed 2mo ago), licensed MIT. It adds 459 tokens to every session and 6,551 once invoked, about $0.0023 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
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
antigravity-design-expert
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
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.
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.
liquid-metal-border
Add and tune animated liquid-metal WebGL borders with the React metal-fx package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its…
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.