frontend

Use when generating Google Stitch DESIGN.md systems for premium typography, color, layout, motion intent, and anti-generic UI rules.

Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.

Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.

Use when upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without rewrites.

Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

Use when creating raw industrial or tactical telemetry UIs with rigid grids, stark typography, CRT effects, and high-density data.

Use when creating clean editorial interfaces with warm monochrome palettes, crisp borders, restrained motion, and flat bento layouts.

Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework.

Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless bento grids.

Use when a task requires exhaustive unabridged output, complete files, or strict prevention of placeholders and skipped code.

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework.

Comprehensive Angular framework development covering components, directives, services, dependency injection, routing, and reactive programming based on official Angular documentation

Core JavaScript language features, patterns, and best practices including ES6+ syntax, async/await, closures, prototypes, and modern development patterns

Comprehensive Next.js development skill covering App Router, Server Components, data fetching, routing patterns, API routes, middleware, and full-stack Next.js applications

Comprehensive React development with hooks, components, state management, context, effects, and performance optimization based on official React documentation

Comprehensive Vue.js development skill covering Composition API, reactivity system, components, directives, and modern Vue 3 patterns based on official Vue.js documentation

Component architecture, design patterns, state management strategies, module systems, build tools, and scalable application structure

Mobile-first responsive design covering fluid layouts, media queries, flexbox, grid, viewport units, and responsive images

Comprehensive Svelte development skill covering reactivity runes, components, stores, lifecycle, transitions, and modern Svelte 5 patterns

Use when writing, reviewing, or refactoring React or Next.js code, optimizing React performance, fixing re-render issues, reducing bundle size, eliminating waterfalls, or improving data fetching patterns