# Kosaki08 Uimatch Uimatch Text Diff

> uiMatch Text Diff Skill

- Skill: `tomevault-io/kosaki08-uimatch-uimatch-text-diff` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/kosaki08-uimatch-uimatch-text-diff`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/kosaki08-uimatch-uimatch-text-diff/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/kosaki08-uimatch-uimatch-text-diff

---


# uiMatch Text Diff Skill

## Purpose

Compare **two pieces of text** (e.g. Figma label vs implementation text) and classify how different they are.

Use this skill to:

- detect copy mismatches (labels, button text, headings)
- distinguish between “only casing/whitespace changed” vs “actual wording changed”
- perform cheap checks without running browser comparisons

---

## Environment / assumptions

- Run commands from the repository root.
- `@uimatch/cli` is installed as a devDependency.
- Node.js 20+ is available.

This skill does **not** require Figma API or Playwright.  
`FIGMA_ACCESS_TOKEN` and browser installation are not needed here.

---

## Command usage

```bash
npx uimatch text-diff "<EXPECTED_TEXT>" "<ACTUAL_TEXT>" [--case-sensitive] [--threshold=<0-1>]
```

Notes:

- Options must use `=` syntax, for example: `--threshold=0.8`.
- Output is JSON with fields:
  - `kind`: `"exact-match" | "whitespace-or-case-only" | "normalized-match" | "mismatch"`
  - `similarity`: `0.0 - 1.0` similarity score
  - `expected`, `actual`
  - `normalizedExpected`, `normalizedActual`

### Examples

```bash
# Only case/whitespace differences
npx uimatch text-diff "Sign in" "SIGN  IN"

# Typo but still similar
npx uimatch text-diff "Submit" "Submt" --threshold=0.6

# Full-width vs half-width
npx uimatch text-diff "Button123" "Button１２３"
```

The CLI applies:

- Unicode NFKC normalization
- Whitespace collapsing
- Lowercasing (unless `--case-sensitive` is given)

---

## How Claude Code should use this skill

Typical flow:

1. Extract two text strings:
   - e.g., from Figma JSON / spec vs DOM `textContent`

2. Run `uimatch text-diff` with those strings.
3. Parse JSON output and:
   - report `kind` and `similarity`
   - explain whether differences are only formatting (`whitespace-or-case-only`) or real content changes (`mismatch`)

Use this skill:

- when a user suspects copy differences
- when visual diff is too noisy but text differences matter
- as a complement to `compare` results (to explain text-related discrepancies)

For pixel-level comparison, use `uimatch-compare` or `uimatch-suite` instead.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/kosaki08) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->