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 YYH211/Claude-meta-skill --skill frontend-designgit clone --depth 1 https://github.com/YYH211/Claude-meta-skillWrote 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/yyh211/claude-meta-skill/frontend-design)<a href="https://agentmods.dev/skills/yyh211/claude-meta-skill/frontend-design"><img src="https://agentmods.dev/badge/skills/yyh211/claude-meta-skill/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/yyh211/claude-meta-skill/frontend-design"><img src="https://agentmods.dev/badge/skills/yyh211/claude-meta-skill/frontend-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00074 | $0.04562 |
| Opus 5 | $0.00037 | $0.02281 |
| Sonnet 5 | $0.00015 | $0.00912 |
| Haiku 4.5 | $0.00007 | $0.00456 |
Grade A, and why
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 — 492 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design Skill
此技能指导创建独特的生产级前端界面，避免平庸的"AI 粗糙"美学。实现真正可用的代码，并高度关注美学细节和创意选择。
When to Use This Skill
使用此技能当用户请求：
- 构建 Web 组件、页面或完整应用程序
- 创建着陆页、仪表盘或营销页面
- 设计 React、Vue 或原生 HTML/CSS 界面
- 美化或重新设计现有的 Web UI
- 创建海报、素材或视觉设计元素（用于 Web）
- 需要高设计品质和独特美学的任何前端项目
关键触发词: Web 组件、页面、应用、网站、着陆页、仪表盘、React 组件、HTML/CSS、UI 设计、美化、前端
核心原则
在编写代码之前，必须进行深入的设计思考。每个界面都应该是独特的、有意图的、令人难忘的。
设计思维流程
在实现任何代码之前，回答以下问题：
1. 目的 (Purpose)
- 问题: 此界面解决什么问题？
- 用户: 谁使用它？在什么情境下使用？
- 目标: 用户需要完成什么任务？
2. 风格方向 (Style Direction)
选择一个明确且大胆的美学方向。不要选择"现代简约"这样的通用描述，而是选择极致的风格：
风格选项（但不限于这些）：
- 极简主义: 极度克制，大量留白，精准排版
- 极致混乱: 密集布局，重叠元素，视觉冲击
- 复古未来主义: 80年代霓虹色，网格，合成波风格
- 有机/自然: 流动形状，自然色调，柔和曲线
- 奢华/精致: 优雅字体，金色点缀，精细细节
- 俏皮/玩具感: 明亮色彩，圆角，趣味动画
- 编辑/杂志风格: 大胆排版，网格系统，黑白为主
- 粗犷/原始: 单色，硬边，实用主义
- 装饰艺术/几何: 对称图案，几何形状，高对比度
- 柔和/粉彩: 温和色彩，渐变，梦幻感
- 工业/实用: 系统字体，单色，功能优先
- 新拟态: 柔和阴影，浮雕效果，微妙深度
- 玻璃态: 模糊背景，透明度，光感
关键: 选择清晰的概念方向并精准执行。大胆的极致主义和精致的极简主义都有效——关键在于意图，而不是强度。
3. 技术限制 (Constraints)
- 使用什么框架？（React, Vue, 原生 HTML/CSS）
- 性能要求？（动画复杂度，文件大小）
- 可访问性要求？（ARIA 标签，键盘导航，色彩对比度）
- 浏览器兼容性？
4. 差异化 (Differentiation)
- 记忆点: 是什么让它令人难忘？
- 独特性: 用户会记住哪一个细节？
- 惊喜: 哪里会让用户眼前一亮？
前端美学指南
1. 排版 (Typography)
原则: 字体选择是设计的灵魂。
Do:
- ✅ 选择独特且有个性的字体
- ✅ 标题使用引人注目的字体，正文使用易读字体
- ✅ 尝试意想不到的字体配对
- ✅ 使用字体变体（font-weight, font-style）创造层次
- ✅ 精确控制字间距（letter-spacing）和行高（line-height）
Don't:
- ❌ 使用通用字体：Arial, Helvetica, Inter, Roboto, 系统字体
- ❌ 所有文本使用相同的字体和大小
- ❌ 忽略字体加载性能（使用 font-display: swap）
推荐字体来源:
- Google Fonts (选择小众、独特的字体)
- 自定义字体（如果项目允许）
示例字体组合:
/* 极简编辑风格 */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;
/* 现代科技风格 */
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;
/* 优雅奢华风格 */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;
2. 颜色与主题 (Color & Theme)
原则: 颜色定义情绪和品牌。
Do:
- ✅ 使用 CSS 变量保持一致性
- ✅ 主色调 + 鲜明点缀色的组合
- ✅ 考虑色彩心理学（蓝色=信任，红色=紧迫，绿色=成功）
- ✅ 使用渐变营造深度（但要有品味）
- ✅ 保持色彩对比度（WCAG AA 标准：至少 4.5:1）
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 · 492 lines · 74 tokens per session scan A b187dcdfbbd9
frontend-design is a skill published in the GitHub repository YYH211/Claude-meta-skill (277 stars, last pushed 3mo ago), licensed MIT. It adds 74 tokens to every session and 4,562 once invoked, about $0.0004 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…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
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…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.