agentmods.dev

design-plan

design-plan is a skill for Claude Code, Codex from Dannykkh/skill-olympus. It costs 108 tokens per session (10,131 once invoked), scanned A, original, MIT.

A design-system planning and implementation guide for frontend projects. A design system is a shared set of visual rules, reusable components, and accessibility practices for building consistent user interfaces.

In plain words
What is it for?
Use it to define colors, typography, spacing, and shadows; organize component libraries; set up theming; document components; and apply WCAG accessibility patterns.
Why use it?
It helps teams make interface decisions consistent across screens and contributors. It also provides guidance for accessibility and alternate themes such as dark mode.

Skill for Claude CodeCodex

Written for Claude Code and Codex: shipped in a Claude Code plugin, but also agents/openai.yaml present. Also seen: reads .claude/ paths; reads ~/.codex paths; mentions Codex.

Part of the skill-olympus plugin — 101 skills, 7 commands, 5 MCP servers shipped together

not rated 7repo changed 19d ago A scan SkillSpector: pass 108 tokens original MIT

Good fit Use it to define colors, typography, spacing, and shadows; organize component libraries; set up theming; document components; and apply WCAG accessibility patterns.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/dannykkh/skill-olympus/design-plan
View source ↗ Dannykkh/skill-olympus
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 Dannykkh/skill-olympus --skill design-plan
Clone the repo
git clone --depth 1 https://github.com/Dannykkh/skill-olympus

Made for: Claude Code, Codex.

Or install skill-olympus, the plugin that ships this one along with the rest of its 101 skills, 7 commands, 5 MCP servers.

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 design-plan

