agentmods.dev

frontend-design

frontend-design is a skill for Claude Code from Dannykkh/skill-olympus. It costs 92 tokens per session (9,456 once invoked), scanned A, original, MIT.

A frontend design and implementation guide for turning a visual design plan into a working web interface. It also provides fallback guidance when an official design plugin is unavailable.

In plain words
What is it for?
Use it to build and critique production-ready frontend pages from a design plan, including the supporting code and visual decisions.
Why use it?
It helps avoid generic-looking interfaces by making deliberate choices about the page’s subject, audience, palette, typography, and layout.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: mentions Claude Code; mentions Codex.

Part of the skill-olympus plugin — 95 skills, 6 commands, 42 agents shipped together

not rated 5repo yesterday A scan 92 tokens original MIT

Good fit Use it to build and critique production-ready frontend pages from a design…

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

Made for: Claude Code.

Or install skill-olympus, the plugin that ships this one along with the rest of its 95 skills, 6 commands, 42 agents.

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

README.md
[![agentmods](https://agentmods.dev/badge/skills/dannykkh/skill-olympus/frontend-design.svg)](https://agentmods.dev/skills/dannykkh/skill-olympus/frontend-design)
Your own site
<a href="https://agentmods.dev/skills/dannykkh/skill-olympus/frontend-design"><img src="https://agentmods.dev/badge/skills/dannykkh/skill-olympus/frontend-design.svg" alt="Measured on agentmods" height="20"></a>
Per session 92 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 9,456 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.00092 $0.09456
Opus 5 $0.00046 $0.04728
Sonnet 5 $0.00018 $0.01891
Haiku 4.5 $0.00009 $0.00946

Measured 3d ago against content hash 0f6c5dc3ec1d, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

frontend-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 2 executable files (scripts/select-diverse-palettes.js, scripts/select-diverse-palettes.test.js), 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/frontend-design/SKILL.md · 335 lines

How it starts

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

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

프레이밍: 템플릿 같은 시안을 이미 거절해 본 클라이언트를 받은 소규모 스튜디오의 디자인 리드로 작업한다. 이 브리프에 고유한 팔레트·타이포·레이아웃을 의도적으로 결정하고, 근거를 댈 수 있는 미학적 리스크를 정확히 하나 감수한다.

주제에 뿌리내리기 (Ground it in the subject): 브리프가 제품/주제를 못 박지 않았다면 디자인 전에 스스로 못 박는다 — 구체적 주제 1개, 오디언스, 페이지의 단일 임무를 선언. 고유한 선택은 주제의 세계(그 세계의 실물, 도구, 유물, 어휘)에서 나온다 — 색·폰트·구조·카피 전부에 해당하는 일반 원칙이다 (색상 유도는 Design Database 사용법 4번이 상세 절차). 사용자의 취향 기록·이전 디자인 정보가 있으면 힌트로 쓴다.

이식 출처: Claude 공식 frontend-design 플러그인 최신본 (2026-08-05, A/B/C 실험에서 승리한 조건 B의 코어 — docs/research/2026-08-05-deep-research-impeccable.md)

Source-only internal module resolution (mandatory)

이 스킬은 design-plan 하네스의 하위 모듈 또는 standalone 원본으로 실행될 수 있습니다. 관련 스킬 이름을 활성 slash command로 가정하지 말고 다음 계약을 따릅니다.

  1. 상위 하네스가 MODULE_SKILL[name]과 MODULE_ROOT[name]을 전달했으면 그 정확한 경로를 사용하고 다시 탐색하거나 호출하지 않습니다.
  2. standalone이면 실제로 필요한 모듈만 프로젝트의 skills/<name>/SKILL.md exact frontmatter → 현재 CLI 활성 루트(active skills root) → 전역 SKILLS-CATALOG.md exact row의 읽을 경로 순서로 해석합니다.
  3. 해석한 SKILL.md 전체를 읽고, 그 모듈의 참조·스크립트는 MODULE_ROOT[name] 기준으로 찾습니다. 이름만 언급하거나 레지스트리에 등록됐다고 가정하는 것은 실행으로 치지 않습니다.
  • design-system-starter는 사용자가 디자인 시스템 scaffold를 명시적으로 요청했을 때만 조건부로 읽습니다. 찾지 못하면 기존 DESIGN.md와 프로젝트 토큰만 사용하는 bounded fallback으로 진행하고 design-system-starter: NOT RUN을 남깁니다.
  • ui-ux-auditor와 web-design-guidelines 검증을 상위 하네스가 소유하면 구현물과 증거를 반환합니다. standalone이면 위 순서로 직접 읽어 실행합니다. 찾지 못하면 네이티브 접근성·반응형·테마 점검만 수행하고 해당 모듈을 NOT RUN으로 기록하며 PASS로 간주하지 않습니다.
  • Stitch 작업은 상위 design-plan이 해석한 stitch 어댑터가 소유합니다. 이 모듈은 Stitch 명령을 자체 라우팅하지 않습니다.

Design System First

Before making aesthetic choices, check if the project already has a design system:

  1. DESIGN.md — 디자인 정본(YAML 토큰 + 산문 근거), 색상·타이포·간격·컴포넌트 규칙
  2. design-system.md / design-tokens.json — 레거시 또는 파생 디자인 자산
  3. tailwind.config.* / theme.ts / CSS @theme·변수 — 기존 테마 설정 (Tailwind v4는 CSS-first @import "tailwindcss"+@theme이라 config 파일이 없을 수 있음; v3 JS config를 쓰면 @config로 명시 로드)

Read the full file on GitHub · 335 lines

Files

What ships with it

28 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. 3d ago First seen · 335 lines · 92 tokens per session scan A 0f6c5dc3ec1d

Subscribe to this mod's changes

frontend-design is a skill published in the GitHub repository Dannykkh/skill-olympus (5 stars, last pushed yesterday), licensed MIT. It adds 92 tokens to every session and 9,456 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-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

mcp-host-styling-integration

Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.

a5c-ai/babysitter · 44 tokens

moai-design-tools

Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.

modu-ai/moai-adk · 45 tokens

moai-ref-ui-polish

UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones. Agent-extending skill that amplifies…

modu-ai/moai-adk · 98 tokens