fidara-design
Fidara 是基于 Rails 8 + Hotwire + Tailwind v4 的设计系统，提供一套可复用的 token、布局原语和组件目录，保证按钮、表单、卡片、模态等 UI 一致性。在做 UI 设计、评审或实现响应式/暗黑模式/品牌主题时就用它，组件有明确的变体和交互模式（配合 Stimulus）。特点是强制组合式架构：按给定 token 和布局原语来构建，而不是随意写 CSS，避免风格漂移。
▸ 展开 SKILL.md 英文原文
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.
帮我安装这个 skill：https://raw.githubusercontent.com/fmanimashaun/claude-skills/dev/skills/fidara-design/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/fmanimashaun/claude-skills/dev/skills/fidara-design/SKILL.md"# 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.m