본문으로 건너뛰기
cccskills
무료GitHub에 공개

interface-text

Rules for every string rendered inside the app, plus the sweep that removes in-app prose. Use when writing or changing a label, hint, description, tooltip, empty state or KPI tile in a .tsx file, or when running Pattern Patrol P14 or asked to find or fix long UI text.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(6)

  • SKILL.md7.0 KB
  • confirm.md2.6 KB
  • discover.md5.0 KB
  • evals.md7.0 KB
  • fix.md7.7 KB
  • review.md5.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

<!-- SYNCED COPY — do not edit here. Canonical: common-docs/skills/interface-text/SKILL.md This file is distributed to every consuming repo by common-docs/meta/scripts/sync_skills.py. Edit the canonical, run the sync, and commit each repo. Edits made here are overwritten and lost. -->

interface-text — in-app text is layout

Doctrine (read once): common-docs/policies/interface-text-is-layout.md.

You are writing interface text, not prose. Every string the app renders sits in a slot owned by a component, has a character budget, and has siblings that must match. The screen is not where you explain, justify, or prove anything — that is what the commit message, the code comment and FEATURE.md are for.

The card — apply to every string you write or touch

  1. Who is this sentence for? If it helps someone reading the diff — a formula, a function or table name, where the number comes from, what changed, what is not built yet, which other page agrees with it — it is author-facing. Put it in a code comment or the commit. It never renders.
  2. Label first, tooltip always. Make the label carry the meaning (Batch savings (7d)). Then give every label, icon button, abbreviation or number a newcomer might not understand a one-sentence tooltip: title= on KpiTile, components/official/InfoHint everywhere else (hover, keyboard and touch — a native title= attribute is unreachable on phones). A complex thing gets a help popover (FieldHelp from @ai-matrx/design-system/controls; a Field's string help and a settings row's helpText already render one). When you delete prose, ask what a newcomer loses and move that into a tooltip — never just delete (Arman, 2026-10-10: "our changes need to push for ALWAYS tooltips").
  3. Fit the slot. Secondary text ≤ 60 chars, one line, never two sentences. Tooltip ≤ 140, one sentence. Placeholder ≤ 60, an example value. Dialog description / empty / error state ≤ 140, at most two sentences: what happened, what to do. No sentence under a page or section title — ever.
  4. Look at the row and the column. Your text sets the height of every tile in its row and the width of every cell in its column. Fill a visible slot on all siblings, at similar length and in the same shape, or on none. Tooltips are hidden and per need — never add one to a sibling just to match.
  5. Use the primitive that enforces the budget. components/official/kpi/KpiTile + KpiGrid for KPI rows (one-line hint, title tooltip). If the official primitive "cuts off" your text, your text is too long — shorten it; never hand-roll a component to escape the limit. A local component that renders unbounded secondary text is itself a finding.
  6. A tooltip states only what you verified in the code or the data contract. Cannot prove the definition ("since midnight", "today's budget")? Write no tooltip — a wrong definition is worse than none.
  7. Honesty is state, not prose. Unmeasured → — with the reason in the tooltip. Partial feature → the Coming Soon registry. Never "not yet reported by the backend", never "Backfill brings this up to 100%".
  8. Text has three colours — never a fainter one. Content and actions text-foreground; labels, meta, menu group labels, placeholders text-muted-foreground; a disabled control text-disabled-foreground (its disabled prop paints it). Never /60, opacity-* on text, or text-gray-*: a label must look different from the action it names, in light AND dark (the 2026-10-14 "gray on gray on gray" menu). Table: the style guide's Colour section.
  9. See it rendered, then check it. In matrx-frontend run pnpm check:interface-text --changed before committing; any other repo: node ../matrx-frontend/scripts/interface-text/check-interface-text.mjs --root=. --changed. Every NOVEL line on your diff is fixed before commit.

Rationalizations

From the 2026-09-30 baseline runs (evals.md) — each one produced a defect.

