skills.rest
rungchan2
rungchan2COMMUNITY
Explore all skills by this author →
GitHub

guide-maker

Generate structured Notion user guides from frontend feature code and UI elements.

2|Updated Dec 19, 2025
Search Tags:#automation#documentation#guide#notion#notion-api#visual-patterns
One-click install
npx skills add https://github.com/rungchan2/frontend-skills --skill guide-maker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: guide-maker
Source: https://github.com/rungchan2/frontend-skills/tree/main/skills/guide-maker
Command: npx skills add https://github.com/rungchan2/frontend-skills --skill guide-maker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Guide Maker automates the creation of clear, visually-rich Notion user guides from a project's frontend feature implementation so teams stop writing repetitive documentation by hand and reduce onboarding friction.

Core Features & Use Cases

  • Automated content extraction: Analyze frontend code and UI elements to identify buttons, forms, steps, and important states for documentation.
  • High-visibility formatting: Produce Notion pages that include tables, colored headings, code blocks, callouts, toggles (FAQ), and status tables following visual-patterns guidance.
  • Notion-first publishing: Create the page under a designated parent ID and add all blocks in a single bulk API call to ensure consistent rendering and minimal partial updates.
  • Use case: Turn the "Place" feature implementation into a step-by-step Notion user manual with screenshots, tips, and an FAQ ready for product or support teams.

Quick Start

Create a Notion user guide for the Place feature by analyzing the app/ folder and publish it under parent page ID 0656783731824d52aa4ac9523521bd14 using the connected Notion MCP.

Frequently Asked Questions about guide-maker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate Notion user guide generation from frontend code?▼

Notion user guide generation works by analyzing frontend feature code and UI elements to extract steps, controls, and visual patterns. It uses a connected Notion MCP and a parent page ID to patch all content blocks atomically in a single bulk API call, ensuring consistent rendering.

What do I need to connect to the Notion API to generate documentation automatically?▼

To generate documentation automatically, you need a connected Notion MCP and a designated parent page ID. These allow the tool to authenticate and append the generated guide blocks directly into your Notion workspace atomically.

Can I extract UI elements and visual patterns from my app code to create Notion documentation?▼

Yes, you can extract UI elements and visual patterns from app code to create Notion documentation. The Skill analyzes frontend feature implementations to identify buttons, forms, steps, and states, formatting them into Notion pages with tables, callouts, and toggles.

How to publish structured Notion pages with tables and FAQs in a single API call?▼

Publishing structured Notion pages with tables and FAQs in a single API call requires batching all blocks and patching them atomically. The Skill applies this method to create the page and its content simultaneously under a parent page ID, avoiding partial updates.

Does the Notion API support atomic block updates for automated documentation?▼

Yes, the Notion API supports atomic block updates for automated documentation through a single bulk API call. This ensures minimal partial updates and consistent rendering when patching all page blocks and visual patterns at once.

Related Skills

Explore More Content & Communication Skills→
changgengluchanggenglu

notion-mcp-handler

Resolve Notion MCP API validation and schema errors during page creation.

Community
Advanced
ilove323ilove323

kb-article

Convert resolved support tickets into structured knowledge base article drafts.

Community
Intermediate
wepn13232wepn13232
7

element-plus

Index Element Plus component documentation and map keywords to API guidance.

Community
Basic
neuron-oneneuron-one
25

instructor

Generate step-by-step manuals for manual tasks with TASK, WHY, TIME, STEP-BY-STEP, VERIFY, and ROLLBACK sections.

Community
Intermediate