fidara-designlisted

The Fidara design system — how to build consistent, modern, responsive UI in Rails 8 + Hotwire + Tailwind CSS v4 (Fidara / fmworkflows brands). Load this WHENEVER building or reviewing UI: components (buttons, cards, forms, nav, modals, tables, badges, alerts), page layouts, tokens/theming, dark mode, responsiveness, or brand/logo usage. It defines the token architecture (brand primitives → semantic roles → fluid scale), the layout primitives you compose instead of ad-hoc flex/grid, the component catalog with variant/size/state, the Stimulus interaction patterns, and the responsive doctrine. Consistency is enforced here, not left to taste.
fmanimashaun/claude-skills · ★ 0 · Web & Frontend · score 66

Install: claude install-skill fmanimashaun/claude-skills

# Fidara Design System Build every UI by **composing tokens, layout primitives, and catalog components** — never ad-hoc CSS. This system makes UI consistent across projects without a designer or Figma. It is **prescriptive**: where it gives a token, a recipe, or a variant set, use exactly that. Inconsistency in components degrades the whole product, so drift is a defect. **Stack:** Rails 8 · Hotwire (Turbo + Stimulus) · **Tailwind CSS v4** (CSS-first `@theme`, no `tailwind.config.js`, no npm) · Lucide icons. Two brands (**fidara**, **fmworkflows**) are ONE system — identical values, only the token prefix differs; code uses the **`fm-*`** prefix. See [references/brand.md](references/brand.md). ## The five layers (read in order) 1. **Foundations / tokens** — [references/foundations-tokens.md](references/foundations-tokens.md). One `@theme` block: **brand primitives** (`fm-*` palette, fonts) → **semantic roles** (`--primary`, `--background`, `--foreground`, `--muted`, `--border`, `--ring`, … each with a `-foreground` pair) → **fluid scale** (Utopia `clamp()` type + space) + measure, radius, shadow, motion. **Components consume ONLY semantic roles**, never raw `fm-*` or stock `blue-700`/`gray-*`. Dark mode = re-point roles under `.dark`. 2. **Layout** — [references/layout-primitives.md](references/layout-primitives.md). Compose the primitives (Stack, Cluster, Center, Box, Grid, Sidebar, Switcher, Cover, Frame, Reel, Imposter, Icon, Container). Layout resp