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 this skill
技能 06: 排版层级与语义颜色
目标：通过字体层级和语义色提升可读性。
字体层级
- 主标题: 强调页面主题
- 卡片标题: 强调功能意图
- 辅助说明: 降低视觉权重
颜色语义
- Primary: 主信息
- Secondary: 次信息
- Tertiary: 说明与弱提醒
- Accent/Caution: 状态或风险提示
规则
- 用语义色，不写死颜色值。
- 保持标题和正文的层级稳定。
- 避免大量高饱和颜色同时出现。
可访问性
- 文字与背景保证足够对比度。
- 不只用颜色传达状态，必要时加图标或文案。
小规模代码用例
<StackPanel>
<ui:TextBlock FontTypography="BodyStrong" Text="下载更新" />
<ui:TextBlock Margin="0,4,0,0"
Foreground="{ui:ThemeResource TextFillColorTertiaryBrush}"
Text="下载完成后会自动校验完整性" />
<ui:TextBlock Margin="0,8,0,0"
Foreground="{DynamicResource SystemFillColorCautionBrush}"
Text="网络波动时可能重试" />
</StackPanel>
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 | 3mo | No flags | Beginner |
| mobile-ios-design | 272 | 4mo | No flags | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
| elegant-design | 21 | 4mo | 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.