frontend-brand-guard

frontend-brand-guard is a cursor rule for Cursor from TashanGKD/tashan-cursor-skills. It costs 2,520 tokens per session, scanned A, original, MIT.

A rulebook for keeping frontend interfaces consistent with the Tashan brand, including its technology, visual style, and interaction rules.

In plain words
What is it for?
Use it when building or reviewing React interfaces, CSS, UI components, pages, or integrations with another product's frontend.
Why use it?
It prevents frontend work from introducing conflicting frameworks, colors, fonts, layouts, or interactions.

Cursor rule for Cursor

Written for Cursor: a Cursor rule (.mdc). Also seen: built for openclaw.

Not installable: its command points at a path on the author’s own machine, so it runs nowhere else. The line is /Users/boyuan/aiwork/0310_huaxiang\项目群\Tashan-TopicLab\docs\design\.

Good fit Use it when building or reviewing React interfaces, CSS, UI components, pages, or integrations with another product's frontend.

Compare 6 cursor rules from other repositories ↓
Install

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.

Made for: Cursor.

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.

agentmods badge for frontend-brand-guard

README.md
[![agentmods](https://agentmods.dev/badge/rules/tashangkd/tashan-cursor-skills/frontend-brand-guard/github.svg)](https://agentmods.dev/rules/tashangkd/tashan-cursor-skills/frontend-brand-guard)
Your own site
<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.

agentmods 80×15 button for frontend-brand-guard

Your own site · 80×15
<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>
Per session 2,520 This file is loaded in full into every session.
When invoked 2,520 The same file — it is already loaded in full.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce 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

Measured 11d ago against content hash 558006774ee5, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

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.

rules/frontend-brand-guard.mdc · 204 lines

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

Read the full file on GitHub · 204 lines

Changes

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.

  1. 11d ago First seen · 204 lines · 2,520 tokens per session scan A 558006774ee5

Subscribe to this mod's changes

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.