web-to-markdown
The web-to-markdown skill converts webpage URLs to clean Markdown by invoking a locally installed web2md CLI tool, which uses Puppeteer browser automation and Readability extraction to handle JavaScript-rendered pages. Use this skill only when a user explicitly requests it by name (e.g., "use the skill web-to-markdown") and needs to extract and convert web content to structured Markdown, optionally with YAML frontmatter and support for interactive login flows.
git clone --depth 1 https://github.com/softaworks/agent-toolkit /tmp/web-to-markdown && cp -r /tmp/web-to-markdown/dist/plugins/web-to-markdown/skills/web-to-markdown ~/.claude/skills/web-to-markdownSKILL.md
# web-to-markdown
Convert web pages to clean Markdown by driving a locally installed browser (via `web2md`).
## Hard trigger gate (must enforce)
This skill MUST NOT be used unless the user explicitly wrote **exactly** a phrase like:
- `use the skill web-to-markdown ...`
- `use a skill web-to-markdown ...`
If the user did not explicitly request this skill by name, stop and ask them to re-issue the request including: `use the skill web-to-markdown`.
## What this skill does
- Handles JS-rendered pages (Puppeteer → user Chrome).
- Works best with Chromium-family browsers (Chrome/Chromium/Brave/Edge) via `puppeteer-core`.
- Extracts main content (Readability).
- Converts to Markdown (Turndown) with cleaned links and optional YAML frontmatter.
## Non-goals
- Do not use Playwright or other browser automation stacks; the mechanism is `web2md`.
## Inputs you should collect (ask only if missing)
- `url` (or a list of URLs)
- Output preference:
- Print to stdout (`--print`), OR
- Save to a file (`--out ./file.md`), OR
- Save to a directory (`--out ./some-dir/` to auto-name by page title)
- Optional rendering controls for tricky pages:
- `--chrome-path <path>` (if Chrome auto-detection fails)
- `--interactive` (show Chrome and pause so the user can complete human checks/login, then press Enter)
- `--wait-until load|domcontentloaded|networkidle0|networkidle2`
- `--wait-for '<css selector>'`
- `--wait-ms <milliseconds>`
- `--headful` (debug)
- `--no-sandbox` (sometimes required in containers/CI)
- `--user-data-dir <dir>` (login/session; use a dedicated profile directory)
## Workflow
1) Confirm the user explicitly invoked the skill (`use the skill web-to-markdown`).
2) Validate URL(s) start with `http://` or `https://`.
3) Ensure `web2md` is installed:
- Run: `command -v web2md`
- If missing, instruct the user to install it (assume the project exists at `~/workspace/softaworks/projects/web2md`):
- `cd ~/workspace/softaworks/projects/web2md && npm install && npm run build && npm link`
- Or: `cd ~/workspace/softaworks/projects/web2md && npm install && npm run build && npm install -g .`
4) Convert:
- Single URL → file:
- `web2md '<url>' --out ./page.md`
- Single URL → auto-named file in directory:
- `mkdir -p ./out && web2md '<url>' --out ./out/`
- Human verification / login walls (interactive):
- `mkdir -p ./out && web2md '<url>' --interactive --user-data-dir ./tmp/web2md-profile --out ./out/`
- Then: complete the check in the browser window and press Enter in the terminal to continue.
- Print to stdout:
- `web2md '<url>' --print`
- Multiple URLs (batch):
- Create output dir (e.g. `./out/`) then run one `web2md` command per URL using `--out ./out/`
5) Validate output:
- If writing files, verify they exist and are non-empty (e.g. `ls -la <path>` and `wc -c <path>`).
6) Return:
- The saved file path(s), or the Markdown (stdout mode).
## Defaults (recommended)
- For most pages: `--wait-until networkidle2`
- For heavy apps: start with `--wait-until domcontentloaded --wait-ms 2000`, then add `--wait-for 'main'` (or another stable selector) if needed.Refactor bloated AGENTS.md, CLAUDE.md, or similar agent instruction files to follow progressive disclosure principles. Splits monolithic files into organized, linked documentation.
Use this agent when you need to visualize UI concepts through ASCII mockups before implementation. Examples: <example>Context: User has an idea for a dashboard layout with data tables and charts. user: 'I want to create a dashboard that shows user analytics with a sidebar navigation, main content area with charts, and a data table below' assistant: 'I'll use the ascii-ui-mockup-generator agent to create multiple ASCII mockup variations for your dashboard concept.' <commentary>The user wants to visualize a UI concept, so use the ascii-ui-mockup-generator to create multiple ASCII representations they can choose from.</commentary></example> <example>Context: User is designing a form layout with multiple input fields. user: 'I need a contact form with name, email, message fields and a submit button' assistant: 'Let me use the ascii-ui-mockup-generator to create several ASCII mockup options for your contact form layout.' <commentary>Since the user needs to visualize form layouts, use the ascii-ui-mockup-generator to provide multiple ASCII design options.</commentary></example>
Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.
Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".
codebase-pattern-finder is a useful subagent_type for finding similar implementations, usage examples, or existing patterns that can be modeled after. It will give you concrete code examples based on what you're looking for! It's sorta like codebase-locator, but it will not only tell you the location of files, it will also give you code details!
Use when the user asks to run Codex CLI (codex exec, codex resume) or references OpenAI Codex for code analysis, refactoring, or automated editing. Uses GPT-5.2 by default for state-of-the-art software engineering.
Create a detailed implementation plan using Codex 5.2 with high reasoning
This skill should be used when creating a Claude Code slash command. Use when users ask to "create a command", "make a slash command", "add a command", or want to document a workflow as a reusable command. Essential for creating optimized, agent-executable slash commands with proper structure and best practices.