skills.rest
JuelHossain
JuelHossainCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design

Standardize React and Vite UI components with Shadcn UI and Zustand.

Updated Jan 16, 2026
Search Tags:#react#design system#ui design#zustand#frontend components#cinematic terminal
One-click install
npx skills add https://github.com/JuelHossain/kalshi-trading-team --skill ui-design-juelhossain
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/JuelHossain/kalshi-trading-team/tree/main/ai-env/skills/ui-design
Command: npx skills add https://github.com/JuelHossain/kalshi-trading-team --skill ui-design-juelhossain

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes UI components and interaction patterns to deliver a cohesive, visually consistent cockpit experience, reducing design drift and rework.

Core Features & Use Cases

  • Design System: Provides a centralized set of components, tokens, and patterns (cards, buttons, inputs) aligned with the Cinematic Terminal aesthetic.
  • State-Driven UI: Integrates with Zustand-based stores to ensure consistent behavior across views (logs, PnL, dashboards).
  • Responsive Design: Ensures components adapt across mobile and desktop layouts with a grid-based system.
  • Accessibility & Theming: Enforces accessible contrast and theming tokens for dark theme.

Quick Start

Apply the ui-design system to the cockpit frontend by adopting the provided components, tokens, and patterns.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I maintain visual consistency across React frontend components in a complex dashboard?▼

Maintain visual consistency by applying a centralized UI design system with standardized styling tokens, consistent naming conventions, and accessible patterns to reduce design drift across React frontend components.

How does Zustand integrate with a React design system for state-driven UI?▼

Zustand integrates with a React design system by managing global state stores, ensuring consistent component behavior and state synchronization across frontend views like logs, dashboards, and PnL displays.

Does this UI design system support responsive layouts for mobile and desktop interfaces?▼

Yes, the UI design system supports responsive layouts by utilizing a grid-based system that ensures React frontend components adapt properly across both mobile and desktop screen sizes.

What's the best way to enforce accessibility and dark theme contrast in frontend components?▼

Enforce accessibility and dark theme contrast by adopting centralized theming tokens and standardized accessible practices, ensuring frontend components maintain proper visual standards across the interface.

Can I use Shadcn UI with Vite to build a cinematic terminal interface?▼

Yes, you can use Shadcn UI with Vite to build a cinematic terminal interface, as the design system specifically integrates these technologies to deliver a cohesive and responsive cockpit aesthetic.

Why does frontend design drift occur and how can standardized patterns prevent rework?▼

Frontend design drift occurs when components lack centralized standards, causing visual inconsistencies. Standardized patterns, tokens, and centralized components prevent rework by ensuring cohesive interaction models across the interface.

Related Skills

Explore More Design & Creative Skills→
LucasSantana-DevLucasSantana-Dev
17

frontend-react-vite

Develop and maintain React frontend apps with Vite, Tailwind CSS, and Zustand.

Community
Intermediate
GrazianoGuiducciGrazianoGuiducci
1

builder-sys

Build modular three-column UX/UI cockpits with card-based components.

Community
Advanced
NoobyGainsNoobyGains
78

ui-engineering

Guide frontend component architecture with layout, state, and accessibility decisions.

Community
Advanced
rakibulismrakibulism
2

design-token-architect

Design or audit design token systems with primitive, semantic, and component layers.

Community
Advanced