メニュー
Machina design system quick reference. Use when discussing design tokens, surfaces, card backgrounds, depth, elevation, typography tokens, color tokens, DaisyUI theming, or applying visual styling to UI components.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Rails coding patterns derived from analysis of 37signals' Fizzy codebase. Use when writing Rails code in 37signals/Basecamp style or when asked to follow 37signals patterns. Covers controllers, models, views, Hotwire, testing, database, security, and team philosophy.
Start the local development server in a tmux session and open the homepage. Use when the user wants to start development, run the app locally, fire up the dev server, or invokes /bindev.
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
Use when viewing available handoff documents — lists active and archived handoffs with their status, date, topic, and branch
Use when starting a new session and wanting to continue from a previous handoff — reads the latest unrestored handoff document and restores session context
Use when capturing session state before switching context, ending a session, or manually preserving progress — creates a structured handoff document in docs/handoffs/ so a future session can resume seamlessly
| name | design-system |
| description | Machina design system quick reference. Use when discussing design tokens, surfaces, card backgrounds, depth, elevation, typography tokens, color tokens, DaisyUI theming, or applying visual styling to UI components. |
The shared visual language for Machina apps. Each app picks its own brand gem and theme name but inherits the surface, shape, typography, and spacing rules below.
btn-primary, bg-base-200, card, badge-successflex, gap-4, text-sm, p-6main.css — .f-display, .f-mono, .nav-itemmain.css — new patterns go here, then use the class!important in HTML, hardcoded hexDepth = surface lightness. NO shadows.
base-100 (#0F131A) — Page background (deepest void)base-200 (#171B21) — Cards, containersbase-300 (#1E2228) — Elevated elements, bordersneutral (#2C333B) — Highest elevation (popovers, nav)Depth = shadow. White cards on warm marble.
base-100 (#F5F0E8) — Page background (warm marble, NOT #FFF)base-200 (#FFFFFF) — Cards, elevated surfaces (WHITE)base-300 (#EFEBE0) — Warm dividers, bordersneutral (#E5DFD3) — Muted background areasKEY RULE: Cards are bg-base-200 (full opacity). In light mode this is
white on warm marble; in dark mode it's a slightly lighter surface. Never use
bg-base-200/40 — the opacity destroys the depth hierarchy.
rounded-box) — Containers, cardsrounded-full) — Interactive: buttons, inputs, badgesrounded) — Atomic elements.f-display) — headings, headlines.f-mono) — code, data, timestampsEach Machina app declares its own gem (accent color) and <app>-dark /
<app>-light DaisyUI theme names. Fill in the brand block in this app's
main.css and update this skill to reflect the gem chosen for APPNAME.
Firmitas (reliable), Utilitas (purposeful), Venustas (proportioned beauty), Symmetria (mathematical 4px grid spacing), Harmonia (family coherence), Techne (obsessive precision), Telos (serves the user's goal).