skills.rest
RafayelGardishyan
RafayelGardishyanCOMMUNITY
Explore all skills by this author →
GitHub

ralph-lauren

Evaluate frontend pages with Lighthouse, axe, CSS stats, and Claude critique.

Updated Mar 9, 2026
Search Tags:#automation#a11y#frontend#evaluation#iteration#design-system
One-click install
npx skills add https://github.com/RafayelGardishyan/rafayels-marketplace --skill ralph-lauren
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ralph-lauren
Source: https://github.com/RafayelGardishyan/rafayels-marketplace/tree/main/plugins/rafayels-engineering/.opencode/skills/ralph-lauren
Command: npx skills add https://github.com/RafayelGardishyan/rafayels-marketplace --skill ralph-lauren

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires claude-agent-sdk, anyio, Pillow, agent-browser, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Ralph Lauren Frontend Design Improvement Loop automates the evaluation-and-improvement cycle for frontend pages, combining deterministic metrics with subjective quality scoring to raise design quality over iterative cycles.

Core Features & Use Cases

  • Deterministic metrics collection via Lighthouse, axe, and CSS analysis, performed in Python without relying on LLMs.
  • Subjective assessment using Claude Agent SDK (impeccable.style) to simulate expert critique across multiple dimensions.
  • Targeted, modular improvements using the impeccable.style skill set (/typeset, /arrange, /colorize, /normalize, /polish, etc.), with documentation of changes and updates to the design system philosophy.
  • Iterative design system evolution: updates to docs/ralph-lauren/philosophy.md reflect decisions across iterations.

Quick Start

Start the evaluation loop by pointing the tool at a live frontend URL and letting it autonomously assess and improve the page.

Frequently Asked Questions about ralph-lauren

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

FAQPage Schema
How can I automate frontend design evaluation and improvement for live web pages?▼

Automated frontend design evaluation runs a deterministic evaluate-improve loop that collects Lighthouse, axe, and CSS stats, then applies iterative design improvements via Claude Agent SDK on live or local pages.

What is an autonomous frontend design loop and how does it work?▼

An autonomous frontend design loop separates deterministic assessment using Python from Claude-driven critique, applying targeted fixes and documenting changes to evolve the design system philosophy automatically.

Can I use Claude Agent SDK to critique and improve frontend accessibility and Core Web Vitals?▼

Yes, Claude Agent SDK simulates expert subjective critique across multiple dimensions while Python collects Core Web Vitals and axe accessibility results, applying targeted fixes to improve frontend pages iteratively.

How do I run iterative design improvements on a local deployment using Lighthouse and axe results?▼

Point the evaluation tool at your local deployment URL to start the evaluate-improve loop, which gathers Lighthouse, axe, and CSS stats, then applies modular improvements and updates the design system philosophy.

Does automated frontend evaluation work with agent-browser for live page assessment?▼

Yes, agent-browser operates on live pages or local deployments to collect deterministic metrics, while Claude Agent SDK handles subjective quality scoring for comprehensive frontend design evaluation.

What are the limitations of using automated design loops for frontend page improvements?▼

Automated design loops require dependencies including claude-agent-sdk, agent-browser, anyio, and Pillow, operating on accessible live pages or local deployments to function properly during the evaluate-improve cycle.

Related Skills

Explore More Design & Creative Skills→
Arize-aiArize-ai
21

setup-claude-code-tracing

Configure Arize AX or Phoenix tracing for Claude Code sessions and Agent SDK.

Official
Advanced
Community-AccessCommunity-Access
387

lighthouse-scanner

Audit web accessibility with Lighthouse CI and track score regressions.

Official
Advanced
joi-fairsharejoi-fairshare
1

design-refine

Dispatch Impeccable refinement commands to align UI with design tokens.

Community
Advanced
JansenAnalyticsJansenAnalytics
5

lighthouse-perf

Run automated Lighthouse audits and track performance budgets across pages.

Community
Advanced