Creating Bookmarklets Skill for Claude

Creates browser-executable JavaScript bookmarklets with strict formatting requirements. Use when users mention bookmarklets, browser utilities, dragging code to bookmarks bar, or need JavaScript that runs when clicked in the browser toolbar.

1k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

137

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/oaustegard/claude-skills --skill creating-bookmarklets

The instruction itself

23 sections, as written by the author

Bookmarklet Creation

Critical Requirements

Comment Style - ABSOLUTE

Use ONLY /* */ comments. NEVER use // comments.

Bookmark execution contexts fail with // style. Every comment must use block format.

/* ✓ Correct */
const x = 5; /* inline */

/* ✗ Wrong - breaks bookmarklets */
// const x = 5;
const y = 10; // inline

IIFE Wrapper

All bookmarklets must wrap in IIFE:

(function() {
  /* bookmarklet code */
})();

Protocol Prefix

All delivered bookmarklets must begin with javascript: protocol:

javascript:(function() {
  /* bookmarklet code */
})();

This makes the code immediately usable without requiring manual modification during installation.

Workflow

1. Generate Pretty-Printed Code

Create readable source with:

2-space indentation
Descriptive variable names
Block comments for key sections
Logical organization
Prepend javascript: protocol to the code

This version with javascript: prefix gets stored in GitHub and shown to users, making it ready for installation without manual modification.

2. Provide Installation

Default approach - reference installer:

Install: https://austegard.com/web-utilities/bookmarklet-installer.html

Installer handles:

Minification with Terser
URL encoding
Draggable link generation
GitHub repo integration

Alternative - generate link programmatically:

Use Terser.js to create installable link if requested:

