Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Collection of 2026 Frontend Design Formulas (Liquid Glass, Bento, Neo-Brutalism, Eco-Dark).
.claude/skills/dokhacgiakhoa-frontend-trends-2026/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-20 | ✗→✓ | ▲ Improved | 3% | 0% |
| case-21 | ✗→✓ | ▲ Improved | 15% | 0% |
| case-10 | ✓→✗ | ▼ Worse | 78% | 0% |
| case-24 | ✓→✓ | ＝ Same ✓ | 28% | 0% |
| case-18 | ✓→✓ | ＝ Same ✓ | 128% | 0% |
> Purpose: Provide production-ready, trend-setting UI patterns for 2026 web applications. > Tech Stack: React 19+, Tailwind CSS v4, CSS Modules (optional), Shadcn/ui.
Use for: Modals, Cards, Sticky Headers.
backdrop-filter: blur(16px) saturate(180%)bg-white/10 (Light) or bg-black/20 (Dark)border border-white/20 (Thin, subtle)shadow-[0_8px_32px_0_rgba(31,38,135,0.37)] (Soft colored shadow)opacity-5.Use for: SaaS Dashboards, Developer Tools, Linear-style apps.
border-2 border-slate-900 (Sharp, bold).shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] (Hard offset shadow).rounded-md or rounded-none (No pills).Use for: Mobile Apps, Constantly-on screens.
#000000 (Pure Black for OLED) or #050505.text-slate-200 (Avoid pure white #FFF -> Eye strain).Use for: Feature Showcases, Analytics, Portfolio.
grid-cols-1 md:grid-cols-3 gap-4.col-span-2 or row-span-2 to create hierarchy.hover:scale-[1.02] + Border glow.Use for: Reusable Components in unknown layouts.
container-type: inline-size.@container (min-width: 400px) { ... }.Use for: Landing Pages, Storytelling.
animation-timeline: scroll().Use for: Popovers, Drawers, Toggles.
framer-motion (presets like type: "spring", stiffness: 300, damping: 20).transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275).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.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-24 | pass→pass | 15,529 | 14,451 | -7% | 1 | 1 | 0% | 2,957 | 3,773 | +28% | 0 | 0 | — |
case-18 | pass→pass | 3,673 | 4,629 | +26% | 1 | 1 | 0% | 739 | 1,686 | +128% | 0 | 0 | — |
case-01 | fail→fail | 39,534 | 35,408 | -10% | 1 | 1 | 0% | 8,235 | 8,489 | +3% | 0 | 0 | — |
case-02 | fail→fail | 35,210 | 21,749 | -38% | 1 | 1 | 0% | 5,913 | 5,894 | -0% | 0 | 0 | — |
case-03 | fail→fail | 34,431 | 33,544 | -3% | 1 | 1 | 0% | 8,232 | 6,823 | -17% | 0 | 0 | — |
case-04 | fail→fail | 33,498 | 33,535 | +0% | 1 | 1 | 0% | 5,392 | 6,782 | +26% | 0 | 0 | — |
case-05 | fail→fail | 28,765 | 23,391 | -19% | 1 | 1 | 0% | 5,580 | 5,716 | +2% | 0 | 0 | — |
case-06 | fail→fail | 21,796 | 21,669 | -1% | 1 | 1 | 0% | 3,858 | 4,724 | +22% | 0 | 0 | — |
case-07 | fail→fail | 44,904 | 32,516 | -28% | 1 | 1 | 0% | 4,978 | 7,937 | +59% | 0 | 0 | — |
case-08 | pass→pass | 28,400 | 50,230 | +77% | 1 | 1 | 0% | 6,173 | 9,147 | +48% | 0 | 0 | — |
case-09 | pass→pass | 24,190 | 23,800 | -2% | 1 | 1 | 0% | 3,749 | 4,820 | +29% | 0 | 0 | — |
case-10 | pass→fail | 15,355 | 16,223 | +6% | 1 | 1 | 0% | 2,313 | 4,120 | +78% | 0 | 0 | — |
case-11 | fail→fail | 20,033 | 26,678 | +33% | 1 | 1 | 0% | 4,224 | 5,699 | +35% | 0 | 0 | — |
case-12 | fail→fail | 27,458 | 28,239 | +3% | 1 | 1 | 0% | 4,433 | 7,179 | +62% | 0 | 0 | — |
case-13 | pass→pass | 16,149 | 18,429 | +14% | 1 | 1 | 0% | 2,589 | 4,434 | +71% | 0 | 0 | — |
case-14 | fail→fail | 19,737 | 15,184 | -23% | 1 | 1 | 0% | 3,064 | 4,270 | +39% | 0 | 0 | — |
case-15 | fail→fail | 12,364 | 11,558 | -7% | 1 | 1 | 0% | 2,240 | 3,206 | +43% | 0 | 0 | — |
case-16 | pass→pass | 16,437 | 14,328 | -13% | 1 | 1 | 0% | 2,842 | 3,267 | +15% | 0 | 0 | — |
case-17 | fail→fail | 13,563 | 13,562 | -0% | 1 | 1 | 0% | 2,540 | 3,129 | +23% | 0 | 0 | — |
case-19 | pass→pass | 8,416 | 6,752 | -20% | 1 | 1 | 0% | 1,334 | 2,275 | +71% | 0 | 0 | — |
case-20 | fail→pass | 10,839 | 4,297 | -60% | 1 | 1 | 0% | 1,741 | 1,786 | +3% | 0 | 0 | — |
case-21 | fail→pass | 11,285 | 4,081 | -64% | 1 | 1 | 0% | 1,552 | 1,787 | +15% | 0 | 0 | — |
case-22 | pass→pass | 16,563 | 15,714 | -5% | 1 | 1 | 0% | 2,910 | 3,884 | +33% | 0 | 0 | — |
case-23 | pass→pass | 17,786 | 32,852 | +85% | 1 | 1 | 0% | 3,689 | 6,753 | +83% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 24 cases were attempted. The headline lift of 0 percentage points is the difference between those two pass rates over the 24 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.