positive-theme-design

Provide design tokens for color, typography, spacing, and components for stock briefing UIs.

Updated Dec 12, 2025
Ready to run
npx skills add https://github.com/Siyeolryu/ica-SYR- --skill positive-theme-design
๐Ÿ’ฌ Prompt for ChatGPT / Claude Chatโ–ผ
Please help me install this Agent Skill.
Skill: positive-theme-design
Source: https://github.com/Siyeolryu/ica-SYR-/tree/main/.claude/skills/positive-theme-design
Command: npx skills add https://github.com/Siyeolryu/ica-SYR- --skill positive-theme-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

๋‹น์‹ ์ด ์ž ๋“  ์‚ฌ์ด ํ”„๋กœ์ ํŠธ์˜ ์ฃผ๊ฐ€ ๋ธŒ๋ฆฌํ•‘ UI์— ์ผ๊ด€์„ฑ๊ณผ ๊ธ์ •์  ๊ฐ์„ฑ์„ ๋ถ€์—ฌํ•˜์ง€ ๋ชปํ•ด ์ƒ๊ธฐ๋Š” ํ˜ผ๋ž€๊ณผ ๊ฐœ๋ฐœ ์†๋„ ์ €ํ•˜๋ฅผ ํ•ด์†Œํ•˜๊ธฐ ์œ„ํ•œ, ์‹ ๋ขฐ๊ฐ๊ณผ ํ™œ๋ ฅ์„ ๋‹ด์€ ๋””์ž์ธ ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค.

Core Features & Use Cases

  • ๋””์ž์ธ ์ฒ ํ•™: ์‹ ๋ขฐ, ํฌ๋ง, ํ™œ๋ ฅ, ์นœ๊ทผํ•จ์„ ํ•ต์‹ฌ ๊ฐ€์น˜๋กœ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค.
  • ์ปฌ๋Ÿฌ ์‹œ์Šคํ…œ: ์ฃผ ์ƒ‰์ƒ(์Šค์นด์ด ๋ธ”๋ฃจ), ๋ณด์กฐ ์ƒ‰์ƒ(๊ณจ๋“  ์„ ๋ผ์ด์ฆˆ), ์•…์„ผํŠธ(๋ฏผํŠธ) ๋ฐ ๋‹คํฌ๋ชจ๋“œ ์ง€์›์œผ๋กœ ๋‹ค์–‘ํ•œ ํ…Œ๋งˆ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ์—ฌ๋ฐฑ, ์ปดํฌ๋„ŒํŠธ ๊ฐ€์ด๋“œ: ๋Œ€์‹œ๋ณด๋“œ, ์ฃผ๊ฐ€ ์นด๋“œ, ๋ธŒ๋ฆฌํ•‘ ํ™”๋ฉด ๋“ฑ์—์„œ ์ผ๊ด€๋œ UI๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
  • ์ ‘๊ทผ์„ฑ ๋ฐ ๋ฐ˜์‘ํ˜• ์„ค๊ณ„: ์ƒ‰ ๋Œ€๋น„, ํ‚ค๋ณด๋“œ ํƒ์ƒ‰, ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ํ˜ธํ™˜์„ฑ์„ ๊ณ ๋ คํ•ฉ๋‹ˆ๋‹ค.

Quick Start

๋””์ž์ธ ์‹œ์Šคํ…œ์˜ ์ƒ‰์ƒ ํ† ํฐ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ๊ฐ„๊ฒฉ, ์ปดํฌ๋„ŒํŠธ ํŒจํ„ด์„ ์ฃผ๊ฐ€ ๋ธŒ๋ฆฌํ•‘ UI์— ์ ์šฉํ•˜์—ฌ ์ผ๊ด€๋˜๊ณ  ์ ‘๊ทผ์„ฑ ๋†’์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ตฌ์ถ•ํ•œ๋‹ค.

Frequently Asked Questions about positive-theme-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a consistent UI design system for a stock briefing dashboard?โ–ผ

A consistent UI design system for stock briefing dashboards requires predefined tokens for color, typography, spacing, and components. This system provides scalable design tokens and accessibility guidelines consumable by design tools and implementable in code.

What color palette works best for financial dashboards that need dark mode support?โ–ผ

Financial dashboards benefit from a palette using sky blue as primary, golden sunrise as secondary, and mint as an accent. This system provides comprehensive color tokens supporting light and dark modes to ensure visual consistency across multiple screen sizes.

Can I use these design tokens for stock cards and briefing visuals in both light and dark modes?โ–ผ

Yes, you can use these design tokens for stock cards and briefing visuals across both light and dark modes. The system is specifically applicable to dashboards, stock cards, charts, and briefing visuals, providing tokens that adapt seamlessly across multiple screen sizes.

Does this UI design system include accessibility guidelines for screen readers and keyboard navigation?โ–ผ

Yes, this UI design system includes accessibility guidelines for screen readers and keyboard navigation. It explicitly accounts for color contrast, keyboard exploration, and screen reader compatibility to ensure accessible user experiences across all briefing components.

How do I apply typography and spacing guidelines to financial UI components?โ–ผ

To apply typography and spacing guidelines to financial UI components, you implement the system's predefined tokens into your design tools and codebase. It provides specific typography, spacing, and component patterns to maintain visual consistency across dashboards and briefing screens.