무료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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

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

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/rkmahale17/rulcode.com/tree/main/.agents/skills

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/visualization-creation-or-update/, Codex는 ~/.agents/skills/visualization-creation-or-update/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: rkmahale17/rulcode.com
스타: 15
포크: 3
카테고리: 기타
원문 언어: 영어
최종 업데이트: 2026년 10월 12일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.