route-metadata-favicons

Generate and apply per-route metadata and favicons for Next.js routes.

2|1|Updated Aug 24, 2024
One-click install
npx skills add https://github.com/armanisadeghi/ai-matrx --skill route-metadata-favicons
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: route-metadata-favicons
Source: https://github.com/armanisadeghi/ai-matrx/tree/main/.cursor/skills/route-metadata-favicons
Command: npx skills add https://github.com/armanisadeghi/ai-matrx --skill route-metadata-favicons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing per-route metadata and favicons across a Next.js route tree can lead to inconsistent tab titles, broken social previews, and auditing overhead. This skill provides a centralized approach to declare and apply route metadata across the matrx-admin UI.

Core Features & Use Cases

  • Generate and apply per-route metadata for routes and layouts.
  • Configure per-route favicons and OpenGraph/Twitter card data.
  • Audit missing metadata and ensure consistency across route trees in a larger Next.js app.

Quick Start

Define the route metadata in SKILL.md and trigger the route-metadata tooling to apply favicons and social previews.

Frequently Asked Questions about route-metadata-favicons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set per-route metadata and favicons for Next.js routes?

To set per-route metadata and favicons in Next.js, define the route metadata in a SKILL.md file and trigger the route-metadata tooling. Utilities like createRouteMetadata and createDynamicRouteMetadata apply consistent titles and social previews across layouts.

What is the best way to audit missing metadata across a Next.js route tree?

Auditing missing metadata across a Next.js route tree involves using route-metadata utilities to detect inconsistent titles and broken social previews. The skill enforces metadata best practices to ensure all routes have proper OpenGraph and Twitter card configurations.

Can I configure OpenGraph and Twitter card data for individual Next.js routes?

Yes, configuring OpenGraph and Twitter card data for individual Next.js routes is supported. The skill applies per-route favicons and social preview metadata, ensuring each route generates the correct social sharing cards and tab titles.

How do I wire metadata to layouts in a Next.js application?

Wiring metadata to Next.js layouts uses createRouteMetadata and createDynamicRouteMetadata utilities to declare and apply metadata hierarchically. This ensures layouts inherit consistent tab titles, favicons, and social previews across the application route tree.

Why does my Next.js app show inconsistent tab titles and broken social previews?

Inconsistent tab titles and broken social previews in Next.js occur when per-route metadata is not centrally managed. Using route-metadata utilities to apply favicons and OpenGraph data enforces best practices and ensures consistent titles and social previews across the route tree.