10-10-frontend

Run automated screenshot-driven design loops evaluating UI against a 5-criteria rubric.

3|2|Updated Feb 10, 2026
One-click install
npx skills add https://github.com/sami-abdul/claude-predev-setup --skill 10-10-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: 10-10-frontend
Source: https://github.com/sami-abdul/claude-predev-setup/tree/main/scaffold/.claude/skills/10-10-frontend
Command: npx skills add https://github.com/sami-abdul/claude-predev-setup --skill 10-10-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design often requires repeated visual refinement to reach a polished, consistent UI across breakpoints and components.

Core Features & Use Cases

  • Automated screenshot-driven evaluation against a 5-criteria rubric (typography, color, layout, polish, distinctiveness).
  • Guided fixes with targeted changes and re-screenshots to progressively improve visual fidelity.
  • Use cases include refining landing pages, dashboards, and component libraries to achieve a cohesive, high-fidelity UI.

Quick Start

Start the 10-10 frontend loop by taking a desktop and mobile screenshot, evaluating against a 5-criteria rubric, and applying fixes until you reach a 10/10 score.

Frequently Asked Questions about 10-10-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate frontend UI polish and visual evaluation?

You can automate frontend UI polish by running a design loop that captures desktop and mobile screenshots, evaluates visual quality against a 5-criteria rubric including typography and layout, and applies targeted fixes iteratively until reaching a 10/10 score.

What is automated screenshot-driven design evaluation for web applications?

Automated screenshot-driven design evaluation is a process of capturing UI screenshots across desktop and mobile breakpoints, scoring them against a rubric covering typography, color, layout, polish, and distinctiveness, and applying guided fixes to progressively improve visual fidelity.

How do I evaluate my landing page design against a visual design rubric?

You evaluate a landing page design by capturing desktop and mobile screenshots, scoring them against a 5-criteria visual rubric covering typography, color, layout, polish, and distinctiveness, and then applying targeted fixes to iteratively improve the UI.

Can I use Playwright screenshots to iteratively refine dashboards and component libraries?

Yes, Playwright screenshots can be used to iteratively refine dashboards and component libraries by capturing visual states across desktop and mobile breakpoints, evaluating them against a design rubric, and applying targeted fixes for cohesive, high-fidelity UI results.

What criteria are used to score frontend visual design quality?

Frontend visual design quality is scored using a 5-criteria rubric evaluating typography, color, layout, polish, and distinctiveness to guide targeted UI fixes and ensure consistency and accessibility considerations are met.

What are the limitations of automated UI design evaluation loops?

Automated UI design evaluation loops rely on screenshot visual fidelity, may not fully capture interactive states, and require safeguards to maintain consistency and accessibility considerations during targeted fixes across multiple breakpoints.