Professional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks, dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX, or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", web design, presentation design, dashboard creation, document generation, or any task producing visible text for humans. Even if the user doesn't mention typography, apply these rules whenever generating UI output.
65
78%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./typography/skills/typography/SKILL.mdQuality
Discovery
92%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description with excellent specificity, natural trigger terms, and clear completeness covering both what and when. Its main weakness is the extremely broad activation scope — claiming to trigger on essentially any UI code generation task creates high conflict risk with other skills. The description is well-structured but could benefit from slightly narrower scoping to reduce overlap with general UI/web development skills.
Suggestions
Narrow the activation scope to reduce conflict risk — instead of 'any task producing visible text for humans', focus on typography-specific triggers and let the skill complement rather than override general UI skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: proper quote marks, dashes, spacing, hierarchy, layout enforcement, flagging violations, providing fixes. Also distinguishes between two modes (ENFORCEMENT and AUDIT) with clear behaviors for each. | 3 / 3 |
Completeness | Clearly answers both 'what' (enforces typographic correctness for quote marks, dashes, spacing, hierarchy, layout in UI code) and 'when' (explicit 'Trigger on:' clause with extensive list of scenarios, plus the note about auto-applying even when typography isn't mentioned). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'build a landing page', 'create a component', 'design a UI', 'fix the typography', 'make this look professional', 'review this layout', plus technical terms like HTML, CSS, React, JSX. These are highly natural phrases. | 3 / 3 |
Distinctiveness Conflict Risk | While typography is a clear niche, the description's broad scope ('any task producing visible text for humans', 'any HTML/CSS/React artifact creation') means it would trigger on virtually every UI-related task, potentially conflicting with general web development, UI design, or code generation skills. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a comprehensive, highly actionable typography skill with specific CSS values, HTML entities, and code examples that Claude can directly apply. Its main weaknesses are length (could benefit from moving detailed subsections like JSX warnings and page layout rules into reference files) and the lack of explicit validation/audit workflows despite claiming an AUDIT mode. The content is well-organized with clear sections but tries to be both a quick-reference and a comprehensive guide in a single file.
Suggestions
Add an explicit audit checklist or workflow with validation steps (e.g., 'Run through these checks in order: 1. Scan for straight quotes → replace with curly, 2. Check dash usage...') to support the claimed AUDIT mode and improve workflow clarity.
Move the detailed JSX/React implementation section and the full Page Layout section into separate reference files (e.g., `references/jsx-typography.md`, `references/layout-rules.md`) to reduce the main file's length and improve progressive disclosure.
Trim editorial commentary like 'Not debatable', 'the human eye reads', and explanations of *why* rules exist (Claude doesn't need persuading) to improve conciseness.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly dense and covers a lot of ground efficiently, but includes some unnecessary editorial commentary (e.g., 'Not debatable', 'the human eye reads', attribution section) and explanations Claude likely already knows (e.g., why two spaces are bad, why all caps are harder to read). Some sections could be tightened into tables or shorter directives. | 2 / 3 |
Actionability | Highly actionable throughout — provides specific HTML entities, exact CSS properties with values (e.g., `letter-spacing: 0.06em`, `max-width: 65ch`, `line-height: 1.2` to `1.45`), executable code examples for JSX pitfalls with correct/incorrect patterns, and concrete sed commands for bulk fixes. Nearly every rule has a copy-paste-ready implementation. | 3 / 3 |
Workflow Clarity | The two modes (ENFORCEMENT and AUDIT) are clearly stated, and the content is well-sequenced from characters → spacing → formatting → layout → responsive. However, there are no explicit validation checkpoints or feedback loops — for instance, no step to verify typography after applying rules, no checklist for auditing existing code, and no error-recovery guidance for when smart-quote engines mangle output. | 2 / 3 |
Progressive Disclosure | References to `references/css-templates.md` and `references/html-entities.md` are clearly signaled at the top, which is good structure. However, the main file itself is quite long (~300+ lines) with substantial inline detail that could be split into reference files (e.g., the full JSX implementation warning, the complete page layout section). No bundle files were provided to verify the referenced paths exist. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
2e2fa33
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.