← ClaudeAtlas

frontend-qualitylisted

Enforce frontend quality bar — accessibility (WCAG 2.2 AA), performance (Core Web Vitals: LCP/INP/CLS), semantic HTML, image optimization, bundle size, mobile-first, loading/empty/error states. Use this skill on any PR that touches React/Next.js/Astro/Svelte/Vue components, CSS/Tailwind, layout files, or anything in `app/`, `components/`, `pages/`, `src/`. Critical for [Project A] (Argentine mobile users on slow 3G/4G) and [Company] docs site (developer audience expects fast). Auto-triggers on `*.tsx`, `*.jsx`, `*.svelte`, `*.vue`, `*.astro`, `*.css`.
Xipher-Labs/walter-os · ★ 5 · Web & Frontend · score 67
Install: claude install-skill Xipher-Labs/walter-os
# Frontend Quality Quality bar for any user-facing web UI. Hard requirements (a11y, perf, mobile-first), not stylistic preferences. Reviews catch the bugs that matter to real users — slow pages, broken keyboard nav, layouts that shift while loading. ## Model Routing Use the operator's frontend preference when a model needs to critique or rewrite UI, UX, visual hierarchy, accessibility copy, or interaction details: ```bash source "$WALTER_OS_HOME/scripts/walter/lib/model-router.sh" frontend_model="" walter_model_resolve frontend frontend_model ``` Default preference is Claude. The operator may point the alias at another LiteLLM route in `~/.config/walter-os/overlay/personal.env`. This skill auto-triggers on frontend-touching diffs. For a build-from-zero landing page, use `landing-page-fast` (which includes these rules but provides scaffolding). ## Why this matters specifically for this operator - **[Project A]** users are Argentine SMB suppliers — many on phones, often on 3G/4G with intermittent connection. Slow site = users leave. WCAG matters because some users have low tech literacy + impaired vision. - **[Project B]** users include patients with disabilities. WCAG isn't "nice to have" — it's a usability requirement. - **[Company] docs** is read by sophisticated devs who instantly bounce on slow or broken-keyboard sites. ## Accessibility (WCAG 2.2 AA — required) ### Keyboard - **Every interactive element reachable by Tab**. Buttons, links, form fields,