static-qr-code-generation

Generate static SVG QR codes from URLs using the qrcode npm library.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/hubeiqiao/skills --skill static-qr-code-generation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: static-qr-code-generation
Source: https://github.com/hubeiqiao/skills/tree/main/static-qr-code-generation
Command: npx skills add https://github.com/hubeiqiao/skills --skill static-qr-code-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the issue of QR codes generated by inline JavaScript that fail to scan, ensuring reliable QR code functionality in static HTML assets.

Core Features & Use Cases

  • Reliable QR Code Generation: Replaces fragile JavaScript QR generators with pre-generated static SVGs.
  • Debugging Tool: Useful for diagnosing Reed-Solomon or masking bugs in custom QR generators.
  • Use Case: Fix an un-scannable QR code on a marketing poster that was generated using a faulty inline script.

Quick Start

Generate a static SVG QR code for the URL 'https://example.com' and embed it into your HTML.

Frequently Asked Questions about static-qr-code-generation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my JavaScript QR code generator produce unscannable codes in HTML?

JavaScript QR code generators can produce unscannable codes due to Reed-Solomon or masking bugs. Replacing the runtime inline JavaScript with pre-generated static SVGs ensures the QR code is reliably scannable across different devices and scanners.

How do I generate a static SVG QR code for a fixed URL?

To generate a static SVG QR code, you can use the `qrcode` npm library to pre-generate the image for your fixed URL. You then embed the resulting static SVG directly into your HTML asset, replacing the dynamic JavaScript generation.

What is the best way to fix an unscannable QR code on a static HTML poster?

The best way to fix an unscannable QR code on a static HTML poster is to replace the faulty inline script with a pre-generated static SVG. You can verify the generated QR code's scannability using a tool like `zbarimg` before embedding it.

Can I use the qrcode npm library to create static assets instead of runtime JavaScript?

Yes, you can use the `qrcode` npm library to generate static SVG assets. This approach replaces fragile runtime JavaScript QR generators, ensuring that fixed URLs produce reliable and readable QR codes directly within your HTML.

How do I verify if my generated SVG QR code is scannable?

You can verify the scannability of your generated SVG QR code using the `zbarimg` tool. This verification step ensures the pre-generated static QR code replacing your faulty JavaScript implementation is readable before deployment.

When do I need to replace inline JavaScript QR generators with static SVGs?

You need to replace inline JavaScript QR generators with static SVGs when the dynamically generated codes fail to scan due to custom implementation bugs. This is particularly necessary for static HTML assets like marketing posters where the URL is fixed.