README.md
[![agentmods](https://agentmods.dev/badge/skills/dannykkh/skill-olympus/design-plan/github.svg)](https://agentmods.dev/skills/dannykkh/skill-olympus/design-plan)
Your own site
<a href="https://agentmods.dev/skills/dannykkh/skill-olympus/design-plan"><img src="https://agentmods.dev/badge/skills/dannykkh/skill-olympus/design-plan/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 design-plan

Your own site · 80×15
<a href="https://agentmods.dev/skills/dannykkh/skill-olympus/design-plan"><img src="https://agentmods.dev/badge/skills/dannykkh/skill-olympus/design-plan.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 108 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 10,131 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. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.00108 $0.10131
Opus 5.5 $0.00043 $0.04052
Sonnet 5.5 $0.00022 $0.02026
Haiku 4.5 $0.00011 $0.01013

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

Security

Grade A, and why

design-plan 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 19d ago.

The scan reads SKILL.md. This mod also ships 4 executable files (scripts/measure_web_motion.py, scripts/test_measure_web_motion.py, scripts/test_validate_experience_contract.py, …), 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.

skills/design-plan/SKILL.md · 616 lines

How it starts

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

Aphrodite — Experience-led Frontend Design

아프로디테는 색과 컴포넌트를 고르는 스킬이 아닙니다. 사용자가 이해하고 행동하고 신뢰하고 실패에서 회복하는 흐름을 아름다운 시각 언어로 구현하는 디자인 하네스입니다.

Quick Start

/aphrodite
/aphrodite --plan-only
/aphrodite --review-only
/aphrodite --benchmark <URL-or-file>
/aphrodite --product-design
/aphrodite --stitch

내부 소스 모듈 해석 계약 (필수)

frontend-design, mermaid-diagrams, ui-ux-auditor, web-design-guidelines는 모든 관련 실행에서 사용하는 핵심 source-only 내부 모듈입니다. design-system-starter, stitch, skill-evolve, autoresearch도 등록 스킬을 호출하는 것이 아니라, 해당 선택 경로가 실제로 요청됐을 때만 직접 읽는 조건부 source-only 모듈입니다. 각 이름에 대해 해석된 SKILL.md 절대경로를 MODULE_SKILL[name], 그 부모 디렉터리를 MODULE_ROOT[name]으로 기록합니다. 조건부 모듈은 다음 경계에서만 해석합니다.

  • design-system-starter: 사용자가 상세 디자인 시스템 scaffold를 명시적으로 요청했을 때
  • stitch: --stitch 또는 명시적인 Stitch 실행 요청이 있을 때, Phase 5 진입 직전
  • skill-evolve: Phase 7에서 전역 규칙 변경을 사용자가 명시적으로 승인한 뒤
  • autoresearch: 승인된 skill-evolve 절차가 대조 실험을 요구할 때

각 모듈을 처음 쓰기 전에 다음 순서로 해석합니다.

  1. 프로젝트 루트의 skills/<name>/SKILL.md가 실제 파일로 존재하고 frontmatter의 name이 정확히 <name>일 때만 그 절대경로를 사용합니다. 없거나 이름이 다르면 프로젝트의 다른 경로를 추측하지 않고 2번으로 갑니다.
  2. 없으면 현재 런타임의 활성 루트에서 정확한 skills/<name>/SKILL.md를 확인합니다. Codex는 $CODEX_HOME/skills(미설정이면 ~/.codex/skills), Claude와 Grok 호환 표면은 ~/.claude/skills, Antigravity는 ~/.gemini/antigravity-cli/skills입니다. 파일 존재와 frontmatter 이름이 모두 일치할 때만 사용하고, 아니면 3번으로 갑니다.
  3. 없으면 현재 런타임의 전역 SKILLS-CATALOG.md를 읽습니다. Codex는 $CODEX_HOME/SKILLS-CATALOG.md(미설정이면 ~/.codex/SKILLS-CATALOG.md), Claude와 Grok 호환 표면은 ~/.claude/SKILLS-CATALOG.md, Antigravity는 ~/.gemini/antigravity-cli/SKILLS-CATALOG.md입니다. 첫 번째 셀이 정확히 <name>인 행 (| <name> | ... | ... | <읽을 경로> |) 하나를 찾아 읽을 경로의 절대 SKILL.md를 그대로 사용합니다. 정확한 이름의 행이 0개이거나 2개 이상이면 해석 실패이며 다른 행이나 레지스트리 경로를 추측하지 않습니다.
  4. 해석한 파일의 존재를 확인하고 SKILL.md 전체를 읽은 뒤에만 그 모듈의 기준을 적용합니다. 참조 파일은 MODULE_ROOT[name]/references/..., 스크립트는 MODULE_ROOT[name]/scripts/...로부터 절대경로를 만듭니다.

이 과정은 모듈 읽기이지 스킬 호출이 아닙니다. /frontend-design, /mermaid-diagrams, /ui-ux-auditor, /web-design-guidelines, /design-system-starter, /stitch, /skill-evolve, /autoresearch를 호출하거나 스킬 레지스트리에 등록됐다고 가정하지 않습니다. 프로젝트·활성 루트 파일도 없고 카탈로그의 정확한 행·읽을 경로·필수 참조 중 하나라도 없으면 완료 증거의 Module Coverage에 경로와 이유를 기록하고 다음 한정된 native fallback을 사용합니다. fallback도 실행할 수 없는 검사는 NOT RUN, UNVERIFIED, 또는 BLOCKED로 남기며 통과로 바꾸지 않습니다. 요청되지 않은 조건부 모듈은 NOT REQUESTED이며 완료 누락으로 계산하지 않습니다.

Read the full file on GitHub · 616 lines

Files

What ships with it

12 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. 19d ago Changed · +19 lines 80dfa75601b5
  2. 25d ago Changed · +38 lines 304a10d3b122
  3. 1mo ago Changed · +33 lines 1b4cd57da1d0
  4. 1mo ago First seen · 526 lines · 108 tokens per session scan A 14621ad1e282

Subscribe to this mod's changes

design-plan is a skill published in the GitHub repository Dannykkh/skill-olympus (7 stars, last pushed 3d ago), licensed MIT. It adds 108 tokens to every session and 10,131 once invoked, about $0.0004 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-03.

CSS and stylingClaude CodeDesign and UXFrontendai-agentai-automationai-codingclaude-code-agentsclaude-code-hooks
Related

Other skills, from other repositories

polish

Frontend quick wins to wow effects (6 dimensions). Use when: "polish", "beautify", "improve", "wow", "improve design", "enhance", "quick wins".

claude-hangar/claude-hangar · 44 tokens

factory-design

Design-system discipline distilled across builds. Semantic token vocabulary (name intent, not palette position), CSS variables bridged into Tailwind, dark/light as a variable swap, single- vs two-layer token systems, component primitives as token consumers, when to promote a repeated utility cluster into a primitive…

nonlinear-xyz/factory-kit · 100 tokens

Role: Frontend Styler

Frontend styling: layout debugging, style consistency, CSS best practices for Svelte/SvelteKit.

JasonWarrenUK/goblin-mode · 26 tokens

Web: Review

Review an existing interface: collate its assets, publish an observation logger built for it, run passes that fix, write back, check and export, and end at sign-off.

JasonWarrenUK/goblin-mode · 39 tokens

Web: Design

Design a new interface from a scope document, a roadmap task or an interview: inventory, layout, a wireframe in the product's own tokens with numbered callouts, approval, then the principles check.

JasonWarrenUK/goblin-mode · 44 tokens

design-system

Context-aware design intelligence with curated CSV databases for styles, palettes, typography, UX rules, and wow effects. Provides industry-matched color palettes, font pairings, layout patterns, spacing/radius/shadow scales, gradient recipes, micro-animations, and accessibility-safe UX rules. Stack-agnostic — outputs…

claude-hangar/claude-hangar · 164 tokens