css-variable-font-system-validator

Community

Validate CSS font system

AuthorBruceTyndall
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill ensures the consistency and correctness of the CSS variable font system, preventing typography errors and ensuring adherence to design tokens.

Core Features & Use Cases

  • CSS Variable Validation: Checks for the presence and correct mapping of primary font variables (--font-primary, --font-display, --font-mono).
  • Tailwind Font Mapping Check: Verifies that font-sans is correctly mapped to the primary variable in Tailwind CSS configurations.
  • Font-Serif Detection: Actively searches for and flags any usage of font-serif to maintain a consistent font system.
  • Use Case: After updating typography tokens or Tailwind font configurations, run this Skill to automatically verify that all changes are correctly implemented and no unintended font styles have been introduced.

Quick Start

Run the css-variable-font-system-validator skill to check the CSS font system.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 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: css-variable-font-system-validator
Download link: https://github.com/BruceTyndall/socelle-global/archive/main.zip#css-variable-font-system-validator

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.