Skills
.Work. You
Rest

earthnook-design-tokens

Community

Define and apply consistent design values.

Design & Creative#typography#design system#styling#color palette#design tokens#tailwind css#ui design
Authormecolejr
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a centralized, standardized system for managing all visual design attributes, ensuring consistency and scalability across the EarthNook application.

Core Features & Use Cases

  • Design Token Management: Access and apply predefined values for colors, typography, spacing, and motion.
  • Styling Guidance: Provides clear examples and best practices for using tokens in Tailwind CSS, CSS/SCSS, and JavaScript/TypeScript.
  • Use Case: When styling a new button component, consult this Skill to find the appropriate blue-500 for the background, text-white for the label, rounded-lg for the border-radius, and duration-150 ease-out for the hover transition, ensuring it aligns with the established design system.

Quick Start

Use the earthnook-design-tokens skill to find the correct token for primary button backgrounds.

Dependency Matrix

Required Modules

None required

Components

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: earthnook-design-tokens
Download link: https://github.com/mecolejr/EarthNookApp/archive/main.zip#earthnook-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.