メニュー
Compare ERB and JavaScript template outputs for the offline scoring SPA. Use when working on ERB-to-JS conversion, debugging template parity issues, or verifying that changes to scoring views work correctly in both ERB and SPA modes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use this skill to inspect what a Rails page currently displays, extract HTML content, or verify rendering WITHOUT starting a dev server. Useful for understanding page output before making changes, debugging views, searching for content, or testing that pages work correctly. Provides .claude/skills/render-page/scripts/render.rb for quick page inspection and HTML extraction.
Use when asked to run "fly ssh console", SSH into Fly.io machines, inspect files on production machines, check processes on Fly.io, or examine deployed machine state. Covers critical pitfalls like no shell support and Debian vs macOS command differences.
Working with the Navigator Go submodule for web server fixes and enhancements. Use when deployment plans require Navigator changes, config parsing issues arise, or new routing/proxy behavior is needed.
Database management commands and the bin/run utility for executing Ruby scripts against specific event databases. Use when the user needs to query, manipulate, or run scripts against existing databases without starting a Rails server.
Deployment architecture, multi-tenancy design, and environment-specific deployment commands. Use when the user asks about how the application is deployed, multi-tenant architecture with Navigator, Fly.io deployment, or frontend stack details.
Information about running tests, test coverage, and known testing issues in the Rails application. Use when the user asks about testing procedures, encounters test failures, wants to know about coverage, or needs to troubleshoot intermittent system test issues.
| name | compare-erb-js |
| description | Compare ERB and JavaScript template outputs for the offline scoring SPA. Use when working on ERB-to-JS conversion, debugging template parity issues, or verifying that changes to scoring views work correctly in both ERB and SPA modes. |
Use scripts/render_erb_and_js.rb to verify that ERB templates and their JavaScript-converted equivalents produce matching output. This is essential for the offline scoring SPA which uses auto-converted ERB templates.
# Compare heat list
bundle exec ruby scripts/render_erb_and_js.rb db/2025-barcelona-november.sqlite3 83
# Compare individual heat
bundle exec ruby scripts/render_erb_and_js.rb db/2025-barcelona-november.sqlite3 83 1
# With style parameter
bundle exec ruby scripts/render_erb_and_js.rb db/2025-barcelona-november.sqlite3 83 1 radio
Or using environment variable:
RAILS_APP_DB=2025-barcelona-november bundle exec ruby scripts/render_erb_and_js.rb 83 1
<main> content)/templates/scoring.js/scores/:judge/heats/dataheat_hydrator.js (for individual heats)All files are saved to /tmp/ for analysis:
/tmp/erb_rendered.html - ERB template output (main content only)/tmp/js_rendered.html - JavaScript template output/tmp/scoring_templates.js - Converted templates from /templates/scoring.js/tmp/heats_data.json - Raw normalized data from server/tmp/js_template_data.json - Hydrated data passed to JS template# Quick diff
diff /tmp/erb_rendered.html /tmp/js_rendered.html
# Side-by-side comparison
diff -y /tmp/erb_rendered.html /tmp/js_rendered.html | less
# Compare specific attributes
diff <(grep -o 'href="[^"]*"' /tmp/erb_rendered.html | sort) \
<(grep -o 'href="[^"]*"' /tmp/js_rendered.html | sort)
Some differences are expected due to ERB-to-JS conversion limitations:
" while JS uses "link_to may render differentlyThis tool supports the "Server computes, hydration joins, templates filter" principle:
heat_hydrator.js joins normalized data by resolving IDsapp/controllers/scores_controller.rb
heats_data action: Returns normalized JSON data for SPAheat action: Sets instance variables for ERB templatespaths: hash with server-computed URLsapp/controllers/templates_controller.rb
scoring action: Converts ERB templates to JavaScript on-the-flyErbPrismConverter for conversionlib/erb_prism_converter.rb
app/javascript/lib/heat_hydrator.js
buildLookupTables(): Creates Maps for O(1) entity lookuphydrateHeat(): Resolves IDs to full objectsbuildHeatTemplateData(): Prepares complete data for templatesapp/javascript/controllers/heat_app_controller.js
app/views/scores/heat.html.erb - Main heat viewapp/views/scores/heatlist.html.erb - Heat list viewapp/views/scores/_heat_header.html.erb - Heat header partialapp/views/scores/_info_box.html.erb - Info box with feedback errorsapp/views/scores/_navigation_footer.html.erb - Prev/next navigationapp/views/scores/_table_heat.html.erb - Standard heat tableapp/views/scores/_rank_heat.html.erb - Finals ranking viewapp/views/scores/_solo_heat.html.erb - Solo heat viewapp/views/scores/_cards_heat.html.erb - Card-based scoring viewscripts/render_erb_and_js.rb - This comparison toolscripts/hydrate_heats.mjs - Node.js script for hydrating data (used by comparison tool)