無料GitHub で公開

visualization-creation-or-update

Create, standardize, or update step-by-step algorithm visualizations for a given problem ID. Use when the user mentions 'visual', 'visualization', 'animate', or 'step-by-step' alongside a problem ID in /problem/:id format.

rkmahale17/rulcode.com

インストール方法を見る

含まれるファイル（85）

SKILL.md2.4 KB
guides-update/SKILL.md2.8 KB
security/scripts/main_scan.sh671 B
security/scripts/scan_deps.sh290 B
security/scripts/scan_network.py2.2 KB
security/scripts/scan_secrets.py2.4 KB
security/SKILL.md2.0 KB
system-design-guides/SKILL.md2.8 KB
vercel-react-best-practices/AGENTS.md105.7 KB
vercel-react-best-practices/metadata.json921 B
vercel-react-best-practices/README.md3.3 KB
vercel-react-best-practices/rules/_sections.md1.5 KB
vercel-react-best-practices/rules/_template.md631 B
vercel-react-best-practices/rules/advanced-effect-event-deps.md1.8 KB
vercel-react-best-practices/rules/advanced-event-handler-refs.md1.4 KB
vercel-react-best-practices/rules/advanced-init-once.md958 B
vercel-react-best-practices/rules/advanced-use-latest.md1.0 KB
vercel-react-best-practices/rules/async-api-routes.md1.1 KB
vercel-react-best-practices/rules/async-cheap-condition-before-await.md1.2 KB
vercel-react-best-practices/rules/async-defer-await.md2.2 KB
vercel-react-best-practices/rules/async-dependencies.md1.3 KB
vercel-react-best-practices/rules/async-parallel.md654 B
vercel-react-best-practices/rules/async-suspense-boundaries.md2.5 KB
vercel-react-best-practices/rules/bundle-analyzable-paths.md2.3 KB
vercel-react-best-practices/rules/bundle-barrel-imports.md2.7 KB
vercel-react-best-practices/rules/bundle-conditional.md949 B
vercel-react-best-practices/rules/bundle-defer-third-party.md920 B
vercel-react-best-practices/rules/bundle-dynamic-imports.md791 B
vercel-react-best-practices/rules/bundle-preload.md1.1 KB
vercel-react-best-practices/rules/client-event-listeners.md1.9 KB
vercel-react-best-practices/rules/client-localstorage-schema.md1.9 KB
vercel-react-best-practices/rules/client-passive-event-listeners.md1.6 KB
vercel-react-best-practices/rules/client-swr-dedup.md1.1 KB
vercel-react-best-practices/rules/js-batch-dom-css.md3.2 KB
vercel-react-best-practices/rules/js-cache-function-results.md1.9 KB
vercel-react-best-practices/rules/js-cache-property-access.md532 B
vercel-react-best-practices/rules/js-cache-storage.md1.6 KB
vercel-react-best-practices/rules/js-combine-iterations.md753 B
vercel-react-best-practices/rules/js-early-exit.md1.1 KB
vercel-react-best-practices/rules/js-flatmap-filter.md1.4 KB
vercel-react-best-practices/rules/js-hoist-regexp.md1.0 KB
vercel-react-best-practices/rules/js-index-maps.md837 B
vercel-react-best-practices/rules/js-length-check-first.md1.7 KB
vercel-react-best-practices/rules/js-min-max-loop.md2.2 KB
vercel-react-best-practices/rules/js-request-idle-callback.md2.6 KB
vercel-react-best-practices/rules/js-set-map-lookups.md532 B
vercel-react-best-practices/rules/js-tosorted-immutable.md1.7 KB
vercel-react-best-practices/rules/rendering-activity.md564 B
vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md1.2 KB
vercel-react-best-practices/rules/rendering-conditional-render.md980 B
vercel-react-best-practices/rules/rendering-content-visibility.md815 B
vercel-react-best-practices/rules/rendering-hoist-jsx.md1.0 KB
vercel-react-best-practices/rules/rendering-hydration-no-flicker.md2.3 KB
vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md872 B
vercel-react-best-practices/rules/rendering-resource-hints.md2.5 KB
vercel-react-best-practices/rules/rendering-script-defer-async.md1.8 KB
vercel-react-best-practices/rules/rendering-svg-precision.md588 B
vercel-react-best-practices/rules/rendering-usetransition-loading.md2.0 KB
vercel-react-best-practices/rules/rerender-defer-reads.md973 B
vercel-react-best-practices/rules/rerender-dependencies.md824 B
vercel-react-best-practices/rules/rerender-derived-state-no-effect.md1.2 KB
vercel-react-best-practices/rules/rerender-derived-state.md728 B
vercel-react-best-practices/rules/rerender-functional-setstate.md2.9 KB
vercel-react-best-practices/rules/rerender-lazy-state-init.md2.0 KB
vercel-react-best-practices/rules/rerender-memo-with-default-value.md1.1 KB
vercel-react-best-practices/rules/rerender-memo.md1.1 KB
vercel-react-best-practices/rules/rerender-move-effect-to-event.md1.2 KB
vercel-react-best-practices/rules/rerender-no-inline-components.md2.1 KB
vercel-react-best-practices/rules/rerender-simple-expression-in-memo.md1018 B
vercel-react-best-practices/rules/rerender-split-combined-hooks.md1.8 KB
vercel-react-best-practices/rules/rerender-transitions.md1.0 KB
vercel-react-best-practices/rules/rerender-use-deferred-value.md1.8 KB
vercel-react-best-practices/rules/rerender-use-ref-transient-values.md1.7 KB
vercel-react-best-practices/rules/server-after-nonblocking.md2.0 KB
vercel-react-best-practices/rules/server-auth-actions.md2.6 KB
vercel-react-best-practices/rules/server-cache-lru.md1.3 KB
vercel-react-best-practices/rules/server-cache-react.md2.2 KB
vercel-react-best-practices/rules/server-dedup-props.md2.0 KB
vercel-react-best-practices/rules/server-hoist-static-io.md4.3 KB
vercel-react-best-practices/rules/server-no-shared-module-state.md1.7 KB
vercel-react-best-practices/rules/server-parallel-fetching.md1.5 KB
vercel-react-best-practices/rules/server-parallel-nested-fetching.md992 B
vercel-react-best-practices/rules/server-serialization.md996 B
vercel-react-best-practices/SKILL.md7.1 KB
visualization/SKILL.md8.1 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Visualization Creation or Update

