frontend
The LazyCodex Skill for UI, UX, design, performance, accessibility, and visual QA.
frontend is the Skill LazyCodex uses for web UI, UX, styling, performance, accessibility, and visual QA. It does not just fill a screen with components. It builds UI against the existing design system and verifies the result in a real browser.
This Skill works more like a router than a single rule file. Depending on the task, it reads only the relevant design, perfection, and ui-ux-db references, then uses those standards for both implementation and verification.
When to Use It
- Frontend implementation, styling, layout, and animation work.
- Polishing an existing UI that feels awkward or inconsistent.
- Checking Lighthouse, Core Web Vitals, accessibility, and SEO in a real browser.
- Adding React development tools such as
react-grab,react-scan, orreact-doctor. - Looking up colors, fonts, charts, landing-page structures, or UX patterns.
Three Axes
| Axis | Role |
|---|---|
design | Design systems, brand tone, layout taste, browser-based design QA. |
perfection | Lighthouse 100, performance, accessibility, SEO, Core Web Vitals. |
ui-ux-db | Searchable styles, palettes, font pairings, and UX guidelines. |
Operating Principles
- Do not create new components without checking the design system.
- Do not weaken UX just to improve Lighthouse scores.
- Use SVG icon sets rather than emoji.
- Prefer GPU-friendly animation properties such as
transform,opacity, andfilter. - Verify the result in a real browser before calling the work done.
Common Flow
Route
Classify whether the request is UI implementation, UI improvement, performance audit, or style research. Read only the references needed for that path.
Build
Implement in the style of the existing codebase and design system. When a new visual rule is necessary, leave it as a repeatable token or pattern.
Verify
Check the desktop and mobile surfaces in the browser, and include performance or accessibility metrics when the task calls for them.