token-lint

token-lint

When to use

Use this when the user has just moved a Figma design into code (CSS, React, etc.) and wants to verify that all var(--vapor-...) references point to tokens that actually exist. It is assumed that the Figma-side semantic lint (whether a token is appropriate for this context) has already been completed, and this skill catches typosthat occur during the transcription process.

Trigger phrases:

• /token-lint <path>
• "check vapor token typos"
• "check this component's token usage"
• "verify var(--vapor-...) is used correctly"

How it works

The bundled deterministic script (scripts/lint.mjs) does all the work.

1. assets/'s DTCG JSON file (vapor design token snapshot).
2. Traverses the target path and selects files with the extension .css .scss .sass .less .ts .tsx .js .jsx.
3. node_modules, dist, build, .next, .turbo, coverage, .git, .venv, __pycache__, .cache, out directories are skipped.
4. Reads each file in its entirety and extracts var(--vapor-...) references with a single regex. Because the regex's \s*includes newlines, it also catches multiline var(\n --vapor-x\n) calls. Since it requires a closing ) or ,and that the last character be alphanumeric, incomplete string prefixes used for .startsWith comparisons, etc. (e.g., 'var(--vapor-color-'), are not treated as token references. Line numbers are derived backward from the match offset.
5. For names not in the canonical set, it suggests up to 3 closest tokens by segment-aligned Damerau-Levenshtein (--vapor- removed, then split into -, segment count must match, distance 1 per segment and total distance within 2), ordered by distance and alphabetically. Adjacent-character transposition typos (e.g., foregruond ↔ foreground) are also caught as distance 1.
6. Results are output as per-case blocks ([N] <파일:라인>, 토큰: ..., 추천: + numbered candidate list), with blocks separated by blank lines. Next to each candidate, a distance hint (1글자 차이 — 오타 가능성 높음, 2글자 차이) is attached so the user can immediately judge the priority for action. If there is no candidate within distance 2, it outputs 추천: 이름이 비슷한 토큰 없음along with a note to recheck the token name in the Figma design file. On the last line, it appends one line of 요약: M개 파일에서 등록되지 않은 --vapor- 토큰 N건 발견 . Whether clean or typos are found, it exits 0 (to prevent the user from mistaking it as a failure in a shell or CI), and only invocation errors exit 2.

How to run

Assemble the script path based on the base directory injected when the skill is loaded.

node <skill-dir>/scripts/lint.mjs <path>

• <skill-dir>: The absolute path of the skill base directory. The location varies depending on the installation form (project-local .claude/skills/token-lint, user-global ~/.claude/skills/token-lint, plugin cache ~/.claude/plugins/cache/.../skills/token-lint , etc.). Do not hardcode the path; use the base directory as is.
• <path>: Use the path provided by the user as-is. It can be either a directory or a single file. Run with an explicit path without changing directories (cd).

After execution, pass the script's stdout to the user as-is . Summarizing, rearranging, converting to tables, converting to bullet points, and paraphrasing into paragraphs are all prohibited. The label block and trailing lines (clean: ... or found ...) can be output as-is without a single code block. Do not attach any interpretive wording before or after. The exit code does not need to be mentioned separately (the user can determine it from the trailing lines of stdout).

Limitations

This skill operates with a full-file regex scan + a frozen catalog snapshot + segment-aligned Damerau-Levenshtein. Therefore, a clean exit does not guarantee that "everything was checked and everything is correct." Read only when the following symptoms are suspected references/limitations.mdand apply the correction guidance for that category and inform the user.

• var(`--vapor-${name}`), code that assembles tokens with helper functions, user-side vapor prefix extension definitions (--vapor-team-x: ...) are included in the inspection target → §1 regex limitations.
• It was reported as unknown but the suggestion is empty, or it intuitively looks like a typo on a semantic axis (foreground↔background, etc.) → §2 Levenshtein semantic blind spot.
• The task also requires type suitability of tokens (such as using color in a font-size position) or detection of deprecated tokens → §3 one-way existence check.

If none of the above symptoms apply, report the stdout result as-is without needing to read limitations.md.