skills.rest
srbhr
srbhrCOMMUNITY
Explore all skills by this author →
Website𝕏@srbhraiGitHub

design-principles

Apply Swiss International Style guidelines to UI component design and visual tokens.

28.1k|5.0k|Updated Apr 8, 2020
Search Tags:#typography#design#ui#tokens#design-system#color-palette
One-click install
npx skills add https://github.com/srbhr/Resume-Matcher --skill design-principles-srbhr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/srbhr/Resume-Matcher/tree/main/.claude/skills/design-principles
Command: npx skills add https://github.com/srbhr/Resume-Matcher --skill design-principles-srbhr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a concise design system reference to ensure a consistent Swiss International Style across Resume Matcher UI, reducing design debt and speeding up UI decisions.

Core Features & Use Cases

  • Establishes a shared design language for components, layouts, and tokens.
  • Guides color, typography, spacing, and component patterns to maintain consistency across the app.
  • Use Case: When starting a new UI module or updating existing styles, invoke this skill to align visuals with the Swiss design system.

Quick Start

Read the full design specs in the body of the skill and apply the tokens, colors, typography, and spacing rules to your component.

Frequently Asked Questions about design-principles

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

FAQPage Schema
How do I apply Swiss International Style to UI components?▼

Design tokens act as shared variables for color and spacing, mapping Swiss design constraints directly into UI component code to maintain visual consistency and reduce design debt.

What are design tokens for a minimal UI color palette?▼

Design tokens act as shared variables for color and spacing, mapping Swiss design constraints directly into UI component code to maintain visual consistency and reduce design debt.

How do I ensure accessible typography and spacing in a design system?▼

Adopt alternative grid-based modern minimalist design frameworks that provide pre-configured typography and spacing variables, yielding visually standardized UI layouts without custom token definitions.

When do I need a design system reference for UI updates?▼

Use this design system reference when starting a new UI module or updating existing styles to align your visual decisions with standardized Swiss International Style constraints.

Why use Swiss design principles to reduce design debt?▼

By codifying Swiss International Style guidelines, this approach provides a concise design system reference that speeds up UI decisions and reduces design debt across your interface.

Do I need a specific framework to use these UI design tokens?▼

No specific framework is required, but your environment must support custom style variables and component pattern configurations to effectively inject standardized design tokens into layouts.

Related Skills

Explore More Design & Creative Skills→
mdmagnuson-creatormdmagnuson-creator

auth-headless

Inject session data into Playwright browser contexts for UI-free authentication.

Community
Advanced
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

sleek

Standardize Roblox UI components with token-based design guidelines.

Community
Intermediate