typography-semantic-color
Maintains readable UI text by enforcing typography tiers and semantic color usage instead of hardcoded values.
Install
mkdir -p .claude/skills/typography-semantic-color && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/19335" && unzip -o skill.zip -d .claude/skills/typography-semantic-color && rm skill.zipInstalls to .claude/skills/typography-semantic-color
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Typography hierarchy and semantic color usage for UI textKey capabilities
- →Define typography hierarchy for UI elements
- →Apply semantic color tokens to interface components
- →Audit interface contrast and accessibility
- →Standardize visual weight across application layouts
How it works
It establishes a hierarchy of font styles and a set of semantic color tokens to ensure visual consistency and accessibility across the interface.
Inputs & outputs
When to use typography-semantic-color
- →Define typography hierarchy for headers and body text
- →Apply semantic color tokens to UI elements
- →Audit interface contrast and accessibility
- →Standardize color usage in application layouts
About typography-semantic-color
Establishes a structured approach to font hierarchy and color semantics for UI interfaces. It prevents fragmented styles by promoting consistent visual weight and accessible contrast ratios.
Typography hierarchy and semantic color usage for UI text
When not to use it
- →When using hardcoded color values
- →When ignoring contrast requirements
Limitations
- →Avoids high saturation color combinations
- →Requires supplementary indicators beyond color for state communication
How it compares
It replaces manual, fragmented styling with a centralized system of semantic tokens and defined font hierarchies.
Compared to similar skills
typography-semantic-color side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| typography-semantic-color (this skill) | 0 | 4mo | No flags | Beginner |
| mobile-ios-design | 272 | 6mo | No flags | Intermediate |
| mobile-android-design | 101 | 3mo | No flags | Intermediate |
| elegant-design | 21 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
mobile-ios-design
wshobson
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
web-design-guidelines
vercel
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.