# Frontend

Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages...

- Repository: https://github.com/code-yeongyu/oh-my-openagent (70577 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add code-yeongyu/oh-my-openagent --skill frontend -g -a claude-code -y`
Codex: `npx skills add code-yeongyu/oh-my-openagent --skill frontend -g -a codex -y`
Cursor: `npx skills add code-yeongyu/oh-my-openagent --skill frontend -g -a cursor -y`
Gemini CLI: `npx skills add code-yeongyu/oh-my-openagent --skill frontend -g -a gemini-cli -y`

## Description

Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain way.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Frontend

This file is a router over `references/`; the rules live there. The flow is ground -> brief -> build -> subtract -> verify. The bar is restraint with a visible hierarchy: one primary action, the important thing first, nothing on the screen without a job. A quiet, correct screen that holds its hierarchy at 390 and 1440 in both themes is a finish. Atmosphere, motion, and award-grade surface work are opt-in: build them when the brief asks (a named brand, "premium", "make it stunning", a marketing page), never by default for an internal tool, dashboard, admin screen, report, or figure.

## Route: name the references, read exactly those

Before the first edit, name the references the request routes to and one reason for each, then read them. Rows stack: take every row the request matches, so a small change that also reshapes a region takes the layout row too, and any code change takes the perfection row and, on a React project, the React tooling row. A small change on an existing surface still reads only a few; only greenfield fans out. A reference you never named is one you decided to skip; one you named but never opened is a gap you still owe.

The rest: https://github.com/code-yeongyu/oh-my-openagent/blob/HEAD/packages/shared-skills/skills/frontend/SKILL.md