Skip to content
TrustedSkillsbeta
Back to all skills

Design Principles

Listed
srbhr·vlatest·frontend·Apache-2.0

Helps with design, principles as part of agent workflows workflows.

Repository

Install on your platform

Showing Claude Code. One command installs this skill into any of the agents below.

Installs under a different name. Its SKILL.md names it resume-matcher, not the name it is listed under, so the command below uses that name.
  1. 1

    Run this in your project

    terminal
    $ npx skills add srbhr/resume-matcher --skill resume-matcher -a claude-code

  2. Uses the open-source skills CLI and needs Node.js. Add -g to install it for your user instead of this project.

What we know about this skill

Publisher

srbhr

Taken from the source listing. We haven't verified who controls this account.

Install target

Live repository

Not pinned. Installing fetches whatever the repository holds at the time you run the command.

Nobody has reviewed this code. TrustedSkills indexes and links skills; it does not audit, run or scan them. A skill runs with whatever access you give your agent — read the source before you install it.

Automated safety checks

scanned

We could not read this skill's source, so none of the checks below were run.

Not scanned. no SKILL.md in the repository Source recorded as srbhr/resume-matcher.
This is a static scan, not a review. It reads the skill's files; it does not run them, and it cannot tell you whether the skill is any good or whether the code does what its description says. A skill runs with whatever access you give your agent.
What each check looks for →

About this skill

What it does

This skill provides guidance and resources for adhering to a strict design system, specifically the Swiss International Style, within agent workflows. It focuses on ensuring visual consistency by providing rules for colors, typography, component patterns, and explicitly outlining anti-patterns to avoid. The goal is to create clean, functional user interfaces with a distinct aesthetic.

When to use it

  • Creating new UI components.
  • Modifying existing styles or page designs.
  • Building entirely new pages that need to adhere to the design system.
  • When you want to ensure your work aligns with established visual guidelines and best practices.

Key capabilities

  • Color Palette: Defines specific hex codes for colors like Canvas, Ink, Hyper Blue, Signal Green, Alert Orange, Alert Red, and Steel Grey, dictating their usage.
  • Typography Rules: Specifies font choices: serif for headers, mono for labels/metadata, and sans-serif for body text.
  • Component Patterns: Provides code examples (using HTML and CSS) for buttons, cards, and labels demonstrating key styling principles.
  • Status Indicators: Defines visual representations for Ready, Warning, Error, and Active states using colored squares.
  • Anti-Pattern Restrictions: Lists elements to avoid, such as rounded corners, gradients, custom colors outside the palette, and decorative icons.

Example prompts

  • "Create a button component following Swiss design principles."
  • "What is the correct hex code for the 'Success' color?"
  • "Show me an example of how to style a label using the defined typography rules."

Tips & gotchas

  • Read the Documentation: Before starting any design work, consult the full design specs located in docs/agent/design/ including style-guide.md, design-system.md, and swiss-design-system-prompt.md.
  • Strict Adherence: The skill emphasizes strict adherence to the defined rules; deviations are discouraged.
  • Retro Elements Limited: Retro terminal elements should only be used in specific contexts like dashboards, settings pages, or empty states – not on resume components.