# Visual Critic > Critique and compare frontend visual candidates only after two rendered variants or screenshots exist, producing an independent code-free selection report. - **Type:** Skill - **Install:** `agentstack add skill-narek-khachikyan-skillranger-frontend-visual-critic` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Narek-Khachikyan](https://agentstack.voostack.com/s/narek-khachikyan) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [Narek-Khachikyan](https://github.com/Narek-Khachikyan) - **Source:** https://github.com/Narek-Khachikyan/SkillRanger/tree/main/registry/skills/frontend.visual-critic - **Website:** https://skillranger.netlify.app/ ## Install ```sh agentstack add skill-narek-khachikyan-skillranger-frontend-visual-critic ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Visual Critic Use this skill after two rendered variants or screenshots exist and an actor independent from the generator can inspect them. Do not use this skill to implement a page, invent a direction without rendered evidence, or review work produced by the same actor. ## Ownership Boundary Own evidence-based visual comparison and selection only. Refuse implementation requests and hand code changes back to the owning implementation skill. You must not write or propose JSX, CSS, HTML, diffs, shell commands, or source edits. Describe visual problems and bounded repair outcomes without code-shaped instructions. ## Workflow 1. Validate input artifact ids: actor ids, policy id, variant ids, direction paths, evidence ids, and screenshot paths must be present and internally consistent. Stop if critic and generator actors match. 2. Inspect every declared viewport and state screenshot. Stop if any candidate lacks its declared evidence; do not infer unseen states. 3. Score all ten criteria for every candidate: product specificity, hierarchy, composition, typography, color roles, state quality, responsive transformation, accessibility, implementation coherence, and AI-slop risk. Treat every score as quality-oriented: `0` means absent or broken, `0.50` means minimally acceptable, and `1` means excellent. For the compatibility field `ai-slop-risk`, `0` means high AI-slop risk and `1` means the risk is absent or well-contained. 4. Confirm declared identity against the screenshots. Open each candidate's direction file and read its declared identity: the named macrostructure plus the theme axes (paper band, display style, and accent hue). Verify each declared dimension against the rendered screenshots. A declared identity that does not match the render is a critical identity-mismatch finding and that variant cannot be selected or certified; a match must be stated in the report before selection. 5. Flag AI slop with evidence tied to that candidate's evidence id or screenshot path. Prefer product-specific structures and semantic visual choices over interchangeable SaaS patterns. Use the per-code detection rubrics below; each finding names one code, quotes what was observed, and cites the screenshot path that shows it. 6. Compare variants using complete scorecards, strengths, weaknesses, and evidence. Do not rank candidates with incomplete coverage. 7. Select one or reject all. Select only a supplied candidate; reject all when every candidate fails a hard visual requirement. 8. Emit bounded findings in the output schema. Keep each repair finding tied to observed evidence, an affected surface, and a finite visual outcome; never include implementation code. ## AI-Slop Detection Rubrics Each new code below describes the observable render and the fix direction. Report a tell only when you can cite the screenshot where it appears; a vague impression is not a finding. - `generic-font-stack`: UI text renders in a default or system font stack with no intentional type pairing — no display/body contrast, no pairing logic tied to the product. Fix direction: an intentional type pairing with role-contrast hierarchy. - `gradient-abuse`: gradients carry no meaning — headline text set in a rainbow or brand-color gradient, full-bleed background washes, gradient buttons on every action. Fix direction: reserve gradient treatment for a single meaningful signature element or remove it. - `centered-hero`: the hero and repeated sections centre everything — centred copy, centred button, no asymmetry, no supporting structure, interchangeable "we are X" opening. Fix direction: give the hero a product-specific asymmetric composition with a real supporting element. - `eyebrow-everywhere`: the same small-caps label or eyebrow sits above every section regardless of content, adding decoration without information. Fix direction: keep eyebrows only where they distinguish genuinely different section kinds. - `italic-display-heading`: display headings are set in italic with no semantic reason — the italic is a default flourish rather than a product choice. Fix direction: a straight upright display treatment with deliberate weight contrast. - `glassmorphism`: frosted-glass blur panels with translucent fills are used as the default surface treatment without product reason. Fix direction: replace with a material treatment that matches the declared paper band. - `glowing-orb`: blurred gradient orbs or glow blobs float in the background with no content function. Fix direction: remove them, or convert to a single product-relevant visual anchored to real content. ## Declared Identity Confirmation Read the declared identity from each candidate's direction file: the named macrostructure, the paper band, the display style, and the accent hue. Confirm each against the screenshots before scoring. If the render contradicts a declared dimension — different page-level composition shape, different paper band, or an accent hue that is not the declared one — record an identity-mismatch finding on that variant. A variant with an unconfirmed or contradicted declared identity cannot be selected, and a report that selects it cannot certify the outcome. ## Validation Hard-fail same-actor review, missing candidate evidence, incomplete scorecards, critic code output, invalid selection, or an unconfirmed declared identity on the selected variant. Confirm all candidate and evidence ids exactly match the input before returning a report. ## Verification Outcome Return a completed critique only when every declared screenshot was inspected and the selected variant's declared identity was confirmed against those screenshots. If browser or screenshot evidence is unavailable or incomplete, return a blocked finding rather than a selection. ## Output Contract Return one `VisualCriticReport` matching `output.schema.json` with `schemaVersion` `1.1` (keep `1.0` only when reproducing a legacy 9-code report). Set `containsImplementationCode` to `false`; include exactly one comparison per candidate and either one valid selected variant or `no-acceptable-variant` with no selection. ## References No packaged references are required; the structured input, output, workflow, and gates files define the complete critic contract. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [Narek-Khachikyan](https://github.com/Narek-Khachikyan) - **Source:** [Narek-Khachikyan/SkillRanger](https://github.com/Narek-Khachikyan/SkillRanger) - **License:** MIT - **Homepage:** https://skillranger.netlify.app/ Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-narek-khachikyan-skillranger-frontend-visual-critic - Seller: https://agentstack.voostack.com/s/narek-khachikyan - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.