async function createBookmarkletLink(code, title) {
  const minified = await Terser.minify(code);
  const encoded = encodeURIComponent(minified.code).replace(/'/g, "%27");
  return `<a href="javascript:${encoded}">${title}</a>`;
}

Requires: <script src="https://cdn.jsdelivr.net/npm/terser/dist/bundle.min.js"></script>

3. Deliverables

Always provide:

Pretty-printed source code with javascript: protocol prepended
Installation method (installer link or generated link)
Brief description of functionality
Usage instructions

The code should be delivered in a format ready for direct use - users should be able to copy the entire code block (including javascript:) without modification.

Code Standards

Error Handling

(function() {
  try {
    /* main logic */
  } catch (error) {
    console.error('Bookmarklet error:', error);
    alert('Operation failed: ' + error.message);
  }
})();

Console Logging

Include debug traces by default:

console.log('Bookmarklet: Starting');
/* operations */
console.log('Bookmarklet: Complete');

User Feedback

/* Success */
alert('✓ Content copied to clipboard');

/* Error */
alert('✗ Failed to access clipboard');

Common Patterns

DOM Manipulation

(function() {
  const element = document.querySelector('.target');
  if (!element) {
    alert('Element not found');
    return;
  }
  /* manipulate element */
})();

Data Extraction

(function() {
  const data = Array.from(document.querySelectorAll('.item'))
    .map(item => ({
      title: item.querySelector('.title')?.textContent.trim(),
      value: item.querySelector('.value')?.textContent.trim()
    }));
  
  console.log('Extracted:', data);
})();

Clipboard Operations

(function() {
  const text = 'content to copy';
  navigator.clipboard.writeText(text)
    .then(() => alert('✓ Copied'))
    .catch(err => {
      console.error('Clipboard error:', err);
      alert('✗ Copy failed');
    });
})();

Dynamic Library Loading

(function() {
  if (typeof someLibrary === 'undefined') {
    const script = document.createElement('script');
    script.src = 'https://cdn.example.com/library.js';
    script.onload = function() {
      /* proceed with logic */
    };
    document.head.appendChild(script);
  }
})();

Browser Compatibility

Provide fallbacks for unsupported features:

if (!navigator.clipboard) {
  alert('Clipboard API not supported');
  return;
}

Constraints

Cannot use:

External files (CSS, images) without embedding
Build tools or preprocessing
// style comments

Can use:

Fetch API
localStorage/sessionStorage
Modern browser APIs
CDN libraries (loaded dynamically)

Testing

Before delivering:

Verify no // comments exist
Test in browser console wrapped in IIFE
Check error handling with missing DOM elements
Verify user feedback for all paths

Example Output

javascript:(function() {
  /* Pretty-printed bookmarklet code */
})();

Install: https://austegard.com/web-utilities/bookmarklet-installer.html

Extracts all links from current page and copies to clipboard as markdown list. Works on any webpage.

GitHub Storage

User repository: https://github.com/oaustegard/bookmarklets

Pretty-printed format matches storage requirements. Installer loads directly from this repo.

Other skills for the same job

different authors, same section of the catalogue

Python Executor

by ComeOnOliver

×1

Execute Python code in a safe sandboxed environment via [inference.sh](https://inference.sh). Pre-installed: NumPy, Pandas, Matplotlib, requests, BeautifulSoup, Selenium, Playwright, MoviePy, Pillow, OpenCV, trimesh, and 100+ more libraries. Use for: data processing, web scraping, image manipulation, video creation, 3D model processing, PDF generation, API calls, automation scripts. Triggers: python, execute code, run script, web scraping, data analysis, image processing, video editing, 3D models, automation, pandas, matplotlib

Upgrade browser versions (Chrome or Firefox) in the Flutter Web Engine and/or Framework tests. Use when asked to roll or upgrade Chrome or Firefox to a newer version.

Migrate PowerToys module UI tests from the legacy WinAppDriver/Selenium harness (Microsoft.PowerToys.UITest) to the new winappcli-based harness (Microsoft.PowerToys.UITest.Next). Use when asked to port/convert/rewrite/modernize a module's UI tests to the .Next framework, create a new [Module].UITests.Next project alongside existing legacy tests, or stand up brand-new winappcli UI tests for a module that has none by reading its human test sign-off markdown. Covers the API mapping (By/Element/Session/UITestBase, KeyboardHelper/MouseHelper/ClipboardHelper), project/csproj scaffolding, naming rules, common PowerToys test recipes (toggle a module, read an activation shortcut, fire a global hotkey, inspect the clipboard, discover overlay/editor windows), build/run validation, and CI-stability hardening for fewer CI iterations. Keywords: UI test, UITests, UITestAutomation.Next, winappcli, WinAppDriver, Selenium, migrate, port, modernize, .Next, MSTest, CI stability, flaky test, stabilize on CI.

32k tokens

Open Source

by browser-use

> Documentation reference for writing Python code using the browser-use open-source library. Use this skill whenever the user needs help with Agent, Browser, or Tools configuration, is writing code that imports from browser_use, asks about @sandbox deployment, supported LLM models, Actor API, custom tools, lifecycle hooks, MCP server setup, or monitoring/observability with Laminar or OpenLIT. Also trigger for questions about browser-use installation, prompting strategies, or sensitive data handling. Do NOT use this for Cloud API/SDK usage or pricing — use the cloud skill instead. Do NOT use this for directly automating a browser via CLI commands — use the browser-use skill instead.

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

Use the browse CLI for Browserbase browser automation, Browserbase cloud APIs, Browserbase Functions, templates, web fetch/search, diagnostics, and Browse.sh skill discovery/installation. Use when the user asks to navigate pages, inspect browser state, run local or remote browser sessions, manage Browserbase resources, call Browserbase Functions, browse or scaffold Browserbase templates, fetch or search web content, diagnose browse setup, find or install a skill for a website task, discover site-specific Browse.sh skills, or install/refresh this browse skill.

Development workflows for the playwright-cli repository. Use when the user asks about rolling dependencies, releasing, or other repo maintenance tasks.

2k tokens

How to use it

Copy the folder

Take oaustegard/creating-bookmarklets from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.