القائمة
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.
