creating-bookmarklets

Solid

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.

Web & Frontend 123 stars 5 forks Updated today MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
70
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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. ```javascript /* ✓ Correct */ const x = 5; /* inline */ /* ✗ Wrong - breaks bookmarklets */ // const x = 5; const y = 10; // inline ``` ### IIFE Wrapper All bookmarklets must wrap in IIFE: ```javascript (function() { /* bookmarklet code */ })(); ``` ### Protocol Prefix All delivered bookmarklets must begin with `javascript:` protocol: ```javascript 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...

Details

Author
oaustegard
Repository
oaustegard/claude-skills
Created
7 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

1,696 Updated 3 weeks ago
ComposioHQ
Web & Frontend Solid

artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

1,265 Updated 1 months ago
Prat011
Web & Frontend Solid

artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

23 Updated today
shajith003
Data & Documents Solid

pdfkit-generation

Generate professional PDFs with PDFKit in Node.js. Use when creating pitch decks, reports, or styled documents with AGNT branding. Covers large script handling, Unicode-safe characters, and brand design patterns.

270 Updated today
agnt-gg
Web & Frontend Solid

library-build-sync

Use when creating or updating JavaScript/TypeScript libraries in this monorepo; require building the library first and then running yarn in `_templates/react_template` so the template picks up the latest local library version.

70 Updated 1 months ago
InfinityLoopLabs