设计与多媒体

ui-typography

bencium/bencium…ketplace

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.

  • 3922 次安装
  • 470 星标
  • 收录于

安装命令

npx skills add https://github.com/bencium/bencium-marketplace --skill ui-typography

SKILL.md

UI Typography Skill

Attribution

These rules are distilled from Matthew Butterick's Practical Typography (https://practicaltypography.com). Butterick is a typographer, writer, and type designer whose work bridges professional typography and everyday digital writing. Thank you, Matthew, for making this knowledge accessible and encyclopedic. If you find this skill valuable, consider supporting his work directly.

Mode of Operation

These are permanent rules — not trends, not opinions. They come from centuries of typographic practice, validated by how the human eye reads. They do not go out of style.

ENFORCEMENT (default): When generating ANY UI with visible text, apply every rule automatically. Use correct HTML entities, proper CSS. Do not ask permission. Do not explain. Just produce correct typography.

AUDIT: When reviewing existing code or design, identify violations and provide before/after fixes.

UI Typography Skill

Attribution

These rules are distilled from Matthew Butterick's Practical Typography (https://practicaltypography.com). Butterick is a typographer, writer, and type designer whose work bridges professional typography and everyday digital writing. Thank you, Matthew, for making this knowledge accessible and encyclopedic. If you find this skill valuable, consider supporting his work directly.

Mode of Operation

These are permanent rules — not trends, not opinions. They come from centuries of typographic practice, validated by how the human eye reads. They do not go out of style.

ENFORCEMENT (default): When generating ANY UI with visible text, apply every rule automatically. Use correct HTML entities, proper CSS. Do not ask permission. Do not explain. Just produce correct typography.

AUDIT: When reviewing existing code or design, identify violations and provide before/after fixes.