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.

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

78%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-organized, highly actionable rulebook with concrete code and clear operating modes. Its key gap is broken progressive disclosure: the body promises reference files that are absent from the bundle.

Suggestions

Create the referenced bundle files references/css-templates.md and references/html-entities.md, or remove the dangling references and inline only what is needed.

Move the full HTML entity tables and the complete CSS baseline template into the referenced files, keeping SKILL.md as a concise rule overview with pointers.

Verify every path mentioned in the body resolves to a real file in references/, scripts/, or assets/ so signaled navigation actually delivers.

Dimension	Reasoning	Score
Conciseness	Dense, mostly lean rule statements where most tokens earn their place, with typography-specific rationale ("Two spaces create rivers", "The 12pt default is a typewriter relic") rather than generic concepts Claude already knows; minor explanatory asides could be trimmed.	4 / 5
Actionability	Provides copy-paste-ready concrete guidance throughout: CSS values ("max-width: 65ch", "line-height: 1.2", "font-feature-settings: \"kern\" 1", "clamp(16px, 2.5vw, 20px)"), HTML entities, executable JSX patterns, and a working sed bulk-fix command.	5 / 5
Workflow Clarity	Clear ENFORCEMENT and AUDIT modes plus a sequencing principle ("Set body text BEFORE anything else") make the action unambiguous; no validation checkpoints exist, but the skill involves no destructive or batch operations so the workflow cap does not apply.	4 / 5
Progressive Disclosure	Section structure is good and references are clearly signaled one level deep ("references/css-templates.md", "references/html-entities.md"), but those referenced files do not exist in the bundle, so navigation is broken, and substantial entity/CSS content that could live in those files is inlined instead.	3 / 5
	Total	16 / 20 Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, comprehensive description that clearly states capabilities and an explicit, natural-language trigger surface. Its main weakness is an overly broad, aggressive trigger stance that invites conflicts with general web/UI build skills.

Dimension	Reasoning	Score
Specificity	Lists several specific enforced concerns ("proper quote marks, dashes, spacing, hierarchy, and layout") plus concrete audit actions ("flag violations and provide fixes"), but the verbs (enforce/apply/flag) stay somewhat generic versus the most concrete anchor.	4 / 5
Completeness	Explicitly answers both what ("Enforces timeless typographic correctness...") and when ("Trigger on: ...") with concrete trigger phrases, matching the top anchor.	5 / 5
Trigger Term Quality	Comprehensive natural trigger phrases users actually say ("build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout") plus synonyms and file-type-free UI contexts.	5 / 5
Distinctiveness Conflict Risk	The typography niche is distinct, but triggers like "build a landing page", "create a component", and "dashboard creation" plus the stance to "apply these rules whenever generating UI output" even unrequested create high overlap risk with general UI/build skills.	3 / 5
	Total	17 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
referenced_paths_exist	Referenced path issues: 2 missing	Warning

	Total	15 / 16 Passed

Repository: bencium/bencium-marketplace
Path: typography/skills/typography/SKILL.md
Commit: bda4647

Reviewed: 12 days ago

Table of Contents

Discovery Implementation Validation

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.