agentmods.dev

violet: Skill for Claude Code

.agents/skills/violet-ui/SKILL.md

violet-ui is a skill for Claude Code, Codex from VOD-Studio/violet. It costs 57 tokens per session (946 once invoked), scanned A, original, MIT.

A guide for using and extending the @violet/ui component library in the Violet repository. It covers checking exported components, styles, examples, keyboard behaviour, themes, and narrow-screen layouts.

In plain words
What is it for?
Use it when adding or changing shared UI components, updating their examples or documentation, or checking light and dark themes and responsive previews.
Why use it?
It helps keep the package's exports, documentation examples, published files, and visible behaviour in agreement. It also reduces the risk of documenting or using props that the components do not actually support.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: installed under .agents/ (shared by several agents); mentions AGENTS.md.

This is VOD-Studio/violet's own configuration. It tells Claude Code and Codex how to work on violet itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything violet configures →

not rated 4repo changed 1mo ago A scan 57 tokens original MIT
View source ↗ VOD-Studio/violet xunrua.top
Reuse

Borrowing it

Nothing to install: this file belongs to VOD-Studio/violet. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/VOD-Studio/violet/release/2.0/.agents/skills/violet-ui/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/VOD-Studio/violet

Made for: Claude Code, Codex.

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 violet-ui

README.md
[![agentmods](https://agentmods.dev/badge/skills/vod-studio/violet/violet-ui/github.svg)](https://agentmods.dev/skills/vod-studio/violet/violet-ui)
Your own site
<a href="https://agentmods.dev/skills/vod-studio/violet/violet-ui"><img src="https://agentmods.dev/badge/skills/vod-studio/violet/violet-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 violet-ui

Your own site · 80×15
<a href="https://agentmods.dev/skills/vod-studio/violet/violet-ui"><img src="https://agentmods.dev/badge/skills/vod-studio/violet/violet-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 57 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 946 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.00057 $0.00946
Opus 5.5 $0.00023 $0.00378
Sonnet 5.5 $0.00011 $0.00189
Haiku 4.5 $0.00006 $0.00095

Measured 1mo ago against content hash 99791015a447, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

violet-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 1mo 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.

.agents/skills/violet-ui/SKILL.md · 21 lines

What it actually says

使用与扩展 @violet/ui

  1. 先读 web/packages/ui/component-manifest.json，按 status 区分 foundation 与 legacy，不另维护组件列表；兼容导出不代表已经重建。所有实现统一放在 src/components/<name>/，legacy.ts 只有导出汇总。
  2. 编辑前端代码前读 frontend-conventions；改 className 前读 tailwind-canonical-classes。先读 web/packages/ui/docs/architecture.md 与 component-design.md，从需求、原生语义与可验证契约确定设计。站点业务组件留在 feature，跨 feature 的通用组件才进入库。
  3. 从具体消费场景确定组件的 HTML 语义、属性归属、状态、键盘行为和组合方式。使用原生控件或 Radix；文件在组件目录就近维护。lib 只提取真实复用，不预建没有消费方的 provider、polymorphic engine 或空目录。
  4. foundation 有变体时的 styles.ts 只映射类型化 BEM 类名，无变体不建立空 recipe；基础外观只有一份组件 CSS，React 与 HTML 共用。Tailwind utility 用于布局和局部覆盖。旧组件迁移前保留兼容样式，避免把两套外观误称为已经统一。包使用系统字体默认值，站点字体和装饰动效留在 web/src/styles/site-theme.css。
  5. 保留 native 属性、ref、受控与非受控值、FormData/reset、SSR ID 和事件取消语义。TextField 的 className/style/ref 属于 input，根布局用 classNames.root；描述和错误只关联实际 DOM。Button asChild 保留子内容，禁用或忙碌时拦截子 handlers，自定义 Link 必须透传 props 和 ref。
  6. 增加或迁移组件时登记清单，再运行 pnpm --filter @violet/ui sync 与只读 check。清单驱动根入口、组件入口、legacy 汇总、包 exports 与 CSS 列表；不要维护第二套列表。@violet/ui/variants 保持纯 recipe，不依赖 React。
  7. 常规 React 消费从 @violet/ui 或组件入口导入，Tailwind v4 之后加载 @violet/ui/styles.css。普通 CSS 消费先加载 tokens.css，再加载 classes.css 或 components/<name>.css。JS 与 CSS 的按需加载分别核对。工作区入口指向源码，pack 后由 publishConfig 指向 dist。
  8. 在 web/src/features/ui-docs/ui/examples/<component>/ 写真实 TSX 示例，文档同时 import 组件预览与 .tsx?raw。指南路由为 /ui/guides/<slug>，组件路由为 /ui/components/<name>；新增页面同步 route、catalog、lazy registry、llms.txt，并按 docs-map 同步负责的 README/AGENTS。页面按清单明确成熟度，架构与设计规范直接读取包内正文。
  9. 执行包的 check、typecheck、test、build、check:dist、consumer。最后一步把真实 tarball 安装到工作区外，验证类型、SSR、Vite 构建与模块可达性。补充明暗、窄屏、键盘与 reduced motion 预览，再交给独立 verifier；作者 pass 不自称批准。

架构指南在 web/packages/ui/docs/architecture.md，逐步流程在同目录 component-design.md，包边界见 web/packages/ui/AGENTS.md。

包尚未发布 npm；外部安装先 build/pack，再用实际 tarball 文件名。没有专用组件 CLI 或 MCP；智能体可读取 /llms.txt、组件源码和此 skill。遵循仓库中文本地 commit 与不推送规则。

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. 1mo ago Changed · +7 lines · +10 tokens per session 99791015a447
  2. 1mo ago First seen · 14 lines · 47 tokens per session scan A c38663b6b228

Subscribe to this mod's changes

violet-ui is a skill published in the GitHub repository VOD-Studio/violet (4 stars, last pushed yesterday), licensed MIT. It adds 57 tokens to every session and 946 once invoked, about $0.0002 per session on Opus 5.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-29.

CSS and stylingChiDesign and UXFrontendblogdddgomcpmodel-context-protocol
Related

violet-ui compared with skills from other repositories

violet-ui next to 6 skills from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
violet-uiVOD-Studio/violetSkill4yesterdayMITA57Claude Code, Codex
21st-ui21st-dev/magic-mcpSkill6.4k1mo agoISCA63Claude Code
frontend-design-tasteKevin-Liu-01/Agent-MachinesSkill2915d agoMITA79Claude Code, Codex
reticle-design-systemKevin-Liu-01/Agent-MachinesSkill2915d agoMITA58Claude Code, Codex
web-design-guidelinesKevin-Liu-01/Agent-MachinesSkill2915d agoMITA77Claude Code, Codex
frontend-frontierKevin-Liu-01/Agent-MachinesSkill2915d agoMITA53Claude Code, Codex
frontend-designKevin-Liu-01/Agent-MachinesSkill2915d agoMITA84Claude Code, Codex