skills.rest
CountJung
CountJungCOMMUNITY
Explore all skills by this author →
GitHub

ui-conventions

Enforceesces project-wide UI conventions for AstroMartianTrade's AstroMartianTrade components using AstroMartianTrade's AstroMartianTrade, AstroMartianTrade's AstroMartianTrade, and AstroMartianTrade's AstroMartianTrade.

Updated Apr 3, 2026
Search Tags:#theming#ui#layout#react#mui#design-system#stockchart
One-click install
npx skills add https://github.com/CountJung/KISAutoTrade --skill ui-conventions-countjung
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-conventions
Source: https://github.com/CountJung/KISAutoTrade/tree/main/.github/skills/ui-conventions
Command: npx skills add https://github.com/CountJung/KISAutoTrade --skill ui-conventions-countjung

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI conventions define project-wide rules for building consistent, accessible, and visually cohesive interfaces in AutoConditionTrade.

Core Features & Use Cases

  • Explicit component import paths for MUI icons, semantic color usage via theme, and typography that respects the project's font stack.
  • Layout and grid patterns, responsive behavior, and dark/light mode handling to ensure a predictable user experience.
  • Standardized StockChart usage and chart styling guidelines to maintain consistency across financial visuals.

Quick Start

Apply these UI conventions in all new or refactored UI components to align with the project’s styling and behavior.

Frequently Asked Questions about ui-conventions

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

FAQPage Schema
How do I enforce consistent UI conventions for React components using MUI?▼

You can enforce consistent UI conventions by applying project-wide rules for explicit component imports, semantic color usage via theme, and typography that respects a standardized font stack across all React components.

What is the best way to standardize StockChart styling in a financial trading application?▼

Standardizing StockChart styling involves applying predefined chart styling guidelines using lightweight-charts to maintain visual consistency and predictable behavior across all financial visuals in your application.

How do I handle dark and light mode theming for MUI v6 layouts?▼

Handling dark and light mode theming requires defining layout and grid patterns with responsive behavior that ensure a predictable user experience and accessible design across different theme modes.

Does this UI convention setup work for refactoring existing React component layouts?▼

Yes, these UI conventions are designed to be applied in all new or refactored UI components to align existing layouts with the project's styling, theming, and behavior standards.

Why do my MUI semantic colors look inconsistent across different application pages?▼

Semantic colors look inconsistent when components bypass the centralized theme; enforcing strict color usage via theme and explicit component import paths ensures visual cohesion across all pages.

Related Skills

Explore More Design & Creative Skills→
DevonSteeDevonStee
3

Color Tokens

Manage project-wide color tokens in Android colors.xml and themes.xml.

Community
Basic
monam2monam2

TradingView Charts

Build interactive TradingView lightweight charts with OHLC data binding and dark mode.

Community
Intermediate
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
joabgonzalezjoabgonzalez
7

mui

Standardize Material UI theming and component usage in React projects.

Community
Advanced