auto-trader-design

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.