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

Ready to run

npx skills add https://github.com/RafayelGardishyan/rafayels-marketplace --skill ralph-lauren

💬 Prompt for ChatGPT / Claude Chat▼

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.