omni-frontend-expert

omni-frontend-expert is the ultimate frontend design skill. It's used to create distinctive, production-grade frontend interfaces with deeply considered aesthetics, flawless consistency, and professional interaction quality. Use when building any frontend; components, pages, apps, dashboards, tools. Enforces high standards across visual quality, UX behavior, design systems, accessibility, and performance while rejecting all forms of AI slop or lazy default design.

SKILL.md

---
name: omni-frontend-expert
description: omni-frontend-expert is the ultimate frontend design skill. It's used to create distinctive, production-grade frontend interfaces with deeply considered aesthetics, flawless consistency, and professional interaction quality. Use when building any frontend; components, pages, apps, dashboards, tools. Enforces high standards across visual quality, UX behavior, design systems, accessibility, and performance while rejecting all forms of AI slop or lazy default design.
---

Before writing any code, fully internalize this skill. Omni-frontend-expert guides the creation of distinctive, production-grade frontend interfaces. We don't accept   "good enough", everything must be surgically, and carefully crafted. Every decision must be deeply thought out. No shortcuts, no assumptions, no guessing. Plan before implementing. Ask before starting if critical information is missing. Spread implementation into multiple comprehensive phases.

---

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme and commit fully — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, and beyond. These are illustrative starting points, not an exhaustive list. Design something true to the specific context, not a template copy.
- **Constraints**: Technical requirements, framework, performance needs, existing brand guidelines.
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember about it?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity. Timid, undecided designs always fail. Implement working code that is production-grade, visually striking, cohesive with a clear aesthetic point-of-view, and meticulously refined in every detail.

---

## Design System & Global Consistency

Rule 1 is consistency. Everything must be well defined and global. There must be a clear, consistent design system — a single source of truth for all visual values. No new colors hallucinated for each new thing. No elements that spontaneously look different from one screen to the next. Everything has a predefined character applied universally. Consistency isn't just the design, but also the layout, spacing, and overall user experience.

Before writing any UI, establish or load a design system covering: color palette, typography pairing, spacing scale, border radius, shadow levels, and motion tokens. Every value must be a token — no one-off hex values, no ad-hoc inline styles, no hardcoded spacing that bypasses the system. If a design system exists already, treat it as truth and do not invent outside it.

Color approach: prefer `oklch()` for perceptual accuracy. Use semantic token names (surface, text, border, primary, accent, destructive) so the meaning is clear regardless of the actual values. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Commit fully to a dark or light theme — do not hedge with gray middle-ground indecision. Dark mode is a token remap, not a second design.

---

## Typography

Avoid generic fonts like Arial, Inter, Roboto, and system fonts — opt for distinctive choices that elevate the frontend's aesthetics. Unexpected, characterful font choices make an interface memorable. Pair a distinctive display font with a refined body font. Contrast weights and styles (e.g., thin editorial serif with bold geometric sans) create visual tension that is interesting. Matching weights and matching styles is boring.

NEVER converge on common AI-generation defaults. No two designs should feel like they use the same template. Use 3x+ size jumps for headline hierarchy — not timid 1.5x increments.

---

## Visual Quality & Motion

Always use professional, high-quality methods. No lazy slop.

some examples:
- If you want to make a trail, it shouldn't be the blocky stepped segments kind where it breaks the entire seamlessness.
- Never use low quality implimentations, like an explosion, it shouldn't be a basic image following the camera, where you can easily see it cap under ground, that's lazy and breaks the illusion.
- when making a shadow or vignette, don't use some basic low-quality method where it looks blocky, and you can clearly see the segments.
- Always use the proper frameworks, like when making a draging functionality, it should be responsive, and smooth, not delayed, and laggy - or even worse, while dragging, it accidentally selects text and stuff 
- For renaming functionality where clicking text allows you to rename it; it shouldn't be some lazy generic unstyled text area. It must be an actual seamless renaming experience that feels like you're editing the text directly. Same font, same size, same position, etc.
- For a text input like a chat interface — if the chat is empty, the text input shouldn't jump to the top, it should stick to the bottom. Follow platform conventions for element anchoring and positioning.
- If something is empty, it shouldn't just be empty. It should show a professional text perfectly centered in the empty container saying there is no [X] yet. Every empty state is an opportunity to communicate clearly, not a blank wall.
- Never use fixed delays, when waiting on something use logic like: "wait for ... then do ... if ... doesn't finish in X amount of time, then do ... or show an error", something like that. never waste a single milisecond when not needed, everything must be dynamic and responsive.
...

these are just some examples of what I mean, but there are much more, that's why you have to think deeply and be clever when planing, plan in detailed phases.

Some good examples (do not over-use):
- a grid background, edges slightly faded
- interactive, and alive feeiling features: like a weather app, instead of a static layout, make it dynamic where if its raining, the interface gets a raining effect, and colors slightly change, if it's snowing, sunny, cloudy, etc.
- interactive stuff, like a particle system EG. particle network, particle rain/snow, even interactive 3D stuff, or shapes you can drag and have gravity, etc... there is so much you can do, just be creative.
- backdrop blur, like glass. be careful with this one, use it carefully, in some senarios it looks good, but in others it looks like complete slop.
- loading skeletons
- Some nice animations: writing, smooth motion system, 3d space hover, like hovering on a card and it tilts in 3d space, etc...

