internal-links

Manuelvillarvieites's avatarfrom Manuelvillarvieites

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 14, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the management of internal navigation and Call-to-Action (CTA) consistency within Next.js applications. It programmatically identifies disconnected buttons, wraps them in optimized Next.js Link components, validates href destinations, and automatically generates section IDs for seamless anchor navigation. By ensuring every link is functional and follows framework best practices, it significantly enhances site usability, technical SEO, and developer productivity.

Use Cases

  • Automating the conversion of standard HTML anchor tags and unlinked buttons into high-performance Next.js Link components for better client-side routing.
  • Ensuring all landing page CTAs (like 'Contact Us' or 'Pricing') are correctly mapped to their respective page routes or section anchors.
  • Automatically generating and injecting unique section IDs into page components to enable functional 'scroll-to' navigation for single-page layouts.
  • Standardizing button behavior across large codebases by ensuring the 'asChild' prop and i18n translation keys are correctly implemented for every interactive element.
  • Audit and fix broken internal links during a site migration or redesign to maintain a crawlable and user-friendly site structure.
nameinternal-links
descriptionConnect 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.

Internal Links

Ensure all buttons and links in a page connect to valid destinations - either other pages or sections on the same page.

Workflow

  1. Read Page File - Identify all section components
  2. For Each Section:
    • Find all <Button> components
    • Find all <a> or <Link> elements
    • Verify each has a valid href
  3. Add Missing Links - Wrap buttons with <Link> as needed
  4. Add Section IDs - For same-page anchor targets
  5. Update i18n - Add CTA text if missing

INPUT Required

When running this skill, you need:

  • Page route (e.g., /, /leistungen)
  • Site pages from docs/sitemap.md

All buttons must be wrapped with Next.js <Link>:

// CORRECT: Button with Link
<Button asChild>
  <Link href="/kontakt">{t("cta")}</Link>
</Button>

// CORRECT: Button with anchor link
<Button asChild>
  <Link href="#pricing">{t("cta")}</Link>
</Button>

// WRONG: Button without link
<Button>{t("cta")}</Button>

// WRONG: Button with onClick only
<Button onClick={handleClick}>{t("cta")}</Button>

1. Page Links

Link to other pages in the site:

<Link href="/kontakt">Contact</Link>
<Link href="/leistungen">Services</Link>
<Link href="/projekte">Portfolio</Link>
<Link href="/ueber-uns">About</Link>

2. Anchor Links (Same Page)

Link to sections on the same page:

<Link href="#pricing">View Pricing</Link>
<Link href="#faq">FAQ</Link>
<Link href="#contact">Get in Touch</Link>

Requires: Target section must have matching id:

<section id="pricing" className="py-16 lg:py-24">
<section id="faq" className="py-16 lg:py-24">

3. Page + Anchor Links

Link to a section on another page:

<Link href="/leistungen#webdesign">Web Design Services</Link>
<Link href="/kontakt#form">Contact Form</Link>

Common CTA Destinations

Section Primary CTA Secondary CTA
Hero /kontakt /projekte or #features
Features /leistungen #pricing
Pricing /kontakt -
CTA /kontakt -
Projects /projekte /kontakt
FAQ /kontakt -

Section IDs

Add id to sections that are anchor link targets:

// Homepage sections
<section id="features" ...>
<section id="process" ...>
<section id="pricing" ...>
<section id="projects" ...>
<section id="testimonials" ...>
<section id="faq" ...>
<section id="contact" ...>

ID Naming Convention

Use lowercase, hyphenated names matching the section purpose:

Section Component ID
Feature56 features
Feature207 process
Pricing8 pricing
Projects5 projects
Testimonial4 testimonials
Faq9 faq
Cta21 contact

Checklist Per Section

For each section, verify:

  • All <Button> components have asChild prop
  • All buttons are wrapped with <Link href="...">
  • href points to valid page or #sectionId
  • If anchor link, target section has matching id
  • Button text is from i18n ({t("cta")})

Example Fixes

Before:

<Button size="lg">
  {t("cta")}
</Button>

After:

<Button asChild size="lg">
  <Link href="/kontakt">{t("cta")}</Link>
</Button>

Fix 2: Add Section ID for Anchor

Before (button):

<Button asChild>
  <Link href="#pricing">{t("viewPricing")}</Link>
</Button>

Before (section - missing id):

<section className="py-16 lg:py-24">

After (section - with id):

<section id="pricing" className="py-16 lg:py-24">

Fix 3: Scroll Hint Button

Before:

<Button variant="link" className="text-white">
  <span>{t("scrollHint")}</span>
  <ArrowDown className="size-4" />
</Button>

After:

<Button asChild variant="link" className="text-white">
  <Link href="#features">
    <span>{t("scrollHint")}</span>
    <ArrowDown className="size-4" />
  </Link>
</Button>

Import Requirements

Ensure sections have the Link import:

import Link from "next/link";

Output

After running this skill, report:

  • Number of buttons linked
  • Section IDs added
  • List of link destinations used