SuperAPI AI Directory

note-draft

Writing & research

View repository

Updated 10-15 16:51

About this skill

note-draft

Specify a Markdown file and header image to save an article as a draft on note.com. Images in the body (screenshots, etc.) can also be uploaded automatically.

Trigger

Japanese:

  • "Post to note"
  • "Save the article as a draft on note.com"
  • "Upload this article to note"
  • "Post Markdown to note"

English:

  • "Post to note.com"
  • "Save article as draft on note"
  • "Upload this article to note.com"

Initial setup

The following setup is required the first time this skill is run.

1. Installing dependencies

cd "$SKILL_DIR" && npm install

2. Installing the Playwright browser

npx playwright install --with-deps chromium

3. Setting environment variables

$SKILL_DIR/.env Create a file and set the following:

NOTE_EMAIL=your-email@example.com
NOTE_PASSWORD=your-password
NOTE_USERNAME=your-note-username

NOTE_USERNAME is your note.com profile URL (https://note.com/USERNAME) part of the USERNAME.

Usage

Pre-posting confirmation flow

Before executing a post, perform the following checks and confirmations. Items the user has already specified in a command or message can be skipped.

1. Detecting body images (automatic determination):

Read the article file and check whether the body contains ![alt](path) format image references.

  • Images present → Playwright mode is used. Image paths need to be resolved
  • No images → Fast posting via API mode. No additional confirmation needed

2. Resolving image paths (in Playwright mode):

Check whether the body image path (e.g. /images/media/foo/bar.png) can be resolved to an actual file.

Automatic estimation logic:

  • If the article file path contains /content/ → use public/ of the same project as the base
  • Front matter image path to /images/ is included → use the directory before it as the base

If automatic estimation is not possible (non-standard project structure, etc.), confirm with AskUserQuestion:

  • "Which directory contains the image files in the body?"
  • → --image-base pass to the option

3. Confirming the eyecatch image:

If the image path is not specified with --image or front matter image , confirm with AskUserQuestion:

  • Options: "Post without an image" "Specify an image path"

Operation modes

The script automatically detects image references (![alt](path)) in the body and selects the appropriate mode.

Mode Condition Features
API mode No images in body Fast and lightweight. Post directly via REST API
Playwright mode Images in body Automatically operate the note.com editor to upload images

Post commands

Basic (automatic mode selection):

cd "$SKILL_DIR" && node scripts/publish.mjs <path/to/article.md>

Explicitly specify a header image:

cd "$SKILL_DIR" && node scripts/publish.mjs <path/to/article.md> --image <path/to/header.jpg>

Update an existing draft (in Playwright mode):

cd "$SKILL_DIR" && node scripts/publish.mjs <path/to/article.md> --draft-url <editor-url>

Post in API mode ignoring body images:

cd "$SKILL_DIR" && node scripts/publish.mjs <path/to/article.md> --no-images

Explicitly specify the base directory for body images:

cd "$SKILL_DIR" && node scripts/publish.mjs <path/to/article.md> --image-base <path/to/public>

※ Articles are always saved as drafts.

Front matter

You can specify the following in the front matter of a Markdown file:

---
title: "記事タイトル"
tags:
  - AI
  - プログラミング
image: ./header.png
---
  • title: Article title (if unspecified, the h1 in the body is used)
  • tags: Tags (array) — set as hashtags when integrated with the note-publish skill
  • image: Relative path to the header image

Body image path resolution

In Playwright mode, image paths in the body (e.g., /images/media/foo/bar.png) must be converted to actual file paths.

Automatic detection: Automatically detects the Next.js project structure (content/ + public/). Manual specification: --image-base You can specify the base directory with the option.

Output

On success (API mode)

✓ 記事を下書き保存しました
  URL: https://note.com/username/n/n1a2b3c4d5e6
  記事ID: 12345678

On success (Playwright mode)

✓ 記事を下書き保存しました
  URL: https://note.com/username/n/n1a2b3c4d5e6
  Editor: https://editor.note.com/notes/n1a2b3c4d5e6/edit/

On failure

✗ 記事の投稿に失敗しました
  エラー: 401 Unauthorized - Cookieが期限切れです

Integration

To publish or set hashtags after posting a draft, use the note-publish skill:

  • "Publish this article" → the note-publish skill is launched
  • You can pass the output URL or article key to note-publish

To handle everything from posting to publishing in one go, use the note-automation skill.

Troubleshooting

  • Login failure: Check that NOTE_EMAIL and NOTE_PASSWORD are correct
  • Cookie expired: It will automatically attempt to log in again. If it fails, .env Check the credentials for
  • Image upload failure: Only JPEG, PNG, and GIF are supported. Use a file of 10MB or less
  • Playwright not installed: npx playwright install --with-deps chromium Please run
  • Body image path not found: --image-base Explicitly specify the image directory with
  • Out of capacity (Playwright mode): Loading the note.com editor may take time. Please run it again