Ultimate Frontend Skill

Every output must feel intentionally crafted — never generic, never "AI slop."

1. Design Before Code

Before writing ANY code, decide:

Aesthetic direction

(pick ONE, match it to the product's audience):

Brutally minimal · Maximalist editorial · Retro-futuristic · Organic/natural · Luxury/refined · Playful · Brutalist · Art deco · Dark/moody · Lo-fi/zine · Handcrafted · Swiss/international · Neo-glassmorphic · Industrial · Soft/pastel

One unforgettable element

a scroll animation, a bold typographic moment, a micro-interaction — something memorable. Then commit fully. Half-hearted design = generic output. 2. The AI Slop Blacklist These instantly mark output as AI-generated. Never: Purple/blue gradient on white cards Every element with identical rounded-xl Perfectly centered, symmetrical layouts with no visual tension text-gray-600 on everything Cards in a perfect 3-column grid with identical heights Rainbow or evenly-distributed color schemes Generic hero with stock illustration placeholder Instead, always: Load distinctive Google Fonts (Instrument Serif, DM Sans, Clash Display, Bricolage Grotesque, Syne, Fraunces, Cabinet Grotesk, Satoshi, Young Serif, Outfit) One dominant color doing 80% of the work + one sharp accent Asymmetric layouts, grid-breaking elements, dramatic scale jumps Atmosphere via gradient meshes, noise textures, glassmorphism, or depth layers Generous negative space as a design element Negative letter-spacing on large headings, text-wrap: balance on headlines Body text max-width: 65ch , line-height: 1.5–1.7 3. Color & Theming — Do It Right Define colors as CSS custom properties with semantic names. Never hardcode hex in components. [ data-theme = "light" ] { --bg-primary :

fafafa

; --bg-secondary :

ffffff

; --text-primary :

18181b

; --text-secondary :

52525b

; --accent :

2563eb

; --border :

e4e4e7

; } [ data-theme = "dark" ] { --bg-primary :

09090b

; --bg-secondary :

18181b

; --text-primary :

fafafa

; --text-secondary :

a1a1aa

; --accent :

3b82f6

; --border :

27272a

;

}

Dark mode rules: higher elevation = lighter surface, desaturate accents ~15%, use borders not shadows for hierarchy, offer Light/Dark/System toggle, persist in localStorage and apply before paint.

4. SEO — Claude Forgets This

Every page needs:

<

title

>

Page Title — Brand

</

title

>

<

meta

name

=

"

description

"

content

=

"

150-160 chars

"

>

<

link

rel

=

"

canonical

"

href

=

"

https://example.com/page

"

>

<

meta

property

=

"

og:title/description/image/url

"

...

>

<

meta

name

=

"

twitter:card

"

content

=

"

summary_large_image

"

>

Also: JSON-LD structured data,

sitemap.ts

+

robots.ts

, one

h1

per page, no skipped heading levels, descriptive

alt

text, clean lowercase hyphenated URLs,

hreflang

for i18n.

In Next.js: use

metadata

export with

metadataBase

,

openGraph

,

twitter

,

alternates.canonical

.

5. Quick Reminders

Motion

Stagger entrances, hover states on all interactives,

0.2s ease

micro-interactions, always respect

prefers-reduced-motion

Mobile

Mobile-first,

clamp()

for fluid type/spacing,

dvh

not

vh

, 44×44px touch targets

A11y

Semantic HTML,

for actions /

for links,

aria-label

on icon buttons, 4.5:1 contrast, full keyboard nav

Perf

:

font-display: swap

, lazy load images with dimensions,

content-visibility: auto

, LCP<2.5s

Forms

Visible labels always, validate on blur, helpful error messages, correct

input type

+

autocomplete

Errors

Error boundaries per section, custom 404/500, toast for feedback (auto-dismiss success, persist errors)

Security

CSP headers, never unsanitized dangerouslySetInnerHTML , validate URLs in href , httpOnly cookies for auth, server-side validation