FreePublished on 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.

The English summary is being prepared. Showing the original description.

rkmahale17/rulcode.com

See how to install

Files included (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 (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

Guides Update

Free

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

The English summary is being prepared. Showing the original description.

rkmahale17/rulcode.com15Updated Oct 12, 2026

integration-react-native

Free

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.

The English summary is being prepared. Showing the original description.

rkmahale17/rulcode.com15Updated Oct 12, 2026

integration-react-react-router-6

Free

PostHog integration for React Router v6 applications

The English summary is being prepared. Showing the original description.

rkmahale17/rulcode.com15Updated Oct 12, 2026

rulcode-development

Free

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.

The English summary is being prepared. Showing the original description.

rkmahale17/rulcode.com15Updated Oct 12, 2026

security-scan

Free

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.

The English summary is being prepared. Showing the original description.

rkmahale17/rulcode.com15Updated Oct 12, 2026

System Design Guides

Free

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

The English summary is being prepared. Showing the original description.

rkmahale17/rulcode.com15Updated Oct 12, 2026

See all skills by rkmahale17

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/rkmahale17/rulcode.com --skill visualization-creation-or-update

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/rkmahale17/rulcode.com/tree/main/.agents/skills

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/visualization-creation-or-update/ for Claude Code, or ~/.agents/skills/visualization-creation-or-update/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: rkmahale17/rulcode.com
Stars: 15
Forks: 3
Category: Other
Original language: English
Last updated: Oct 12, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.