Skip to content
mcp/skillhub

Agent Skill

Frontend skill

frontendcode-yeongyu/oh-my-openagentpackages/shared-skills/skills/frontend/SKILL.md

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.

70k

always on

78 tokname + description

once used

5,464 tokSKILL.md body

bundled files

6613 scripts

repo stars

70kGitHub

Install the Frontend skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/code-yeongyu/oh-my-openagent --skill frontend

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/code-yeongyu/oh-my-openagent.git /tmp/oh-my-openagent
mkdir -p ~/.claude/skills
cp -R /tmp/oh-my-openagent/packages/shared-skills/skills/frontend ~/.claude/skills/frontend

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description78 tok
When the agent uses itThe SKILL.md instructions5,464 tok
Only if opened66 bundled files (299 KB)varies

Until it is used, frontend costs about 17× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 60 skills from code-yeongyu/oh-my-openagent would load 5,128 tokens of descriptions. Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.
  • The instructions are over 5,000 tokens, the Agent Skills specification's guideline for SKILL.md.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Frontend
  • Phase 0 — Route (before any UI work)
  • Draft guard — read before the first line of HTML or CSS
  • Design System and Component Workflow
  • Ruleset 1 — design (references/design/)
  • Layer 0 — architecture
  • Layer A — taste skills (pick AT MOST ONE style skill; they encode opposing philosophies)
  • Layer B — brand design systems (orthogonal to Layer A; stack freely)
  • React dev tooling
  • Ruleset 2 — perfection (references/perfection/)
  • Ruleset 3 — ui-ux-db (references/ui-ux-db/)
  • Ruleset 4 — designpowers (references/designpowers/)
  • Quick routes — most common requests
  • Shared axioms (all four rulesets agree — apply always)
  • When to load something else instead
  • Activation

More skills from code-yeongyu/oh-my-openagent

All skills in this repo
  1. ast-grepcode-yeongyu/oh-my-openagent

    Searches and rewrites code by AST shape across 25 languages. Use when the target is a syntax pattern (every call/class/import shaped like X, a codemod, a YAML rule) rather than literal text; for plain strings, comments, or filenames, use rg.

    70k560 tok idle · 3,466 in use
  2. browsercode-yeongyu/oh-my-openagent

    Drives a real browser through the omowright library from the js eval kernel: sites the user is already signed into, forms and clicks, JS-rendered pages, screenshots, web QA, extension popups, a human handoff for login, CAPTCHA or OTP, and a browser you own for scraping, bot-scored targets, network capture and QA traces. Use for any interactive browser task; not for a plain search or an unblocked static fetch.

    70k493 tok idle · 1,970 in use
  3. codex-qacode-yeongyu/oh-my-openagent

    QA the omo Codex Light edition (lazycodex / packages/omo-codex) itself, in strict isolation so ONLY our plugin is exercised, never the user's real ~/.codex. The first-party method drives the real `codex app-server` against an isolated CODEX_HOME plus a LOCAL mock model (no real API call), and proves a plugin hook fired by asserting hook/started + hook/completed notifications. Also: isolated install verification, per-component hook probes, a tmux TUI smoke, and runtime log observation (RUST_LOG / logs SQLite / /debug-config). Ships tested helper scripts each with a --self-test. Use whenever someone changes anything under packages/omo-codex or wants to QA, smoke-test, verify, or debug the Codex plugin, its hooks/components, the installer/config.toml, the app-server flow, or the Codex TUI. Triggers: codex qa, qa codex, codex-qa, test codex plugin, verify codex hook, codex app-server, lazycodex qa, isolated CODEX_HOME, prove codex hook fired, codex tui test.

    70k9239 tok idle · 1,789 in use
  4. coding-agent-sessionscode-yeongyu/oh-my-openagent

    Finds, reads, and reconstructs coding-agent sessions across Codex, Claude, OpenCode, OMO/Senpi, and other local agent logs. Use when asked to find or search past sessions, transcripts, or subagent runs, or to recover what an earlier session did.

    70k2362 tok idle · 2,672 in use
  5. comment-checkercode-yeongyu/oh-my-openagent

    Use when Codex needs to understand or respond to automatic comment-checker feedback emitted after an edit-like PostToolUse hook.

    70k29 tok idle · 104 in use
  6. dag-librarycode-yeongyu/oh-my-openagent

    Stores a DAG definition once and re-runs it by name, instead of pasting the definition into every run. Use when the user wants to save a DAG, run a saved one, or schedule the same multi-agent graph repeatedly.

    70k50 tok idle · 1,055 in use
  7. data-scientistcode-yeongyu/oh-my-openagent

    Processes and analyzes data with resident-kernel engines (DuckDB, Polars) and one-shot tools. Use for CSV/parquet/JSON analysis, group-by/join/aggregation, time series, distributions, cleaning, or plotting a dataset.

    70k554 tok idle · 1,278 in use
  8. debuggingcode-yeongyu/oh-my-openagent

    Runs a hypothesis-driven debugging loop across any language or binary, escalating to orthogonal oracle angles and locking the fix with a failing test. Use for crashes, silent failures, hangs, wrong responses, memory leaks, async misbehavior, or reverse engineering.

    70k353 tok idle · 3,031 in use