Create or update algorithm visualizations that synchronize code execution with visual state for problems identified by /problem/:id.

Workflow

1. Locate the visualization file

Search src/components/visualizations/algorithms/ for the file matching the problem ID.

File exists: Update it to match the standards below.
File missing: Confirm with the user before generating a new visualization.

2. Implement the visualization

Code display rules

The execution steps MUST be perfectly synchronized with the highlighted lines of code in the editor view.
The algorithm code block MUST NOT contain any comments — remove all inline and block comments.
Always use the AnimatedCodeEditor component for code blocks. Do not add redundant wrapper divs, headings, or extra layout containers around it.

Layout rules

Place SimpleStepControls at the top of the visualization, above the main content grid.
Use a two-column grid on large screens with consistent VariablePanel placement.
Place the descriptive commentary box above the VariablePanel to provide immediate context.
Use theme-aware text classes (text-foreground, text-primary-foreground) instead of hardcoded colors.
Do not add index labels (e.g., "idx") to array visual elements.

Interaction rules

Disable all click-based animations — transitions between steps must be instantaneous.
Only implement multiple test cases if explicitly requested. When implemented, provide a visually polished toggle UI using lucide-react icons. Switching cases must reset currentStepIndex to 0 and isPlaying to false.

Commentary rules

Write descriptive, step-by-step narrative commentary explaining why each action is taken and how the algorithm progresses toward the solution.

3. Verify

Confirm each of the following before completing:

No comments inside the code block string
Variable/pointer states match the active execution step at every step index
SimpleStepControls renders above the content grid
AnimatedCodeEditor has no redundant wrapper elements
Text colors use theme-aware classes

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

Guides Update

無料

Skill for adding or updating educational algorithm guides, ensuring consistent patterns and simple explanations suitable for an 8-year-old.

日本語の概要は準備中です。原文の説明を表示しています。