← All skills
frontend
67 / 100 · Review before installing
Check before installing.
By code-yeongyu/oh-my-openagent (GitHub) · design · 70,817 stars · scanned at commit f922d6a
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.
Works with any agent that supports SKILL.md skills.
What this skill can do
Runs commands on your computer
This is disclosed by the author in the skill's SKILL.md or README.
Found in 9 places.
Show 6 more
- packages/shared-skills/skills/frontend/scripts/perfection/check-accent-stripes.test.ts, line 73
const run = (...args: string[]) => spawnSync(process.execPath, [SCRIPT, ...args], { encoding: "utf8", timeout: 30_000 }) - packages/shared-skills/skills/frontend/scripts/perfection/check-draft-guard.test.ts, line 2
import { spawnSync } from "node:child_process" - packages/shared-skills/skills/frontend/scripts/perfection/check-draft-guard.test.ts, line 78
const run = (...args: string[]) => spawnSync(process.execPath, [SCRIPT, ...args], { encoding: "utf8", timeout: 30_000 }) - packages/shared-skills/skills/frontend/scripts/perfection/lighthouse-audit.py, line 81
result = subprocess.run( - packages/shared-skills/skills/frontend/scripts/perfection/lighthouse-audit.py, line 92
subprocess.run( - packages/shared-skills/skills/frontend/scripts/perfection/lighthouse-audit.py, line 106
result = subprocess.run(
Downloads and installs other software
The author does not mention this.
Found in 18 places.
Show 15 more
- packages/shared-skills/skills/frontend/references/design/ambience-skill.md, line 37
`<Name>` is the PascalCase CLI name from `llms.txt` (`BlurText`, `Aurora`, `SpotlightCard`). `<LANG>` is `JS` or `TS`; `<STYLE>` is `CSS` or `TW`; CSS variants - packages/shared-skills/skills/frontend/references/design/ambience-skill.md, line 126
4. **Installing is the exception, not the path.** `npx shadcn@latest add https://reactbits.dev/r/<Name>-TS-TW.json` (or the `jsrepo` equivalent) copies the ONE - packages/shared-skills/skills/frontend/references/design/component-catalogs.md, line 68
6. **Install only by exception**, under `ambience-skill.md` section 5: `npx shadcn@latest add @<namespace>/<name>` (or the item URL) only when the project alrea - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 11
| **react-doctor** | Static scanner that finds bad React patterns across state & effects, perf, architecture, security, a11y. One-shot `npx react-doctor@latest` - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 21
npx grab@latest init - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 24
npx react-doctor@latest install - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 27
npx react-scan@latest init - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 149
npx react-doctor@latest install - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 158
npx react-doctor@latest - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 161
npx react-doctor@latest --json > .react-doctor-report.json - packages/shared-skills/skills/frontend/references/perfection/README.md, line 78
- **`react-doctor`** (static): cheapest. `npx react-doctor@latest --json` before any browser audit. Treat perf-category findings as audit failures. - packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 8
| **react-doctor** | Static scan, CI-friendly | Deterministic findings across state/effects, perf (memoization, list keys, expensive children), architecture, se - packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 94
npx react-doctor@latest --json > .react-doctor-report.json - packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 110
run: npx react-doctor@latest --json --fail-on perf - packages/shared-skills/skills/frontend/references/perfection/react-perf-tooling.md, line 118
2. **`react-scan` interactive in dev** — load the page in real Chrome with `npx react-scan@latest init` already wired (see the dev-tooling reference). Walk the
Sends data to these websites: reactbits.dev, smoothui.dev, www.cult-ui.com, beui.dev, www.lazyweb.com, raw.githubusercontent.com
The author does not mention this.
Found in 19 places.
Show 16 more
- packages/shared-skills/skills/frontend/references/design/ambience-skill.md, line 33
curl -s https://reactbits.dev/r/<Name>-TS-TW.json | jq -r '.files[].content' # the thing to read - packages/shared-skills/skills/frontend/references/design/ambience-skill.md, line 34
curl -s https://reactbits.dev/r/<Name>-TS-TW.json | jq -c '.dependencies' # e.g. ["motion@^12"] or ["ogl@^1"] - packages/shared-skills/skills/frontend/references/design/component-catalogs.md, line 54
curl -s https://smoothui.dev/llms.txt | grep -i approval - packages/shared-skills/skills/frontend/references/design/component-catalogs.md, line 55
curl -s https://www.cult-ui.com/r/registry.json | jq -r '.items[].name' | grep -i tab - packages/shared-skills/skills/frontend/references/design/component-catalogs.md, line 61
curl -s <origin>/r/<name>.json | jq -r '.files[].content' # the code - packages/shared-skills/skills/frontend/references/design/component-catalogs.md, line 62
curl -s <origin>/r/<name>.json | jq -c '.dependencies' # what it pulls in - packages/shared-skills/skills/frontend/references/design/interaction-skill.md, line 29
curl -s https://beui.dev/llms.txt # full catalog: every component + one-line feel - packages/shared-skills/skills/frontend/references/design/interaction-skill.md, line 30
curl -s https://beui.dev/r # registry index (JSON): slugs, categories, endpoints - packages/shared-skills/skills/frontend/references/design/interaction-skill.md, line 31
curl -s https://beui.dev/r/{slug} # component detail (JSON): files, dependencies, dates - packages/shared-skills/skills/frontend/references/design/interaction-skill.md, line 32
curl -s https://beui.dev/r/{slug}/raw # component source (TypeScript) — the thing to read - packages/shared-skills/skills/frontend/references/design/interaction-skill.md, line 33
curl -s https://beui.dev/components/{category}/{slug}.md # component doc page as markdown - packages/shared-skills/skills/frontend/references/design/lazyweb.md, line 27
curl -s -X POST https://www.lazyweb.com/api/mcp/install-token \ - packages/shared-skills/skills/frontend/references/design/lazyweb.md, line 35
lw() { curl -s -X POST https://www.lazyweb.com/mcp \ - packages/shared-skills/skills/frontend/references/design/lazyweb.md, line 57
research: `curl -s -o /tmp/lazyweb-refs/<company>.png "<imageUrl>"`. - packages/shared-skills/skills/frontend/references/design/react-dev-tooling-skill.md, line 217
curl -s http://localhost:3000 | grep -E 'react-grab|react-scan' && echo "LEAK — fix the gate" || echo "OK" - packages/shared-skills/skills/frontend/references/design/stylegallery.md, line 39
sgfetch() { curl -fsSL "https://raw.githubusercontent.com/changeroa/StyleGallery/main/$1"; }
Changes files outside its own folder
The author does not mention this.
Found in 1 place.
Safer alternatives
Low-risk skills in the same category (design) that look related. Check that one does what you need.
Other copies in this repository
code-yeongyu/oh-my-openagent has 1 more folder with a skill named frontend. This page shows the lowest-scoring copy.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'frontend' ] || [ -L ~/.agents/skills/'frontend' ]; then echo 'A skill folder named frontend already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/code-yeongyu/oh-my-openagent' "$d" && git -C "$d" checkout --quiet 'f922d6ac3a78be2206e00d7ae433593d5faf51c7' -- 'packages/shared-skills/skills/frontend' && mkdir -p ~/.agents/skills && cp -R "$d"/'packages/shared-skills/skills/frontend' ~/.agents/skills/'frontend' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'frontend' ~/.claude/skills/'frontend' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for code-yeongyu/oh-my-openagent shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/code-yeongyu/oh-my-openagent/)
Score history
| Date | Version | Score |
|---|
| 2026-11-10 | f922d6a | 67 |
| 2026-11-08 | 79d6a05 | 67 |
| 2026-11-07 | a815fdf | 47 |