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 seaworld008/Commonly-used-high-value-skills --skill frontend-designgit clone --depth 1 https://github.com/seaworld008/Commonly-used-high-value-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/seaworld008/commonly-used-high-value-skills/frontend-design)<a href="https://agentmods.dev/skills/seaworld008/commonly-used-high-value-skills/frontend-design"><img src="https://agentmods.dev/badge/skills/seaworld008/commonly-used-high-value-skills/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/seaworld008/commonly-used-high-value-skills/frontend-design"><img src="https://agentmods.dev/badge/skills/seaworld008/commonly-used-high-value-skills/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.00024 | $0.01932 |
| Opus 5.5 | $0.00010 | $0.00773 |
| Sonnet 5.5 | $0.00005 | $0.00386 |
| Haiku 4.5 | $0.00002 | $0.00193 |
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 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.
How it starts
The opening of the file, as written. The whole thing — 127 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design (高级前端设计)
Frontend Design 技能致力于创建极具辨识度、生产级且具备高审美水准的前端界面。本技能不仅生成可运行的代码，更融入了深厚的“设计思维”，坚决避免平庸的、流水线式的“AI 塑料感”审美，助力开发者打造令人难忘的数字体验。
安装与使用建议
# 无需安装，此为指导性技能
# 在启动 Web Artifact 或前端页面开发前激活
设计思维 (Design Thinking)
在编写代码之前，必须先确定一个 大胆且明确 的审美方向：
- 明确目的 (Purpose)：该界面解决什么问题？受众是谁？是极客工具、奢侈品电商还是艺术展示？
- 选定基调 (Tone)：在极端之间做选择 —— 绝对简约 (Brutally Minimal)、极致主义混乱 (Maximalist Chaos)、复古未来主义 (Retro-futuristic)、有机自然感 (Organic/Natural)、高级精致感 (Luxury/Refined)、玩具感 (Playful/Toy-like)、杂志排版感 (Editorial/Magazine)、新粗犷主义 (Neo-brutalism)。
- 约束边界 (Constraints)：框架要求（React/Vue）、性能阈值、无障碍 (Accessibility) 标准。
- 差异化点 (Differentiation)：什么是该页面的“灵魂”？是一个独特的转场动画、一种从未见过的网格布局，还是极具张力的排版？
关键原则：无论选择哪种风格，执行必须精准。简约不代表简陋，繁复不代表杂乱。意图比强度更重要。
核心能力 / Core Capabilities
1. 突破常规的排版系统 (Advanced Typography)
- 操作步骤：
- 放弃 Arial, Inter, Roboto 等通用字体。
- 寻找具备性格的字体对：一个极具冲击力的标题字（Display Font）搭配一个极致可读的正文字（Body Font）。
- 利用
clamp()函数实现流式排版（Fluid Typography），确保在任何屏幕上都具备完美的节奏感。
- 最佳实践：使用超大字号作为背景装饰，或尝试垂直/斜向排版。
2. 深度质感与氛围营造 (Atmosphere & Texture)
- 操作步骤：
- 放弃纯色背景。
- 使用 CSS 渐变网格 (Gradient Meshes)、噪点纹理 (Noise Textures)、几何图案层叠或磨砂玻璃 (Glassmorphism) 效果。
- 应用动态光影：利用
box-shadow的多层堆叠模拟真实的物理深度。
- 最佳实践：添加一个轻微的
grain滤镜覆盖全页面，消除数码冰冷感。
3. 高级动效与交互微调 (Motion & Micro-interactions)
- 操作步骤：
- 优先使用 CSS 动画实现轻量级效果。
- 对于复杂交互，引入
Framer Motion(React) 或GSAP。 - 实施“交错揭示” (Staggered Reveals)：通过
animation-delay让页面加载具备电影感。
- 最佳实践：关注鼠标指针的交互（Custom Cursor）和滚动联动（Scroll-triggering）。
4. 响应式与无障碍闭环 (Responsive & A11y)
- 操作步骤：
- 利用容器查询 (Container Queries) 实现更智能的组件自适应。
- 严格遵守 WCAG 2.1 对比度标准，确保美观的同时兼顾可用性。
- 优化 LCP (最大内容绘制) 和 CLS (累积布局偏移)。
常用命令/模板 / Common Patterns
前端开发任务描述模板 (Project Blueprint)
### 🎨 审美提案 (Aesthetic Pitch)
- **风格**: 新粗犷主义 (Neo-brutalism)
- **核心色**: #FFD600 (高饱和黄) + #000000 (粗边框)
- **字体**: `Clash Display` (标题) + `JetBrains Mono` (正文)
### 🛠️ 技术栈
- React + Tailwind CSS + Framer Motion
- 布局: 12-column Grid, 非对称偏移
### 🌟 记忆点 (The Hook)
- 所有的卡片在悬浮时会产生一个偏移的硬阴影，模拟物理纸张的层叠感。
What ships with it
1 file 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.
- 1mo ago Changed · -53 tokens per session 99572db2097b
- 1mo ago First seen · 127 lines · 77 tokens per session scan A 59fd29ba4d1e
frontend-design is a skill published in the GitHub repository seaworld008/Commonly-used-high-value-skills (73 stars, last pushed today), licensed MIT. It adds 24 tokens to every session and 1,932 once invoked, about $0.0001 per session on Opus 5.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-09-03.
Other skills, from other repositories
web-design-engineer
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…
omh-frontend
This is an OMH frontend workflow skill, projected for Agent Skills hosts (Claude Code, Codex, Cursor, opencode, OpenClaw, pi).
omh-visual-qa
This is an OMH visual-qa workflow skill, projected for Agent Skills hosts (Claude Code, Codex, Cursor, opencode, OpenClaw, pi).
agentos-ui-ux
Design, review, or implement AgentOS UI and UX work using the project’s operator-console visual system. Use for React/Tailwind pages, cards, dialogs, mobile layouts, theme work, navigation, forms, empty/loading/error states, and UI consistency reviews in AgentOS.
generic-react-design-system
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
motion-dev
Use when React animation library — spring physics, gesture animations, layout animations, scroll effects, SVG path drawing. Successor to Framer Motion. Use when building UI animations, micro-interactions, page transitions, shared element transitions, parallax effects.