New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Lc Algo Demo

by yennanliu in yennanliu/CS_basics

Add or edit an algorithm visualizer under algodemo/ against the shared contract the other 36 pages already obey — colours read from the VIZ palette and never hardcoded, no re-implementation of the…

No licenceAuto-check: notes

Install Lc Algo Demo

skills CLI
$ npx skills add yennanliu/CS_basics --skill lc-algo-demo -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install yennanliu/CS_basics lc-algo-demo --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/yennanliu/CS_basics.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/lc-algo-demo .claude/skills/lc-algo-demo && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
lc-algo-demo
GitHub stars
141
Token cost
~2.4k tokens
SKILL.md length
1,052 words
Files
1
Skills in repo
16
Repo updated
First seen
Licence
None found

At a glance

Add or edit an algorithm visualizer under algodemo/ against the shared contract the other 36 pages already obey — colours read from the VIZ palette and never hardcoded, no re-implementation of the…

  • Works in 6 steps: Read a neighbour, and common.js → Check the helper does not already exist → Write algo_demo/.html → …
  • Asked to add a visualizer
  • SKILL.md covers Why the contract matters here…, Prime directives, The step trace's three shapes and The steps, plus 2 more sections
  • Calls bash, node and npm

What it does

Lc Algo Demo is an agent skill from yennanliu/CS_basics. Add or edit an algorithm visualizer under algodemo/ against the shared contract the other 36 pages already obey — colours read from the VIZ palette and never hardcoded, no re-implementation of the devicePixelRatio canvas wrapper, the step trace written in the three shapes createLogger renders as structure, the trace in its own full-width panel below the canvas, and draw = VIZ.repaintable(draw) for any draw() that takes arguments. Use when asked to add a visualizer, animate an algorithm, build a demo page, or…

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: My CS learning : algorithm, data structure, and system design | SE.

When your agent uses it

  • Asked to add a visualizer
  • Animate an algorithm
  • Build a demo page
  • Change something that should look the same on every visualizer

Example prompts

  • “add a visualizer for Dijkstra”
  • “/lc-algo-demo trie”
  • “animate the sliding window”
  • “/lc-algo-demo”

Requirements

  • Python 3
  • Pre-approved tools (allowed-tools): Read, Glob, Grep, Bash, Write, Edit

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Read a neighbour, and common.js
  2. Check the helper does not already exist
  3. Write algo_demo/.html
  4. Register it on the index
  5. Exercise it, in both themes
  6. Report

What it can do on your machine

Read from SKILL.md and the folder at commit b6cade9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep
    • Bash
    • Write
    • Edit

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bash
    • node
    • npm
    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Lc Algo Demo loads about 2.4k tokens when it runs. Until then it costs about 185 tokens; SKILL.md has 1,052 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~185
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Glob, Grep, Bash, Write, Edit

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 1,052 words (~2,375 tokens).

“Write a page into algo_demo/ that behaves like the other 36.”

— opening of SKILL.md by yennanliu
name
lc-algo-demo
allowed-tools
Read, Glob, Grep, Bash, Write, Edit

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .claude/skills/lc-algo-demo of yennanliu/CS_basics.

Open the folder on GitHubat commit b6cade9

Compare with similar skills

Lc Algo Demo next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Lc Algo Demo compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Lc Algo Demo this skillyennanliu/CS_basics141—~2.4kAutomated safety check: NotesNone
Visualizeopenclaw/openclaw392k—~2.4kAutomated safety check: PassMIT
Handsontable Visual Test Demoshandsontable/handsontable22k—~1.3kAutomated safety check: PassCustom licence
Visual Stylecalesthio/OpenMontage66k—~1.5kAutomated safety check: PassAGPL-3.0
D3 Visualizationnexu-io/open-design100k—~523Automated safety check: PassApache-2.0
Visual Regressionthedaviddias/Front-End-Checklist74k—~493Automated safety check: PassMIT

Similar skills

  • Visualize

    openclaw/openclaw

    Create inline visuals for code and explanations, or author persistent OpenClaw dashboard widgets with showwidget.

    392k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Handsontable Visual Test Demos

    handsontable/handsontable

    Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.

    22k GitHub stars~1.3k tokensUpdated yesterday
    Testing & QAAuto-check passed

  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    66k GitHub stars~1.5k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

  • D3 Visualization

    nexu-io/open-design

    Teaches the agent to produce D3 charts and interactive data visualizations.

    100k GitHub stars~523 tokensUpdated yesterday
    Data & AnalyticsAuto-check passed

  • Visual Regression

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing CI coverage, automated checks, or test strategy related to Use visual regression testing.

    74k GitHub stars~493 tokensUpdated 5 days ago
    Testing & QAAuto-check passed

  • Visualize

    zai-org/ZCode

    Create visualizations and interactive tools directly in conversation.

    7.7k GitHub stars~8.7k tokensUpdated yesterday
    Data & AnalyticsAuto-check passed

