Awesome-omni-skill frontend-trends-2026

Collection of 2026 Frontend Design Formulas (Liquid Glass, Bento, Neo-Brutalism, Eco-Dark).

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/frontend/frontend-trends-2026" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-trends-2026 && rm -rf "$T"

manifest: skills/frontend/frontend-trends-2026/SKILL.md

source content

Frontend Design Formulas (2026)

Purpose: Provide production-ready, trend-setting UI patterns for 2026 web applications. Tech Stack: React 19+, Tailwind CSS v4, CSS Modules (optional), Shadcn/ui.

🎨 1. Aesthetic Formulas (Giao diện)

Formula A: Liquid Glass (Kính Lỏng)

Use for: Modals, Cards, Sticky Headers.

Core:

backdrop-filter: blur(16px) saturate(180%)

Surface:
```
bg-white/10
```
(Light) or
```
bg-black/20
```
(Dark)
Border:
```
border border-white/20
```
(Thin, subtle)

Shadow:

shadow-[0_8px_32px_0_rgba(31,38,135,0.37)]

(Soft colored shadow)

Noise: Add a subtle noise texture overlay
```
opacity-5
```
.

Formula B: Neo-Brutalism 2.0 (Thô mộc Hiện đại)

Use for: SaaS Dashboards, Developer Tools, Linear-style apps.

Contrast: High (Black & White base + 1 Neon Accent).
Border:
```
border-2 border-slate-900
```
(Sharp, bold).
Shadow:
```
shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
```
(Hard offset shadow).
Typography: Inter (Tight tracking) or Space Mono.
Radius:
```
rounded-md
```
or
```
rounded-none
```
(No pills).

Formula C: Eco-Dark Mode (Tiết kiệm năng lượng)

Use for: Mobile Apps, Constantly-on screens.

Bg Base:
```
#000000
```
(Pure Black for OLED) or
```
#050505
```
.
Primary Text:
```
text-slate-200
```
(Avoid pure white
```
#FFF
```
-> Eye strain).
Accent: Use OKLCH colors for vibrancy without heavy brightness.

📐 2. Layout Formulas (Bố cục)

Formula D: Bento Grid (Hộp Cơm)

Use for: Feature Showcases, Analytics, Portfolio.

CSS Grid:
```
grid-cols-1 md:grid-cols-3 gap-4
```
.
Spans: Use
```
col-span-2
```
or
```
row-span-2
```
to create hierarchy.
Content: Visual-heavy (Image/Chart) + Minimal Text.
Hover: Subtle scale
```
hover:scale-[1.02]
```
+ Border glow.

Formula E: Container Queries (Card thông minh)

Use for: Reusable Components in unknown layouts.

Parent:
```
container-type: inline-size
```
.
Child CSS:
```
@container (min-width: 400px) { ... }
```
.
Benefit: Component adapts to slot size, not screen size.

✨ 3. Interaction Formulas (Tương tác)

Formula F: Scroll-Driven Animation

Use for: Landing Pages, Storytelling.

Tech: Native CSS
```
animation-timeline: scroll()
```
.
Effect: Elements fade in, slide up, or scale based on scroll position.
Perf: Runs on Compositor Thread (No JS Jank).

Formula G: Spring Physics (Vật lý)

Use for: Popovers, Drawers, Toggles.

Feel: Bouncy, snappy, organic.

Libraries:

framer-motion

(presets like

type: "spring", stiffness: 300, damping: 20

CSS Alternative:

transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275)

📜 Agent Instructions for Usage

Identify Context: Choose Formula based on User Request (e.g., "Modern Dashboard" -> Neo-Brutalism + Bento).
Apply Tokens: Use Tailwind classes listed in formulas.
Code Snippets: Check
```
formulas/
```
directory for ready-to-use React components. Do NOT reinvent wheels.

Example Request:

"Make a modern landing page for my AI tool." Agent Action: Apply Formula A (Liquid Glass) for Header, Formula D (Bento Grid) for Features, and Formula F for animations.