design-principles

Enforce Swiss International Style design rules for resume UI components.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/dankofly/Swing_B2B --skill design-principles-dankofly
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/dankofly/Swing_B2B/tree/main/.claude/skills/design-principles
Command: npx skills add https://github.com/dankofly/Swing_B2B --skill design-principles-dankofly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a prescriptive Swiss International Style design system to remove visual inconsistency and subjective styling decisions when creating or updating resume-focused UI components.

Core Features & Use Cases

  • Palette Enforcement: Explicit color tokens for canvas, ink, primary actions, success, and danger to ensure cohesive visuals.
  • Typography Roles: Clear rules assigning serif for headers, sans for body text, and mono for labels and metadata with uppercase tracking.
  • Component Patterns: Concrete component examples for buttons, cards, labels, and status indicators emphasizing non-rounded corners and hard shadows.
  • Anti-Patterns & Constraints: Prohibitions on rounded corners, gradients, custom colors outside the palette, and decorative-only icons to maintain professionalism.
  • Use Case: Apply these rules when designing a new resume card, restyling profile pages, or updating component libraries to maintain brand-consistent resume presentations.

Quick Start

Apply the Swiss International Style rules to redesign the resume card component using the specified palette, typography, non-rounded corners, and hard shadow patterns.

Frequently Asked Questions about design-principles

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

FAQPage Schema
What is Swiss-style UI design and how does it apply to component styling?

Swiss-style UI design enforces strict typography, explicit color tokens, non-rounded corners, and hard shadows to create crisp, consistent components. It removes subjective styling decisions by prescribing exact palette, typography roles, and component patterns for professional layouts.

How do I enforce consistent typography and color tokens in my UI components?

To enforce consistent typography and color tokens, apply strict design rules: use serif for headers, sans for body text, and mono for uppercase metadata labels. Assign explicit color tokens for canvas, ink, primary actions, and status indicators to maintain visual cohesion.

Can I use gradients and rounded corners when building a resume UI component?

No, you should not use gradients and rounded corners. The Swiss International Style prohibits these elements, along with custom colors outside the palette and decorative-only icons, to maintain strict professionalism and consistent resume-focused UI.

What is the best way to standardize buttons and cards in a resume design system?

The best way to standardize buttons and cards is to apply Swiss-style component patterns. This involves using non-rounded corners, hard shadows, specific typography roles, and enforced color tokens to ensure every component adheres to the same strict visual rules.

When do I need a strict style guide for my resume UI?

You need a strict style guide for your resume UI when creating new resume cards, restyling profile pages, or updating component libraries. It ensures brand-consistent presentations by removing visual inconsistency through enforced design anti-patterns and constraints.