qr-code
Work with QR code generation and display. Use when modifying QR functionality, fixing QR rendering, or adding QR features.
Source facts
- Repository
- HKTITAN/kheMessage
- Last source activity
- February 1, 2026 at 11:49
- Detected SKILL.md language
- English
- Stars
- 1
- Forks
- 0
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- qr-code
- description
- Work with QR code generation and display. Use when modifying QR functionality, fixing QR rendering, or adding QR features.
# QR Code Skill
Work with QR code generation and display in kheMessage.
## When to Use
- Modifying QR code appearance
- Fixing QR code rendering issues
- Adding QR code features
- Optimizing QR code size
## QR Code Pages
1. **Bottom-right panel** - Small QR in main editor
2. **Full-page QR** - `/qr` or `qr.html`
## Implementation
Uses `qrcode.js` library:
```javascript
function updateQR() {
const el = document.getElementById('qrcode')
if (!el || typeof qrcode !== 'function') return
const url = location.href
try {
const qr = qrcode(0, 'L') // Type 0, Error correction L
qr.addData(url)
qr.make()
el.innerHTML = qr.createSvgTag({ cellSize: 4, margin: 0 })
} catch (e) {
el.innerHTML = ''
}
}
```
## Error Correction Levels
- `L` (7%) - Currently used, smallest size
- `M` (15%) - Medium
- `Q` (25%) - Higher reliability
- `H` (30%) - Highest reliability
## Theme Support
QR colors adapt to theme:
```css
html.dark #qrcode svg rect {
fill: #292524; /* Background */
}
html.dark #qrcode svg path {
fill: #fafaf9; /* Modules */
}
```
## QR Size Limits
- QR codes have capacity limits based on version and error correction
- Very long URLs may fail to generate
- Consider using URL shortener for extremely long content
## Styling
The QR container has consistent styling:
```css
#qrcode-wrap {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
```
View on GitHub