website-os

Build high-quality, conversion-optimized website sections. Use when creating hero sections, feature grids, testimonials, pricing tables, CTAs, and other common website sections with modern design patterns.

Validates components after implementation - TypeScript, Design Tokens, Responsive, Accessibility, Animation Performance. Use proactively after each section implementation.

MANDATORY design quality validation for every section. Ensures implementations match inspiration quality and avoid generic AI aesthetics. Use during shape-pages and implement.

Implement modern, performance-conscious animations using Framer Motion, CSS, and scroll-triggered effects. Use when adding page transitions, hover effects, scroll animations, or micro-interactions to websites.

Create comprehensive design systems with OKLCH colors, typography scales, spacing systems, and shadcn/ui theming. Use when setting up design tokens, creating color palettes, or configuring the visual foundation of a website.

Next.js 15 best practices including App Router, Server Components, caching, and performance patterns. Use when building Next.js applications with modern patterns.

Implement mobile-first responsive design patterns for all screen sizes. Use when building layouts that need to work across desktop, tablet, and mobile devices.

Implement technical SEO including schema markup, sitemaps, robots.txt, Core Web Vitals optimization, and metadata. Use when setting up SEO foundations or optimizing website performance for search engines.