跳到正文
cccskills
免费在 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（原文）

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Guides Update

免费

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

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

integration-react-native

免费

Install and configure PostHog analytics SDK in React Native applications, including event tracking, feature flags, user identification, and error tracking. Use when the user needs to add PostHog analytics, session recording, or feature flags to a React Native app.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

integration-react-react-router-6

免费

PostHog integration for React Router v6 applications

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

rulcode-development

免费

Develop and extend the RulCode technical interview preparation platform built with React, Vite, TypeScript, and Supabase. Use when adding new algorithm problems, building visualization components, implementing DSA topic pages, updating the problem editor, or modifying the interview preparation UI.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

security-scan

免费

Scan the repository for hardcoded secrets, exposed API keys, insecure network configurations, and vulnerable dependencies. Use when the user asks for a security audit, secret detection, credential scan, vulnerability check, or wants to find leaked tokens in the codebase.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

System Design Guides

免费

Skill for adding or updating system design guides tailored for college students and beginners, using simple analogies and no simulations.

中文简介正在准备中。当前显示原文说明。

rkmahale17/rulcode.com152026年10月12日 更新

查看 rkmahale17 的全部技能

报告此技能的问题