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 skills add rungchan2/frontend-skills --skill guide-makergit clone --depth 1 https://github.com/rungchan2/frontend-skillsWrote 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.
[](https://agentmods.dev/skills/rungchan2/frontend-skills/guide-maker)<a href="https://agentmods.dev/skills/rungchan2/frontend-skills/guide-maker"><img src="https://agentmods.dev/badge/skills/rungchan2/frontend-skills/guide-maker.svg" alt="Measured on agentmods" height="20"></a>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.00097 | $0.01469 |
| Opus 5 | $0.00048 | $0.00734 |
| Sonnet 5 | $0.00019 | $0.00294 |
| Haiku 4.5 | $0.00010 | $0.00147 |
Grade A, and why
guide-maker 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 8d 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 — 154 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Guide Maker
프로젝트 기능에 대한 가시성 높은 사용자 가이드를 Notion에 생성.
사전 요구사항
- Notion remote MCP 연결 (이 플러그인 설치 시 자동 등록됨)
- 최초 사용 시 Claude Code에서 OAuth 로그인 1회만 하면 됨 (별도 환경변수 불필요)
- 가이드를 작성할 부모 페이지가 본인 Notion workspace에 존재하고, 해당 integration이 그 페이지에 connection으로 추가되어 있어야 함
워크플로우
0. 부모 페이지 확보 (동적)
대화 시작 시 부모 페이지 ID를 다음 순서로 확보:
- 사용자가 메시지에 부모 페이지 URL/ID를 직접 제공했으면 → 그것 사용
- 아니면 Notion MCP의
search도구로 사용자가 말한 부모 페이지명을 검색해서 후보 제시 - 그래도 모호하면 사용자에게 명시적으로 묻기:
"가이드를 어느 Notion 페이지 아래에 만들까요? 페이지 URL이나 이름을 알려주세요."
❌ 금지: 페이지 ID를 하드코딩하거나 임의로 가정하기 ✅ 필수: 매 호출마다 사용자 컨텍스트에서 부모 페이지를 동적으로 결정
확보한 page_id는 이번 대화 turn에서만 변수로 보관, 스킬 내부 어디에도 영구 저장하지 않음.
Notion 페이지 URL에서 ID 추출:
https://www.notion.so/Workspace-abc123def456...
^^^^^^^^^^^^^^^
마지막 32자 = page_id (하이픈 추가하여 사용)
1. 기능 분석
해당 기능의 코드 분석 → 주요 버튼, 폼, 테이블, 상태값 파악
2. 콘텐츠 구조 설계
문서 구조에 맞춰 전체 블록 배열 설계 (페이지 위치, Part별 Step, 테이블, FAQ 등)
3. 한 번에 생성 (🚨 필수!)
Notion remote MCP는 표준 Notion API를 그대로 노출합니다. 일반적으로 다음 두 도구를 사용:
notion-create-pages(또는API-post-page): 새 페이지 생성notion-update-page/notion-patch-block-children(또는API-patch-block-children): 페이지에 자식 블록 추가
정확한 도구명은 MCP 클라이언트가 노출하는 이름을 따릅니다.
/mcp슬래시 메뉴에서 사용 가능한 도구명을 확인하세요.
전체 가이드는 단 한 번의 페이지 생성 + 한 번의 블록 추가로 완성:
1. create-page 호출
- parent: { page_id: <step 0에서 확보한 부모 페이지 ID> }
- properties.title: "📑 [기능명]"
→ 응답에서 새 페이지 id 획득
2. patch-block-children 호출
- block_id: 위에서 받은 새 페이지 id
- children: [전체 블록 배열 — Part 헤더, Step, divider, 테이블, FAQ 토글 모두 포함]
3. 사용자에게 URL 반환:
https://www.notion.so/<page_id에서 하이픈 제거>
❌ 금지: Step별/Part별로 나눠서 여러 번 API 호출 ✅ 필수: 전체 블록을 하나의 배열로 → 단 1회 API 호출
4. 완료
URL 전달: https://www.notion.so/[page_id_without_hyphens]
문서 구조 (필수)
## 페이지 위치
**[상위 메뉴]** → **[기능명]**
[이미지]
---
## [기능] 방법
### Step 1. [작업 제목]
[설명]
[이미지]
1. **'버튼명'**을 클릭합니다.
2. [동작]
💡 Tip: [정보]
---
### Step 2. ...
## [테이블명] 컬럼 설명
| 컬럼명 | 설명 |
|--------|------|
| ... | ... |
---
## [상태] 안내
| 상태 | 색상 | 설명 |
|------|------|------|
| ✅ 완료 | 🟢 초록 | ... |
| ⏳ 대기 | 🟡 노랑 | ... |
| ❌ 실패 | 🔴 빨강 | ... |
---
## 자주 묻는 질문
> Q: [질문]?
A: [답변]
What ships with it
3 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.
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.
- 8d ago First seen · 154 lines · 97 tokens per session scan A aa052f89f513
guide-maker is a skill published in the GitHub repository rungchan2/frontend-skills (2 stars, last pushed 4mo ago), licensed Apache-2.0. It adds 97 tokens to every session and 1,469 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-08-31.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
local-ai-agents
Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…
next-partial-prefetching-adoption
Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit Link prefetch={true} behavior, preserve existing prefetched UI with…
chronicle
Analyze Copilot session history for standup reports, usage tips, session search, and session reindexing. Use when the user asks for a standup, daily summary, usage tips, workflow recommendations, wants to search or find past sessions by keyword/file/PR, wants to reindex their session store, or asks about deleting…