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.
npx agentmods add agents/dannykkh/skill-olympus/web-preview-guidegit clone --depth 1 https://github.com/Dannykkh/skill-olympusWhat 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.00052 | $0.04567 |
| Opus 5 | $0.00026 | $0.02284 |
| Sonnet 5 | $0.00010 | $0.00913 |
| Haiku 4.5 | $0.00005 | $0.00457 |
Grade A, and why
web-preview-guide 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.
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.
How it starts
The opening of the file, as written. The whole thing — 384 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web Preview Mode Development Guide (Legacy Reference)
현재 정본은 루트 AGENTS.md의 프론트엔드 가드레일과 프로젝트 DESIGN.md입니다.
이 문서는 과거 PreviewPanel 상세 흐름이 필요한 경우에만 참고합니다.
웹 프리뷰 모드(채팅 모드 + dev server + PreviewPanel)에서 개발할 때 아래 순서를 따릅니다.
사용자가 다른 순서를 명시적으로 요청하면 그에 따릅니다.
Phase 0: Design DNA (디자인 토큰 먼저)
100개 이상 화면에서 일관성을 유지하려면, 토큰 없이 바로 화면부터 시작하면 안 된다. 아토믹 단위의 디자인 DNA를 먼저 제작해야 한다.
젭마인 연동: claude-interview.md의 Category B(디자인 비전)에서 수집한 벤치마킹 URL, 톤/무드, 색상 선호가 있으면 그것을 입력으로 사용합니다. 젭마인은 "어떤 느낌을 원하는가"를 수집하고, 여기서는 그 레퍼런스의 실제 시각 요소(색상, 간격, 그림자)를 추출하여 토큰으로 만듭니다.
Step 0. 디자인 방향성 잡기 (리서치)
프로젝트의 산업/목적에 맞는 디자인 방향성을 검색해서 결정합니다.
0-1. 산업별 트렌드 검색:
WebSearch로 "{산업} website design trends 2025" 검색
→ 해당 산업에서 어떤 스타일이 주류인지 파악
→ 예: "SaaS dashboard design trends" / "뷰티 스파 웹사이트 디자인"
0-2. 경쟁사/벤치마킹 사이트 탐색:
WebSearch로 "{산업} best website examples" 검색
→ top 3~5개 사이트 URL 확보
→ Playwright로 각 사이트에 접속해서 스크린샷 자동 캡처:
browser_navigate → "{경쟁사 URL}"
browser_take_screenshot → "competitor-1.png"
0-3. 방향성 결정표 작성:
| 항목 | 리서치 방법 | 예시 |
|---|---|---|
| UI 스타일 | 검색 트렌드 + 경쟁사 분석 | Glassmorphism, Soft UI, Minimalism 등 |
| 컬러 무드 | 경쟁사 스크린샷에서 추출 | SaaS → 블루/퍼플, 헬스케어 → 그린/화이트 |
| 타이포그래피 | Google Fonts 트렌드 검색 | Pretendard + Inter, Noto Sans KR + Roboto |
| 레이아웃 패턴 | 경쟁사 공통 패턴 분석 | Hero-Centric, Feature Showcase, Dashboard |
| 안티패턴 | 산업별 부적절한 것 | 금융앱에 네온 컬러, AI 제품에 보라+핑크 그라디언트 |
참고: ui-ux-pro-max 스킬이 설치되어 있으면 --design-system 옵션으로 산업별 100개 규칙 기반 자동 생성 가능.
Step 1. 레퍼런스 수집 + 디자인 토큰 생성
1-1. 레퍼런스 이미지 수집 (3가지 경로):
| 경로 | 방법 |
|---|---|
| 사용자 제공 | 리뉴얼 대상, 영감 이미지를 직접 전달 |
| 자동 캡처 | Step 0에서 찾은 경쟁사/벤치마킹 사이트를 Playwright로 스크린샷 |
| 디자인 갤러리 검색 | WebSearch로 Dribbble, Behance, Awwwards에서 "{산업} UI" 검색 → 상위 결과 참고 |
# 자동 캡처 예시 (Playwright MCP)
browser_navigate → "https://경쟁사1.com"
browser_take_screenshot → fullPage: true, filename: "ref-competitor-1.png"
browser_navigate → "https://레퍼런스사이트.com"
browser_take_screenshot → fullPage: true, filename: "ref-inspiration-1.png"
1-2. 이미지 분석 → 토큰 생성:
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 · 384 lines · 52 tokens per session scan A 49c48577f010
web-preview-guide is an agent published in the GitHub repository Dannykkh/skill-olympus (5 stars, last pushed 2d ago), licensed MIT. It adds 52 tokens to every session and 4,567 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-08-31.
Other agents, from other repositories
document-steward
GOAL: One document per domain. Minimum tokens for maximum clarity.
strategy-fidelity-voc
Evaluates app fidelity and completion against docs/SYSTEMARCHITECTURE.md and domain references. Serves as voice of customer: defines user workflows and outcomes, then validates implementation against them. Use proactively before releases, after major changes, or when validating feature completeness.
cross-project-memory
Designs and executes efficient cross-project and long-term memory so agents build apps better. Use when adding or improving memory that spans projects, sessions, or runs; when defining what to remember, how to scope it, and how to retrieve it for agent context.
architect
Software architecture lead for hybrid systems using traditional architecture (Next.js + PostgreSQL) and AI-agent-supportive architecture (ruvector). Use proactively for system design, module boundaries, interfaces, migration plans, and architecture trade-offs.
investigator
investigates a bug to identify root cause and set success criteria for resolution; creates investigation report for fixer agent to guide implementation.
ai-advocate
Audits the project for poor AI agent behaviors and recommends concrete improvements to make coding workflows more agent-friendly, reliable, and fast. Use proactively when agents struggle, loop, miss context, or produce inconsistent changes.