Web To Markdown
"Use ONLY when the user explicitly says: 'use the skill web-to-markdown ...' (or 'use a skill web-to-markdown ...'). Converts webpage URLs to clean Markdown by calling the local web2md CLI (Puppeteer + Readability), suitable for JS-rendered pages."
$ npx claude-code-templates@latest --skill="development/web-to-markdown" --yesRequires Claude Code. The command adds this skill to your project's .claudedirectory — nothing runs on ToolZip's servers.
What's inside this skill
Component source
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), 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:
- If available via npm: npm install -g web2md
- If from source: Clone the repository, then run npm install && npm run build && npm link
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.
Related Claude Code Skills
Code Reviewer
Comprehensive code review skill for TypeScript, JavaScript, Python, Swift, Kotlin, Go. Includes automated code analysis, best practice checking, security scanning, and review checklist generation. Use when reviewing pull requests, providing code feedback, identifying issues, or ensuring code quality standards.
Senior Frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
Senior Backend
Comprehensive backend development skill for building scalable backend systems using NodeJS, Express, Go, Python, Postgres, GraphQL, REST APIs. Includes API scaffolding, database optimization, security implementation, and performance tuning. Use when designing APIs, optimizing database queries, implementing business logic, handling authentication/authorization, or reviewing backend code.
Senior Architect
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.
Skill Creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Senior Fullstack
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.