Skip to main content
widget-tester 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.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Copiar promptMostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/Spectaculous-Code/raamattu-nyt --skill widget-testerO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Mais deste repositório Keeps documentation synchronized with code: API/architecture docs, README, CLAUDE.md, the AI
index manifest (Docs/ai-index/manifest.yml — domains, task_playbooks, generated catalogues),
ASCII flow diagrams, feature/system explanations, and reporting changes to the Obsidian vault.
Use when (1) updating or generating docs, (2) updating the AI index / manifest ("ai index",
"päivitä manifesti", "add domain/task playbook", "regenerate catalog"), (3) drawing ASCII
flow/workflow diagrams ("piirrä kaavio"), (4) explaining how something works ("miten toimii",
"selitä arkkitehtuuri"), or (5) reporting to Obsidian ("vault", "raportoi obsidianiin").
Manage biblical topics in Raamattu Nyt. Use for creating/editing topics + Finnish
translations, topic relations (related/opposite/broader/narrower), validating FI translations
& pronunciations (Voikko/Omorfi), reviewing qa_status='unchecked', bulk translation updates,
aliases/synonyms, fixing mistranslated FI topic names, and the taxonomy tree (parent_id
hierarchy, roots, orphans, cycles, re-parenting after merges). ALSO the structured topic
schema (`structured_schema`): type templates, claims + sources, the async generation queue
(/ohjaamo/topics/generation), draft review, and the Matthew Henry claim-verification pass —
plus the PLANNED verse schema generated from Matthew Henry (design lives in Obsidian, not
yet in code). ALSO the source corpora behind topic content — which reference work feeds which
column, where the local files live (`Docs/data/`), and how to expand ISBE coverage without
re-scraping. Triggers: aihe, topic, teema, taksonomia, hierarkia, alias, merge/yhdistäminen,
aiheskeema, jae-skeema, str
Analyse a Bible verse's topic areas and link verses to topics in Raamattu Nyt (bible_schema.topical_references — the jae↔aihe link table). Use for: (1) tagging a single verse/passage — given a reference, find/assign its topics and insert topical_references; (2) per-book/chapter COVERAGE scans for under-tagged verses; (3) junk/QA CLEANUP of bad references (over-wide range refs, cluster bleed, wrong scope); (4) SOURCE-based rematch from easton_articles / smiths_articles to topical_references. Triggers: "tägää jae", "liitä jae aiheeseen", "jakeen aihealueet", "analysoi jakeen aiheet", "aihekattavuus", "topical_references", "roskaviite", "junk ref", "cluster bleed", "coverage gap", "Easton/Smith rematch", "verse topic tagging". Also owns (5) the VERSE SCHEMA (jae-skeema) — Matthew Henry turned into a structured Finnish exposition per outline point, and the verification of its claims against the bounded English source; triggers: "jae-skeema", "jakeiden skeema", "Matthew Henry", "rakenteinen suomennos", "structured
Explorador de arquivos
2 arquivos 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.
Widget Tester
Context Files (Read First)
For widget and embed details, read from Docs/context/:
Docs/context/supabase-map.md - Embed Edge Function
Docs/context/packages-map.md - Shared packages
Capabilities
Generate test HTML pages for widget validation
Validate embed API responses
Test different reference formats
Check audio integration
Widget Overview
The widget (public/widget.js) is an embeddable JavaScript component that displays Bible verses on external websites.
Basic Usage
<script src ="https://your-app-url.com/widget.js" defer > </script >
<div class ="rn-bible" data-ref ="Joh.3:16" > </div >
Usage Examples
Example 1: Create Comprehensive Test Page
User: "Create a test page for all widget features"
Assistant:
Raamattu Widget Test - Comprehensive
🧪 Raamattu Widget - Comprehensive Test Suite
1. Single Verse Tests
Test 1.1: Basic Finnish reference
Test 1.2: English reference
Test 1.3: Period separator
2. Verse Range Tests
Test 2.1: Small range (2 verses)
Test 2.2: Larger range (Beatitudes)
Test 2.3: Psalm passage
3. Numbered Books Tests
Test 3.1: With period and space
Test 3.2: With space only
Test 3.3: No space
Test 3.4: Moses books
Test 3.5: Corinthians
4. Different Version Tests
Test 4.1: Default (STLK 2017)
Test 4.2: 1933/38 version
Test 4.3: KJV (English)
5. Audio Tests
Test 5.1: Single verse with audio
Test 5.2: Verse range with audio
6. Edge Case Tests
Test 6.1: Long chapter (Psalm 119:1-8)
Test 6.2: Last verse of Bible
Test 6.3: First verse of Bible
7. Error Handling Tests
Test 7.1: Missing data-ref
Test 7.2: Invalid reference
Test 7.3: Invalid version
8. Dynamic Loading Test
Add Dynamic Widget
<!DOCTYPE html >
<html lang ="fi" >
<head >
<meta charset ="UTF-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
<title >
</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 >
</h1 >
<section >
<h2 >
</h2 >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.3:16" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="John 3:16" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.3.16" >
</div >
</div >
</section >
<section >
<h2 >
</h2 >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.3:16-17" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Matt.5:3-10" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Ps.23:1-4" >
</div >
</div >
</section >
<section >
<h2 >
</h2 >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="1. Joh.4:8" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="1 Joh.4:8" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="1Joh.4:8" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="1. Moos.1:1-3" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="1 Kor.13:4-7" >
</div >
</div >
</section >
<section >
<h2 >
</h2 >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.3:16" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.3:16" data-version ="finpr_finn" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="John 3:16" data-version ="KJV" >
</div >
</div >
</section >
<section >
<h2 >
</h2 >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.1:1" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.1:1-5" >
</div >
</div >
</section >
<section >
<h2 >
</h2 >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Ps.119:1-8" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Ilm.22:21" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="1. Moos.1:1" >
</div >
</div >
</section >
<section >
<h2 >
</h2 >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="InvalidBook.99:999" >
</div >
</div >
<div class ="test-case" >
<div class ="test-label" >
</div >
<div class ="rn-bible" data-ref ="Joh.3:16" data-version ="INVALID" >
</div >
</div >
</section >
<section >
<h2 >
</h2 >
<button id ="addDynamic" style ="padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer;" >
</button >
<div id ="dynamicContainer" style ="margin-top: 1rem;" >
</div >
</section >
<script >
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);
console .log ('Dynamic widget added' );
});
</script >
<script src ="https://iryqgmjauybluwnqhxbg.supabase.co/widget.js" defer >
</script >
</body >
</html >
Example 2: Test API Response Format User: "Create test to validate embed API response"
Assistant:
See full example in skill content...
Example 3: Audio Integration Test User: "Create test for widget audio functionality"
Assistant:
See full example in skill content...
Test Checklist
Widget Loading
Reference Format Support
Version Support
Audio Features
Error Handling
Styling
Learnings
Related Skills Situation Delegate To Write automated tests test-writerEdge Function changes edge-function-generatorBible lookup issues bible-lookup-helper