theeranon Make It James UX
Follow the system that is already there, and where there is none, be compact and quiet.
Scope
- Kind: shared-standard
- Owns: typography, density, spacing, interaction friction, and interface copy in every rendered output, plus the gate that blocks delivery when they fail.
- Boundary: constrains how existing content is presented. Never chooses the artifact format, never authorises a PDF, never invents content to fill a layout.
Do not use this when
- The rules needed are about wording rather than presentation ->
make-it-james - The question is which format the deliverable should take ->
final-it - The interface is defective rather than inconsistent ->
dev-are-you-sure - The design question is really a strategy question ->
zoom-out
Behavior
Follow the existing system first. Inspect the project for a design system, component library, framework convention, brand guide, or spec sheet before making any visual decision. Where one exists, follow it, including its typeface, spacing scale, radii, and component patterns. One consistent system across the whole product outranks this house style. Read references/standard.md completely before deciding. Its house defaults and helper checks remain subordinate to explicit user requirements and the selected project system.
House fallback, only where no system exists. IBM Plex Sans Thai as the typeface for Thai, Latin, and numerals. Minimal, white, quiet. Compact and information-dense composition with restrained padding. Body line-height between 1.35 and 1.45. A 6px radius on every rectangular surface; genuinely circular objects stay circular. Never attach a thick or coloured vertical stripe to the left edge of a card, panel, alert, or list item.
Preserve the requested content and action. Supplied labels and facts are the content budget: a card with only a requested button needs no invented body message, success notice or system behavior. Put supplied button copy on that button; do not turn it into body text and invent a generic confirmation control. Add a control only when its action belongs to the requested flow. Required confirmations for destructive or externally binding actions remain; optimistic undo applies only where reversal is real and authorized.
Interface copy carries no production residue. No meta copy, no progress narration, no labels announcing that a machine produced this, no placeholder text shipped as content. Nothing that belongs to the making of the artifact appears inside the artifact.
Reduce friction before adding explanation. Defer nonessential questions until they are useful; required authorization and inputs stay at the point they are needed. Remove controls irrelevant to the immediate intent. Use optimistic execution plus undo for safe actions only when reversal really works. Preserve required confirmation for destructive or externally binding actions. Break intimidating forms into disclosed steps. Give every control explicit copy rather than an unlabelled icon.
Format boundary. An HTML request defaults to HTML-only delivery. Print-ready means working print CSS that passes browser print emulation; it does not authorise PDF export. Create a PDF only when it is explicitly requested or a recipient constraint is directly confirmed. Never infer that constraint from A4, print-ready, final, shareable, or client-facing. Never generate a PDF merely to prove that HTML renders.
Verify by rendering. A code-only or chat-snippet request receives the requested code, with rendering unverified; it does not authorize creating an artifact just to satisfy this gate. For a rendered deliverable, run python3 scripts/lint_outcome.py --strict <output-path> from this skill directory for supported outputs. For an offline portable single file, embed the selected typeface and confirm no remote font links remain. Use python3 scripts/embed_ibm_plex_thai.py <input.html> --output <portable.html> only when IBM Plex Sans Thai is the selected font; do not replace a project font merely to use this helper. Evaluate lint findings against the chosen system rather than changing valid user-specified styling to satisfy a house default. A CSS font declaration is never proof that the font loaded.
Applies to
Every rendered artifact a person will see: interfaces, sites, applications, dashboards, decks, and print-ready documents. It composes with whichever skill owns the artifact and never replaces that skill's own contract.
On Windows invoke the same helper with python when python3 is not on PATH.
Principles
Do not make the reader think — Every element must be self-evident on first sight; anything needing explanation is a defect in the design, not in the reader. Source: Steve Krug, Don't Make Me Think, 2000 Consistency outranks preference — Where a system already exists, follow it even when a different choice would be better in isolation, because a mixed system costs more than any single suboptimal rule. Source: Jakob Nielsen, consistency and standards heuristic, 1994 Maximise the data-ink ratio — Remove every mark that carries no information; ornament competes with the content it decorates. Source: Edward R. Tufte, The Visual Display of Quantitative Information, 1983 Proximity defines relationship — Space is the primary grouping signal, so fix spacing before adding borders, rules, or coloured containers. Source: Gestalt principle of proximity, Max Wertheimer, 1923
Counter-case
- The user says the dashboard looks wrong, and inspection shows a component throws on narrow viewports. That is a defect rather than a visual inconsistency, so
dev-are-you-sureowns it. - A project uses Material Design with 4px radii and its own typeface. The house radius and typeface do not apply; following the existing system is the standard, not an exception to it.
- A page legitimately displays the phrase "AI generated" as the subject of a data label. The banned pattern is the content here, so it stays.
Hand back
The requested code or rendered artifact. For a rendered deliverable, report the system followed, actual lint/render evidence and material open gates. For code-only output, return exclusively code; keep verification notes internal.
Sources
Krug 2000, Don't Make Me Think. Nielsen 1994, Ten Usability Heuristics. Tufte 1983, The Visual Display of Quantitative Information. Wertheimer 1923, Laws of Organization in Perceptual Forms.