skills.rest
hugefiver
hugefiverCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Routes frontend UI work through design-system, taste, and Lighthouse audit reference rulesets.

Updated Jun 18, 2026
Search Tags:#accessibility#frontend#react#design system#web performance#ui ux#lighthouse audit
One-click install
npx skills add https://github.com/hugefiver/ocmm --skill frontend-hugefiver
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/hugefiver/ocmm/tree/main/plugins/deepwork/skills/frontend
Command: npx skills add https://github.com/hugefiver/ocmm --skill frontend-hugefiver

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, playwright-lighthouse, react-scan, react-doctor, react-grab, lighthouse, chrome-launcher, and includes scripts (resource) and references (resource) components.

What problem does it solve? Frontend work done without a design system or taste guidance produces generic AI-slop interfaces, and performance audits run through the wrong tooling produce misleading scores. This Skill enforces a routing discipline that loads the right design references, mandates a DESIGN.md before any component is written, and requires real-browser Lighthouse 100 audits. ## Core Features & Use Cases - Design routing: Routes requests across 12 taste skills, 70 brand design-system references (Apple, Stripe, Linear, Notion, Nike, and more), and a composable interaction-mechanics reference, with strict stacking rules. - Perfection audits: Enforces Lighthouse 100 in every category measured on real Playwright Chromium (never the lighthouse CLI), plus react-scan and react-doctor render-quality gates for React projects. - UI/UX database lookup: Provides a searchable CLI over 50+ styles, 97 palettes, 57 font pairings, and 99 UX guidelines for generating project design systems from keywords. - Use Case: When asked to build a Linear-style landing page, the Skill loads the Linear brand tokens plus a taste skill, creates or validates DESIGN.md, implements the page, then verifies it with screenshots at 375/768/1280px and a median-of-runs Lighthouse audit. ## Quick Start Ask the agent to build a landing page in the style of a named brand and let it load the matching design references before writing any UI code.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build a landing page that looks like Linear or Stripe?▼

Name the brand in your request and the Skill loads that brand's design-system reference file with its exact color palette, type scale, and component specs, plus one taste skill for execution discipline. Tokens are extracted and applied to your own content rather than copying brand assets.

How do I audit my site for Lighthouse performance correctly?▼

Build for production, then run the bundled lighthouse-audit.py script via uv against the local URL, which uses real Playwright Chromium instead of the lighthouse CLI. Run mobile and desktop presets 3-5 times and take the median; all four categories must reach 100.

Does this Skill work with React projects?▼

Yes, React projects get a mandatory dev tooling gate that installs react-grab, react-scan, and react-doctor behind development-only environment checks. Audits additionally require react-scan render-quality checks alongside Lighthouse scores.

What is the DESIGN.md gate and why is it required?▼

The Design System Gate requires a DESIGN.md file defining color tokens, typography scale, spacing, and components before any UI code is written. Every value in the implementation must trace back to a token in that file, preventing ad-hoc hex codes and inconsistent styling.

When should I not use this frontend Skill?▼

Skip it for backend, CLI, or pure TypeScript logic work with no visual surface, where it adds nothing. For brands outside its 70 built-in references, it delegates to the broader open-design skill library instead.

Related Skills

Explore More Design & Creative Skills→
daymadedaymade
1.4k

design-style-picker

Generates and compares visual design direction matrices for user style selection.

Community
Intermediate
gwpjpgwpjp
3

visual-qa-lighthouse

Audit production web apps with Lighthouse CLI and generate JSON performance reports.

Community
Advanced
airhornsairhorns

jam-browser-validation

Launch Jam examples and drive them with the agent-browser CLI for validation.

Community
Intermediate
Hunt-Gather-CreateHunt-Gather-Create

brand-analyzer

Analyzes a website and produces a 1-2 paragraph brand summary.

Official
Intermediate