Frontend Frontier

A skill for building frontends with a genuine point of view instead of drifting into generic SaaS chrome.

Core Philosophy

The job is not "make a page." The job is "make a page that actually has a point of view." This skill exists for landing pages, AI/devtools/B2B SaaS frontends, animation systems, scroll choreography, design-system authoring, and turning loose inspiration into implementation-ready direction.

Default Stance

• Do not default to Inter, Roboto, shadcn, or arbitrary Tailwind soup.
• Pick one art-direction thesis, one motion thesis, and one depth thesis before writing UI.
• Build tokens before polishing components.
• Treat motion as a system, not garnish.
• CSS is substrate, not strategy -- use it for tokens, layout, fallbacks, and trivial states.
• Default to the Frontier Stack 2026: Tailwind v4 @theme, Motion, GSAP, Lenis, React Three Fiber, shaders.
• Preserve performance, readability, and prefers-reduced-motion.

Anthropic Frontend Design Principles

From the frontend-design skill (anthropics/skills, 259K weekly installs). These layer on top of Kevin's art-direction system above.

Design thinking (before coding): commit to a BOLD aesthetic direction - brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric. The key is intentionality, not intensity.

Five pillars:

1. Typography - distinctive, characterful font choices. Pair a display font with a refined body font. Never generic.
2. Color & Theme - cohesive aesthetic via CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
3. Motion - high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
4. Spatial Composition - unexpected layouts. Asymmetry, overlap, diagonal flow, grid-breaking, generous negative space OR controlled density.
5. Backgrounds & Visual Details - atmosphere and depth: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.

NEVER: overused fonts (Inter, Roboto, Arial), cliched color schemes (purple gradients on white), predictable layouts, cookie-cutter components. No design should be the same. Vary light/dark themes, fonts, aesthetics across generations.

Match implementation complexity to the aesthetic vision. Maximalist needs elaborate code. Minimalist needs restraint and precision. See also: Frontend and Design Skills for Vercel's compliance audit.

Workflow (11 Steps)

1. Lock the art direction -- choose an archetype from Aesthetic Systems and write a 3-5 line brief covering visual thesis, type pairing, palette, surface treatment, and motion grammar.
2. Choose the methodology lens -- pick one discovery, one system, and one evaluation methodology from Design Methodology Atlas.
3. Build the token system -- define color, spacing, radii, shadows, border weights, type scale, z-index, blur, and motion tokens per Design Tokens.
4. Choose the frontier runtime stack -- see Frontier Stack 2026 for defaults.
5. Choose tactic families -- select from shell/nav, layout, motion, 3D, forms, data display, wait UX, search, AI, or docs in Frontend Tactics Atlas.
6. Route to specialized skills -- use Frontend and Design Skills, Frontend and Design Skills, Frontend and Design Skills, Frontend and Design Skills, etc.
7. Decide the motion stack -- see Motion 3D Playbook for layered motion architecture.
8. Use references intentionally -- extract patterns (nav treatment, hero structure, grid logic, depth cues, CTA shape, motion rhythm), never cargo-cult a full site.
9. Prompt recipes -- use Prompt Recipes for agent prompts, image generation, decomposition, and exploration.
10. Apply micro-polish -- run the finishing pass from Interface Micro-Polish.
11. Trust and infra pass -- check auth, RLS, rate limits, validation, env vars, CAPTCHA, CORS.

Non-Negotiables

• One strong hero move beats ten moving things.
• If a page has 3D, the rest of the UI should get quieter.
• If typography is the star, reduce ornament and increase grid discipline.
• Dashboard mocks inside a hero must obey the same token system.
• If motion hurts comprehension, cut it.
• If performance is unknown, profile before adding complexity.
• Do not recommend plain CSS as the primary motion system unless truly trivial.
• Pick tactics intentionally. Do not cargo-cult patterns because they were trendy.
• Final polish: wrapping, radius consistency, optical alignment, interruptible interactions.

