Now reading: Claude Agent Skills specNEWSee anatomy

Turn any technical
post into a skill.

Skillify reads a URL and writes a Skill.md for Claude Code—or a single .html you can hand to teammates or drop into another LLM. Markdown stays the package format for agent skills; for a rich handoff page in the browser, see Thariq Shihipar’s HTML gallery. Bring your own key. We never see it.

Client-sideNo backend. No proxy.
BYO keyAnthropic · OpenAI · Google
Open outputSkill.md or HTML artifact
Works withAnthropic APIOpenAI APIAgents load .md skills · optional .html for handoffno SaaS · no telemetry · no lock-in
The converter

Paste a URL.
Get a skill.

The whole pipeline runs in your browser. We fetch the article, strip it to readable markdown, and ask your model to author either a packaged Skill.md or a self-contained .html for humans and LLM handoff beyond plain Markdown. Your API key never leaves this tab — there is no Skillify server for it to leave to.

skillify/converter/~ idlewaiting for input
Classic SKILL.md with YAML frontmatter for Claude Code. Prefer HTML artifact when the reader is a human or another LLM context window.
Sent only to your provider. Never persisted, never proxied.
Use a temporary or low-limit key. Browser apps cannot fully protect keys from malicious extensions, compromised dependencies, or XSS attacks.
untitled-skill.md·— lines · — bytes
# readme — what skillify will produce
01
YAML frontmatter
name, description, optional deps · sources · generated_by
02
When to use
disambiguating triggers · post-vs-not table
03
Core mental model
the one paragraph that unlocks everything
04
3–6 named patterns
code example + "use this for" bullets
05
Pitfalls
bad/good code pairs · ordering rules
06
Reference
compact lookup table of APIs & flags
07
HTML artifact mode
Optional single .html for teammates and pasted LLM context
Idle. Fill in the form and hit run.0 tokens·0.0s
Pipeline

Four passes,
one artifact.

Each step runs locally. You end with either Markdown for agent packages or HTML for shareable, skimmable handoffs. No upload step, no headless browser farm — open devtools and watch every byte.

01   FETCH  ·  ~200ms

Browser-side fetch

A CORS-permissive reader returns the page as plain markdown. We never see the request.

GET
02   EXTRACT  ·  ~50ms

Strip the chrome

Drop nav, ads, comments, tracking scripts. Keep headings, prose, code fences, tables.

03   DISTILL  ·  ~12s

Author the skill, not a summary

A tuned system prompt asks your model for structured output—not a recap. In Skill.md mode that's YAML + sections; in .html mode it's a navigable page you can ship to people or LLMs.

04   SAVE

Save or share

Download Skill.md into skills/, or save .html for browsers and LLM context—your choice in the converter.

SKILL.md
Anatomy of a skill

What every field
needs to do.

A Claude Agent Skill is a directory anchored by a Skill.md file. The description is what the router reads. The body is what Claude reads when it loads you. Skillify can also emit a standalone .html artifact for teams when a browser-first page reads better than a long Markdown file.

name:

Title Cased. Max 64 chars.

Human-readable, no quotes. Folder name must match exactly — e.g. CSS Scroll Animations.

description:

One sentence. ≤ 200 chars. Action-shaped.

Starts with a verb. Names the exact APIs and situation. The router reads only this to decide whether to load you.

dependencies:

Optional. Packages the Skill needs.

Include only if the post covers code requiring specific packages — e.g. python>=3.8, pandas>=1.5. Omit entirely otherwise.

sources:

Canonical URLs you scraped.

One YAML list entry per page, primary first — same strings as the source URLs. Lets you trace the Skill back to the originals.

generated_by:

Provenance for Skillify output.

Always https://getskillify.dev when this file was produced here.

## Overview

What this Skill does and when to reach for it.

One short paragraph. No marketing. Sets the scope so Claude knows exactly what this Skill covers.

## When to use

Concrete triggers + negative examples.

Bullet list of situations this Skill applies to. Include 1–2 "do NOT use" cases — they prevent mis-routing.

## Key patterns

3–5 named recipes with code.

Each subsection: one-line description, fenced code example faithful to source, "Use this for:" list.

## Pitfalls

2–4 footguns, bad/good pairs.

Every API has gotchas. Bad/good code pairs are worth more than prose warnings.

