sales-forecast-design

Enforce design tokens, shell layout, and components across Sales Forecast frontend screens.

Updated Jun 24, 2025

Search Tags:#layout #components #tailwind #tokens #design-system #shadcn-ui #frontend-design

Ready to run

npx skills add https://github.com/Rus9136/sales_forecast --skill sales-forecast-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sales-forecast-design
Source: https://github.com/Rus9136/sales_forecast/tree/main/.claude/skills/sales-forecast-design
Command: npx skills add https://github.com/Rus9136/sales_forecast --skill sales-forecast-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This frontend design system standardizes tokens, layout, and components for the Sales Forecast corporate panel, ensuring visual consistency and faster delivery across pages and features.

Core Features & Use Cases

Design tokens and themes: OKLCH color tokens, light/dark themes, dense layouts, and a chained shell (sidebar, topbar, CmdK) to maintain a cohesive look.
UI primitives and patterns: Reusable shadcn/ui components, token-driven spacing, and pattern snippets so frontend code matches the handoff visuals.
Guided page craftsmanship: Clear conventions for pages, cards, tables, charts, and dialogs that keep the dashboard polished and brand-aligned.

Quick Start

Apply the design system to any new or edited frontend screen by consistently using the defined tokens, shell layout patterns, and primitives.

Frequently Asked Questions about sales-forecast-design

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

FAQPage Schema

How do I enforce a unified design system for a corporate dashboard frontend?▼

To enforce a unified design system for a corporate dashboard frontend, align all pages, cards, tables, and charts with defined tokens, shell layout patterns, and reusable UI primitives.

What are OKLCH color tokens and how do they work in frontend design?▼

OKLCH color tokens are design system variables that maintain cohesive light and dark themes across frontend screens. They ensure visual consistency by standardizing color values throughout the dashboard layout.

How do I build a sales forecast UI with Tailwind and shadcn-ui components?▼

Build a sales forecast UI with Tailwind and shadcn-ui by applying token-driven spacing and UI primitives to frontend pages. This ensures code matches handoff visuals while preventing hard-coded layout values.

Can I use existing shell classes and design patterns for dense dashboard layouts?▼

Yes, you can use existing shell classes and design patterns for dense dashboard layouts. A chained shell integrating sidebar, topbar, and CmdK maintains a cohesive look across light and dark themes.

Why does my corporate dashboard look inconsistent across light and dark themes?▼

Your corporate dashboard looks inconsistent across light and dark themes when hard-coded values bypass the design system. Enforcing OKLCH color tokens and guided page craftsmanship fixes visual misalignment.