What is reqvire-design?

A design guide for building interfaces and visual assets for Reqvire Explorer, a Git-based viewer for engineering knowledge graphs. It defines the product’s visual style, reusable components, colors, typography, and assets.

It is for creating Reqvire screens, prototypes, visual mockups, and production UI while following the project’s established branding and component patterns.

It gives coding agents the project context and design rules needed to keep Reqvire interfaces consistent.

reqvire-design — Skill for Claude Code and Codex by reqvire-org: A design guide for building interfaces and visual assets…

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.

agentmods

npx agentmods add skills/reqvire-org/reqvire/design-system

Any agent

npx skills add reqvire-org/reqvire --skill design-system

Clone the repo

git clone --depth 1 https://github.com/reqvire-org/reqvire

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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/reqvire-org/reqvire/design-system.svg)](https://agentmods.dev/skills/reqvire-org/reqvire/design-system)

Your own site

<a href="https://agentmods.dev/skills/reqvire-org/reqvire/design-system"><img src="https://agentmods.dev/badge/skills/reqvire-org/reqvire/design-system.svg" alt="Measured on agentmods" height="20"></a>

Per session 69 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,994 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

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.

Model	Per session	Once invoked
Fable 5	$0.00069	$0.01994
Opus 5	$0.00034	$0.00997
Sonnet 5	$0.00014	$0.00399
Haiku 4.5	$0.00007	$0.00199

Measured 3d ago against content hash be80efc24a2e, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

reqvire-design 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 3d ago.

The scan reads SKILL.md. This mod also ships 10 executable files (components/core/button_contract.ts, hooks/useLatestRef.ts, index.ts, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

explorer/design-system/SKILL.md · 65 lines

How it starts

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

Read the readme.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Where things are

readme.md — the full design guide: product context, content fundamentals, visual foundations, iconography, and a file manifest. Start here.
styles.css — single CSS entry point; link it to inherit all tokens, fonts and base styles. It is import-only and guarded.
tokens/ — colors (warm product surfaces, slate text ramps, rose accent, the six element-type hues), typography (Geist/Geist Mono), spacing, elevation, fonts.
components/<group>/ — typed React primitives (TSX; props are the source of truth) (Alert, Badge, BrandMark, Button, Card, Icon, IconButton, Modal, CodeRef, ElementIcon, TypeBadge, RelationPill, Chip, Stat, Table, ToggleRow, SegmentedControl, SearchInput, Tabs, TreeItem, Breadcrumb, SidebarSection).
product-patterns/<group>/ — typed reusable UX/product-pattern targets (shell, chrome, side-pane, detail, content, feedback) that emit ux-* visual hooks.
index.ts — the barrel; production code imports primitives, product patterns, and the palette API from here (the app aliases it as @ds).
palette.ts — programmatic color API: element-type → token mapping, runtime CSS-variable resolution, Mermaid class defs.
assets/logo-mark.svg — 200x200 source brand mark (reconstruction; replace with the official logo when available). Favicons and app icons are generated from it by npm run generate:icons, not hand-maintained as source.

Read the full file on GitHub · 65 lines

Files

What ships with it

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

3d ago First seen · 65 lines · 69 tokens per session scan A be80efc24a2e

Subscribe to this mod's changes

reqvire-design is a skill published in the GitHub repository reqvire-org/reqvire (19 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 69 tokens to every session and 1,994 once invoked, about $0.0003 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-01.

Design and UX context-engineering mbse ontologies requirements semantic-engineering semantic-knowledge-graphs

devx-ux

Activate when designing or modifying CLI command surfaces, command help text, install/init/run flows, error wording, or first-run experience in the APM CLI -- even when the user does not say "UX" explicitly.

microsoft/apm · 48 tokens

working-with-playground-app

This skill provides guidance for building UI/UX prototypes in the Packmind playground app. It should be used when creating a new prototype, iterating on an existing prototype, or working with files in apps/playground/. Triggers on mentions of "playground", "prototype", or direct work within the apps/playground/…

PackmindHub/packmind · 72 tokens

c4-diagrams

Use when explaining existing code architecture, visualizing a new system before detailed design, mapping software boundaries, or creating C4-style diagrams in ASCII or Mermaid.

intent-driven-dev/intent-driven-template · 36 tokens

sdd

Implements the Spec-Driven Development lifecycle (Intent, Requirements, Design, Tasks, Build) for structured feature development. Use when the user wants to scaffold a new feature spec, generate EARS requirements, create a technical design, break work into tasks, or check spec status. Trigger on keywords: sdd…

brycewang-stanford/Auto-Empirical-Research-Skills · 75 tokens

accessibility

Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

open-gsd/gsd-pi · 51 tokens

frontend

Two-mode frontend skill: (1) authoring — accessibility, responsive layout, loading/error states, performance, DESIGN.md authoring, visual direction; (2) critique — READ-only scored review of built UI against anchored rubric, AI-slop detection, two isolated assessments. Router invokes mode via context.

romiluz13/cc10x · 63 tokens