Embed the Claude Skills Browser
One JavaScript tag. A searchable directory of Claude Code skills on your page. No signup, no key, no rate limit — loads the same directory as claude-skills-browser-ashen.vercel.app.
Copy-paste snippet
<script src="https://claude-skills-browser-ashen.vercel.app/embed.js" async></script>Drop it anywhere in your HTML — tutorial site, blog post, docs page, README rendered as HTML. The widget appears right where the tag sits.
Live preview
Configuration
| Attribute | Default | What it does |
|---|---|---|
data-height | 680 | Iframe height in pixels (min 240). |
data-theme | auto | light, dark, or auto. |
data-target | (inline) | CSS selector. Widget mounts inside that element instead of inline. |
data-branding | show | Set to hide to remove the "Powered by" footer. |
Example: target a sidebar container
<aside id="skills-sidebar"></aside>
<script
src="https://claude-skills-browser-ashen.vercel.app/embed.js"
data-target="#skills-sidebar"
data-height="520"
async
></script>FAQ
Why would I embed this?
If you maintain a Claude Code tutorial, an awesome-list, or a developer blog covering Anthropic tooling, embedding a live skill directory beats maintaining a static list. The embed always reflects the current catalog.
Is it free?
Yes — no signup, no API key, no rate limit, no paid tier.
Can I customize it?
Yes — see configuration above. data-height, data-theme, data-target, and data-branding are supported.
Does this work on Notion / Substack / Medium?
Platforms that allow raw <script> tags: yes. Substack and Medium strip scripts; link to the full directory from those instead.
How often is the skill catalog updated?
The catalog is content-driven on the parent site. When new skills are added or updated there, every embed picks them up on the next page load — no widget redeploy required.