skills.rest
Rus9136
Rus9136COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Rus9136/sales_forecast --skill sales-forecast-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mintuzmintuz
21

tailwind

Standardize Tailwind design systems with semantic tokens, CVA variants, and dark-mode theming.

Community
Intermediate
LeandelosantosLeandelosantos

mobile-design

Apply MUI v6 responsive breakpoints and touch targets to the Maestro Dashboard.

Community
Advanced
xvawlxvawl
1

ui-design-system

Establish scalable UI design systems with tokens and shadcn/ui for React/TypeScript projects.

Community
Advanced
shynlee04shynlee04

Frontend CSS

Enforce consistent CSS styling with Tailwind, BEM, and CSS Modules.

Community
Intermediate