Claude-skill-registry internal-links

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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/internal-links" ~/.claude/skills/majiayu000-claude-skill-registry-internal-links && rm -rf "$T"

manifest: skills/data/internal-links/SKILL.md

Internal Links

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

Workflow

Read Page File - Identify all section components
For Each Section:
- Find all
```
<Button>
```
  components
- Find all
```
<a>
```
  or
```
<Link>
```
  elements
- Verify each has a valid
```
href
```
Add Missing Links - Wrap buttons with
```
<Link>
```
as needed
Add Section IDs - For same-page anchor targets
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
```

Button Link Pattern

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>

Link Types

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

Fix 1: Button Without Link

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