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 xiaobei930/cc-best --skill frontendgit clone --depth 1 https://github.com/xiaobei930/cc-bestWrote 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/xiaobei930/cc-best/frontend)<a href="https://agentmods.dev/skills/xiaobei930/cc-best/frontend"><img src="https://agentmods.dev/badge/skills/xiaobei930/cc-best/frontend/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/xiaobei930/cc-best/frontend"><img src="https://agentmods.dev/badge/skills/xiaobei930/cc-best/frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00029 | $0.00788 |
| Opus 5 | $0.00015 | $0.00394 |
| Sonnet 5 | $0.00006 | $0.00158 |
| Haiku 4.5 | $0.00003 | $0.00079 |
Grade A, and why
frontend 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 6d 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.
What it actually says
前端开发模式
本技能提供前端开发的最佳实践和模式，支持多框架按需加载。
快速参考
- 核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
- 框架支持: Vue 3 / React 18 / Svelte / Angular 17+（根据
package.json按需加载） - 性能目标: LCP < 2.5s, FID < 100ms, CLS < 0.1, TTI < 3.8s
- 设计原则: 单一职责、Props 向下、Events 向上、组合优于继承
触发条件
- 创建或修改前端组件
- 设计 UI/UX 交互
- 实现状态管理
- 性能优化
- 无障碍开发
框架专属模式
根据项目 package.json 依赖加载对应文件：
| 技术栈 | 加载文件 | 框架 |
|---|---|---|
| Vue | vue.md |
Vue 3, Nuxt 3 |
| React | react.md |
React 18, Next.js |
| Svelte | svelte.md |
Svelte, SvelteKit |
| Angular | angular.md |
Angular 17+ |
子文件索引
| 文件 | 内容 |
|---|---|
| vue.md | Vue 3 + Composition API 模式 |
| react.md | React 18 + Hooks 模式 |
| svelte.md | Svelte/SvelteKit 模式 |
| angular.md | Angular 17+ 模式 |
| performance.md | Core Web Vitals 优化 |
| tailwind.md | Tailwind 最佳实践 + v4 迁移 |
| design-guide.md | 设计方法论与审查清单 |
| patterns.md | 通用组件/状态管理/表单/动画/a11y 模式 |
性能指标
| 指标 | 目标 | 说明 |
|---|---|---|
| LCP | < 2.5s | 最大内容绘制 |
| FID | < 100ms | 首次输入延迟 |
| CLS | < 0.1 | 累积布局偏移 |
| TTI | < 3.8s | 可交互时间 |
设计美学（避免 AI Slop）
详见 design-guide.md — AI 通用审美定义、设计思维方向矩阵、反模式清单与审查清单。
测试模式
详见
rules/frontend/frontend-testing.md和rules/frontend/frontend-e2e.md（按文件类型自动加载）。
记住: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。
What ships with it
8 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.
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.
- 6d ago First seen · 70 lines · 29 tokens per session scan A 8ea3ebf07b85
frontend is a skill published in the GitHub repository xiaobei930/cc-best (50 stars, last pushed 2mo ago), licensed MIT. It adds 29 tokens to every session and 788 once invoked, about $0.0001 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-09-03.
Other skills, from other repositories
design-patterns
Detect, suggest, and evaluate GoF design patterns in TypeScript/JavaScript codebases. Use when refactoring code, applying singleton/factory/observer/strategy patterns, reviewing pattern quality, or finding stack-native alternatives for React, Angular, NestJS, and Vue.
landing-page-generator
Generate complete, deploy-ready landing pages from any repository. Use when creating a homepage for an open-source project, building a project website, converting a README into a marketing page, or standardizing landing pages across multiple repos.
source-command-audit-whitepapers
Audit version freshness, FR/EN parity, and metadata quality of all whitepapers and recap cards.
audit-agents-skills
Audit Claude Code agents, skills, and commands for quality and production readiness. Use when evaluating skill quality, checking production readiness scores, or comparing agents against best-practice templates.
eval-agents
Audit Claude Code agents defined in .claude/agents/ for description specificity, model tier appropriateness, tools scoping, and system prompt quality. Detects dispatch ambiguity between agents, flags over-permissive tool grants, and checks for human-in-the-loop patterns that break programmatic orchestration. Use when…
issue-triage
3-phase issue backlog management with audit, deep analysis, and validated triage actions. Use when triaging GitHub issues, sorting bug reports, cleaning up stale tickets, or detecting duplicate issues. Args: 'all' to analyze all, issue numbers to focus (e.g. '42 57'), 'en'/'fr' for language, no arg = audit only.