Signals (April 2026)

Cheng Lou's text measurement breakthrough (23.4M views): Fast, accurate, complete userland text measurement algorithm in pure TypeScript. Lays out entire web pages without CSS, bypassing DOM measurements and reflow. The reviewed artifact shows live text flowing around draggable occlusion objects with "Zero DOM reads", which makes the design implication clearer: text layout becomes interactive composition material, not only a performance optimization. Current source snapshot: @chenglou/pretext@0.0.8, GitHub main at ac49b09b7d83ede19581fa94a8b892b07d309baf, no tagged release. Watch for implications in SSR/SSG, headless rendering, canvas-first UI, and agent-generated magazine/chat layouts. Source: X/@_chenglou visual artifact; npm; GitHub, 2026-06-30

Anti-generic UI patterns (Om Patel, 2K bookmarks): AI agents default to the same stack - Inter, Lucide, Tailwind components - producing identical UIs. The fix is a coherent icon system, not a random icon swap. Local artifacts show Streamline, Hugeicons, Lineicons, and Solar Icons as examples of families with their own style grammar, weights, formats, and cross-framework delivery. Change the font, change the icons, change the visual language - a few design decisions separate generic from memorable. For brand/company logos specifically (not UI glyphs), default to theSVG — 6,000+ brand SVGs with variants + an MCP/CLI; see The SVG. Source: X/@om_patel5 and local image artifact review, 2026-07-03

Design system enforcement (Hartdrawss, 1.5K bookmarks): Define strict primitives (colors, spacing, radii, typography, shadows), wrap into components, document variants. Then enforce with tokens + a linter: put everything in CSS vars or Tailwind config, add custom lint rules that fail PRs hardcoding #fff, 16px, or margin: 37px. The reviewed Atheera demo makes the practical point visible: the same token system has to carry texture, content sections, cards, and trust-strip elements, not only isolated buttons. This aligns with Lint-Enforced Agent Guardrails: structural enforcement over advisory rules. Source: local artifact wiki/assets/x-bookmarks/2029942733943566526/image-01.jpg, reviewed 2026-07-01

Geist Serif (Evil Rabbit / Vercel): Vercel is cooking Geist Serif as a serif companion to the public Geist family, but it is still a prototype/watchlist signal, not an adopted font. The reviewed blue construction specimen shows ascender, x-height, baseline, and descender guides, and the self-reply says the letter e still needs work. As of 2026-07-03, vercel.com/font lists Geist Sans, Geist Mono, and Geist Pixel; the official Geist Pixel launch post says "Geist Serif is already in progress"; and the public geist npm package is 1.7.2 for the released family. Evaluate Geist Serif for editorial/long-form typography only after Vercel ships it publicly. Source: X/@evilrabbit_, 2026-04-01; Vercel font pages and npm registry, 2026-07-03

Micro-polish details:

• font-variant-numeric: tabular-nums - should be default for any number that updates (timers, counters, prices, percentages, scores, live data). The reviewed timer video shows the non-tabular timer shifting while the tabular timer stays fixed. (sorenblank, 6.2K bookmarks, 1M views)
• Playful control-state motion can use soft monochrome surfaces, sliding selected states, icon swaps, and plus/minus count changes when the layout remains stable. Keep this pattern to playful consumer/editor contexts, not dense operations screens. (AliGrids/Yui)

Creative coding references:

• heerich.js (meodai): Tiny voxel engine rendering 3D scenes to SVG. Boolean ops, oblique + perspective, zero dependencies, pure vector output with infinite scaling. Named after Erwin Heerich's geometric cardboard sculptures.
• Dither + ASCII + Motion (praveenisomer): Dithering effects combined with ASCII rendering and motion. The reviewed artifact is a pale lavender flower/editorial surface, so the durable lesson is softer visual identity texture, not only retro loading-state chrome. Track it through Design Effects and Motion Sources and ASCII Magic. Source: local media artifact review, 2026-07-03