deomiarn

Build pages by installing shadcnblocks sections and implementing i18n. Use for each page after branding is defined. Takes page route and list of sections to install. Installs sections in order, creates page file, extracts text to de.json/en.json, and adds useTranslations.

Add smooth scrolling for same-page anchor links only. Uses JavaScript to handle

Add cinematic lerp-based smooth scrolling for all scroll inputs (mouse wheel, trackpad, touch). Creates butter-smooth momentum scrolling like premium agency websites. Works alongside existing smooth-scroll anchor links.

Define brand styling for website projects. Updates globals.css with CSS color variables (oklch format), typography (h1-h6, p, a, blockquote), and container styles. Use at the start of a project after sitemap is created. Requires primary, secondary, and accent colors plus font choice.

Add elegant page transition overlay using 3 staggered color layers. Overlay covers screen during navigation and reveals once new page is loaded. Use during /init or standalone.

Configure footer navigation links for SEO completeness. Sets up all pages (Homepage, Services, About, Contact, Impressum, Datenschutz) in organized groups. Dynamically finds footer*.tsx component. Updates i18n with all footer keys.

Configure navbar menu items, logo, buttons, and styling. Sets up navigation from sitemap.md, ensures dropdown z-index is above content, configures buttons, and updates i18n. Dynamically finds navbar*.tsx component.

Connect all buttons and links to pages or same-page sections. Ensures every CTA has a valid href, uses Next.js Link component, and adds section IDs for anchor links.

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.

Website sitemap generation workflow. Analyzes requirements, delegates to sitemap-analyst agent, generates sitemap with shadcn-ui-blocks component selections. Use when planning website architecture, structuring pages, selecting components, or requesting sitemap/page structure planning.

Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns, file paths, content patterns), enforcement levels (block, suggest, warn), hook mechanisms (UserPromptSubmit, PreToolUse), session tracking, and the 500-line rule.

Website generation toolkit by LocalStudios. Use /localstudios generate <url> to create a single-page homepage as a client pitch. SEO-optimized, ready to show.