القائمة
Screenshot the real Timestamps analysis view (UnifiedDisplay) for any reciter:surah:verse straight from shards — fast, drift-free, no SPA/audio/OAuth.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | inspector-playwright |
| description | Screenshot the real Timestamps analysis view (UnifiedDisplay) for any reciter:surah:verse straight from shards — fast, drift-free, no SPA/audio/OAuth. |
Screenshot the real Timestamps analysis view (UnifiedDisplay) for a
reciter : surah:verse straight from shards. No SPA navigation, no audio, no
OAuth, no progress-bar pixel math — and drift-free: the harness
(inspector/frontend/harness/analysis.{html,ts}) imports the production
component + the real ts-source assembly (assembleVerseFromShard), so a
prop/assembly change fails the build rather than silently diverging. Far faster
and more reliable than driving the live SPA or a local Flask (which dies
silently in long sessions).
From inspector/frontend (so vite + playwright resolve from its node_modules):
node ../../.claude/skills/inspector-playwright/scripts/shoot.mjs \
--reciter <slug> --ref 45:32 [--ref 11:57 …] \
[--words 1-3] [--out DIR] [--api https://…hf.space] [--port 5199]
--reciter — slug, e.g. nasser_al_qatami_mp3quran (find it from the manifest / the Timestamps surah-picker search).--ref — surah:verse, repeatable; one PNG per ref → <out>/<slug>_<s>-<v>.png.--words a-b — optional 1-based inclusive word range, for a narrow crop of a long verse.--api — backend the harness fetches shards from. Default is the dev Space (https://hetchyy-quranic-inspector-dev.hf.space): its shard endpoint is public (no auth) and no-store (always fresh after a re-stamp), so no local Flask is needed. Point at http://127.0.0.1:5000 only when a local backend is up.--out — output dir (default cwd). --port — Vite port (default 5199).shoot.mjs boots Vite programmatically with INSPECTOR_API_TARGET=<api> (which
the Vite config turns into an /api proxy at that origin), drives headless
Chromium to …/harness/analysis.html?reciter&ref, waits for body[data-ready],
and screenshots #app. The harness fetches manifest/shard/qpc/dk via the real
loaders, builds TsVerseData with assembleVerseFromShard, sets the real
loadedVerse store, and mounts UnifiedDisplay — the exact app render path.
After the PNG is written, display it inline in chat by Read-ing the PNG path
(the Read tool renders images) — don't just report the path. One Read per shot.
&letters=0 / &phonemes=0 on the harness URL.no-store); there is no browser/CDN cache to bust. → [[shard-browser-cache-stale]]Headless one-off Inspector admin operations — wraps the same services/admin/* and state.transition the UI calls. Use for quick patches when the Reviews/Users/Permissions/Requests UI surface isn't enough — publish a finished TS job, force-unlock a released reciter, cancel + relaunch a stuck HF job, and similar one-off tasks.
Use when localizing the Inspector frontend — extracting UI strings into Paraglide messages, adding/wiring `m.*()` calls in Svelte components, authoring en/ar message JSON, translating chrome to Arabic (MSA), or verifying i18n coverage. Trigger phrases include "internationalize", "localize", "translate to Arabic", "extract strings", "i18n", "add a message key", "wire up the locale switcher".
Run the Inspector app locally — any mode (dev bucket / offline fixtures / live dev or prod Space), any worktree, conflict-free.
Deploy any branch to its HF Space directly from the CLI (local, no push) and monitor until the Space is live.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface.
Inspector audio subsystem — everything between bytes-on-disk and an `<audio>` element rendering audio in the browser, plus the extraction → bucket → inspector handoff that produces `reciters/<slug>/` in the first place. Covers both debugging AND building audio features.