UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Scaffold a working openalgo-charts chart in an existing project - detects the host (React, Next.js, Vue, vanilla bundler, or plain script tag), installs the right tiers, and writes a chart that…
Apache-2.0Auto-check: notes
Install Openalgo Chart Setup
$ npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install marketcalls/openalgo-charts openalgo-chart-setup --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/marketcalls/openalgo-charts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/openalgo-chart-setup .claude/skills/openalgo-chart-setup && rm -rf skills-srcUse ~/.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/
Install the "openalgo-chart-setup" agent skill from https://github.com/marketcalls/openalgo-charts/tree/master/.github/skills/openalgo-chart-setup into .claude/skills/openalgo-chart-setup/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openalgo-chart-setup", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/marketcalls/openalgo-charts/tree/master/.github/skills/openalgo-chart-setupType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install marketcalls/openalgo-charts openalgo-chart-setup --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marketcalls/openalgo-charts.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.github/skills/openalgo-chart-setup .agents/skills/openalgo-chart-setup && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "openalgo-chart-setup" agent skill from https://github.com/marketcalls/openalgo-charts/tree/master/.github/skills/openalgo-chart-setup into .agents/skills/openalgo-chart-setup/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openalgo-chart-setup", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install marketcalls/openalgo-charts openalgo-chart-setup --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marketcalls/openalgo-charts.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.github/skills/openalgo-chart-setup .cursor/skills/openalgo-chart-setup && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "openalgo-chart-setup" agent skill from https://github.com/marketcalls/openalgo-charts/tree/master/.github/skills/openalgo-chart-setup into .cursor/skills/openalgo-chart-setup/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openalgo-chart-setup", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/marketcalls/openalgo-charts.git --path .github/skills/openalgo-chart-setup--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install marketcalls/openalgo-charts openalgo-chart-setup --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marketcalls/openalgo-charts.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.github/skills/openalgo-chart-setup .gemini/skills/openalgo-chart-setup && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "openalgo-chart-setup" agent skill from https://github.com/marketcalls/openalgo-charts/tree/master/.github/skills/openalgo-chart-setup into .gemini/skills/openalgo-chart-setup/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openalgo-chart-setup", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install marketcalls/openalgo-charts openalgo-chart-setupInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/marketcalls/openalgo-charts.git skills-src && mkdir -p .github/skills && cp -r skills-src/.github/skills/openalgo-chart-setup .github/skills/openalgo-chart-setup && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "openalgo-chart-setup" agent skill from https://github.com/marketcalls/openalgo-charts/tree/master/.github/skills/openalgo-chart-setup into .github/skills/openalgo-chart-setup/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openalgo-chart-setup", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install marketcalls/openalgo-charts openalgo-chart-setup --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/marketcalls/openalgo-charts.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.github/skills/openalgo-chart-setup .opencode/skills/openalgo-chart-setup && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "openalgo-chart-setup" agent skill from https://github.com/marketcalls/openalgo-charts/tree/master/.github/skills/openalgo-chart-setup into .opencode/skills/openalgo-chart-setup/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openalgo-chart-setup", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
openalgo-chart-setup- GitHub stars
- 146
- Token cost
- ~1.4k tokens
- SKILL.md length
- 511 words
- Files
- 1
- Skills in repo
- 6
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Scaffold a working openalgo-charts chart in an existing project - detects the host (React, Next.js, Vue, vanilla bundler, or plain script tag), installs the right tiers, and writes a chart that…
- Works in 5 steps: detect the host before writing anything → install → write the chart → …
- The user asks to add a chart
- SKILL.md covers Arguments, Step 1 - detect the host…, Step 2 - install and Step 3 - write the chart, plus 2 more sections
- Calls npm, rg and node
What it does
Openalgo Chart Setup is an agent skill from marketcalls/openalgo-charts. Scaffold a working openalgo-charts chart in an existing project - detects the host (React, Next.js, Vue, vanilla bundler, or plain script tag), installs the right tiers, and writes a chart that renders real data. Use when the user asks to add a chart, set up openalgo-charts, or get a first chart running.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It works with Vue.js, React and Next.js. The repository describes itself as: Production-grade charts built for brokers, exchanges, trading platforms, and financial portals. Bring your own market data, plug it in, and deliver a complete charting experience… The licence is Apache-2.0.
When your agent uses it
- The user asks to add a chart
- Set up openalgo-charts
- Get a first chart running
Example prompts
- “/openalgo-chart-setup”
Requirements
- Node.js
- Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, Glob, Grep
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 8b4cffe. 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:
ReadWriteEditBashGlobGrep
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npmrgnodenpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and npx, 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
Openalgo Chart Setup loads about 1.4k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 511 words of instructions outside code blocks.
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, Write, Edit, Bash, Glob, Grep
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
The full file from marketcalls/openalgo-charts at commit 8b4cffe, republished under its Apache-2.0 licence (© marketcalls). 511 words, ~1,413 tokens.
Download SKILL.mdSave it as
.claude/skills/openalgo-chart-setup/SKILL.md (or your agent's skills folder).- name
- openalgo-chart-setup
- description
- Scaffold a working openalgo-charts chart in an existing project - detects the host (React, Next.js, Vue, vanilla bundler, or plain script tag), installs the right tiers, and writes a chart that renders real data. Use when the user asks to add a chart, set up openalgo-charts, or get a first chart running.
- allowed-tools
- Read, Write, Edit, Bash, Glob, Grep
- argument-hint
- [chart-type] [host]
Scaffold a first working chart. Do not write a demo page unless the user asked for one; wire it into the project they already have.
Arguments
$0= chart type. Default:candlestick.$1= host. Default: detect it.
Step 1 - detect the host before writing anything
cat package.json
rg -n "\"(react|next|vue|svelte|vite|webpack)\"" package.json
node -p "require('./node_modules/openalgo-charts/package.json').version" 2>/dev/null || echo "not installed"Pick the shape from what you find:
| Finding | Shape |
|---|---|
next | client-only component, 'use client', create in useEffect |
react without next | component with useRef + useEffect |
vue | a composable: chart in a shallowRef, onMounted / onBeforeUnmount |
| a bundler, no framework | plain module |
| no bundler, HTML only | <script type="module"> from dist/ or a CDN; with no module support, the script-tag files: dist/openalgo-charts.standalone.js (the OpenAlgoCharts global), then each tier's openalgo-charts.<tier>.standalone.js (OpenAlgoCharts.<tier>) |
Read react-integration for the React and Next.js shapes, vue-integration for Vue 3 and Nuxt, and bundling-and-tiers for the no-bundler shape.
Step 2 - install
npm install openalgo-chartsAdd tier imports only for what the user actually asked for. Each unused tier is bytes for nothing.
| They asked for | Add |
|---|---|
| indicators | import 'openalgo-charts/indicators' |
| drawing tools | import { DrawingController } from 'openalgo-charts/draw' |
| Renko / Heikin Ashi / P&F / Kagi | import 'openalgo-charts/transform' |
| volume or market profile, footprint | import { ... } from 'openalgo-charts/profile' |
| placing orders | import { OrderEngine } from 'openalgo-charts/trade' |
| packaged toolbar, rail and dialogs | import { createWidget } from 'openalgo-charts/widget' |
| optional GPU series rendering | import 'openalgo-charts/webgl', then renderer: 'auto' |
Step 3 - write the chart
Requirements the scaffold must satisfy:
- The container has an explicit non-zero height. A chart in a zero-height box renders nothing and this is the most common setup failure.
- Time values are UTC seconds.
- The chart is created once and destroyed in cleanup with
chart.destroy(). - The chart instance lives in a ref or module scope, never in component state. In Vue that ref is a
shallowRef:ref()andreactive()hand back a proxy of the chart. - Real data if the project has a source;
generateBarsonly as an explicit placeholder, clearly marked. - No emojis or icons anywhere in the code.
Vanilla baseline:
import { createChart } from 'openalgo-charts';
const chart = createChart(document.getElementById('chart')!);
const series = chart.addSeries('candlestick');
series.setData(bars); // bars: { time, open, high, low, close, volume }[]
chart.fitContent();Add a volume pane only if asked:
const volume = chart.addSeries('histogram', { paneIndex: 1 });
volume.setData(bars.map(b => ({ time: b.time, value: b.volume ?? 0 })));
chart.setPaneWeight(1, 0.3);If the user wants a recent-bar default, pass
navigation: { defaultVisibleBars: 120 } when creating the chart and omit the explicit
fitContent() call above. Initial data uses the preference; later default resets use
resetScale(). A hidden tab defers its initial fit until measurement. See
host-integration.
Show full SKILL.md (146 more words)Show less
Step 4 - connect data
If the project already has a bar source, use it. If the user names OpenAlgo, wire the real feed rather than a fetch by hand - see feeds-and-live:
import { OpenAlgoLiveDataFeed } from 'openalgo-charts';
const feed = new OpenAlgoLiveDataFeed({ baseUrl, apiKey, wsUrl });
const to = Math.floor(Date.now() / 1000);
const request = { symbol, exchange, interval: '5m', from: to - 7 * 86400, to };
const bars = await feed.getBars(request);
series.setData(bars);
const unsubscribe = feed.subscribeBars(request, b => series.update(b), {
seedFrom: bars[bars.length - 1],
});
// On symbol replacement or unmount: unsubscribe(), then tear down owned resources.from and to are mandatory for OpenAlgo REST history. Save unsubscribe in the host's
cleanup scope and check liveness after the history await before subscribing. For repeated
symbol loads, replay or reconnect recovery, follow the request guards in
host-integration.
Never read an API key from client-side source you commit. Take it from the project's existing env mechanism.
Step 5 - verify it actually renders
Do not report success on a file write alone. Build or typecheck, and if the project has a dev server or a browser harness available, load the page and confirm the canvas has content.
npx tsc --noEmit
npm run buildReport the file paths you created or edited, the tiers you added, and how you verified it renders.
© marketcalls, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .github/skills/openalgo-chart-setup of marketcalls/openalgo-charts.
Open the folder on GitHubat commit 8b4cffe
Compare with similar skills
Openalgo Chart Setup 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Openalgo Chart Setup this skillmarketcalls/openalgo-charts | 146 | — | ~1.4k | Automated safety check: Notes | Apache-2.0 | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Databuddydatabuddy-analytics/Databuddy | 1.2k | — | ~2.1k | Automated safety check: Pass | AGPL-3.0 | |
| Domscribepatchorbit/domscribe | 194 | — | ~3.3k | Automated safety check: Notes | MIT | |
| UI UX Pro Maxsundial-org/awesome-openclaw-skills | 663 | 2 repos | ~657 | Automated safety check: Pass | None |
Similar skills
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Databuddy
databuddy-analytics/Databuddy
Integrate Databuddy analytics using the SDK, REST API, or MCP.
Domscribe
patchorbit/domscribe
Work with Domscribe — the pixel-to-code bridge. An agent skill from patchorbit/domscribe.
UI UX Pro Max
sundial-org/awesome-openclaw-skills
UI/UX design intelligence and implementation guidance for building polished interfaces.
Databuddy
databuddy-analytics/Databuddy
Help external users integrate Databuddy into their own apps.
More from marketcalls/openalgo-charts
Openalgo Chart Debug
marketcalls/openalgo-charts
Diagnose an openalgo-charts problem - blank or invisible chart, bars in the wrong place, unknown series type or indicator errors, misaligned indicators, drawings that drift, a chart that will not…
Openalgo Chart Indicator
marketcalls/openalgo-charts
Add a built-in openalgo-charts indicator, restyle it, build a settings UI from its descriptor, or author a custom indicator with registerIndicator or the Tier-2 external-data contract.
Openalgo Chart Plugin
marketcalls/openalgo-charts
Extend openalgo-charts with a custom primitive, drawing tool, chart type, or indicator descriptor.
Openalgo Chart Terminal
marketcalls/openalgo-charts
Build a full trading terminal on openalgo-charts - symbol search, interval switcher, chart-type picker, indicator menu, drawing rail with clipboard, live OpenAlgo REST plus WebSocket data behind a…
Openalgo Charts
marketcalls/openalgo-charts
A skill your agent uses when building, configuring, extending or debugging openalgo-charts in a consumer app or the source repository, including chart navigation, drawing tools, indicators…
Related
Questions about Openalgo Chart Setup
What does Openalgo Chart Setup do?
Scaffold a working openalgo-charts chart in an existing project - detects the host (React, Next.js, Vue, vanilla bundler, or plain script tag), installs the right tiers, and writes a chart that…. Openalgo Chart Setup is an agent skill from marketcalls/openalgo-charts.js, Vue, vanilla bundler, or plain script tag), installs the right tiers, and writes a chart that renders real data.
When should I use Openalgo Chart Setup?
Openalgo Chart Setup fits situations like: the user asks to add a chart; set up openalgo-charts; get a first chart running.
How do I install Openalgo Chart Setup in Claude Code?
Run `npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a claude-code`. Or copy the skill folder (.github/skills/openalgo-chart-setup in marketcalls/openalgo-charts) into .claude/skills/openalgo-chart-setup in your project. Claude Code loads it when a task matches its description.
How do I install Openalgo Chart Setup in Codex?
Run `npx skills add marketcalls/openalgo-charts --skill openalgo-chart-setup -a codex`. Or copy the skill folder (.github/skills/openalgo-chart-setup in marketcalls/openalgo-charts) into .agents/skills/openalgo-chart-setup in your project. Codex loads it when a task matches its description.
Can I use Openalgo Chart Setup 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 marketcalls/openalgo-charts --skill openalgo-chart-setup -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/openalgo-chart-setup, .gemini/skills/openalgo-chart-setup, .github/skills/openalgo-chart-setup and .opencode/skills/openalgo-chart-setup in your project.
What does Openalgo Chart Setup need to run?
Going by SKILL.md and its folder, Openalgo Chart Setup needs the command-line tools its instructions call (npm, rg, node and npx). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash, Glob, Grep.
Does Openalgo Chart Setup access the network?
SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Openalgo Chart Setup 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 Openalgo Chart Setup use?
Openalgo Chart Setup is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Openalgo Chart Setup use?
About 1.4k tokens (SKILL.md is roughly 5.7k 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 Openalgo Chart Setup?
Skills that share tags, products or a category with Openalgo Chart Setup: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Design Style (Castor6/tactus, 376 stars), Databuddy (databuddy-analytics/Databuddy, 1.2k stars) and Domscribe (patchorbit/domscribe, 194 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Openalgo Chart Setup?
marketcalls (a GitHub user) maintains it in marketcalls/openalgo-charts, which has 146 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 1, 2026.
Source: marketcalls/openalgo-charts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.