qr-code
Work with QR code generation and display. Use when modifying QR functionality, fixing QR rendering, or adding QR features.
Quellinformationen
- Repository
- HKTITAN/kheMessage
- Letzte Quellaktivität
- 1. Februar 2026 um 11:49
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 1
- Forks
- 0
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- 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);
}
```
Auf GitHub ansehen