Angular Idioms and Patterns
irahardianto/awesome-agv
Coding conventions for Angular 19 and later: standalone components, signals, OnPush change detection, lazy routes and where RxJS still belongs.
Rules for changing Handsontable's Walkontable rendering engine: the TableView boundary, dependency injection through wire.ts and DOM geometry reads via GeometryReader.
Install Walkontable Engine Development
$ npx skills add handsontable/handsontable --skill walkontable-dev -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install handsontable/handsontable walkontable-dev --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/handsontable/handsontable.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/walkontable-dev .claude/skills/walkontable-dev && 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 "walkontable-dev" agent skill from https://github.com/handsontable/handsontable/tree/develop/.claude/skills/walkontable-dev into .claude/skills/walkontable-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkontable-dev", 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/handsontable/handsontable/tree/develop/.claude/skills/walkontable-devType 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 handsontable/handsontable --skill walkontable-dev -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install handsontable/handsontable walkontable-dev --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/handsontable/handsontable.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/walkontable-dev .agents/skills/walkontable-dev && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "walkontable-dev" agent skill from https://github.com/handsontable/handsontable/tree/develop/.claude/skills/walkontable-dev into .agents/skills/walkontable-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkontable-dev", 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 handsontable/handsontable --skill walkontable-dev -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install handsontable/handsontable walkontable-dev --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/handsontable/handsontable.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/walkontable-dev .cursor/skills/walkontable-dev && 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 "walkontable-dev" agent skill from https://github.com/handsontable/handsontable/tree/develop/.claude/skills/walkontable-dev into .cursor/skills/walkontable-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkontable-dev", 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/handsontable/handsontable.git --path .claude/skills/walkontable-dev--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 handsontable/handsontable --skill walkontable-dev -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install handsontable/handsontable walkontable-dev --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/handsontable/handsontable.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/walkontable-dev .gemini/skills/walkontable-dev && 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 "walkontable-dev" agent skill from https://github.com/handsontable/handsontable/tree/develop/.claude/skills/walkontable-dev into .gemini/skills/walkontable-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkontable-dev", 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 handsontable/handsontable walkontable-devInstalls 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 handsontable/handsontable --skill walkontable-dev -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/handsontable/handsontable.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/walkontable-dev .github/skills/walkontable-dev && 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 "walkontable-dev" agent skill from https://github.com/handsontable/handsontable/tree/develop/.claude/skills/walkontable-dev into .github/skills/walkontable-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkontable-dev", 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 handsontable/handsontable --skill walkontable-dev -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install handsontable/handsontable walkontable-dev --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/handsontable/handsontable.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/walkontable-dev .opencode/skills/walkontable-dev && 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 "walkontable-dev" agent skill from https://github.com/handsontable/handsontable/tree/develop/.claude/skills/walkontable-dev into .opencode/skills/walkontable-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkontable-dev", 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
walkontable-dev- GitHub stars
- 22k
- Token cost
- ~3.1k tokens
- SKILL.md length
- 1,222 words
- Files
- 1
- Skills in repo
- 31
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Rules for changing Handsontable's Walkontable rendering engine: the TableView boundary, dependency injection through wire.ts and DOM geometry reads via GeometryReader.
- Works in 6 steps: Generalize the signature instead of… → Declarations are generated → import type for types → …
- Modifying the Walkontable overlay system or viewport calculations
- SKILL.md covers Architecture boundary, Dependency injection and DOM…, Key subsystems and Single-pass layout and sizing, plus 6 more sections
- Calls npm, pnpm and node
What it does
Walkontable is the engine behind Handsontable's viewport calculation, DOM rendering, scroll sync and overlays. Its rules and traps are in the AGENTS.md file inside the walkontable folder and its architecture in the .ai notes. The source is TypeScript under src/3rdparty/walkontable/src, excluded from the main tsconfig and built and tested by its own pipeline. Plugins and core reach it only through TableView or the public Core API, and DOM logic inside it is wrapped in abstraction modules.
Two rules are mandatory and lint-enforced. Dependency injection runs through wire.ts, the single composition root where buildContext returns an EngineContext, and each module has a co-located factory that builds its dependencies, stored in a private deps field with the type inferred from the factory. Stable owners are injected, while volatile per-draw objects are read fresh from the owner. DOM geometry reads go through the GeometryReader proxy. New modules start by copying an existing one, with the scroll module as the simplest template.
When your agent uses it
- Modifying the Walkontable overlay system or viewport calculations
- Changing scroll handling or DOM management inside the rendering engine
- Working on the TableView bridge between core Handsontable and Walkontable
- Adding a new module that needs injected dependencies
Example prompts
- “Add a new Walkontable module with dependencies wired through wire.ts, copying the scroll module.”
- “Fix the viewport calculation bug without reading DOM geometry directly.”
- “Where should a plugin call into Walkontable, and where is it not allowed to?”
Requirements
- A checkout of the Handsontable repository
Workflow steps
6 steps, taken from the step headings in SKILL.md.
- Generalize the signature instead of casting
- Declarations are generated
- import type for types
- Shared types live in core/
- Private fields use #; callbacks are arrow-function class fields
- Cognitive complexity ≤ 15 per function
What it can do on your machine
Read from SKILL.md and the folder at commit 68b5e97. 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:
npmpnpmnode
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and pnpm, 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
Walkontable Engine Development loads about 3.1k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 1,222 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
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,222 words (~3,055 tokens).
“Walkontable is the rendering engine (viewport calculation, DOM rendering, scroll sync, overlays). Rules and traps live in handsontable/src/3rdparty/walkontable/AGENTS.md; architecture in handsontable/src/3rdparty/walkontable/.ai/ARCHITECTURE.md and .ai/CONCERNS.md.”
- name
- walkontable-dev
- path
- handsontable/src/3rdparty/walkontable/**
Files
Just SKILL.md in .claude/skills/walkontable-dev of handsontable/handsontable.
Open the folder on GitHubat commit 68b5e97
Compare with similar skills
Walkontable Engine Development 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 |
|---|---|---|---|---|---|---|
| Walkontable Engine Development this skillhandsontable/handsontable | 22k | — | ~3.1k | Automated safety check: Pass | Custom licence | |
| Angular Idioms and Patternsirahardianto/awesome-agv | 157 | — | ~3.8k | Automated safety check: Pass | MIT | |
| Wagmi Feature Developmentwevm/wagmi | 6.8k | — | ~3.8k | Automated safety check: Pass | MIT | |
| Refactoring UI Designchaxus/ran | 271 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Calcpad Web Frontend Developerimartincei/CalcpadCE | 109 | — | ~1.1k | Automated safety check: Notes | MIT | |
| Typescript Rulesshinpr/claude-code-workflows | 690 | — | ~1.8k | Automated safety check: Pass | MIT |
Similar skills
Wagmi Feature Development
wevm/wagmi
Walks through adding a Wagmi feature across its layers: a Viem-based core action, TanStack Query options, and React and Vue bindings.
Refactoring UI Design
chaxus/ran
A skill your agent uses when designing, reviewing, or improving web UI visual quality, especially when a developer-built interface feels cluttered, flat, generic, poorly spaced, weakly hierarchical…
Calcpad Web Frontend Developer
imartincei/CalcpadCE
Expert developer for Calcpad.Web/frontend - the TypeScript/Vue 3 frontend monorepo.
Typescript Rules
shinpr/claude-code-workflows
React/TypeScript frontend development rules including type safety, component design, state management, and error handling.
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.
More from handsontable/handsontable
All 31 skills in this repoHandsontable Playwright E2E Tests
handsontable/handsontable
Guides writing and changing Playwright end-to-end tests for Handsontable using page objects, data-testid hooks and deterministic waits.
Handsontable Angular Wrapper Development
handsontable/handsontable
Guides changes to the @handsontable/angular-wrapper package: the HotTableComponent lifecycle, NgZone performance handling, settings services and the ng-packagr build.
BrowserStack Live Testing
handsontable/handsontable
Opens a live BrowserStack session on a real Android, iOS or desktop browser for a local or public URL, tunneling localhost through Cloudflare when needed.
Handsontable Changelog Entry
handsontable/handsontable
Decides whether a code change needs a changelog entry and creates the JSON file in .changelogs with the right type, framework and user-facing title.
Code Review Graph Navigator
handsontable/handsontable
Queries a pre-built, Tree-sitter-based code graph of the whole monorepo instead of grepping call chains, for exploring, debugging, refactoring or reviewing code.
Handsontable Coordinate Systems
handsontable/handsontable
Explains Handsontable's physical, visual and renderable row and column coordinate spaces and how to convert between them with IndexMapper, for debugging misplaced rows or columns.
Related
Works with
Categories
Questions about Walkontable Engine Development
What does Walkontable Engine Development do?
Rules for changing Handsontable's Walkontable rendering engine: the TableView boundary, dependency injection through wire.ts and DOM geometry reads via GeometryReader. Walkontable is the engine behind Handsontable's viewport calculation, DOM rendering, scroll sync and overlays.ai notes.
When should I use Walkontable Engine Development?
Walkontable Engine Development fits situations like: modifying the Walkontable overlay system or viewport calculations; changing scroll handling or DOM management inside the rendering engine; working on the TableView bridge between core Handsontable and Walkontable; adding a new module that needs injected dependencies.
How do I install Walkontable Engine Development in Claude Code?
Run `npx skills add handsontable/handsontable --skill walkontable-dev -a claude-code`. Or copy the skill folder (.claude/skills/walkontable-dev in handsontable/handsontable) into .claude/skills/walkontable-dev in your project. Claude Code loads it when a task matches its description.
How do I install Walkontable Engine Development in Codex?
Run `npx skills add handsontable/handsontable --skill walkontable-dev -a codex`. Or copy the skill folder (.claude/skills/walkontable-dev in handsontable/handsontable) into .agents/skills/walkontable-dev in your project. Codex loads it when a task matches its description.
Can I use Walkontable Engine Development 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 handsontable/handsontable --skill walkontable-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/walkontable-dev, .gemini/skills/walkontable-dev, .github/skills/walkontable-dev and .opencode/skills/walkontable-dev in your project.
What does Walkontable Engine Development need to run?
Going by SKILL.md and its folder, Walkontable Engine Development needs the command-line tools its instructions call (npm, pnpm and node). Our summary lists: A checkout of the Handsontable repository.
Does Walkontable Engine Development access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Walkontable Engine Development 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 Walkontable Engine Development use?
Walkontable Engine Development has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Walkontable Engine Development use?
About 3.1k tokens (SKILL.md is roughly 12k 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 Walkontable Engine Development?
Skills that share tags, products or a category with Walkontable Engine Development: Angular Idioms and Patterns (irahardianto/awesome-agv, 157 stars), Wagmi Feature Development (wevm/wagmi, 6.8k stars), Refactoring UI Design (chaxus/ran, 271 stars) and Calcpad Web Frontend Developer (imartincei/CalcpadCE, 109 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Walkontable Engine Development?
handsontable (a GitHub organization) maintains it in handsontable/handsontable, which has 22,059 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 7, 2026.
Source: handsontable/handsontable on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.