What is 7onic-design?

A guided workflow for building pages with the 7onic Design System, a collection of reusable interface components and design rules. It finds the right components and design values, then checks the generated code.

Use it to turn requests such as a dashboard or pricing page into validated 7onic code. It can handle English, Japanese, and Korean requests.

It reduces the risk of guessed component options, incorrect styling, and unvalidated interface code. It also stops rather than improvising when the required 7onic tools are unavailable.

7onic-design — Skill for Claude Code by itonys/7onic

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 itonys/7onic --skill 7onic-design

Clone the repo

git clone --depth 1 https://github.com/itonys/7onic

Made for: Claude Code.

Or install 7onic-design, the plugin that ships this one along with the rest of its 2 skills, 1 agent.

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/itonys/7onic/7onic-design/github.svg)](https://agentmods.dev/skills/itonys/7onic/7onic-design)

Your own site

<a href="https://agentmods.dev/skills/itonys/7onic/7onic-design"><img src="https://agentmods.dev/badge/skills/itonys/7onic/7onic-design/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/itonys/7onic/7onic-design"><img src="https://agentmods.dev/badge/skills/itonys/7onic/7onic-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

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

When invoked 770 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.

Model	Per session	Once invoked
Fable 5.1	$0.00068	$0.00770
Opus 5.5	$0.00027	$0.00308
Sonnet 5.5	$0.00014	$0.00154
Haiku 4.5	$0.00007	$0.00077

Measured 7d ago against content hash 08bf4457c587, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

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

ai-kit/skills/7onic-design/SKILL.md · 71 lines

How it starts

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

7onic Design — guided, validated UI building

Turn a request ("build a settings page", "SaaSダッシュボード", "가격 페이지") into token-accurate 7onic code. This skill is an orchestrator: the knowledge lives in the 7onic MCP server tools — your job is to call them in the right order and refuse to hand over unvalidated code.

If the 7onic-design MCP tools are not available, stop and have the user install the plugin (claude plugin install 7onic-design@7onic) or wire the server manually — do not improvise from memory.

Step 0 — Scope the request

Break the request into screens/sections and list them back in the user's language. For a multi-screen request, confirm the breakdown before writing code (e.g. dashboard → layout shell / metric row / chart panel / table). For a single component or section, skip the confirmation and go.

Step 1 — Components first

For every UI element, discover before you write:

list_components with a natural-language query (en/ja/ko all fine) — prefer a 7onic component over any hand-rolled HTML.
get_component for props/variants/sizes of each component you will use — never guess a prop name or enum value.
get_component_examples and copy the import lines exactly — named exports only, charts from @7onic-ui/react/chart.

Step 2 — Tokens for everything visual

search_tokens / get_token for colors, spacing, typography, shadows. Token NAMES are the API; values are user-configurable — never hardcode.
About to write any raw value (hex color, px size, ms duration)? Call suggest_tokens first. If it returns an exact token, use the token class. If not, it returns a user-confirmation prompt — relay that prompt and wait; never bypass tokens silently.
Semantic colors theme-switch automatically: no dark: prefixes. Typography tokens pair font-size with line-height: no leading-*.

Step 3 — Layout

get_layout_pattern for the structural skeleton — symmetric grids, reading column, section rhythm, element rows, inline groups. Grid system is 4/8/12 columns (mobile/tablet/desktop); icon+text rows always use items-center.

Read the full file on GitHub · 71 lines

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.

7d ago First seen · 71 lines · 68 tokens per session scan A 08bf4457c587

Subscribe to this mod's changes

7onic-design is a skill published in the GitHub repository itonys/7onic (5 stars, last pushed 7d ago), licensed MIT. It adds 68 tokens to every session and 770 once invoked, about $0.0003 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-10-09.

CSS and styling Design and UX Frontend ai-optimized component-library dark-mode design-system design-tokens figma-sync

sigil-playbook

The Sigil Playbook codifies the small vocabulary of structural patterns that make any new page "just work." Originating from the Reticle design language (Dedalus monorepo), these 10 rules — 6 compositional moves + 4 supporting patterns — replace dozens of ad-hoc layout decisions.

Kevin-Liu-01/Sigil-UI · 4 tokens

sigil-polish

Design engineering principles for making Sigil interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it…

Kevin-Liu-01/Sigil-UI · 95 tokens

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

ui-components

UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.

yonatangross/orchestkit · 44 tokens

s2-docs

Look up Spectrum 2 (S2) component documentation, design guidelines, and usage patterns when building with React Spectrum or Spectrum Web Components. Use when the user mentions Spectrum, S2, React Spectrum, RSP, Spectrum Web Components, or SWC, or names a Spectrum component (Button, Picker, ComboBox, TextField…

adobe/spectrum-design-data · 91 tokens

better-design

Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating…

marvkr/better-design · 77 tokens