Two Content Claude Code skills, side by side. Pick the right skill for your workflow with a side-by-side look at metadata, sample code, and install commands.
| Name | design-stylecards | swiss-modern-website-design |
|---|---|---|
| Description | Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type scales as copy-paste values with Use-When and Avoid rules. Use when the user asks for polished… | Design and implement Swiss modern websites and product web apps using International Typographic Style: strict grids, typography-led hierarchy, asymmetrical composition, disciplined whitespace, restrained color,… |
| Category | Content | Content |
| Sub-category | content-misc | editorial |
| Tags | lang:python | — |
| Author | OrchestKit | curiositech |
| License | MIT | — |
| Install | /add-skill design-stylecards | /add-skill swiss-modern-website-design |
/ork:design-stylecards list # Catalog index
/ork:design-stylecards elevation/md # Show one recipe
/ork:design-stylecards apply glass/dark to src/components/Panel.tsx bash scripts/audit_frontend_for_swiss.sh /path/to/project
```
2. Read `references/swiss-modern-principles.md`.
3. Read `references/frontend-implementation.md` if the user wants code changes.
4. Read `references/component-patterns.md` for page-section decisions.
5. Start from a template in `templates/` instead of composing from scratch.
### For demanding web-app work
1. Pair this skill with the existing app's product workflow instead of treating the work as a poster exercise.
2. Capture or…design-stylecards — Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type scales as copy-paste values with Use-When and Avoid rules. Use when the user asks for polished…
swiss-modern-website-design — Design and implement Swiss modern websites and product web apps using International Typographic Style: strict grids, typography-led hierarchy, asymmetrical composition, disciplined whitespace, restrained color,…
Both are free to install. If you're unsure, install both — Claude Code skills are isolated by filename and only collide if their trigger phrases overlap (rare). The richest signal is the SKILL.md body itself — open both skill pages and read the first paragraph of each.
See all Claude Code skill comparisons · Browse all Content skills · Top 100
SKILL.md files, not affiliated with, endorsed by, or sponsored by Anthropic.