Skill.mdUTF-8·md
---name: CSS Scroll Animationsdescription: Build scroll-driven CSSanimations using animation-timeline,view() and scroll() without JS.dependencies: # omit if not neededsources: - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations - https://caniuse.com/css-scroll-driven-animationsgenerated_by: https://getskillify.dev--- # CSS Scroll Animations Skill ## Overview Use this Skill when implementing scroll-scrubbedUI effects without JavaScript. Add @supportsguard for progressive enhancement. ## When to use  Fade/slide elements on scroll entry Sticky header that transforms on scroll NOT: time-based animations, IE support ## Key patterns ### Fade on entryanimation-timeline: view()animation-range: entry 0% cover 30% ## Pitfalls  animation shorthand resets animation-timeline to auto declare timeline after the shorthand.
Trust model

Your key,
your problem. Literally.

Skillify is a static page. There is no Skillify backend, no analytics endpoint, no log pipeline. Two outbound calls happen: one to r.jina.ai (the URL reader) and one to your model provider.

What we promise

  • Key never leaves the tab. It's used once, in-memory, to call your provider. Not stored, not echoed, not sent anywhere except the provider's own API.
  • No Skillify server. The page is HTML + JS, served as a static asset. There is nothing for us to log, breach, or subpoena.
  • Verifiable. Open devtools → Network. Run the converter. You'll see one call to r.jina.ai and one call to your model. That's the entire surface area.
  • Output is yours. Markdown skills and HTML artifacts are plain files you own. MIT-licensed. No watermarks, no required attribution.
  • r.jina.ai receives your URL. It does not receive your API key, but it does see the URL you submit. Do not enter private, signed, or authentication-gated URLs.
  • Generated output is untrusted until reviewed. A malicious source page may attempt to influence the generated Skill.md or HTML. Skillify scans output for suspicious content, but always review before running a skill in an agent or sharing HTML with others.
network · skillify live trace
GETr.jina.ai/https://...200182ms
POSTapi.anthropic.com/v1/messages20011.4s
— end of trace · 2 requests · 0 to skillify —
Engineers ask

FAQ.

Anything not covered here, the answer is in the page source. The repo is the page.

01Why a skill instead of just a system prompt?+
Skills are scoped. They're loaded by a router only when relevant, so you can stack dozens without blowing up your context window. A system prompt that contains every technique you'd ever want is a system prompt that no longer steers reliably.
02How is this different from feeding the URL straight into Claude?+
The output of “summarize this post” is a summary. The output of Skillify is a skill — a file with the right shape that an agent can reuse next month, next year, in a context it's never seen, against a problem the post never explicitly addressed.
03What providers and models work?+
Anthropic (Opus 4.7, Sonnet 4.6, Haiku 4.5), OpenAI (gpt-5.5, gpt-5, gpt-4.1, gpt-4o, o3, o4-mini, o1 and their variants), Google (Gemini 3.1 Pro / 3 Flash / 3.1 Flash-Lite previews, plus stable gemini-2.5-pro, gemini-2.5-flash, gemini-2.5-flash-lite). Any model with a 100k+ context window produces a solid skill; nano/mini/lite variants are faster but flatter.
04Can it handle paywalled or auth-gated content?+
No. Skillify reads what the public web sees. If a post is behind a login, paste it into a gist and point Skillify at the raw URL.
05What about CORS?+
We use a public read-only reader at r.jina.ai that returns clean markdown for any URL. It only ever sees URLs, never your API key. If you'd rather not use it, fork the page and route fetches through your own reader.
06Where does my key actually go?+
Straight to api.anthropic.com/v1/messages or api.openai.com/v1/chat/completions, with the anthropic-dangerous-direct-browser-access header where required. We do not proxy or intercept.
07Can I edit the system prompt?+
Yes — it's all in the page source. Fork it. The repo is the page. View source, find the SYS_PROMPT constant, change it.
08Why both Markdown and HTML?+
Skill.md is what Claude Code packages as an on-demand agent skill—YAML frontmatter, patterns, pitfalls. A single .html file is better when the audience is humans skimming in a browser, or when you want to paste rich context into another LLM chat. Skillify implements both so you pick the right surface.
Ready

Distill your
first skill in ~12s.

Bring a URL, bring a key. Walk away with a Skill.md or a handoff-ready HTML file.