Use when developing or modifying the @handsontable/angular-wrapper package - Angular components with decorators, NgZone performance optimization, and ng-packagr build system
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
無料GitHub で公開
refactoring
Use when refactoring Handsontable code - applying SOLID principles, Law of Demeter, plugin extraction, performance optimization, code modernization, and API redesign with backward compatibility preservation
含まれるファイル（1）
- SKILL.md3.2 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Conventions over configuration
Eliminate config that naming, location, or type conventions already express. Use auto-discovery or lifecycle hooks in place of new options or wiring.
Handsontable specifics
- Single responsibility: one concern per plugin; extract a second concern into its own plugin.
- Open/closed: extend through hooks and the plugin system; new logic listens for hooks.
- Liskov: honor the BasePlugin contract (
isEnabled,enablePlugin,disablePlugin,updatePlugin,destroy, required static properties). - Interface segregation: keep public plugin APIs narrow; expose a focused method through
hot.getPlugin('{Name}'). - Dependency inversion: depend on hooks; reach another plugin's API through
hot.getPlugin('{Name}'), never by importing its class. - Law of Demeter: replace chains like
this.hot.view.wt.wtTable.holderwith a method on the intermediate layer.
Patterns
- Plugin extraction: when logic in
core.jsor a large plugin outgrows one responsibility, move it to a dedicated plugin that communicates through new hooks. - Performance:
forEachloop in place ofarr.push(...largeArray)(stack overflow at 10k+ elements).- Batch render cycles with
batch(),batchRender(),suspendRender()/resumeRender(). - Batch scroll-related work in
requestAnimationFrame.
- Modernization:
#privateFieldsin place of@privateJSDoc (exception: when#measurably hurts performance).- Arrow-function class fields for hook and event callbacks in place of
.bind(this). ?.only for values optional by design.
- API redesign: keep the old name working (table below).
Breaking changes protection
| Rule | Detail |
|---|---|
| Default setting values stay unchanged | Defaults in metaSchema.ts. |
| Keep legacy CSS class names | Add new names alongside old ones; old names stay in the DOM. |
| Legacy API names keep working with no console warning | "Legacy", not "deprecated". |
| Deprecated APIs get a one-time warning | deprecatedWarn() from src/helpers/console.ts; works until the next major release. |
| Removed hooks go on the removed list | Users get a clear error instead of silent failure. |
Maintainability
- Cognitive complexity at most 15 per function (Sonar); extract helpers or use early returns above it.
- Reuse helpers from
src/helpers/before writing new ones. - Method order: public methods first, then private listeners.
Tests after refactoring
- Unit (
*.unit.js): extracted helpers, strategies, pure logic. - E2E (Playwright
tests/e2e/*.spec.ts): feature still works in the browser. Edit an existing Jasmine*.spec.jsonly to keep it passing; never add a new one. A pure refactor with no behavior change can use aRefactor-only: <reason>commit trailer instead of a new test. - Backward compatibility: legacy API names, CSS classes, and option names still work.
- Performance: for data-heavy paths, unit tests with 50k+ rows.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Use when testing a local or public URL on a real device via BrowserStack, opening a live browser session on Android, iOS, or desktop browsers, or when the user mentions BrowserStack, real device testing, mobile testing, cross-browser testing, touch testing, or wants to verify behavior on a specific phone, tablet, or browser version. Also trigger when the user says "test this on Android/iPhone/Safari/Chrome mobile", asks to open a live session, or mentions demo-mobile.html, even if they don't mention BrowserStack by name.
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Use when a source code change needs a changelog entry, or before committing and pushing any bug fix, feature, or behavior change to source code - detecting when entries are required, categorizing changes correctly (added/changed/fixed/deprecated/removed/security), writing user-facing titles, and creating the JSON entry in .changelogs/
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Query the pre-built code-review-graph knowledge graph (Tree-sitter, whole monorepo) instead of walking call chains with Grep+Read – 2-6x cheaper, and it catches dynamic dispatch that grep misses. Use for ANY task that spans multiple files, even when the user never mentions a graph or asks for it - fixing or tracing a bug ("fix this bug", "why does X happen", "trace this"), exploring unfamiliar code ("how does X work", "who calls X", "what imports Y", "where is X used or handled"), planning or doing a refactor ("rename X", "is it safe to change or remove X", "what would break", "blast radius", "find dead code"), or reviewing changes ("review this PR", "review this branch or diff"). When you are about to Grep for a symbol's callers, callees, or importers, use this skill.
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Use when working with row or column indexes in Handsontable - translating between physical, visual, and renderable coordinates, using IndexMapper, or debugging index-related bugs where rows or columns appear in wrong positions
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Use when creating code examples for documentation pages - JavaScript, TypeScript, React, Angular, and Vue variants with proper imports, registration, and license key
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新