skill CX Codex

sketch · makenotion — Claude Code skill: what it does, how to install

Q: How to install sketch in Claude Code?

Run `npx skills add makenotion/notion-cookbook --skill sketch -a claude-code` in your terminal. This writes the configuration to `~/.claude/skills/sketch/SKILL.md`.

Q: What dependencies does sketch require?

It reads `node_modules/@notionhq/apps/skills/sketch/SKILL.md`, so `@notionhq/apps` must be installed in your project. If it is missing or tools fail, the model presents the architecture as plain text.

Renders an application workflow into a reviewable flow diagram. It helps when iterating on feature logic and architecture steps with the model.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add makenotion/notion-cookbook --skill sketch -a claude-code

Open on GitHub

What sketch does

The skill creates visual flowcharts during the planning phase of an app. When discussing architectural steps, the agent constructs a diagram you can inspect directly in chat. This keeps the design clear.

Behind the scenes, it reads node_modules/@notionhq/apps/skills/sketch/SKILL.md from your project root. Without @notionhq/apps in your project dependencies, the tool cannot draw diagrams. If dependencies are missing or the tool fails, the assistant prints the architecture in plain text instead.

What it helps with

render application workflows into reviewable flow diagrams
clarify scenario logic before writing code
fall back to plain text design when diagram tooling fails

Example prompts for the agent

Sketch the user registration workflow as a flow diagram
Map out the order processing logic so we can review the design

How to install sketch

1Skills CLI (Vercel)

npx skills add makenotion/notion-cookbook --skill sketch -a claude-code

2Manually: put the files in place

~/.claude/skills/sketch/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/sketch/

1Skills CLI (Vercel)

npx skills add makenotion/notion-cookbook --skill sketch -a codex

2Manually: put the files in place

.agents/skills/sketch/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add makenotion/notion-cookbook --skill sketch -a cursor

2Manually: put the files in place

.cursor/skills/sketch/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install makenotion/notion-cookbook sketch

2Manually: put the files in place

.github/skills/sketch/SKILL.md

1Skills CLI (Vercel)

npx skills add makenotion/notion-cookbook --skill sketch -a gemini-cli

2Platform CLI

gemini skills install https://github.com/makenotion/notion-cookbook --path apps/agents/skills/sketch

Manually: put the files in place

.devin/skills/sketch/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add makenotion/notion-cookbook --skill sketch -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about sketch

How to install sketch in Claude Code?

Run npx skills add makenotion/notion-cookbook --skill sketch -a claude-code in your terminal. This writes the configuration to ~/.claude/skills/sketch/SKILL.md.

What does the sketch skill do?

It visualizes proposed application workflows as reviewable flowcharts while you plan feature logic with the assistant.

What dependencies does sketch require?

It reads node_modules/@notionhq/apps/skills/sketch/SKILL.md, so @notionhq/apps must be installed in your project. If it is missing or tools fail, the model presents the architecture as plain text.

Source text

SKILL.md · MIT

---
name: sketch
description: Sketch an App workflow as a reviewable flow diagram when planning or iterating on its design with the user.
user-invocable: true
---

# App sketch

When planning or iterating on an App workflow design with the user, read
`node_modules/@notionhq/apps/skills/sketch/SKILL.md`.
Resolve this path relative to the App project root.
Follow the instructions in that file.

If the file is missing, install the project dependencies.
If it remains missing or the sketch tools fail, tell the user the sketch skill
is not available and present the design in text instead.

Similar skills

Everything for Design →

sketch by other authors comes first.

sketch Hermes Agent (adapted from gsd-build/get-shit-done) Generates 2-3 HTML mockup variants to compare design directions before you commit to production code. CX Codex +1 403installs sketch typeui.sh This skill defines a hand-drawn design system for AI-assisted UI work. Use it for component guidance with tokens, interaction states, and testable accessibility rules. CX Codex +1 2,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set20