More from yennanliu/CS_basics

All 16 skills in this repo

  • Lc Coach

    yennanliu/CS_basics

    FAANG coding-interview coach. An agent skill from yennanliu/CS_basics.

    141 GitHub stars~5k tokensUpdated today
    Auto-check: notes

  • Code Refactor Master

    yennanliu/CS_basics

    Code refactoring expert for improving code quality, readability, maintainability, and performance.

    141 GitHub stars~3.3k tokensUpdated today
    Auto-check passed

  • L3 Core

    yennanliu/CS_basics

    Report where the L3 core set stands and pick the next problems to drill from it.

    141 GitHub stars~2.2k tokensUpdated today
    Auto-check: notes

  • Lc Again

    yennanliu/CS_basics

    Move a problem's README status cell after a re-solve — promote AGAIN to OK when it was genuinely re-derived unaided, add a review pass when it was not, or demote OK back to AGAIN when a solid…

    141 GitHub stars~2.4k tokensUpdated today
    Auto-check: notes

  • Lc Cheatsheet

    yennanliu/CS_basics

    File a LeetCode problem into the cheatsheets under doc/cheatsheet/ the way the existing sections are written — find the sheet whose Scope line owns the topic, file it under the pattern it belongs to…

    141 GitHub stars~3.5k tokensUpdated today
    Auto-check: notes

  • Lc Discussion

    yennanliu/CS_basics

    Search recent LeetCode Discuss posts (leetcode.com/discuss/) by keyword — a company, a level, a round — read the ones that describe real interview questions, map each question to an LC number, check…

    141 GitHub stars~2k tokensUpdated today
    Auto-check: notes

Questions about Lc Algo Demo

What does Lc Algo Demo do?

Add or edit an algorithm visualizer under algodemo/ against the shared contract the other 36 pages already obey — colours read from the VIZ palette and never hardcoded, no re-implementation of the…. Lc Algo Demo is an agent skill from yennanliu/CS_basics.repaintable(draw) for any draw() that takes arguments.

When should I use Lc Algo Demo?

Lc Algo Demo fits situations like: asked to add a visualizer; animate an algorithm; build a demo page; change something that should look the same on every visualizer.

How do I install Lc Algo Demo in Claude Code?

Run `npx skills add yennanliu/CS_basics --skill lc-algo-demo -a claude-code`. Or copy the skill folder (.claude/skills/lc-algo-demo in yennanliu/CS_basics) into .claude/skills/lc-algo-demo in your project. Claude Code loads it when a task matches its description.

How do I install Lc Algo Demo in Codex?

Run `npx skills add yennanliu/CS_basics --skill lc-algo-demo -a codex`. Or copy the skill folder (.claude/skills/lc-algo-demo in yennanliu/CS_basics) into .agents/skills/lc-algo-demo in your project. Codex loads it when a task matches its description.

Can I use Lc Algo Demo in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add yennanliu/CS_basics --skill lc-algo-demo -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/lc-algo-demo, .gemini/skills/lc-algo-demo, .github/skills/lc-algo-demo and .opencode/skills/lc-algo-demo in your project.

What does Lc Algo Demo need to run?

Going by SKILL.md and its folder, Lc Algo Demo needs the command-line tools its instructions call (bash, node, npm and python3). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Glob, Grep, Bash, Write, Edit.

Does Lc Algo Demo access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Lc Algo Demo safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Lc Algo Demo use?

No licence was found for Lc Algo Demo or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Lc Algo Demo use?

About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Lc Algo Demo?

Skills that share tags, products or a category with Lc Algo Demo: Visualize (openclaw/openclaw, 392k stars), Handsontable Visual Test Demos (handsontable/handsontable, 22k stars), Visual Style (calesthio/OpenMontage, 66k stars) and D3 Visualization (nexu-io/open-design, 100k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Lc Algo Demo?

yennanliu (a GitHub user) maintains it in yennanliu/CS_basics, which has 141 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 11, 2026.

Source: yennanliu/CS_basics on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.