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

—

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

77%

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

A dense, highly actionable typography ruleset with concrete CSS values and examples and a clear dual-mode operation. Its weaknesses are mild redundancy in framing/maxims sections and broken progressive disclosure where referenced bundle files are missing.

Suggestions

Provide the missing references/css-templates.md and references/html-entities.md files (or remove the references and inline the needed content) so the signaled bundle paths resolve.

Consolidate the Attribution, Mode of Operation, and Maxims sections to remove restatement of the description and earlier rules, improving token efficiency.

Consider splitting the large inline ruleset into the referenced files so SKILL.md serves as a true overview with one-level-deep navigation.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean, rule-focused one-liners with concrete values, but the Attribution section, the Mode of Operation block (which restates the description's enforce/audit modes), and the Maxims section (which restates earlier rules) add redundancy that could be tightened.	2 / 3
Actionability	Highly actionable throughout: concrete CSS values ("max-width: 65ch", "line-height: 1.2 to 1.45", "letter-spacing: 0.06em"), specific HTML entities, numeric ranges (45–90 chars, 120–145%), and copy-paste-ready JSX/bash examples.	3 / 3
Workflow Clarity	The single action (apply typography rules during UI generation) is unambiguous, with two clearly defined modes (ENFORCEMENT default, AUDIT); no destructive or batch operations are involved, so the absence of validation checkpoints is not penalized.	3 / 3
Progressive Disclosure	Two reference files are clearly signaled ("references/css-templates.md", "references/html-entities.md") but neither exists in the bundle, leaving broken links; meanwhile the body remains a monolithic 330-line ruleset with the detailed CSS template and entity table it claims to offload nowhere to be found.	2 / 3
	Total	10 / 12 Passed

Description

82%

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 richly specified description with strong trigger-term coverage and a clear what/when structure. Its main weaknesses are second-person imperative voice and an over-broad activation scope that raises conflict risk with other UI skills.

Suggestions

Rewrite imperatives in third person (e.g., "Applies every rule automatically without prompting" instead of "do not ask, do not explain, just produce").

Narrow the activation scope so it triggers on typography-relevant signals rather than "any task producing visible text for humans", reducing overlap with general UI/design skills.

Trim the parenthetical lecture ("do not ask, do not explain") to keep the description concise and declarative.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions ("auto-apply every rule", "flag violations and provide fixes", enforces quote marks/dashes/spacing/hierarchy), but the second-person imperatives ("do not ask, do not explain, just produce", "apply these rules") trigger the voice penalty, reducing it from a 3.	2 / 3
Completeness	Explicitly answers both what ("Enforces timeless typographic correctness... quote marks, dashes, spacing, hierarchy, and layout") and when (a dedicated "Trigger on:" clause plus "apply these rules whenever generating UI output").	3 / 3
Trigger Term Quality	Strong coverage of natural phrases users actually say ("build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", "web design", "dashboard creation").	3 / 3
Distinctiveness Conflict Risk	The niche (typography correctness) is clear, but the directive to apply "whenever generating UI output" and "Even if the user doesn't mention typography" makes it overlap broadly with general UI/web-design skills.	2 / 3
	Total	10 / 12 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
Commit: 9db3236

Reviewed: 4 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.