ui

ui is a cursor rule for Cursor from Kele-Bingtang/teek-design-vue3. It costs 0 tokens per session (530 once invoked), scanned A, original, MIT.

A set of UI design rules for Vue components using SCSS, a language for writing CSS styles. It covers shared colors, naming, reusable classes, cards, and mobile layouts.

In plain words
What is it for?
Use it when creating or changing Vue screens, component classes, SCSS files, colors, spacing, cards, and responsive layouts.
Why use it?
It keeps interface styles consistent and reduces repeated CSS while making mobile behavior part of the design process.

Cursor rule for Cursor

Written for Cursor: installed under .cursor/.

Good fit Use it when creating or changing Vue screens, component classes, SCSS files, colors, spacing, cards, and responsive layouts.

Compare 6 cursor rules from other repositories ↓
Install with agentmods
npx agentmods add rules/kele-bingtang/teek-design-vue3/ui
Install

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.

Clone the repo
git clone --depth 1 https://github.com/Kele-Bingtang/teek-design-vue3

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 ui

README.md
[![agentmods](https://agentmods.dev/badge/rules/kele-bingtang/teek-design-vue3/ui/github.svg)](https://agentmods.dev/rules/kele-bingtang/teek-design-vue3/ui)
Your own site
<a href="https://agentmods.dev/rules/kele-bingtang/teek-design-vue3/ui"><img src="https://agentmods.dev/badge/rules/kele-bingtang/teek-design-vue3/ui/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 ui

Your own site · 80×15
<a href="https://agentmods.dev/rules/kele-bingtang/teek-design-vue3/ui"><img src="https://agentmods.dev/badge/rules/kele-bingtang/teek-design-vue3/ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 530 The whole file, excluding the scripts and references it only reads on demand.
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.00000 $0.00530
Opus 5 $0.00000 $0.00265
Sonnet 5 $0.00000 $0.00106
Haiku 4.5 $0.00000 $0.00053

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

Security

Grade A, and why

ui 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 4d 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.

.cursor/rules/ui.mdc · 31 lines

What it actually says

您是一名现代化 UI/UX 设计方面的专家,熟练使用 SCSS 语法。

在编写 CSS 时

  1. 请使用 light.scssdark.scss 的 CSS 变量来统一颜色风格,尤其是主色,不建议随意定义一个固定的颜色或者大小值
  2. 当使用项目内置 CSS 变量或者 ElementPlus 变量时,请参考 function.scss 使用 cssVar 或者 cssVarEl 函数
  3. 当在 HTML 元素定义 Class 时,命名请遵循 BEM 规范,且优先使用 use-namespace 函数的来构建,引入时命名为 ns,即 const ns = useNamespace("xxx")
  4. 样式文件优先使用 .scss,且在同级 .vue 文件下创建同名的 .scss 文件而不是在 .vue 组件里使用 style 标签,编写样式时请使用 bem.scss 的混合宏,与 useNamespace 的方法名对应上
  5. 优先使用项目定义的原子类作为 class 生效,减少重复编写 CSS 样式代码
  6. 当需要卡片风格的代码时,请优先使用 card.scss 里定义的卡片原子类
  7. 编写 CSS 样式时,请考虑移动端,且移动端的 SCSS 变量已在 var.scss 里定义,如果定义的宽度不符合或需要适配更多布局,请给出更好的建议

light.scss dark.scss card.scss atomic.scss var.scss

bem.scss function.scss mixins.scss namespace.scss use-namespace.ts

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. 4d ago First seen · 31 lines · 530 tokens per session scan A 17199b7db012

Subscribe to this mod's changes

ui is a cursor rule published in the GitHub repository Kele-Bingtang/teek-design-vue3 (278 stars, last pushed 10d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 530 tokens. 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-04.