Borrowing it
Nothing to install: this file belongs to fanfan-de/anybox. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/fanfan-de/anybox/master/.agents/skills/fanfande-frontend-style/SKILL.mdgit clone --depth 1 https://github.com/fanfan-de/anyboxWrote 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/fanfan-de/anybox/fanfande-frontend-style)<a href="https://agentmods.dev/skills/fanfan-de/anybox/fanfande-frontend-style"><img src="https://agentmods.dev/badge/skills/fanfan-de/anybox/fanfande-frontend-style/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/fanfan-de/anybox/fanfande-frontend-style"><img src="https://agentmods.dev/badge/skills/fanfan-de/anybox/fanfande-frontend-style.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.00101 | $0.03310 |
| Opus 5 | $0.00051 | $0.01655 |
| Sonnet 5 | $0.00020 | $0.00662 |
| Haiku 4.5 | $0.00010 | $0.00331 |
Grade A, and why
fanfande-frontend-style 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 13d 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 — 121 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Fanfande Frontend Style
核心方向
为 Fanfande Studio 构建安静、成熟、克制、偏桌面生产力工具的前端界面。优先考虑信息层级、稳定布局、紧凑但不拥挤的密度、可预测交互、长期使用不疲劳的视觉系统，以及符合 Electron 桌面应用的鼠标和键盘效率。
把 Obsidian-like 的“低装饰、面板化、克制强调色、原生偏好窗口感”抽象为全局产品气质，而不是局限于设置页。任何页面都应先服务工作流和内容密度，再考虑装饰表达。
工作流程
- 在写 UI 前先检查目标应用已有 token、基础样式、相邻组件和交互模式。Fanfande Studio 当前优先使用
src/renderer/src/styles/tokens.css、primitives.css、shell.css、sidebar.css、workbench.css、settings.css等本地样式。 - 优先消费已有 CSS 变量，不要在已有等价 token 时硬编码颜色、圆角、阴影或动效。常见 token 家族包括
--surface-*、--text-*、--border-*、--brand-*、--semantic-*、--seg-*、--mix-*。 - 判断当前任务属于哪些 UI 类别，只读取对应 reference。不要一次加载所有 reference。
- 修改时保持局部一致：复用已有组件结构、class 命名、状态命名和测试约束。只有在现有模式明显无法承载新需求时再新增抽象。
- 完成前检查亮色/暗色主题、hover、focus-visible、active、selected、disabled、loading、empty、error、窄视口、长中文/英文文本、键盘路径、窗口拖拽区域和 Electron
-webkit-app-region。
Reference 选择
- 总体原则和视觉气质：读取
references/principles.md。 - token、颜色、间距、圆角、阴影、动效：读取
references/tokens.md。 - app shell、标题栏、侧栏、主工作区、响应式：读取
references/layout.md。 - sidebar、tabs、breadcrumb、command palette、top menu：读取
references/navigation.md。 - panel、section、card、popover、modal、drawer、tooltip：读取
references/surfaces.md。 - 标题、正文、说明、代码、空状态文案：读取
references/typography.md。 - button、input、select、toggle、checkbox、radio、slider、segmented control：读取
references/controls.md。 - context menu、dropdown、select menu、command menu、action menu：读取
references/menus.md。 - list、table、tree、grid、detail pane、timeline、log viewer：读取
references/data-display.md。 - 表单布局、校验、保存状态、危险操作：读取
references/forms.md。 - toast、banner、loading、skeleton、progress、empty、error recovery：读取
references/feedback.md。 - hover、focus、keyboard、drag/drop、resize、shortcut、selection：读取
references/interactions.md。 - default、hover、focus、active、selected、disabled、readonly、error、warning、success 等状态：读取
references/states.md。 - 常见页面原型和组合方式：读取
references/pages.md。 - 明确不要做的视觉和交互反模式：读取
references/avoid.md。
真实预览
当需要判断文字规范是否符合预期视觉时，打开 assets/style-preview/index.html。这是一个自包含的静态样板间，覆盖 app shell、sidebar、workbench pane、settings rows、buttons、inputs、select、toggle、table、empty state、banner、toast、dropdown menu、dialog 和 theme toggle。
What ships with it
20 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.
- agents/openai.yaml 253 B
- assets/style-preview/index.html 16 KB
- assets/style-preview/script.js 5.2 KB runs code
- assets/style-preview/styles.css 23 KB
- assets/tokens.css 1.1 KB
- references/avoid.md 1.9 KB
- references/controls.md 3.1 KB
- references/data-display.md 2.1 KB
- references/feedback.md 1.3 KB
- references/forms.md 1.4 KB
- references/interactions.md 1.3 KB
- references/layout.md 1.8 KB
- references/menus.md 3.1 KB
- references/navigation.md 1.5 KB
- references/pages.md 1.7 KB
- references/principles.md 2.4 KB
- references/states.md 1.9 KB
- references/surfaces.md 1.5 KB
- references/tokens.md 2.0 KB
- references/typography.md 2.5 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.
- 13d ago First seen · 121 lines · 101 tokens per session scan A f700dcf72dcf
fanfande-frontend-style is a skill published in the GitHub repository fanfan-de/anybox (57 stars, last pushed 1mo ago), licensed MIT. It adds 101 tokens to every session and 3,310 once invoked, about $0.0005 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 $ultragoal 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.