skills.rest
narr07
narr07COMMUNITY
Explore all skills by this author →
WebsiteGitHub

swiss-design-unocss

Implements Swiss International Typographic Style layouts using UnoCSS configuration, shortcuts, and grid classes.

Updated Aug 10, 2026
Search Tags:#typography#design system#vue#nuxt#unocss#grid layout#swiss design
One-click install
npx skills add https://github.com/narr07/permadi --skill swiss-design-unocss-narr07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiss-design-unocss
Source: https://github.com/narr07/permadi/tree/main/.agents/skills/swiss-design-unocss
Command: npx skills add https://github.com/narr07/permadi --skill swiss-design-unocss-narr07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, mathematically rigorous UI layouts with UnoCSS often results in inconsistent spacing, decorative clutter, and AI-generated design slop like gradient text and heavy shadows. This Skill provides a complete design system translating Swiss International Typographic Style principles into production-ready UnoCSS patterns. ## Core Features & Use Cases - UnoCSS Configuration: A complete uno.config.ts with theme colors, typography preset rules, transformers, and reusable shortcuts for grids, cards, buttons, and typographic hierarchy. - Component Recipes: Ready-to-use HTML patterns including an asymmetric 12-column hero with spec rail and a numbered index card triad, all built on hairline borders and opacity-based text hierarchy. - Anti-Slop Enforcement: A strict prohibition table mapping common AI design anti-patterns (purple gradients, blur orbs, nested cards) to correct Swiss alternatives, plus grayscale and blur verification utilities. - Use Case: When refactoring a Nuxt or Vue landing page that suffers from inconsistent styling, apply the provided shortcuts like swiss-grid-12, swiss-h1, and swiss-card-4 to enforce an 8px baseline grid, 60ch reading measure, and single-accent color discipline. ## Quick Start Ask the AI to restyle your Vue or Nuxt component using the Swiss Design UnoCSS shortcuts and configuration from this skill.

Frequently Asked Questions about swiss-design-unocss

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Swiss design with UnoCSS?▼

Copy the provided uno.config.ts with presetWind3, presetTypography, and presetIcons, then apply the swiss- shortcuts like swiss-grid-12, swiss-h1, and swiss-card-4 to your components. These enforce the 12-column grid, 8px spacing, and opacity-based hierarchy automatically.

How to build a 12-column grid layout in UnoCSS?▼

Use the swiss-grid-12 shortcut which expands to grid grid-cols-1 sm:grid-cols-6 lg:grid-cols-12 with responsive gaps. Combine it with column span shortcuts like swiss-lead-8 and swiss-rail-4 for asymmetric modular layouts.

Does this UnoCSS config support dark mode?▼

Yes, the configuration uses presetWind3 with class-based dark mode. Every shortcut includes paired dark variants, such as dark:bg-[#002b27] surfaces and dark:border-[#134e43] hairlines, using a deep pine color palette.

Can I use these Swiss design shortcuts in Nuxt or Vue?▼

Yes, the shortcuts and configuration work in any project using UnoCSS, including Nuxt via @unocss/nuxt and Vue via the Vite plugin. The HTML recipes use standard utility classes compatible with both frameworks.

What CSS classes should I avoid in Swiss style design?▼

Avoid gradient text, heavy drop-shadows like shadow-2xl, blurred color orbs, over-rounded corners like rounded-3xl, centered long paragraphs, and bouncy animations. Replace them with hairline borders, flush-left text, sharp corners, and restrained active:scale-[0.98] transitions.

How do I verify my layout follows Swiss design principles?▼

Apply filter grayscale to the root container to check if hierarchy survives without color, and filter blur-sm for the squint test to confirm the primary headline dominates. Both utilities are built into UnoCSS and require no extra plugins.

Related Skills

Explore More Design & Creative Skills→
skaile-aiskaile-ai

prog-expert-uno

Configure UnoCSS presets, theming, and module integration in Nuxt projects.

Official
Advanced
7Lemaitre77Lemaitre7

astro

Create .astro components and configure islands for content-driven websites.

Community
Intermediate
mahou-labsmahou-labs
1

optimize

Identifies bottlenecks in web interfaces and implements targeted optimizations for measurable improvements.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate