website-template

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.

Clean up shadcnblocks sections by removing inline typography styles and fixing heading hierarchy. Use after installing sections with install-sections. Removes text-xl, font-bold, tracking-tight from headings. Ensures proper h1 to h2 to h3 order and one h1 per page.

Check and fix typography hierarchy on a page. Fixes h2-to-h4 skips, ensures all sections have left-aligned title/description with max-w-3xl, removes centering classes, and adds missing headers with i18n keys.

Create website sitemap with page structure and section selection. Use at project start to define pages, routes, and shadcnblocks sections for each page. Outputs docs/sitemap.md. Triggers on "sitemap", "page structure", "website structure", "create pages".

Standardize button component heights, padding, and transitions across all variants. Ensures consistent appearance for default, outline, secondary, ghost, and link variants. Updates button.tsx with unified styles.

Generate Midjourney V7 image prompts for website sections. Analyzes page components, extracts aspect ratios from CSS, outputs prompts with SEO filenames. Use after completing page (skills 02-06). Triggers on "generate image prompts", "midjourney prompts", "create images for page".

Set up Google Analytics 4 with DSGVO-compliant cookie consent banner. Use when analytics tracking is needed. Triggers on "analytics", "GA4", "Google Analytics", "cookie consent", "tracking".

Create custom 404 and 500 error pages with brand styling. Use at project end before release. Triggers on "404", "error pages", "not found", "500 error".

Set up favicon and PWA manifest for website projects. Creates favicon.ico, apple-touch-icon, and site.webmanifest. Use at project end before release. Triggers on "favicon", "PWA", "manifest", "app icon".

Comprehensive pre-launch verification checklist. Use as the last step before deploying. Triggers on "final check", "pre-launch", "ready to deploy", "launch checklist".

Add Framer Motion micro-animations to page sections. Includes section reveals, staggered lists, hover effects, and performance optimization. Use after section-backgrounds for each page.

Create Impressum and Datenschutz pages with legally required content for German/Swiss websites. Provides templates with all mandatory sections for DSG/DSGVO compliance. Use when creating legal pages, checking compliance, or user asks for "impressum", "datenschutz", "legal pages", "privacy policy", "imprint".

Run Lighthouse audit and verify Core Web Vitals. Use at project end before release. Triggers on "performance", "Lighthouse", "Core Web Vitals", "speed test", "page speed".

Apply branding guidelines to page sections after style cleanup. Implements 60-30-10 color rule, alternates section backgrounds, and ensures visual hierarchy. Use for each page after running remove-inline-styles.

Implement images into page sections. Converts from /public/raw/[page]/ to WebP with responsive variants, replaces CDN placeholders with Next.js Image component. Use after midjourney-prompts skill. Triggers on "implement images", "add images to page", "replace placeholder images".