frontend
Helps your agent create and enhance web user interfaces. Useful for any task related to visual design, layout, styling, and user experience.
What it does
This tool helps create and improve the look of websites and apps. It handles design, colors, layout, and animations to make everything look good and be easy to use.
When to use it
- ✓When you want a website to have a specific look.
- ✓When creating buttons, menus, or other interface parts.
- ✓To make a website more animated or have a modern feel.
Example of what to ask your AI
“Create a website with a modern, minimalist look, featuring subtle button animations.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool analyzes your request and uses design guides and examples to create the necessary code. It checks that the final result is visually appealing and functional.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add code-yeongyu/oh-my-openagent --skill frontendOr download just the file:
curl -L https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/dev/packages/shared-skills/skills/frontend/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Frontend
This file is a router, not a rulebook. The rules live in four rulesets under references/, and reading them is the work, not the preamble to it. Before touching any file, name the references the request routes to and the one reason each is needed, then read exactly those. Declaring the set first is what makes the choice reviewable: a reference you never named is one you decided to skip, and a reference you named but never opened is a gap you still owe. Freestyling past the routed set produces the generic AI-slop output this skill exists to prevent.
The bar is not clean-and-correct — it is work a senior designer at Linear, Stripe, or Supabase would ship. Correct-but-flat is a failure, not a finish. Protect the surface as hard as you protect the build: design is a first-class deliverable, not a one-shot decision you lock and walk away from.
Phase 0 — Route (before any UI work)
| Request involves… | Read |
|---|---|
| ANY UI implementation, styling, redesign, mockup, or visual decision | references/design/README.md FIRST. It enforces two mandatory gates — the Design System Gate (a DESIGN.md must exist before any component is written) and the React Dev Tooling Gate (react-grab / react-scan / react-doctor installed by default) — then routes to the taste and brand references below. |
| Spatial structure — app shells, scroll ownership, "what goes where", "this layout breaks at X" | ALSO references/design/layout-skill.md for the mechanics, then references/design/stylegallery.md to fetch a named pattern contract for that exact spatial problem. Both stack on the style skill and add no visual direction. |
| Paged output — a PDF report, a print stylesheet, a headless-Chrome print pipeline, an HTML deck printed to paper, or any "why is this page half empty" break defect | ALSO references/design/print-paged-media.md for the page box, the fragmentation properties, the atomic-block set, and the keep-together side effect that strands a block on a near-empty page. It adds no visual direction and stacks on the routed style skill. |
| Interaction or motion work — micro-interactions, animated components, transitions, gestures, hover/press/state feedback, "make it feel alive" | ALSO references/design/interaction-skill.md. The beui.dev catalog is the mandatory interaction reference: find the nearest pattern, read its real source through the file's curl recipe, and adapt the mechanism to DESIGN.md motion tokens. It stacks on the routed style skill — never replaces it. |
| Hero atmosphere or ambience — an animated, shader, particle, or grid background; a typographic reveal (split, blur, shimmer, typewriter, count-up, marquee); scroll storytelling; spotlight / tilt / glare / glowing-border card surfaces; "make the hero stunning", "add a living background", "animate the headline" | ALSO references/design/ambience-skill.md. The react-bits catalog is the mandatory ambience reference: find the nearest pattern in its intent map, read its real source through the file's curl recipe, extract the mechanism, and run its retrofit checklist (reduced motion, off-screen pause, compositor-only, tokens, budget) before shipping. It stacks on the routed style skill — never replaces it, and never vendors react-bits code. |
| The brief's tone or surface falls outside both anchors — AI-agent UI, charts, landing sections, a brutalist or Tailwind-only build — or an anchor has no nearest pattern | ALSO references/design/component-catalogs.md: which catalog to read for that tone, the exploration procedure, and the licence and terms gate for every other catalog. |
| Writing or modifying frontend code, OR auditing performance / SEO / accessibility / quality | ALSO references/perfection/README.md. Lighthouse 100 in every category, measured on real Playwright Chromium (never the lighthouse CLI), achieved through architecture — never by dropping animations or hiding content. |
| Looking up a concrete style, palette, font pairing, chart type, landing structure, or UX guideline — or generating a design system from keywords | references/ui-ux-db/README.md. A searchable CSV database with a CLI: a lookup tool, not a posture. design stays the source of truth for taste and the DESIGN.md contract. |
…
FAQ
What are 'UI' and 'UX'?
UI (User Interface) is how things look on the screen. UX (User Experience) is how easy and pleasant it is to use them.
Do I need to know how to code to use this?
No, you just need to describe how you want things to look or work.
What are 'references'?
These are sets of rules and examples the tool uses to ensure the design is high-quality and follows best practices.
Details
Original description by the author
Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.
Popularity
- GitHub stars
- 70k
- Ranking position
- #1738
- License
- NOASSERTION
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
comment-checker
Helps your agent understand and respond to feedback from automatic comment checkers. It's useful when the agent needs to process information from tools that automatically review code or content.
code-yeongyu/oh-my-openagent
lcx-contribute-bug-fix
Helps your agent contribute bug fixes for LazyCodex-related projects. It creates issues or pull requests to ensure code quality.
code-yeongyu/oh-my-openagent
lcx-doctor
Lets your agent check the health of LazyCodex and Codex CLI installations. It's useful when the system behaves oddly after updates or changes.
code-yeongyu/oh-my-openagent
lcx-report-bug
Helps your agent report bugs in detail for LazyCodex projects. It creates issues with useful information for developers to fix the problem.
code-yeongyu/oh-my-openagent
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC