Overview

This skill is the single source of truth for Joe Speaking's visual identity tokens. It declares every color, font, spacing value, shadow, motion variant, and dark mode override used across the product — extracted directly from source CSS and TypeScript.

Use design-language.md as the authoritative reference whenever you need to pick a color, set a font, choose a shadow scale, or animate an element in the Joe Speaking brand.

When to Use

Activate this skill when you are:

Building or modifying UI — any React component, landing page section, or app screen
Choosing colors — picking accent, background, text, or status colors
Reviewing visual consistency — auditing whether a component uses the correct tokens
Setting typography — choosing font families, weights, or size ranges
Applying motion — adding entrance animations, hover effects, or continuous animations
Generating visual assets — creating emails, social images, or design mockups

Overview

Use design-language.md as the authoritative reference whenever you need to pick a color, set a font, choose a shadow scale, or animate an element in the Joe Speaking brand.

When to Use

Activate this skill when you are:

Building or modifying UI — any React component, landing page section, or app screen
Choosing colors — picking accent, background, text, or status colors
Reviewing visual consistency — auditing whether a component uses the correct tokens
Setting typography — choosing font families, weights, or size ranges
Applying motion — adding entrance animations, hover effects, or continuous animations
Generating visual assets — creating emails, social images, or design mockups

Joe Speaking Design Language

Overview

When to Use

Joe Speaking Design Language

Overview

When to Use

Workflow

Relationship to Other Skills

Palette Direction

Coding Agent (bash-first)

Install Vscode Extension

Launch

Agent Customization

Init

Launch