Avoid generic AI slop animations: goofy on-hover scale/move/display shadow. These feel cheap and overused.
Backgrounds should be clean and modern. Avoid distracting glossy, blurry, neon, or overly saturated backgrounds.
This doesn't necessarily mean a plain background, it can have depth, for example terminal themed, white&black textbook style, etc. A nice clean, unique style is always better than a generic, overused sloppy ones.

---

## Layout & Spatial Composition

Don't be lazy by putting everything in a container/div or making everything in one tab where you have to keep scrolling instead of a well thought, user-friendly layout with proper tabs. Layout must be genuinely thought through — use tabs, accordions, sidebars, pagination, etc... The goal is a layout that feels organized and navigable, not a dump of content stacked vertically without any personality.

Avoid symmetric, centered, predictable layouts for marketing and hero surfaces. Asymmetry, overlap, diagonal flow, and grid-breaking elements create visual interest. Generous negative space OR controlled density — pick one and execute it.

Containers shouldn't be stupidly coded containers that keep resizing based on content. Rule 1 is consistency — even containers must be consistent, not resize based on content. They must have a fixed. Card grids use uniform card heights. Content is managed inside the container — the container never stretches to accommodate it.

Design mobile-first. Every layout must be coherent at small and large viewports. Grids collapse, forms stack, font sizes scale — responsive behavior is part of the design, not an afterthought.

---

## UX, Interaction Standards & Thoughtful Design

The designs must be truly well thought out. This means deeply considering how the user actually interacts with every part of the interface, not just how it looks in a static screenshot.

Follow industry standards — users have deeply ingrained expectations and violating them creates friction. For example: `Enter` to send in a chat context, `Shift+Enter` to go to the next line without sending, `Escape` to close or cancel, clicking outside a popup to close it. These are examples of the class of convention that must be followed — apply the same principle to whatever component type is being built. Don't just think about these three; think about every interaction in the interface and ask: what does the user expect here?

---

## Custom Native Elements

Don't be lazy by keeping standard stuff the default unthemed styling. Everything must be professionally styled and themed — sliders, switches, checkboxes, dropdowns, tooltips, scrollbars, and any other native browser element that appears in the interface. Default browser styling is never acceptable in a production-grade UI.

Apply `appearance: none` and custom implementations via pseudo-elements, custom selectors, and JavaScript where needed. Every native element must match the design system exactly — same radius, same color tokens, same feel as the rest of the interface. Tooltips should use a custom implementation with correct positioning and flip behavior, not the native `title` attribute.

---

## Icons & Visual Assets

Don't use emojis for icons, that's lazy - instead use professional SVG icons from a standardized icon library (Lucide is a good default).

---

## Component Quality Standards

All components consume design system tokens. No component invents its own visual rules. The spirit of global consistency applies at every level — a button built for one section of the app must be identical in structure, behavior, and token usage to a button built for any other section.

For example, buttons must have a clear visual hierarchy (primary, secondary, ghost, destructive), adequate touch targets, and all states handled: default, hover, active, disabled, loading. Hover is a bg-color change.

---

## Accessibility

Use semantic HTML first — `button`, `nav`, `main`, `section`, `header`, `footer`, `article`. ARIA only when semantic HTML is genuinely insufficient. Correct heading hierarchy without skipping levels. Every interactive element must be keyboard-operable. Visible focus states everywhere via `:focus-visible` — never `outline: none` without a real, visible replacement that matches the design system. Color contrast meets WCAG AA minimums (4.5:1 text, 3:1 UI components). `aria-live="polite"` for async UI updates like toasts and validation messages.

---

## Pre-Delivery Checklist
Before claiming completion, run through this:

- Design system established — all values tokenized, zero one-off colors or spacing
- All native browser elements are fully themed to match the design system — none left at browser defaults
- Typography is distinctive and characterful — no generic, default-safe font choices
- No cheap or goofy animations — all motion is smooth, purposeful, and professional
- No lazy shortcuts (EG. emojis used as icons)
- All empty states are handled — no blank containers
- Containers are fixed/constrained — not resizing based on content
- All interactions feel native and seamless — no lazy implementations that break the illusion
- All elements follow platform positioning and layout conventions
- All relevant industry-standard keyboard and pointer conventions work correctly
- Responsive at multiple breakpoints — no horizontal scroll
- Focus states visible everywhere
- prefers-reduced-motion respected
- No hallucinated content, names, copy, or version numbers
- Everything is consistent — what looks a certain way in one place looks that way everywhere

## Auto Update (IMPORTANT)

To keep this skill up-to-date, please check for new updates by running `python3 update-manager.py --update`.
Last checked: [YYYY-MM-DD]
Checked today? [false]

Check once a day please.
**NOTE:** Previous versions will be saved in `omni-frontend-expert/archive/SKILL_YYYY-MM-DD_HH-MM-SS.md`