Use when generating any output a human will read — interfaces, documentation, data visualizations, CLI output, tables, diagrams
From swiss-designnpx claudepluginhub zemptime/zemptime-marketplace --plugin swiss-designThis skill uses the workspace's default tool permissions.
grid.mdhierarchy.mdreduction.mdtypography.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
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.