Getting it into your agent
There is no command for this one: it runs only inside a plugin, and the catalogue could not identify which plugin ships it. The source is linked below.
Wrote 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/rules/tashangkd/tashan-cursor-skills/frontend-brand-guard)<a href="https://agentmods.dev/rules/tashangkd/tashan-cursor-skills/frontend-brand-guard"><img src="https://agentmods.dev/badge/rules/tashangkd/tashan-cursor-skills/frontend-brand-guard/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/rules/tashangkd/tashan-cursor-skills/frontend-brand-guard"><img src="https://agentmods.dev/badge/rules/tashangkd/tashan-cursor-skills/frontend-brand-guard.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.02520 | $0.02520 |
| Opus 5 | $0.01260 | $0.01260 |
| Sonnet 5 | $0.00504 | $0.00504 |
| Haiku 4.5 | $0.00252 | $0.00252 |
Grade A, and why
frontend-brand-guard 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 11d 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 — 204 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端品牌规范强制守门规则(frontend-brand-guard)
品牌安全级别约束。 他山所有产品的前端视觉与交互必须遵循统一规范,违反即破坏品牌一致性。 本规则优先级高于 AI 训练知识中的任何默认前端风格。
触发条件
以下任意情况均触发本规则:
- 编写前端代码(React 组件、页面、样式)
- 修改 CSS / Tailwind 类 / 配色 / 字体 / 圆角
- 设计 UI 组件或页面布局
- 审阅或重构现有前端代码
- 提议以现有第三方产品/框架作为前端基础(fork/引入现有 UI)
⚠️ 特别说明:fork/引入现有产品时必须显式检查 即使技术底座(如 OpenWork、OpenClaw 等)使用不同的前端框架, 面向用户的前端界面仍必须使用 React + Tailwind + 品牌规范。 API/后端层可以复用第三方产品,但前端 UI 层不可绕过品牌规则。
当 AI 提议"以 X 产品为前端基础"时,必须立即输出:
⚠️ CONFLICT:frontend-brand-guard 要求 React + Tailwind + Noto Serif SC, 但 [X] 使用 [Y 框架/设计系统],存在品牌规则冲突。 正确方案:[X] 的 API/后端层可复用,前端 UI 必须重新用 React + Tailwind 实现。 确认此方案?未经用户明确确认,不得使用违规框架。
激活后立即执行
Step 1 【声明规范遵守】
在开始任何前端输出前,明确说明本次将遵守他山前端品牌规范。
Step 2 【查阅前端品牌 Skill(可复用知识层)】
Read: .cursor/skills/frontend-brand/SKILL.md
→ 包含:技术框架/设计令牌/组件代码模板/布局/动画/a11y 全部可复用内容
→ 若需要更多细节,再查阅权威文档(路径在 Skill 第十一章)
不允许凭训练知识猜测设计规范参数,必须读取 Skill 或文档确认。
Step 3 【执行并验证】
输出前自查:本次输出是否违反了下方「禁止清单」中任意一条?
如有违反,修正后再输出。
核心规范速查(最常用,直接可用)
技术框架
| 技术 | 规定 |
|---|---|
| UI 框架 | React 18.x + TypeScript 5.x |
| 构建工具 | Vite 5.x |
| 样式方案 | Tailwind CSS 3.x(utility-first),不使用 CSS-in-JS |
| 路由 | react-router-dom 6.x |
| Markdown | react-markdown + remark-gfm |
字体
- 主字体:
Noto Serif SC(衬线),所有用户可见文字使用font-serif - 技术标识:仅 ID/代码片段使用
font-mono - 禁止:Inter、Roboto、Arial 等无衬线字体作为主字体
配色(产品内页 — 黑白极简风)
| 角色 | 值/类 |
|---|---|
| 主色 / 按钮 / 强调 | #000000 / black |
| 页面背景 | #FFFFFF / white |
| 卡片边框 | gray-200 |
| 主文字 | text-black |
| 次文字 | text-gray-600 / text-gray-700 |
| 辅助文字 | text-gray-500 |
| 技术ID | text-gray-400 font-mono text-[10px] |
| 选中/焦点边框 | border-black |
| 禁用 | text-gray-400 opacity-50 |
品牌色变量(Tailwind config 中已注册):
--brand-primary: #3B82F6/--accent-primary: #0EA5E9--bg-page: #F8FAFC/--bg-container: #FFFFFF--text-primary: #1E293B/--text-secondary: #475569
圆角(3 级简化体系)
| 场景 | 类 | 值 |
|---|---|---|
| 卡片/按钮/输入框(70%) | rounded-lg |
12px |
| 模态框/下拉框(20%) | rounded-xl |
16px |
| 头像/Chip/徽章(10%) | rounded-full |
9999px |
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.
- 11d ago First seen · 204 lines · 2,520 tokens per session scan A 558006774ee5
frontend-brand-guard is a cursor rule published in the GitHub repository TashanGKD/tashan-cursor-skills (20 stars, last pushed 5mo ago), licensed MIT. It adds 2,520 tokens to every session, about $0.0126 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 cursor rules, from other repositories
angular-material-20
This rule provides comprehensive best practices and coding standards for Angular development with Angular Material, focusing on Material 3 (a.k.a. M3) design, theme configuration and various API usages.
shadcn-ui
Cursor rule "shadcn-ui" from nedcodes-ok/cursorrules-collection, covering shadcn/ui rules, component usage, styling, forms and dialog/sheet/modal patterns.
align-grid
Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) — not a decorative one. Encodes the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red palette) AND the hard-won front-end engineering to make the grid…
components
Component patterns and UI conventions.
tailwind
Tailwind CSS and styling conventions.
accessibility
Accessibility (a11y) rules for frontend components. Apply when editing UI or markup.