ui-typography
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.
86
82%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
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, detailed description that clearly communicates what the skill does and when to use it, with excellent trigger term coverage. Its main weakness is the extremely broad activation scope ('any task producing visible text for humans') which could cause it to conflict with many other skills in a large skill library. The description is well-structured but somewhat verbose, and the always-on enforcement directive may be better suited to the skill body than the description field.
Suggestions
Narrow the activation scope to reduce conflict risk — instead of 'any task producing visible text,' focus on typography-specific triggers and explicit UI polish requests to avoid conflicting with general web development or code generation skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: proper quote marks, dashes, spacing, hierarchy, layout enforcement. Describes two distinct modes (ENFORCEMENT and AUDIT) with specific 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 implicit always-on rule for UI output). | 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 technology 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 scope is extremely broad — it triggers on ANY HTML/CSS/React artifact creation and 'any task producing visible text for humans,' which could conflict with general web development, UI design, or code generation skills. The always-on nature increases conflict risk. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a strong, highly actionable typography reference skill with excellent specificity — concrete HTML entities, CSS values, and JSX implementation details that Claude genuinely needs. Its main weakness is the lack of an explicit audit/enforcement workflow with validation steps, and some sections could be tightened (editorial asides, explanations of why rules exist rather than just stating them). The progressive disclosure and reference structure are well done.
Suggestions
Add an explicit step-by-step audit workflow checklist (e.g., '1. Check all quotes are curly, 2. Verify dash usage, 3. Validate spacing...') with a verification step to systematically catch violations.
Trim editorial commentary like 'Not debatable', 'the human eye reads', and historical explanations ('Typewriter workaround') — Claude doesn't need persuasion, just rules.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly comprehensive and most content earns its place as typography rules Claude wouldn't inherently know. However, some sections are verbose (e.g., the 'Mode of Operation' preamble, the 'Screen Considerations' section explaining obsolete CRT-era advice, and some editorial commentary like 'Not debatable'). The JSX warning section is valuable but could be tighter. | 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`), concrete code examples for JSX pitfalls with working alternatives, and a sed command for bulk fixes. Rules are specific and copy-paste ready. | 3 / 3 |
Workflow Clarity | The two modes (ENFORCEMENT and AUDIT) are clearly stated, and the 'Body Text First' principle provides a design workflow starting point. However, there's no explicit step-by-step workflow for either mode — no validation checkpoints for checking typography compliance, no audit checklist sequence, and no feedback loop for catching/fixing violations systematically. | 2 / 3 |
Progressive Disclosure | Well-structured with clear section hierarchy (Characters, Spacing, Text Formatting, Page Layout, Responsive, Screen). References to external files (`references/css-templates.md`, `references/html-entities.md`) are clearly signaled at the top with descriptions of what each contains. Content is appropriately organized within the main file without excessive nesting. | 3 / 3 |
Total | 10 / 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.
- Repository
- bencium/bencium-marketplace
- Commit
20077d3
- Reviewed
Table of Contents
Is this your skill?
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.