← Zurück

Setup Links

Dieser Skill erstellt oder migriert deine Link-in-Bio-Seite unter "/links", um sie dem RDF-Standard anzupassen. Er gewährleistet eine statische, noindex/follow-Seite mit präziser Klickverfolgung, i18n-Unterstützung und den erforderlichen Fußzeilenlinks.

Was es macht

Dieser Skill erstellt die "/links"-Seite deines Produkts, die in sozialen Profilen verwendet wird. Er implementiert die org-weite RDF-Standardstruktur mit 3-6 Buttons, von denen einer hervorgehoben wird und alle nach Geschäftswert geordnet sind. Die Seite ist statisch, wird nicht indiziert und verfolgt Klicks ohne PII, während sie sich an die vorhandenen Hilfsprogramme deines Repositories für Übersetzungen, Metadaten und Analysen anpasst.

Wann du es einsetzt

  • Wenn du eine neue Link-in-Bio-Seite für die sozialen Profile deines Produkts erstellen musst.

  • Wenn du eine bestehende Link-in-Bio-Seite (intern oder von Drittanbietern wie Linktree) auf den Standard des Produkts migrieren möchtest.

  • Wenn du sicherstellen willst, dass deine Link-in-Bio-Seite spezifische technische Anforderungen (Tracking, i18n, SEO) und Compliance-Richtlinien erfüllt.

So richtest du es ein

  1. Lege die Definitionsdatei des Skills in deinem Repository unter .claude/skills/setup-links/setup-links.md ab.

  2. Rufe den Skill in Claude Code auf, indem du "/setup-links" eingibst.

Der Inhalt

Setup Link-in-Bio Page

Build this product's /links page in the one form every RDF web product uses: the page the social profiles link to.

Contract reference: load .claude/ref/growth/link-in-bio.md first. It is the single source of truth — this skill only executes it. Reference implementation: padel-league.richi.solutions.

Context probes:

Monorepo web app: ![ -f apps/web/package.json ] && echo "apps/web" || echo "none (single app)" Framework: !for d in apps/web .; do [ -f "$d/package.json" ] || continue; grep -q '"next"[[:space:]]*:' "$d/package.json" && echo "next ($d)" && break; grep -q '"vite"[[:space:]]*:' "$d/package.json" && echo "vite ($d)" && break; done App Router dir: !ls -d apps/web/src/app apps/web/app src/app app 2>/dev/null | head -1 || echo "none" Existing link page: !find app src/app apps/web/app apps/web/src/app src/pages -path '*links*' -name 'page.tsx' 2>/dev/null | head -5; grep -rln '"/links"' src 2>/dev/null | head -5 Locale segment: !ls -d app/\[locale\] src/app/\[locale\] apps/web/app/\[locale\] 2>/dev/null || echo "single-locale" Locales: !ls src/i18n/locales apps/web/src/i18n/locales 2>/dev/null | tr '\n' ' ' Analytics: !grep -o '"@vercel/analytics"' package.json apps/web/package.json 2>/dev/null | head -1 || echo "no @vercel/analytics" Funnel registry: !ls src/domain/funnels.ts src/lib/funnel.ts 2>/dev/null || echo "none" Templates: !ls .claude/skills/setup-links/templates/next 2>/dev/null && echo "present" || echo "MISSING — sync .claude first"


Step 0: Eligibility

Stop and report if this repo has no public web surface (mobile-only .app. repos, backend/automation repos, behind-auth-only tools). Work on a feature branch in a worktree (/new-worktree feat/links-page). In a monorepo every path resolves under apps/web/.

Step 1: Inventory

Read and note before writing:

  1. An existing link page (probe above) or third-party link page (Linktree etc. — ask the user for the current bio URL if unknown). Record its buttons and order; a migration keeps them unless the user says otherwise.
  2. The repo's helpers for: server-side translation, page metadata, locale routing (localizedPath/asLocale), the analytics facade, the funnel registry (if any).
  3. Imprint and privacy page paths (legal-pages.md); stop and report if either is missing — the page must link both.
  4. The brand logo (a ≤ 96 px WebP; create one from the existing logo with sharp if absent) and the brand colour tokens (Tailwind theme).

Step 2: Decide the Buttons

Propose to the user, in one message: 3–6 buttons (id, label, destination), which one is highlighted and why, and the order — by business value (contract §4). Wait for confirmation before writing. Mark affiliate destinations as sponsored.

Step 3: Copy the Templates (Next)

Copy every file from .claude/skills/setup-links/templates/next/ to the same relative path (drop .tmpl; app/ → the App Router dir; without a [locale] segment use app/(bio)/links/page.tsx). Then adapt:

TemplateMap to
@/i18n/server getServerTthe repo's server translation helper
@/lib/seo/metadata buildPageMetadatathe repo's metadata builder (canonical + hreflang); else a plain Metadata object with alternates.canonical
@/lib/seo/locale-routesthe repo's locale routing; single-locale: drop params/locale, use plain paths
@vercel/analytics trackthe repo's analytics facade
@/lib/funnel funnelStepkeep if the repo has a funnel registry; otherwise remove funnelStep, BioPageView and the funnel assertions in the test
__PRODUCT_NAME__the product name
bg-primary / bg-accent …the repo's brand tokens

Fill ITEMS, HIGHLIGHT, SPONSORED and BioTarget from Step 2, and replace the TODO(setup-links) comment with the reasoning for the order. Do not change the mechanics (static, noindex/follow, structure order, click event shape, sponsored rel). A deviation needs a documented reason in the file.

Vite exception repos: build the same structure as a route rendered outside the app layout, with <meta name="robots" content="noindex,follow">; reuse BioLink.tsx without "use client".

Step 4: Wire It

  1. Funnel registry (if present): add the links funnel — step view, one outcome per button id (contract §5).
  2. i18n: add the links.* keys (contract §4) to every locale file; run the repo's key-parity test.
  3. Routes: /links stays out of PUBLIC_ROUTES and out of EXCLUDED_PREFIXES. If the repo keeps a list of page paths for locale routing (e.g. content routes), add /links there.
  4. Middleware / chrome: confirm the route group renders no site header, footer, nav, chat widget or banner other than the consent banner.
  5. Remove the legacy: delete an old link page and redirect its URL to /links in next.config redirects().

Step 5: Verify

  1. npm run lint, npm run typecheck, npm run test, npm run build — green; the build lists /links as static (○ or ●).
  2. npm run start, open /links (and one other locale) at 390 px width: structure order, one highlight, every button reaches its destination, imprint/privacy present, <meta name="robots" content="noindex, follow"> in the HTML, no site chrome.
  3. Walk the contract checklist (§8) and report each item.

Final Step: Commit and Hand Over

Commit with a body, e.g.:

feat: add the link-in-bio page at /links

Static /links page for the social profiles, outside the site chrome and
noindexed: <n> buttons led by <highlight>, clicks reported as
bio_link_click and in the links funnel without PII. Follows the
org-wide link page standard (ref/growth/link-in-bio.md).

Report to the user: the buttons in order, and that after deploy the bio of every social profile must point to https://<product-domain>/links.

Kommt direkt aus dem Framework, mit dem diese Seite gebaut wird. Diese Seite zeigt immer die aktuelle Version.

Dir fehlt ein Skill, den es hier noch nicht gibt?

Dann lass uns sprechen. Ich baue Skills auch passgenau für dein Team und eure Abläufe.