HTML Diff Refactor Check
tabler/tabler
Proves that a refactor leaves every rendered preview page unchanged by comparing fresh HTML output against a baseline captured beforehand.
Extracts style objects from the Keybase client's TSX files, then finds places where border helpers could replace repeated code and suggests new helpers.
Install Keybase Style Analysis
$ npx skills add keybase/client --skill keybase-style-analysis -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install keybase/client keybase-style-analysis --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill/keybase-style-analysis .claude/skills/keybase-style-analysis && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "keybase-style-analysis" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-style-analysis into .claude/skills/keybase-style-analysis/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-style-analysis", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/keybase/client/tree/master/skill/keybase-style-analysisType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add keybase/client --skill keybase-style-analysis -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install keybase/client keybase-style-analysis --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skill/keybase-style-analysis .agents/skills/keybase-style-analysis && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "keybase-style-analysis" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-style-analysis into .agents/skills/keybase-style-analysis/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-style-analysis", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add keybase/client --skill keybase-style-analysis -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install keybase/client keybase-style-analysis --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skill/keybase-style-analysis .cursor/skills/keybase-style-analysis && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "keybase-style-analysis" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-style-analysis into .cursor/skills/keybase-style-analysis/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-style-analysis", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/keybase/client.git --path skill/keybase-style-analysis--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add keybase/client --skill keybase-style-analysis -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install keybase/client keybase-style-analysis --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skill/keybase-style-analysis .gemini/skills/keybase-style-analysis && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "keybase-style-analysis" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-style-analysis into .gemini/skills/keybase-style-analysis/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-style-analysis", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install keybase/client keybase-style-analysisInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add keybase/client --skill keybase-style-analysis -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .github/skills && cp -r skills-src/skill/keybase-style-analysis .github/skills/keybase-style-analysis && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "keybase-style-analysis" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-style-analysis into .github/skills/keybase-style-analysis/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-style-analysis", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add keybase/client --skill keybase-style-analysis -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install keybase/client keybase-style-analysis --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skill/keybase-style-analysis .opencode/skills/keybase-style-analysis && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "keybase-style-analysis" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-style-analysis into .opencode/skills/keybase-style-analysis/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-style-analysis", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
keybase-style-analysis- GitHub stars
- 9.3k
- Token cost
- ~628 tokens
- SKILL.md length
- 243 words
- Files
- 1
- Skills in repo
- 14
- Repo updated
- First seen
- Licence
- BSD-3-Clause
At a glance
Extracts style objects from the Keybase client's TSX files, then finds places where border helpers could replace repeated code and suggests new helpers.
- Works in 2 steps: Extract (run from shared/) → Analyze
- Auditing the Keybase client for style code that an existing helper could replace
- SKILL.md covers When to use extract, Workflow, Interpreting output and After analysis
- Calls node and yarn
What it does
The workflow has two phases. Extract is slow, taking roughly 10 to 30 seconds, and writes a JSON snapshot to /tmp/keybase-styles.json with one entry per style object from styleSheetCreate, platformStyles and inline JSX style props. Analyze is fast and reads that snapshot. Both run as `node scripts/analyze-styles.mts` from the shared folder, and extract is re-run when the snapshot is missing, after large style changes or when the user passes --fresh.
The analysis reports two things. Gap detection lists each file and line where an existing helper could be used but is not, with the suggested replacement call, and the agent groups these by file, shows the top 10 to 15 sites and asks which files to migrate first. New helper candidates are clusters of border properties that often appear together, such as a group seen 12 times, and each recommendation names the helper, gives its signature, counts the call sites it would clean up and shows 2 or 3 before and after examples. Options narrow the run to border gaps or raise the minimum count from its default of 3.
Afterwards the agent offers to migrate gap sites file by file or all at once, gets approval before adding a new helper, and runs `yarn lint:all` from shared to verify.
When your agent uses it
- Auditing the Keybase client for style code that an existing helper could replace
- Finding border and padding refactor sites across the TSX files
- Discovering new style helper candidates from repeated border property groups
Example prompts
- “Run the style analysis on the Keybase client and show the top border helper gaps.”
- “Re-extract the style snapshot with fresh data and list new helper candidates seen at least 5 times.”
- “Migrate the border gaps in the chat folder to the existing helper and run the linter.”
Requirements
- A checkout of the Keybase client repository
- Node.js to run the analyze-styles script
- yarn for the lint check
Workflow steps
2 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 81e93d6. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
nodeyarn
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Keybase Style Analysis loads about 628 tokens when it runs. Until then it costs about 43 tokens; SKILL.md has 243 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from keybase/client at commit 81e93d6, republished under its BSD-3-Clause licence (© keybase). 243 words, ~628 tokens.
Download SKILL.mdSave it as
.claude/skills/keybase-style-analysis/SKILL.md (or your agent's skills folder).- name
- keybase-style-analysis
- description
- Use when auditing Keybase client styles for helper opportunities, finding border/padding refactor sites, or discovering new style helper candidates.
Keybase Style Analysis
Extracts and analyzes style objects from all TSX source files. Two phases: extract (slow, produces a persistent JSON snapshot) and analyze (fast, reads the snapshot).
When to use extract
Re-run extract when:
- The snapshot file doesn't exist yet (
/tmp/keybase-styles.json) - You've made significant style changes and want fresh data
- User passes
--fresh
Skip extract when:
- The snapshot already exists and changes since extraction are minor
Workflow
Phase 1: Extract (run from shared/)
cd shared
node scripts/analyze-styles.mts extract --output /tmp/keybase-styles.jsonTakes ~10–30 seconds. Writes structured JSON with one entry per style object (styleSheetCreate, platformStyles, and inline JSX style props).
Phase 2: Analyze
Full audit — gaps + new candidates:
cd shared
node scripts/analyze-styles.mts analyze --input /tmp/keybase-styles.jsonBorder gaps only:
node scripts/analyze-styles.mts analyze --input /tmp/keybase-styles.json --helper borderRaise the minimum count threshold (default 3):
node scripts/analyze-styles.mts analyze --input /tmp/keybase-styles.json --min-count 5Interpreting output
Gap detection output
Each line shows a file and line number where an existing helper could be used but isn't, plus the suggested replacement call:
chat/audio/audio-player.tsx:123 (container)
→ ...Kb.Styles.border(Kb.Styles.globalColors.grey, 1, Kb.Styles.borderRadius)When showing these to the user, group by file and present the top 10–15 highest-value sites. Ask which files they want to migrate first.
New helper candidates output
Shows clusters of border properties that co-occur frequently:
[12x] borderColor+borderRadius+borderStyle+borderWidth
borderColor: Kb.Styles.globalColors.black_10 | globalColors.grey
...When recommending a new helper, include: what it would be named, its signature, the number of call sites it would clean up, and 2–3 example current usages vs. the proposed call.
After analysis
- For gap sites: offer to migrate them file-by-file or all at once
- For new helper candidates: present the proposed helper signature and get approval before adding it
- After migrating, run
yarn lint:allfromshared/to verify
© keybase, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skill/keybase-style-analysis of keybase/client.
Open the folder on GitHubat commit 81e93d6
Compare with similar skills
Keybase Style Analysis next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Keybase Style Analysis this skillkeybase/client | 9.3k | — | ~628 | Automated safety check: Pass | BSD-3-Clause | |
| HTML Diff Refactor Checktabler/tabler | 42k | — | ~1.1k | Automated safety check: Pass | MIT | |
| Frontend Module Standardssiteboon/claudecodeui | 14k | — | ~2.6k | Automated safety check: Pass | AGPL-3.0 | |
| Modern JavaScript Patternswshobson/agents | 40k | 11 repos | ~548 | Automated safety check: Pass | MIT | |
| QML Coding Best Practicesx-tools-author/x-tools | 1.1k | 1 repos | ~3.4k | Automated safety check: Pass | BSD-3-Clause | |
| Tabler Backward Compatibilitytabler/tabler | 42k | — | ~4k | Automated safety check: Pass | MIT |
Similar skills
Frontend Module Standards
siteboon/claudecodeui
Enforces one repository's React and TypeScript module layout for code under src/: source-root imports, feature barrels, deliberate exports and no deep imports.
Modern JavaScript Patterns
wshobson/agents
Covers ES6+ syntax and functional patterns for refactoring older JavaScript: async/await, destructuring, spread, modules, generators and data pipelines.
QML Coding Best Practices
x-tools-author/x-tools
Applies QML best practices when writing, reviewing, refactoring or debugging QML code, with Qt 5 and Qt 6 import rules and concise, rule-silent output.
Tabler Backward Compatibility
tabler/tabler
Keeps changes to @tabler/core backward compatible so patch and minor releases never break projects, covering what counts as public API and how to alias renames.
Uniwind
pproenca/dot-skills
Uniwind best practices for React Native styling with Tailwind CSS.
More from keybase/client
All 14 skills in this repoElectron Heap Snapshot Analysis
keybase/client
Analyzes V8, Chrome and Electron .heapsnapshot files with Node scripts to find memory leaks, detached DOM nodes and the retainer paths that keep objects alive.
Electron DevTools Trace Analysis
keybase/client
Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.
Keybase RPC Log Analysis
keybase/client
Captures a clean Keybase service log and analyzes it for redundant, duplicated or looping RPCs, then checks whether a caching fix reduced the calls.
React DevTools Profile Analyzer
keybase/client
Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI.
Address PR Feedback
keybase/client
Fetches GitHub Copilot review feedback from inline threads and review bodies, checks each finding against the code and fixes the valid ones.
Electron App Screenshot
keybase/client
Takes a screenshot of a running Electron desktop app through playwright-cli over remote debugging, shrinks it and shows it so you can check the UI visually.
Related
Works with
Categories
Questions about Keybase Style Analysis
What does Keybase Style Analysis do?
Extracts style objects from the Keybase client's TSX files, then finds places where border helpers could replace repeated code and suggests new helpers. The workflow has two phases.json with one entry per style object from styleSheetCreate, platformStyles and inline JSX style props.
When should I use Keybase Style Analysis?
Keybase Style Analysis fits situations like: auditing the Keybase client for style code that an existing helper could replace; finding border and padding refactor sites across the TSX files; discovering new style helper candidates from repeated border property groups.
How do I install Keybase Style Analysis in Claude Code?
Run `npx skills add keybase/client --skill keybase-style-analysis -a claude-code`. Or copy the skill folder (skill/keybase-style-analysis in keybase/client) into .claude/skills/keybase-style-analysis in your project. Claude Code loads it when a task matches its description.
How do I install Keybase Style Analysis in Codex?
Run `npx skills add keybase/client --skill keybase-style-analysis -a codex`. Or copy the skill folder (skill/keybase-style-analysis in keybase/client) into .agents/skills/keybase-style-analysis in your project. Codex loads it when a task matches its description.
Can I use Keybase Style Analysis in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add keybase/client --skill keybase-style-analysis -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/keybase-style-analysis, .gemini/skills/keybase-style-analysis, .github/skills/keybase-style-analysis and .opencode/skills/keybase-style-analysis in your project.
What does Keybase Style Analysis need to run?
Going by SKILL.md and its folder, Keybase Style Analysis needs the command-line tools its instructions call (node and yarn). Our summary lists: A checkout of the Keybase client repository; Node.js to run the analyze-styles script; yarn for the lint check.
Does Keybase Style Analysis access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Keybase Style Analysis safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Keybase Style Analysis use?
Keybase Style Analysis is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Keybase Style Analysis use?
About 628 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Keybase Style Analysis?
Skills that share tags, products or a category with Keybase Style Analysis: HTML Diff Refactor Check (tabler/tabler, 42k stars), Frontend Module Standards (siteboon/claudecodeui, 14k stars), Modern JavaScript Patterns (wshobson/agents, 40k stars) and QML Coding Best Practices (x-tools-author/x-tools, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Keybase Style Analysis?
keybase (a GitHub organization) maintains it in keybase/client, which has 9,257 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 7, 2026.
Source: keybase/client on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.