skills.rest
nikegeorgian-stack
nikegeorgian-stackCOMMUNITY
Explore all skills by this author →
GitHub

fst-design-system

Documents the as-built Tailwind v4 design system of the FiberCell Otgruzka web UI.

Updated May 5, 2026
Search Tags:#frontend#react#design system#component library#tailwind#dialog#ui tokens
One-click install
npx skills add https://github.com/nikegeorgian-stack/otgruzka-tovara --skill fst-design-system-nikegeorgian-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fst-design-system
Source: https://github.com/nikegeorgian-stack/otgruzka-tovara/tree/main/.cursor/skills/fst-design-system
Command: npx skills add https://github.com/nikegeorgian-stack/otgruzka-tovara --skill fst-design-system-nikegeorgian-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents UI drift in the FiberCell FST web app by forcing all frontend work to follow the existing design system extracted from real code, instead of inventing new palettes, fonts, or dialog patterns. ## Core Features & Use Cases - Design tokens reference: Documents Tailwind v4 @theme tokens in src/index.css — IBM Plex fonts, paper/ink/accent colors, radii, and shadows. - Component kit catalog: Maps canonical fc-* components (Button, Card, TabBar, AppDialog, timesheet grid) to their source files as implementation references. - Window chrome policy: Enforces backdrop, minimize, and taskbar rules via useWindowChrome, ModalMinimizeContext, and WorkspaceTaskbar. - Use Case: When adding a new dialog to the warehouse page, follow the documented AppDialog sizes, backdrop class, and safe-area rules instead of creating a custom modal. ## Quick Start Ask the assistant to build a new page or dialog for the FST app following the fst-design-system tokens and fc-* component patterns.

Frequently Asked Questions about fst-design-system

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

FAQPage Schema
How do I add a new dialog in a Tailwind v4 React app consistently?▼

Use the existing AppDialog.tsx shell with its md/lg/xl/preview sizes and the CHROME_BACKDROP_CLASS instead of a custom inset-0 overlay. Ephemeral confirm or alert dialogs close rather than minimize, per the useWindowChrome hook policy.

Where are Tailwind v4 design tokens defined without a config file?▼

In Tailwind v4 with @tailwindcss/vite, tokens live in the @theme block of src/index.css rather than a tailwind.config file. Colors, fonts, radii, and shadows declared there generate utilities like text-ink or bg-paper-dark.

Can I introduce a new color palette or font in this design system?▼

No. The documented policy treats the existing code as the source of truth and explicitly forbids full redesigns, font changes, or new palettes unless explicitly requested. Reuse the IBM Plex fonts and the paper/ink/accent token set.

Why should modal backdrops avoid inset-0 in this layout?▼

The app renders a persistent sidebar and taskbar, so an inset-0 backdrop would cover them incorrectly. The CHROME_BACKDROP_CLASS offsets the backdrop with lg:left-[var(--app-sidebar-w)] and lg:bottom-[3.25rem] to respect the chrome.

What are the limitations of an as-built design system approach?▼

It documents only what exists in code, so it cannot guide net-new visual directions or rebrands. Loading and empty states must be copied from neighboring screens since no dedicated patterns are defined.

Related Skills

Explore More Design & Creative Skills→
oobagioobagi

design

Generate design tokens and DESIGN.md for detected UI frameworks.

Community
Advanced
BartunekBartunek

vercel-cli

Deploy apps to Vercel using the vercel CLI with token-based authentication.

Community
Intermediate
Impertio-StudioImpertio-Studio

shadcn-syntax-sidebar

Build shadcn ui sidebar navigation shells with correct composition and cookie persistence.

Official
Intermediate
johnnystefanjohnnystefan

imcomplete-library-class

Detect missing methods in read-only TypeScript library classes.

Community
Intermediate