Skills
.Work. You
Rest

dcyfr-design-tokens

Community

Enforce DCYFR design tokens and fix values

Design & Creative#consistency#eslint#tailwind#lint#opencode#design-system#design-tokens
Authordcyfr
Version1.0.0
Installs0

System Documentation

What problem does it solve?

In DCYFR projects, design consistency is often compromised by hardcoded Tailwind values, leading to visual drift and maintenance overhead.

Core Features & Use Cases

  • Detect and flag hardcoded values (gap-8, text-3xl, max-w-4xl, etc.)
  • Replace with tokens from @/lib/design-tokens
  • Validate color, spacing, typography, and container widths
  • Provide ESLint auto-fix guidance for common violations
  • Use cases include fixing token violations, converting legacy code, and reviewing PRs for token compliance

Quick Start

Install dependencies and run npm run lint to start enforcing design-token usage across the codebase.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: dcyfr-design-tokens
Download link: https://github.com/dcyfr/dcyfr-labs/archive/main.zip#dcyfr-design-tokens

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.