design

A set of design rules for creating precise, minimal dashboards and administrative interfaces with deliberate choices for layout, color, typography, and components.

In plain words
What is it for?
Building or reviewing SaaS dashboards, data-heavy screens, admin panels, and other products that need consistent visual detail.
Why use it?
It helps prevent interfaces from looking generic or copied from common software templates.

Skill for Claude CodeCodex

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/artttj/rapid-stack/design
Any agent
npx skills add artttj/rapid-stack --skill design
Clone the repo
git clone --depth 1 https://github.com/artttj/rapid-stack

Made for: Claude Code, Codex.

Per session 34 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,286 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.

ModelPer sessionOnce invoked
Fable 5 $0.00034 $0.02286
Opus 5 $0.00017 $0.01143
Sonnet 5 $0.00007 $0.00457
Haiku 4.5 $0.00003 $0.00229

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

Security

Grade A, and why

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

.opencode/skills/design/SKILL.md · 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.

Design Principles

Core philosophy: Every interface should look designed by a team that obsesses over 1-pixel differences. Not stripped, crafted. And designed for its specific context.

Avoid AI Sameness

AI-generated UIs have a recognizable "median of the internet" feel. Polished but generic, like everything was designed by the same committee. Break out of that by making deliberate choices instead of reaching for defaults.

AI default patterns to actively avoid:

AI default Why it happens Do this instead
Indigo/purple gradients Tailwind's bg-indigo-500 saturated training data Choose an accent color that fits the product's emotional job
Inter or system fonts everywhere Statistically safest choice Pick typography that matches the product personality (see Choose Typography below)
Three-column icon grid Every SaaS landing page template uses this Vary card layouts by content type. Metric cards, feature cards, and testimonial cards should look different from each other
Centered hero + CTA button The default starting point for every landing page Consider what the user actually needs first. Maybe it's a dense dashboard, a split layout, or content-forward with no hero at all
Uniform border-radius on everything rounded-lg applied without thinking Pick a radius system and vary it by component role (sharp for data, softer for interactive)
White/light gray background + subtle shadow cards The safest possible surface treatment Commit to a depth strategy that matches the product (see Depth Strategy below)
Decorative gradients on hero sections Looks "modern" without communicating anything If using gradients, make them functional (show hierarchy, direct attention) not decorative

Read the full file on GitHub · 204 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. 2d ago First seen · 204 lines · 34 tokens per session scan A 47c83007bc96

Subscribe to this mod's changes

design is a skill published in the GitHub repository artttj/rapid-stack (2 stars, last pushed 1mo ago), licensed MIT. It adds 34 tokens to every session and 2,286 once invoked, about $0.0002 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-31.

Related

Other skills, from other repositories

plannotator-visual-explainer

Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts. Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to…

backnotprop/plannotator · 78 tokens

plannotator-annotate

Open Plannotator's annotation UI for a file, folder, or URL, then address the returned annotations.

backnotprop/plannotator · 29 tokens

scientific-schematics

Create publication-quality scientific diagrams using Nano Banana 2 AI with smart iterative refinement. Uses Gemini 3.1 Pro Preview for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways…

xintaofei/codeg · 68 tokens

visual-qa

MUST USE after building/changing any UI or when asked whether a page, component, or TUI looks right. Rigorous visual QA across web/page, terminal, and paginated-document surfaces. Prefer browser:control-in-app-browser for unauthenticated browser/page QA in Codex, then Playwright/agent-browser/dev-browser. Captures…

code-yeongyu/oh-my-openagent · 161 tokens

frontend

MUST USE for frontend/web UI/UX/visual work: building, styling, redesigning pages/components, React setup, performance audits, visual QA, taste, and polish. Routes four rulesets: design taste router and brand references; perfection for Playwright/Chromium Lighthouse/Core Web Vitals; ui-ux-db palettes/fonts/guidelines…

code-yeongyu/oh-my-openagent · 183 tokens

ui-ux-pro-max

UI/UX design intelligence expert for web and mobile applications. Use when designing interfaces, selecting color palettes, typography, visual styles, building landing pages, dashboards, or reviewing code for UX issues. Covers 50+ design styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types…

shobcoder/shob · 104 tokens