Excuse (verbatim)Reality
"the shared tile cuts off long hints"That is the budget working. Shorten the text; keep the primitive.
"swapping only this row would make one page look two ways… should be its own change"Adopt the primitive for the whole page in this change; it is a few lines.
"the rule that every number names its window and item count"The label (7d) names the window; a count fits a 60-char hint. A sentence is not required.
"Both are a screen lying." → adds a sentenceHonesty is — + tooltip, a badge, or a registry entry.
"in the same words the Platform Spend 'Saved by batching' headline uses"Consistency means the same label, not the same paragraph copied to two pages.
(with the skill) tooltips added to all six tiles "so the row matches" — two invented "since midnight" / "today's budget"Parity is for visible slots. An unverified definition is fabrication; leave the tooltip out.

Red flags — stop and re-read the card

  • You are about to paste words from your commit message, FEATURE.md or a code comment into JSX.
  • Your string contains a dot-separated or snake_case name, a backtick, "backend", "server", or "not yet".
  • One sibling gets a hint and the others do not.
  • You are writing a second sentence in a hint or description.
  • You are choosing a local component over components/official/* because of text length.
  • You are writing a tooltip definition you did not read in the code or the data contract.
  • You are making text fainter with /NN, opacity-* or a hand-picked grey, or hand-styling a menu group label.

The sweep — Discover → Review → Fix → Confirm (Pattern Patrol P14)

Each phase is its own agent. Read only the file for the phase you were given:

PhaseLaneRead
Discover — build units for a slice, classify each, propose the exact fix; the validator must passquick with sonnet (haiku mapped rules to verdicts without reading and cut rewrites mid-sentence — 2026-09-30)discover.md
Review — accept or correct the classifications, find primitive-level fixes, batch the work, pick what goes to Armanstandard (opus — judgment over the classifications)review.md
Fix — apply a reviewed batch in its filesquick (sonnet) for mechanical batches, standard otherwisefix.md
Confirm — independent check of a fixed batchstandard (sonnet), never the fixerconfirm.md

The proof record and regression scenario for this skill is evals.md; the next editor reruns it.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Admin debug system wiring for the floating AdminIndicator's live debug data and Copy Full Context. Use when adding debug visibility to a route or feature, wiring useDebugContext or the debug panel, capturing console errors, or enabling the copy-context workflow for a page.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

armanisadeghi/ai-matrx32026년 10월 19일 업데이트

Compact two-icon Copy / Copy-for-AI controls (components/agent-copy). Use when adding copy buttons to a row, card, list, or record; merging duplicate Copy/JSON/AI controls; continuing the copy rollout; or writing a Copy-for-AI payload. NOT for markdown content actions (use rich-document-actions).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

armanisadeghi/ai-matrx32026년 10월 19일 업데이트

Disclosing a surface's existing fixed AI jobs in the shell's top Agents menu. Use when a page, panel, overlay, or window already runs a mandate behind a button, assist, automatic action, or mode; when the agent-disclosure guard names a file; or during a surface check.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

armanisadeghi/ai-matrx32026년 10월 19일 업데이트

The watch-fix-rerun method for making an existing platform agent or automated process efficient and correct: baseline its ledger, run one unit yourself, fix the class behind every wasted call, rerun, record. Use when asked to improve, optimize, watch, or 'make efficient' an agent, a sandbox session, a sync job, or any recurring automated process.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

armanisadeghi/ai-matrx32026년 10월 19일 업데이트

Redux state for agent execution and firing agent shortcuts. Use when editing features/agents/redux/, building agent UI, creating a conversation, touching assembleRequest or NDJSON stream state, wiring agent-state selectors, adding a per-conversation capability, or triggering a shortcut from a button, menu, or code (useShortcutTrigger, launchAgentExecution).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

armanisadeghi/ai-matrx32026년 10월 19일 업데이트

The provision for a call site: the exhaustive menu of values that place in the code can realistically produce. Use before creating or fixing a mandate or agent that reasons about more than its own input, when deciding whether an agent can answer at all with what it is sent, or when its output 'looks right' but nobody checked it could be. NOT for building the agent (use create-agent).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

armanisadeghi/ai-matrx32026년 10월 19일 업데이트

armanisadeghi의 스킬 모두 보기

이 스킬의 문제 신고