メニュー
Use when generating any output a human will read — interfaces, documentation, data visualizations, CLI output, tables, diagrams
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when writing Rails controllers or implementing state changes - enforces resource extraction, thin controllers delegating to models, params.expect, and controller concerns for scoping
Use when designing database schema, writing migrations, or making data storage decisions - enforces UUIDs, account_id multi-tenancy, no foreign keys, and proper index patterns
Use when writing Hotwire (Turbo/Stimulus) code in Rails - enforces dom_id helpers, morph updates, focused Stimulus controllers, and JavaScript private methods
Use when writing background jobs or async operations - enforces thin job wrappers (3-5 lines) that delegate to models using _later/_now naming pattern
Use when writing Rails models - enforces state-as-records not booleans, concerns as adjectives namespaced under model, and concern extraction triggers
Use when naming classes, methods, routes in vanilla Rails codebases - enforces concern adjectives (-able/-ible only), no bangs for state, resource naming cascade, and commit message format
| name | swiss-design |
| description | Use when generating any output a human will read — interfaces, documentation, data visualizations, CLI output, tables, diagrams |
Core principle: Clarity through reduction. Every element must earn its place. Remove until removing more would harm understanding.
| Principle | Rule | Test |
|---|---|---|
| Reduction | If it doesn't serve comprehension, it's noise. Remove it. | Can I remove this without losing meaning? |
| Grid | Mathematical structure creates visual order. Alignment implies relationship. | Does alignment create rhythm and relationships? |
| Hierarchy | Control attention through contrast in size, weight, position. Three levels max. | Is there a clear reading order at a glance? |
| Typography | Type carries content and creates structure. One typeface, two weights. | Is type doing the structural work, not color or decoration? |
Deep reference for each: [reduction.md], [grid.md], [hierarchy.md], [typography.md]
Before finalizing, run each test above. If any answer is "no," revise. This is not optional.
Verification — the grayscale test: If the design doesn't work in grayscale, the structure is weak. Color supplements hierarchy; it never creates it.
Verification — the squint test: Blur your vision. What do you see first? That's your primary element. If nothing stands out, hierarchy is broken.
| Failure | Symptom | Fix |
|---|---|---|
| Decoration creep | Gradients, shadows, icons that don't encode meaning | Remove. Does comprehension survive? |
| Hierarchy collapse | Everything bold, 12 font sizes, rainbow colors | Three levels max. One lever per level. |
| Grid abandonment | "Just this once" alignment exceptions | Fix the system, don't patch around it |
| Color as crutch | Hierarchy exists only in color, not structure | Make it work in grayscale first |
| Filling empty space | Adding elements because "it looks empty" | Whitespace is breathing room, not a problem |
All of these mean: you're decorating, not designing. Strip back.
