screenshot-to-code — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited screenshot-to-code (Agent Skill) and scored it 96/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 1 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 1 flagged
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Recreate the UI in the image as clean, responsive, accessible code, then check the render against the image.
package.json for React/Next/Vue and the Tailwind version, and reuse existing components, tokens, and icon libraries. Do not ask when the repo already answers it. With no project:index.html (Tailwind via the browser build, see references/stack-setup.md).Estimate sizes from the image resolution. If the screenshot is 2x (a Retina capture 2880px wide is a 1440px layout), halve the pixel measurements.
header, nav, main, section, button, a), extract repeated pieces into components, and put tokens in one place (Tailwind v4 @theme or CSS custom properties) rather than scattering hex codes. Use real text from the image, not lorem ipsum. For images and logos you cannot extract, use sized placeholders with descriptive alt text. Use an icon library the project already has (default: lucide-react), not hand-drawn SVGs or emoji.clamp() or responsive utilities. If the screenshot is mobile, go the other direction.propTypes checks were removed from React 19; do not add them. forwardRef is not needed for passing ref to function components.@import "tailwindcss"; and @theme { --color-brand: #...; }, not a tailwind.config.js and not the v3 @tailwind base/components/utilities directives. Custom tokens become utilities automatically (bg-brand).app/, components are Server Components by default. Add "use client" only to components that use state, effects, or event handlers.Setup commands for each stack are in references/stack-setup.md.
Input: a 1440px-wide screenshot of a pricing section - centered heading, three plan cards with the middle one highlighted, feature checklists, and a button per card.
Spec:
#0B1220, card #111A2E, accent #3B82F6, text #E5E7EB, muted #94A3B8; Inter-like sans; radius 12pxPlanCard with name, price, features[], highlighted, ctaBuild: PricingSection.tsx mapping a plans array into PlanCard; highlighted adds an accent border and a "Most popular" label; grid-cols-1 md:grid-cols-3. Check icons from lucide-react.
Compare: the first render has cards 40px too tall because of button padding, and the heading weight is 600 against a 700 in the image. Fix both, re-render, and deliver with an assumptions list: toggle not built, font assumed Inter.
focus-visible styles even though the screenshot cannot show them. Inputs need labels.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.