From obscura-plugin
Interpret obscura-plugin inspection reports. Use when the user asks about site glitches, UI regressions, accessibility problems, performance issues, conversion blockers, or any follow-up on a `/ui:inspect` run. Triggers include "what's wrong with this page", "why is this slow", "compare v0.1.0 and v0.1.1", "did X actually change", "improve conversion on <page>".
npx claudepluginhub herrhelms/obscura-pluginThis skill uses the workspace's default tool permissions.
This skill turns raw inspection data (console logs, network events, axe violations, performance metrics, DOM snapshots, overlay detection, screenshots) into a **direct answer to the user's question** plus an actionable report.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
This skill turns raw inspection data (console logs, network events, axe violations, performance metrics, DOM snapshots, overlay detection, screenshots) into a direct answer to the user's question plus an actionable report.
/ui:inspect finishes — synthesize the data in raw.json and report.md into a focused answer.v0.1.0 vs v0.1.1 — diff the findings, call out what got fixed and what regressed..interface/2026-04-24-example-com-a1b2c3-v0.1.0/.Every inspection produces a folder at .interface/YYYY-MM-DD-SITENAME-HEX-vX.Y.Z/ containing:
| File | Contents |
|---|---|
report.md | Human-readable report: summary, findings by severity, recommendations. |
raw.json | Machine-readable: console, network, axe violations, metrics, DOM samples. |
fullpage.png | Full scrolled-page screenshot. |
regions/header.png | Header region screenshot (if <header> detected). |
regions/main.png | Main content region screenshot. |
regions/footer.png | Footer region screenshot (if <footer> detected). |
regions/issue-*.png | Bounding-box screenshot of each element flagged as problematic. |
meta.json | URL, timestamp, viewport, user-agent, git-style SHA of the DOM. |
Load raw.json first — it's the ground truth. report.md is a pre-written summary; treat it as a starting draft, not gospel.
When ranking findings, use this scale consistently across all reports:
<main>, empty alt on a CTA image), LCP > 6s.meta description, single broken decorative image.The user's <QUESTION> (passed to /ui:inspect) is the most important thing. Always lead with a direct answer before the findings.
Question-to-evidence mapping:
| Question shape | Load from raw.json | Answer form |
|---|---|---|
| "Did X change?" (visual) | dom.computedStyles for the element + fullpage.png screenshot crop | "Yes — body background is now rgb(255, 255, 0) (previously rgb(255,255,255) in v0.1.0)." |
| "Why is this slow?" | metrics, network slowest 5, longTasks | Rank bottlenecks by contribution to LCP/TBT. |
| "What could improve conversion?" | dom.ctaElements, a11y, metrics.cls, regions/ | Conversion-focused review — see references/conversion-review.md. |
| "Any glitches?" | visualGlitches, overlays, network failures | Ordered list by severity with screenshot references. |
| "Is it accessible?" | a11y.violations | Axe summary grouped by impact + WCAG rule. |
| "Did the fix work?" (repeated run on same domain/date) | diff current raw.json against the previous v | "Fixed: N. New regressions: M. Unchanged: K." with per-issue list. |
If the question is vague or missing, default to a severity-ordered tour: critical → high → medium → low.
When replying in chat, structure as:
fullpage.png, and the most relevant region screenshot.Never paste report.md verbatim — it already exists at the linked path. Summarize.
When the user asks "compare v0.1.0 and v0.1.1" (or the driver auto-increments on a second run):
.interface/YYYY-MM-DD-SITENAME-HEX-v* for the same date + hex prefix.raw.json from each.Detailed diff methodology is in references/cross-version-diff.md.
The driver shells out to generate a draft report — if you're asked to fill in the narrative sections, follow the template in references/report-template.md. Keep it factual, cite evidence, avoid hedging language ("might", "possibly") unless evidence is genuinely ambiguous.
references/conversion-review.md — heuristics for landing-page conversion analysis.references/cross-version-diff.md — how to diff two inspections.references/report-template.md — canonical structure for report.md.references/severity-rules.md — mapping specific findings to the severity taxonomy.