auto-trader-design

Use this skill to generate well-branded interfaces and assets for Auto Trader (multi-market AI-assisted trading workspace for KR / US / crypto), either for production work or throwaway prototypes, mocks, and screenshots. Contains essential design guidelines, color + type tokens, component specs, page patterns, and a migration plan from older Bootstrap-y pages to the newer warm-neutral fintech style.

Jump to install

Repository: mgh3326/auto_trader
Last source activity: April 20, 2026 at 19:51
Detected SKILL.md language: English
Stars: 5
Forks: 1

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/mgh3326/auto_trader --skill auto-trader-design

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

16 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

name	auto-trader-design
description	Use this skill to generate well-branded interfaces and assets for Auto Trader (multi-market AI-assisted trading workspace for KR / US / crypto), either for production work or throwaway prototypes, mocks, and screenshots. Contains essential design guidelines, color + type tokens, component specs, page patterns, and a migration plan from older Bootstrap-y pages to the newer warm-neutral fintech style.
user-invocable	true

Read the README.md file within this skill, and explore the other available files (colors_and_type.css, preview/*.html).

For visual artifacts (slides, mocks, throwaway prototypes): copy colors_and_type.css into the artifact and build static HTML that follows the patterns documented in the README — shell + dark header band + warm-neutral panels.
For production code changes in the mgh3326/auto_trader repo: apply the README's Migration plan section page-by-page. Prefer replacing per-page :root blocks with a shared import of colors_and_type.css.

Key touchstones:

Target-direction templates: screener_dashboard.html, portfolio_dashboard.html, pending_orders_dashboard.html.
Legacy pages to migrate: login.html, register.html, admin_users.html, nav.html, base.html, error.html.
KR gain/loss convention: 상승 = red (#9A1C1C), 하락 = blue (#0F4C9C).
Icons: Bootstrap Icons 1.11.3 via CDN. No emoji.
Copy is operator-first, bilingual (Korean for chrome, English for technical/API terms).

If the user invokes this skill without guidance, ask what they want to build (new dashboard? migrate a legacy page? an isolated component?), ask a few follow-up questions about market + surface + density needs, and act as an expert designer who outputs HTML artifacts or production CSS, depending on the need.

auto-trader-design

Source facts

Install options

Review the source files