skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

frontend-excellence

Guides building, auditing, and polishing web interfaces against Lighthouse, accessibility, and SEO targets.

1|Updated Aug 18, 2026
Search Tags:#performance#accessibility#frontend#audit#lighthouse#seo#core web vitals
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill frontend-excellence-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-excellence
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/frontend-excellence
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill frontend-excellence-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend work often ships with generic AI-looking design, poor Core Web Vitals, accessibility violations, and unverified quality. This Skill provides a framework-agnostic playbook with measurable targets (Lighthouse 95+ mobile, 100 Accessibility/Best Practices/SEO) and routing tables that load only the 2-3 reference files relevant to the current task. ## Core Features & Use Cases - North Star Targets & Priority Stack: Enforces numeric bars for LCP, INP, CLS, JS/CSS budgets, and a 10-level priority stack with conflict tie-breakers (e.g., contrast always beats aesthetics). - Task and Symptom Routing: By-Task and By-Symptom tables route work to 26 reference files covering performance, accessibility, SEO, motion, forms, security, auth, i18n, PWA, testing, and more. - Multi-Page Polish Loop: A 19-phase audit workflow with baseline screenshot capture, geometry sweeps, component drift detection, and a final acceptance gate. - Use Case: When asked to fix a failing Lighthouse audit, the Skill routes to lighthouse.md, performance.md, and debug-recipes.md, then verifies the fix on a production build with axe and responsive checks. ## Quick Start Ask the agent to audit this page against the frontend-excellence targets and fix any Lighthouse, accessibility, or SEO failures it finds.

Frequently Asked Questions about frontend-excellence

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

FAQPage Schema
How do I fix a failing Lighthouse audit on my page?▼

Load the lighthouse.md, performance.md, and debug-recipes.md references via the By-Symptom routing table, which maps symptoms like LCP over 2.5s or errors-in-console to specific fixes. Always score a production build, not a dev server, since dev servers manufacture phantom failures.

What accessibility standard does this frontend playbook target?▼

It targets WCAG 2.2 AA as the working bar, including the new success criteria like Focus Not Obscured, Dragging Movements, and Accessible Authentication. Verification uses Lighthouse plus axe plus manual keyboard and screen reader passes with VoiceOver or NVDA.

Does this skill work with React, Vue, and other frameworks?▼

Yes, it is framework-agnostic by design. Every rule is expressed as a principle plus a concrete check rather than a library API, so it applies to vanilla HTML/CSS/JS, React, Vue, Svelte, Astro, Solid, Next.js, Nuxt, SvelteKit, Remix, Qwik, Lit, and Web Components.

How do I choose between SSR, SSG, CSR, and islands for a page?▼

Use the Render Strategy decision table: SSG for indexable mostly-static content, SSR for personalized indexable pages, CSR for non-indexed app shells, ISR for static shells with revalidation, and static-plus-islands for mostly static pages with a few interactive widgets.

Why does my Lighthouse score drop only on the dev server?▼

A dev server manufactures phantom failures through unminified assets and missing compression. Score a production build via the framework preview or the live edge instead, and treat the live or field number as authoritative over any local run.

When should I not use this frontend playbook?▼

Skip it for backend logic, infrastructure, data pipelines, or non-visual scripting, since every rule targets how an interface looks, loads, ranks, or is interacted with. It also defers to project-specific recorded budget waivers when a surface legitimately needs more JavaScript.

Related Skills

Explore More Software Engineering Skills→
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

designer-ui

Generate atomic-design UI assets and HTML mockups from wireframes.

Community
Advanced
resultakakresultakak

performance-budget

Enforce performance budgets across CI gates and PR checks.

Community
Advanced
jscraikjscraik
8

frontend-ui-design

Design and review React and Next.js UI systems with Tailwind CSS design tokens.

Community
Advanced
Community-AccessCommunity-Access
387

Testing Coach

Guide accessibility testing for web applications with screen readers and automated tools.

Official
Intermediate