Webklar/CLAUDE.md

webklar.com

Website of WEBklar GbR (a small web agency in Winnweiler, Rhineland-Palatinate). Vite + React 18 + TypeScript + Tailwind + shadcn/ui, client-rendered SPA with React Router.

Current project: the relaunch. Read docs/superpowers/specs/2026-10-01-relaunch-design.md before any change. The material for it (Germany map, customer portal screenshots) is in docs/relaunch/.

Status: the spec is waiting for the owner's approval. Once it is approved, write an implementation plan with the superpowers:writing-plans skill and save it to docs/superpowers/plans/. Implement only after that.

Commands

npm install
npm run dev          # local dev server
npm test             # Vitest + Testing Library (must stay green)
npm run build        # production build into dist/
npm run lint         # ESLint (main already has old errors; add no new ones)

How this repository relates to the live site

• This GitHub repository is the workspace. Its main is not live.
• webklar.com is built from a separate internal repository on the owner's server. Only the owner, or a session on that server, transfers an approved state there. Never try to deploy from here.

Rules

• Language: everything user-facing is German, in the polite form "Sie". Brand spelling is always "WEBklar". Write commit messages, PR texts and notes for the owner in German.
• The wording of the legal pages stays unchanged without the owner's explicit OK: src/pages/AGB.tsx, Impressum.tsx, WartungsAbo.tsx, HostingAbo.tsx, and the privacy policy (the /datenschutz redirect to the customer portal).
  • For the new layout you may change their markup and CSS classes: remove their own header block, replace uppercase and old font/button classes.
  • Keep their wording, order and structure.
  • The tests in src/test/abos.test.tsx, agb-haftung.test.tsx and agb-verguetung.test.tsx protect them; never weaken or delete these three files.
  • src/test/sofort-paket.test.tsx may be adapted where it pins old copy or removed components. Keep its source-code scans against banned statements.
• No invented content:
  • no numbers without a source (no "99,9 %", no project counters);
  • no references without the customer's consent (AGB § 13);
  • no stock or AI images of people;
  • no promises of success (AGB § 2: no result is owed);
  • SEO only as a separately ordered service;
  • support after launch only through the subscriptions.
• Fixed facts:
  • Phone: only 0176 23726355 (tel:+4917623726355). E-mail: support@webklar.com.
  • Reply time: only "spätestens am nächsten Werktag".
  • Servers: Hetzner in Falkenstein/Vogtland, Saxony. This applies only to the website and the customer portal. Never write "all data in Germany".
  • Prices are final prices, small-business rule § 19 UStG, no VAT. Hosting-Abo 20 € per month, Wartungs-Abo 50 € per month, 12 months minimum term each. Extra work 100 € per hour in 15-minute steps, only after approval.
• Customer portal screenshots show only the invented demo customer "Bäckerei Sonnenschein". Never use real customer data.
• Privacy: no requests to third-party servers. Host fonts, images and scripts yourself; no Google Fonts, no CDNs, no tracking.
• Secrets: never commit them. .env stays local; .env.example holds only public client IDs.
• This repository may be public. Do not check in internal data: price calculations, customer names without consent, server details, logins.
• Before every push: run npm test, npm run build, and npm run lint (no new errors). For visual changes, put screenshots in the pull request: 1440 × 900 and 390 × 844, light and dark.
• Work on branches and merge through pull requests. The relaunch branch is relaunch.
• Code style:
  • Match the existing code.
  • German comments where the code already uses them.
  • Only transform/opacity animations, always behind prefers-reduced-motion. The spec section 8.4 lists the only exceptions: map outline drawing, a 3× pulse around the map dot, the rotating hero headline (one pass, with a pause button), and the scroll-linked word highlight.
  • Hover effects only for (hover: hover) and (pointer: fine).

Structure (short)

• src/routes.tsx: all routes. Subpages share one layout with the footer (SubpageLayout).
• src/App.tsx: providers, ScrollToTop. It jumps to anchors such as /#leistungen once the fonts have loaded.
• src/hooks/use-page-meta.ts: title and description per route.
• src/pages/: pages. src/components/: sections and parts. src/components/ui/: shadcn.
• src/test/: tests. sofort-paket.test.tsx holds source-code scans against banned statements: the old phone number, Unsplash, "24 Stunden", "99,9", success promises. Keep these scans when sections are removed.