← Volver

Setup Links

Esta habilidad construye o migra tu página de enlaces en la biografía en "/links" para alinearla con el estándar RDF. Asegura una página estática, noindex/follow con seguimiento de clics preciso, soporte i18n y los enlaces de pie de página requeridos.

Qué hace

Esta habilidad construye la página "/links" de tu producto, destinada a ser utilizada en perfiles sociales. Implementa la estructura estándar RDF de toda la organización, presentando de 3 a 6 botones, uno resaltado, todos ordenados por valor comercial. La página es estática, noindex/follow y rastrea clics sin PII, adaptándose a los ayudantes existentes de tu repositorio para traducciones, metadatos y análisis.

Cuándo usarlo

  • Cuando necesites crear una nueva página de enlaces en la biografía para los perfiles sociales de tu producto.

  • Cuando necesites migrar una página de enlaces en la biografía existente (interna o de servicios de terceros como Linktree) al estándar del producto.

  • Cuando quieras asegurar que tu página de enlaces en la biografía cumple con requisitos técnicos específicos (seguimiento, i18n, SEO) y directrices de cumplimiento.

Cómo configurarlo

  1. Copia el archivo de definición de la habilidad en tu repositorio en .claude/skills/setup-links/setup-links.md.

  2. Invoca la habilidad en Claude Code escribiendo "/setup-links".

El contenido

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.

Viene directamente del framework con el que se construye este sitio. Esta página muestra siempre la versión actual.

¿Te falta una skill que aún no está aquí?

Entonces hablemos. También construyo skills a medida para tu equipo y tus procesos.