菜单
Expert assistant for testing the embeddable Bible widget functionality in the KR92 Bible Voice project. Use when creating widget tests, validating embed API responses, testing reference formats, checking audio integration, or creating regression test cases.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Spectaculous-Code/raamattu-nyt --skill widget-tester命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | widget-tester |
| description | Expert assistant for testing the embeddable Bible widget functionality in the KR92 Bible Voice project. Use when creating widget tests, validating embed API responses, testing reference formats, checking audio integration, or creating regression test cases. |
The widget (public/widget.js) is an embeddable JavaScript component that displays Bible verses on external websites.
<script src="https://your-app-url.com/widget.js" defer></script>
<div class="rn-bible" data-ref="Joh.3:16"></div>
User: "Create a test page for all widget features"
Assistant:
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raamattu Widget Test - Comprehensive</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
background: #f5f5f5;
}
section {
background: white;
padding: 2rem;
margin: 2rem 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1, h2 {
color: #333;
}
.test-case {
margin: 1.5rem 0;
padding: 1rem;
border-left: 3px solid #4CAF50;
background: #f9f9f9;
}
.test-label {
font-weight: bold;
color: #666;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1>🧪 Raamattu Widget - Comprehensive Test Suite</h1>
<!-- Single Verse Tests -->
<section>
<h2>1. Single Verse Tests</h2>
<div class="test-case">
<div class="test-label">Test 1.1: Basic Finnish reference</div>
<div class="rn-bible" data-ref="Joh.3:16"></div>
</div>
<div class="test-case">
<div class="test-label">Test 1.2: English reference</div>
<div class="rn-bible" data-ref="John 3:16"></div>
</div>
<div class="test-case">
<div class="test-label">Test 1.3: Period separator</div>
<div class="rn-bible" data-ref="Joh.3.16"></div>
</div>
</section>
<!-- Verse Range Tests -->
<section>
<h2>2. Verse Range Tests</h2>
<div class="test-case">
<div class="test-label">Test 2.1: Small range (2 verses)</div>
<div class="rn-bible" data-ref="Joh.3:16-17"></div>
</div>
<div class="test-case">
<div class="test-label">Test 2.2: Larger range (Beatitudes)</div>
<div class="rn-bible" data-ref="Matt.5:3-10"></div>
</div>
<div class="test-case">
<div class="test-label">Test 2.3: Psalm passage</div>
<div class="rn-bible" data-ref="Ps.23:1-4"></div>
</div>
</section>
<!-- Numbered Books Tests -->
<section>
<h2>3. Numbered Books Tests</h2>
<div class="test-case">
<div class="test-label">Test 3.1: With period and space</div>
<div class="rn-bible" data-ref="1. Joh.4:8"></div>
</div>
<div class="test-case">
<div class="test-label">Test 3.2: With space only</div>
<div class="rn-bible" data-ref="1 Joh.4:8"></div>
</div>
<div class="test-case">
<div class="test-label">Test 3.3: No space</div>
<div class="rn-bible" data-ref="1Joh.4:8"></div>
</div>
<div class="test-case">
<div class="test-label">Test 3.4: Moses books</div>
<div class="rn-bible" data-ref="1. Moos.1:1-3"></div>
</div>
<div class="test-case">
<div class="test-label">Test 3.5: Corinthians</div>
<div class="rn-bible" data-ref="1 Kor.13:4-7"></div>
</div>
</section>
<!-- Different Versions Tests -->
<section>
<h2>4. Different Version Tests</h2>
<div class="test-case">
<div class="test-label">Test 4.1: Default (STLK 2017)</div>
<div class="rn-bible" data-ref="Joh.3:16"></div>
</div>
<div class="test-case">
<div class="test-label">Test 4.2: 1933/38 version</div>
<div class="rn-bible" data-ref="Joh.3:16" data-version="finpr_finn"></div>
</div>
<div class="test-case">
<div class="test-label">Test 4.3: KJV (English)</div>
<div class="rn-bible" data-ref="John 3:16" data-version="KJV"></div>
</div>
</section>
<!-- Audio Tests -->
<section>
<h2>5. Audio Tests</h2>
<div class="test-case">
<div class="test-label">Test 5.1: Single verse with audio</div>
<div class="rn-bible" data-ref="Joh.1:1"></div>
</div>
<div class="test-case">
<div class="test-label">Test 5.2: Verse range with audio</div>
<div class="rn-bible" data-ref="Joh.1:1-5"></div>
</div>
</section>
<!-- Edge Cases -->
<section>
<h2>6. Edge Case Tests</h2>
<div class="test-case">
<div class="test-label">Test 6.1: Long chapter (Psalm 119:1-8)</div>
<div class="rn-bible" data-ref="Ps.119:1-8"></div>
</div>
<div class="test-case">
<div class="test-label">Test 6.2: Last verse of Bible</div>
<div class="rn-bible" data-ref="Ilm.22:21"></div>
</div>
<div class="test-case">
<div class="test-label">Test 6.3: First verse of Bible</div>
<div class="rn-bible" data-ref="1. Moos.1:1"></div>
</div>
</section>
<!-- Error Cases -->
<section>
<h2>7. Error Handling Tests</h2>
<div class="test-case">
<div class="test-label">Test 7.1: Missing data-ref</div>
<div class="rn-bible"></div>
</div>
<div class="test-case">
<div class="test-label">Test 7.2: Invalid reference</div>
<div class="rn-bible" data-ref="InvalidBook.99:999"></div>
</div>
<div class="test-case">
<div class="test-label">Test 7.3: Invalid version</div>
<div class="rn-bible" data-ref="Joh.3:16" data-version="INVALID"></div>
</div>
</section>
<!-- Dynamic Loading Test -->
<section>
<h2>8. Dynamic Loading Test</h2>
<button id="addDynamic" style="padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer;">
Add Dynamic Widget
</button>
<div id="dynamicContainer" style="margin-top: 1rem;"></div>
</section>
<script>
// Test dynamic widget loading
document.getElementById('addDynamic').addEventListener('click', function() {
const container = document.getElementById('dynamicContainer');
const widget = document.createElement('div');
widget.className = 'rn-bible';
widget.setAttribute('data-ref', 'Rom.8:28');
container.innerHTML = '';
container.appendChild(widget);
// Widget should auto-initialize via MutationObserver
console.log('Dynamic widget added');
});
</script>
<!-- Widget Script -->
<script src="https://iryqgmjauybluwnqhxbg.supabase.co/widget.js" defer></script>
</body>
</html>
User: "Create test to validate embed API response"
Assistant: See full example in skill content...
User: "Create test for widget audio functionality"
Assistant: See full example in skill content...
Docs/08-WIDGET.md for widget documentationpublic/widget.js for implementationpublic/widget-test.html for test examples