qr-code
Work with QR code generation and display. Use when modifying QR functionality, fixing QR rendering, or adding QR features.
Informações da origem
- Repositório
- HKTITAN/kheMessage
- Última atividade na origem
- 1 de fevereiro de 2026 às 11:49
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 1
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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);
}
```
Ver no GitHub