jpoindexter
UserTypography skills for AI coding agents — 20 focused skills + a /type router, extracted from 10 canonical typography books and reconciled against WCAG 2.2 and current browser behavior.
Categories
Indexed Skills (47)
body-text-and-reading
Use when setting or fixing running text meant to be read continuously — article bodies, documentation, long-form pages, onboarding copy, email. Also use when readers report eye strain, losing their place, re-reading lines, or text that "feels dense", and when choosing body size, line-height, or measure.
color-and-icon-fonts
Use when type needs to be more than one flat colour, or when glyphs carry non-letter meaning — layer fonts, colour fonts (COLRv1, OT-SVG, bitmap), CSS font-palette, icon fonts, emoji. Also use when deciding between an icon font and SVG, when a colour font renders as flat black, or when emoji or icons break in a screen reader.
design-token-generation
Use when turning typographic decisions into tokens, variables, or theme config — naming a type scale, structuring font/size/weight/line-height tokens, exporting to CSS/Tailwind/Style Dictionary/iOS/Android, or fixing a token set that has drifted into arbitrary values. Also use when design and code disagree about what the type scale actually is.
editorial-web-typography
Use when designing article, long-form, marketing, or art-directed pages — pull quotes, drop caps, captions, bylines, subheads, figures, footnotes, hero compositions. Also use when an article template feels flat and undifferentiated, or when a page needs expressive typographic voice without sacrificing readability.
font-loading-and-performance
Use when shipping webfonts — choosing formats, subsetting, preloading, setting font-display, eliminating FOUT/FOIT, or fixing layout shift (CLS) caused by font swap. Also use when fonts are slow, text is invisible on load, the page jumps when fonts arrive, or Core Web Vitals flag font-related shift.
hierarchy-and-scale
Use when building or fixing a type scale, choosing heading sizes, or when a screen's importance ordering is unclear — everything looks the same weight, users miss the primary action, or headings compete. Also use when a design has drifted into a dozen ad-hoc font sizes.
international-typography
Use whenever type will render in a non-Latin script or a language other than English — Arabic, Hebrew, CJK, Indic, Cyrillic, Greek, Thai. Also use for bidirectional text, vertical writing, localisation-driven layout breakage, font stacks for multiple scripts, and any assumption that Latin typographic rules generalise.
microtypography
Use when text is technically correct but reads poorly — uneven word spacing, rivers, bad rags, orphans and widows, awkward hyphenation, loose or tight tracking, wrong quote marks and dashes, cramped all-caps. Also use when a design "feels cheap", "looks AI-generated", or "something is off" and the cause is spacing detail rather than font choice.
motion-typography
Use when type moves or changes over time — animated headlines, kinetic type, text transitions, animated or responsive logotypes, scroll-driven text effects, typing/counting animations, variable-font axis animation, or loading and streaming text. Also use when motion is making text hard to read, causing discomfort, or failing reduced-motion and accessibility requirements.
responsive-typography
Use when type must adapt across viewports, containers, or devices — fluid sizing with clamp(), breakpoint jumps, text that overflows or shrinks illegibly on mobile, headings that wrap badly, or a scale that works on desktop and collapses on phone. Also use when building a type system intended to be resolution-independent.
type-foundations
Use when typographic vocabulary or first principles are needed — what an em actually is, font vs typeface, leading vs line-height, points vs pixels, how CSS units relate, what the em square means. Also use when someone is confidently using a term incorrectly, or when an explanation needs grounding before a decision is made.
type
Use when the user invokes /type, or when any task involves setting, choosing, scaling, spacing, loading, tokenizing, auditing, or critiquing type — a font choice, a type scale, body copy, headings, a data table, a UI label, responsive text, webfont performance, or non-Latin script. Also use when a screen "looks off" and the cause may be typographic. Dispatcher that routes to the focused typography-* skills.
typeface-anatomy
Use when reading a specimen, naming letterform parts, or explaining why two typefaces differ — apertures, counters, terminals, stroke contrast, axis, x-height, proportions. Also use when a font choice needs to be justified from visible evidence rather than vibes, or when comparing candidates that "look basically the same".
typeface-pairing
Use when combining two or more typefaces — heading plus body, display plus UI, adding a face to an existing system, or diagnosing a pairing that "clashes" or "looks the same". Also use when deciding whether a second typeface is needed at all.
typeface-selection
Use when choosing or replacing a typeface — "which font should we use", evaluating candidates, building a type palette, or replacing a face that isn't working. Also use when a font must carry a brand tone, survive small sizes, support extra scripts, or fit a licensing and performance budget.
typography-accessibility
Use whenever type carries information — always co-load this with body text, UI, and editorial typography work. Specifically for contrast, 200% zoom, user text-spacing overrides, Dynamic Type, dyslexia and low-vision needs, screen-reader compatibility, images of text, and any claim that typography is "accessible".
typography-audit
Use when systematically reviewing existing typography against criteria — "check this page", "audit our type", pre-launch review, design-system compliance, or inherited work of unknown quality. Produces a pass/fail finding list with evidence. Use typography-critique instead when the question is about taste rather than compliance.
typography-critique
Use when the question is quality or taste rather than compliance — "is this any good", "does this feel right", "why does this look generic or AI-generated", art-direction review, or judging whether a typographic risk pays off. Use typography-audit instead when checking against defined criteria.
typography-layout-systems
Use when composing type in space rather than sizing it — deciding how a poster, hero, editorial spread, dashboard, or landing page is structurally organized. Also use when a layout feels arbitrary, elements float without relationship, a grid is being applied by reflex, or a composition needs deliberate tension or movement.
ui-component-typography
Use when setting type inside interface components — buttons, labels, inputs, form errors, navigation, badges, tooltips, tables, dense dashboards. Also use when numbers jitter in a table, labels wrap unpredictably, UI text is illegible at small sizes, or a component's text breaks in another language.
variable-fonts
Use when working with variable fonts — choosing between variable and static files, using weight/width/optical-size/slant axes, setting font-variation-settings vs standard properties, animating axes, or deciding whether a variable font actually saves bytes. Also use when a variable font renders wrong or ignores its axes.
ai-agent-case-study
Structure and write design case studies for AI agents, copilots, autonomous workflows, multi-agent systems, and other probabilistic products. Use when a case study must explain autonomy levels, permissions, approval thresholds, steering, observability, user-visible rationale, uncertainty, trust calibration, streaming, latency, orchestration, failures, retries, rollback, state recovery, evals, or human-in-the-loop design.
case-study
Route and produce evidence-backed product or design case studies from raw notes, research, screenshots, specifications, decision logs, architecture, metrics, and project artifacts. Use when the user invokes /case-study, asks to write, critique, structure, or polish a portfolio case study, needs to explain a complex design project, or needs an AI-agent case study covering autonomy, human oversight, telemetry, trust, latency, failures, and recovery.
portfolio
Plan, build, critique, update, or ship a professional design portfolio as one evidence-backed system. Use when the user invokes /portfolio; needs portfolio positioning, project inventory and selection, personal brand, case studies, homepage/about/contact copy, information architecture, visual direction, website implementation, accessibility, review, or publishing; or wants to turn scattered work into a coherent portfolio for a specific role, client, or audience.
usedesign
Use when the user invokes /usedesign, or hands over any design/UI task (screen, component, layout, color, type, motion, flow, chart, wireframe, audit, polish, copy, case study) and it's unclear which design skills to load — a router over ALL installed design skills that reads the task and picks the best 2-5 to apply.
case-study-design-decisions
Explain and defend pivotal design decisions in a case study using stakeholder context, user and business evidence, alternatives, constraints, trade-offs, consequences, limitations, and follow-up. Use when a portfolio draft shows screens without rationale, lists activities instead of decisions, needs executive credibility, must explain rejected options, or must communicate complex enterprise, platform, system, or AI-agent design choices.
case-study-story-map
Map project evidence into a user-centered outcome arc for a product or design case study. Use when raw notes are chronological, the story lacks tension or a clear result, the product or designer has become the hero instead of the user, a journey needs a beginning-middle-end structure, or research and analytics must be connected to goals, conflicts, pivotal decisions, and measurable outcomes.
case-study-storytelling
Build a coherent narrative system for complex design case studies using characters, context, plot, subplots, turning points, branching journeys, theme, scenes, and a trust or emotional arc. Use for multichannel products, nonlinear flows, service ecosystems, AI-agent experiences, portfolio presentations, or drafts that contain good evidence but read like disconnected screens and activities.
case-study-writing
Draft, edit, and finish concise design case-study copy from an evidence ledger or structured outline. Use when a portfolio case study is verbose, vague, generic, overly chronological, full of UX process theater, missing scannable headings and captions, inconsistent in voice, or needs publication-ready structure without inventing research, metrics, outcomes, or quotes.
enforce-scannable-density
Edit a portfolio case study for high signal, compact hierarchy, and fast scanning without losing evidence. Use when a draft is fluffy, repetitive, slow to navigate, paragraph-heavy, full of generic process language, or needs concise headings, key-value blocks, comparison matrices, captions, and technical spec blocks.
extract-design-rationale
Extract defensible design rationale from project notes, logs, specifications, research, and artifacts. Use when a case study shows what was built but not why, needs a constraint-alternatives-decision matrix, must explain rejected options and trade-offs, or needs to connect a UI, product, system, or AI-agent decision to evidence and measurable consequences.
narrative-arc-builder
Map raw project timelines, notes, research, and metrics into a five-stage evidence-backed narrative arc for a design case study. Use when a draft reads like a chronological task list, lacks tension or a turning point, makes the designer or product the hero, buries the pivotal decision, or needs a clear context-friction-complexity-breakthrough-impact structure.
system-architecture-translator
Translate data flows, services, queues, workflows, storage, consistency, latency, failures, retries, and distributed-system constraints into visible product and UX decisions for a case study. Use for AI agents, desktop tools, data products, scraping engines, background jobs, cloud systems, or any portfolio story where architecture determines telemetry, state management, loading, recovery, permissions, or user control.
technical-microcopy-editor
Run an accuracy, clarity, and brevity edit on technical design case-study copy. Use when prose contains vague UX jargon, imprecise system claims, passive voice, inconsistent terms, inflated ownership, unsupported metrics, long captions, or when the draft should become materially shorter without losing quantitative evidence or technical meaning.
brand-case-studies
Use when you need a real-world brand-identity precedent to justify a recommendation, cite a comparable project, or diagnose what made an identity succeed — e.g. a rebrand honoring heritage/equity, localizing or naming for a new market, differentiating from a parent company, launching a new company or category, unifying a fractured multi-touchpoint ecosystem, or building a dynamic/flexible system.
brand-dynamics
Use when accounting for contemporary forces on a brand — social justice stances, sustainability/triple bottom line, going global or localizing, AI in the workflow, big-data analytics, social media strategy, digital/AR/VR interfaces, mobile app icons, evidence-based marketing, private-label architecture, brand licensing, certification symbols, crisis communications, or personal branding.
brand-elements
Use when choosing or evaluating the concrete building blocks of a visual identity — deciding which type of logo or mark fits a brand (wordmark, letterform, pictorial, abstract, emblem, dynamic), naming a company or product, judging whether a name or tagline is strong, or picking whether a brand needs a character. Reach for it whenever the question is 'what type of mark/name/tagline should this be' rather than how to run the identity process.
brand-fundamentals
Use when someone conflates brand, branding, brand identity, and brand strategy or asks what those words mean; when justifying investment in identity; when mapping stakeholders, aligning culture with brand, defining brand experience, or choosing a brand-architecture type (branded house vs house of brands vs endorsed/hybrid); or when scoping visual identity, messaging/voice, or governance.
brand-ideals
Use when judging, critiquing, or defending brand identity work and functional checkboxes (recognizable, protectable, consistent) aren't enough to explain why one identity is better; evaluating a proposed logo/system, setting acceptance criteria for an identity project, repositioning a brand, or grading a merger/retail/venture identity against a rubric.
brand-redesign
Use when deciding whether to refresh an existing brand, evolve vs overhaul a brandmark, redesign packaging, or rename a company or product — and when judging how much brand equity to preserve, whether a redesign is warranted, or how to justify the business case for change.
brand
Use when the user invokes /brand, or asks to build, name, position, design, roll out, evaluate, or refresh a brand identity — a logo/brandmark, brand strategy, positioning, brand brief, visual system, brand guidelines, touchpoints, or a rebrand — and it is unclear which brand-identity reference skills apply. Dispatcher that routes to the right companion skills distilled from Wheeler & Meyerson's Designing Brand Identity (6e).
clarifying-strategy
Use when defining what a brand stands for and what to call it — distilling research into a unifying idea, narrowing focus, writing a positioning strategy, developing a brand brief, running a naming project, or screening names for trademark/legal availability. Also when a merger, joint venture, blank-page startup, or repositioning needs a strategy or name.
conducting-research
Use when starting a brand identity project and you need to understand the organization before designing — gathering baseline documents, interviewing stakeholders, defining the problem, running market research or usability tests, auditing marketing/competitors/language, or presenting a findings report to decision makers.
creating-touchpoints
Use when the identity concept is approved and it's time to roll it out across every touchpoint — designing or reviewing the website, collateral, stationery, product, packaging, advertising, branded environments, signage/wayfinding, vehicles, uniforms, or ephemera — or when applications feel inconsistent, off-brand, or produced ad hoc without a unified system.
designing-identity
Use when starting Phase 3 creative design after the brand brief is agreed — designing the actual visual/sensory system: choosing wordmark vs symbol, building color palettes, selecting or commissioning typefaces, designing iconography, defining look and feel, adding sound/scent/touch/taste, testing marks in trial applications, or planning the first design presentation.
managing-brand-assets
Use when launching a new or changed brand identity, rebranding or merging entities, planning an internal vs external rollout, building employee brand champions, standing up an online brand center or DAM, writing brand guidelines or a brand book, or deciding what content the standards must cover to keep the brand consistent over time.
managing-the-process
Use when planning or running a brand-identity initiative end to end — scoping a rebrand or new brand, estimating how long it will take, setting up project-management or decision-making protocols, choosing who leads, judging whether the organization is ready to start, defining how success is measured, handling collaboration across silos, or sorting out trademark/IP basics.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.