nextjs-font-css-variable-collision
CommunityResolve Next.js font CSS variable conflicts.
Authorhubeiqiao
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill resolves CSS custom property name collisions between next/font and design system variables in globals.css, preventing font display issues and ensuring consistent rendering.
Core Features & Use Cases
- Collision Detection: Identifies when
next/font'svariableoption conflicts with existing CSS variables. - Variable Renaming: Guides the renaming of
next/fontsource variables to unique names. - Design System Update: Instructs on updating the design system to reference these new source variables.
- Use Case: When your Next.js application's fonts unexpectedly fall back to system defaults after font configuration changes, this Skill provides the steps to fix the underlying CSS variable conflict.
Quick Start
Follow the steps to rename your next/font variables and update your global CSS to resolve font display issues.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: nextjs-font-css-variable-collision Download link: https://github.com/hubeiqiao/skills/archive/main.zip#nextjs-font-css-variable-collision Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.