build-ui-components-and-systems

build-ui-components-and-systems is a skill for Claude Code, Codex from EverMind-AI/Raven. It costs 101 tokens per session (3,269 once invoked), scanned A, original, Apache-2.0.

A guide for building reusable UI components and design systems: shared visual rules, component interfaces, behavior, accessibility requirements, documentation, packaging, and version management. A design system is a maintained set of parts and rules that multiple screens or products can share.

In plain words
What is it for?
Use it to define tokens such as colors and spacing, component APIs and states, keyboard and accessibility behavior, distribution packages, migration plans, and governance for ongoing reuse.
Why use it?
It prevents a component gallery or a set of screenshots from being mistaken for a usable system. It makes the relationship between design and code explicit and keeps changes compatible for real consumers.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: $skill-name invocation.

Good fit Use it to define tokens such as colors and spacing, component APIs and states, keyboard and accessibility behavior, distribution packages, migration plans, and governance for ongoing reuse.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/evermind-ai/raven/build-ui-components-and-systems
About the project

Raven is an open-source agent harness for running long-term AI work with terminal execution, tracing, memory, skills, evaluation, and reusable workflows. People use the current release to operate and improve persistent AI workflows, while its described future direction is a multi-agent system that combines specialized harnesses.

EverMind-AI/Raven · 3,825 stars · on GitHub · raven.evermind.ai

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.

Any agent
npx skills add EverMind-AI/Raven --skill build-ui-components-and-systems
Clone the repo
git clone --depth 1 https://github.com/EverMind-AI/Raven

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 build-ui-components-and-systems

README.md
[![agentmods](https://agentmods.dev/badge/skills/evermind-ai/raven/build-ui-components-and-systems/github.svg)](https://agentmods.dev/skills/evermind-ai/raven/build-ui-components-and-systems)
Your own site
<a href="https://agentmods.dev/skills/evermind-ai/raven/build-ui-components-and-systems"><img src="https://agentmods.dev/badge/skills/evermind-ai/raven/build-ui-components-and-systems/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 build-ui-components-and-systems

Your own site · 80×15
<a href="https://agentmods.dev/skills/evermind-ai/raven/build-ui-components-and-systems"><img src="https://agentmods.dev/badge/skills/evermind-ai/raven/build-ui-components-and-systems.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 101 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,269 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.00101 $0.03269
Opus 5 $0.00051 $0.01635
Sonnet 5 $0.00020 $0.00654
Haiku 4.5 $0.00010 $0.00327

Measured today against content hash 8da6005872a2, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

build-ui-components-and-systems 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 today.

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.

plugins-dist/design-engine/raven_design/skills/build-ui-components-and-systems/SKILL.md · 131 lines

How it starts

The opening of the file, as written. The whole thing — 131 lines — stays where its author put it; the contents beside it link to each section on GitHub.

构建 UI 组件与设计系统

领域结果

交付可被声明消费者真实导入、组合、验证和升级的界面合同,而不是组件展厅、业务页面换名或一组截图。系统的核心链是:token → component API → behavior/a11y → distribution → consumer → governance

本 Skill 保持介质中立。先明确最终消费者、目标媒介与 target renderer,并记录组件、字体、图标和 数据的来源与许可;验收发生在真实消费接口、状态与最终像素,不默认落到浏览器展示页。

只有最终消费者或合同交付确为 Web 时,才调用 $build-polished-visual-frontends,由它负责 Web 技术栈、整体视觉语言和浏览器最终像素;非网页媒介不得为了预览方便加载该 Skill,也不能用浏览器证据冒充目标消费者证据。本 Skill 始终拥有组件系统合同与领域 gate;共享 visual-artifact-design 拥有工具证据、authority graph、渲染、review 和 scoped promotion,这里不另造生命周期或晋升状态。

按需读取:

  • patterns.md:子型、consumer contract、API、token/state、a11y、分发与治理模式;
  • tool-profiles.md:领域工具能力、分发形态与选择失败条件。

1. 路由任务与声明上限

先记录 mode / primary_domain / final_consumer / target_medium / target_renderer / target_profile / consumer_scope / target_claims / source_provenance / risk_triggers / explicit_non_goals。模式为 create / edit / diagnose / audit / migrate;migrate 必须有真实旧实现或明确标注的 synthetic fixture。

  • greenfield 才从消费者任务建立所需的最小 token、API、行为、分发和治理权威链,不预造企业级全家桶。
  • 已有系统先锁定现有 owner、公共合同、消费者和兼容边界,再按变更影响图只检查和修改受影响类别;未受影响的 token、组件、状态、文档、分发或治理保持原样,不因局部 Edit 全量重做、换肤或迁移。
  • Diagnose/Audit 一律零写入,只定位最早失效的 concern、受影响类别和返回 owner;无修复授权时不创建 proof、快照、缓存或“顺手修正”。

以下是目标档案与 claim ceiling,不是所有项目必须依次走完的线性流程:

target_profile 可声明的最高结果 必要边界
D10-M0 组件契约样张 可说明 token、API 与状态;不声称可导入或采用
D10-M1 实现支撑的系统试验版 有真实源码、public entry、状态证据与文档;可仍限本仓库
D10-M2 可采用 Preview 有版本化可消费边界、显式 exports、独立消费者及行为/a11y 证据
D10-M3 Stable 系统 有生产采用或双消费者验证、升级/弃用、owner 与发布历史
D10-M4 治理型多产品系统 有多平台或多品牌采用、兼容政策、同步与长期治理证据

直接选择与任务相称的档案;更高档案只增加被其 claims 触发的 gate。未满足证据时降低实际 claim ceiling,不用“完成度”掩盖缺口。

2. 建立 concern authority chain

先列消费者和 concern,再实现。一个 concern 只能有一个权威 owner;多个原生母版可以并存,但导出、截图、catalog 和 Gallery 都是派生物。

concern 常见权威 owner
reference / semantic tokens 版本化 token 源;CSS、TS、平台变量为生成物
component API public types、exports 与组件源码
behavior / accessibility 组件实现与可重复交互测试
design intent 获批准的设计母版或版本化 rendered reference
documentation 生成的 API/token 文档与人工叙事各自拥有明确部分
distribution / release package manifest、构建配置、tag、changelog 与发布记录

Read the full file on GitHub · 131 lines

Files

What ships with it

2 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.

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. today First seen · 131 lines · 101 tokens per session scan A 8da6005872a2

Subscribe to this mod's changes

build-ui-components-and-systems is a skill published in the GitHub repository EverMind-AI/Raven (3,825 stars, last pushed today), licensed Apache-2.0. It adds 101 tokens to every session and 3,269 once invoked, about $0.0005 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-12.