How do I install the Srbhr Resume Matcher Design Principles skill?

Run npx skillmds@latest add tomevault-io/srbhr-resume-matcher-design-principles in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Srbhr Resume Matcher Design Principles skill do?

Swiss International Style Design It is listed under Coding & Dev Tools on SkillMD.

Is Srbhr Resume Matcher Design Principles safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Srbhr Resume Matcher Design Principles?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Srbhr Resume Matcher Design Principles free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Srbhr Resume Matcher Design Principles?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Srbhr Resume Matcher Design Principles by tomevault-io

Name: Srbhr Resume Matcher Design Principles
Author: tomevault-io

File contents

Swiss International Style Design

Invoke when: Creating new components, modifying styles, or building new pages. Skip when: Backend work, API changes, logic-only changes.

Before Designing

Read the full design specs in docs/agent/design/:

style-guide.md - Core rules, colors, typography, components
design-system.md - Extended tokens, spacing, shadows
swiss-design-system-prompt.md - AI prompt for Swiss UI

Colors

Name	Hex	Usage
Canvas	`#F0F0E8`	Background
Ink	`#000000`	Text, borders
Hyper Blue	`#1D4ED8`	Primary actions
Signal Green	`#15803D`	Success
Alert Orange	`#F97316`	Warning
Alert Red	`#DC2626`	Danger
Steel Grey	`#4B5563`	Secondary text

Typography

font-serif  → Headers
font-mono   → Labels, metadata (uppercase, tracking-wider)
font-sans   → Body text

Component Patterns

// Button: Square corners, hard shadow, press effect
<button className="rounded-none border-2 border-black shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

// Card: Hard shadow, no rounded corners
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">

// Label: Mono, uppercase
<label className="font-mono text-sm uppercase tracking-wider">

Status Indicators

<div className="w-3 h-3 bg-green-700" />  // Ready
<div className="w-3 h-3 bg-amber-500" />  // Warning
<div className="w-3 h-3 bg-red-600" />    // Error
<div className="w-3 h-3 bg-blue-700" />   // Active

Anti-Patterns (NEVER)

rounded-* (except rounded-none)
Gradients or blur shadows
Custom colors outside palette
Pastel or soft colors
Decorative icons without function

Retro Terminal Elements

For dashboard/settings/empty states ONLY:

<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>

DO NOT use retro elements on resume components.

Checklist

rounded-none on all components
Hard shadows (shadow-[Xpx_Xpx_0px_0px_#000000])
Correct typography (serif headers, mono labels, sans body)
Colors from palette only
No gradients or blur effects

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: srbhr-resume-matcher-design-principlesdescription: Swiss International Style Design---# Swiss International Style Design> **Invoke when:** Creating new components, modifying styles, or building new pages.> **Skip when:** Backend work, API changes, logic-only changes.## Before DesigningRead the full design specs in `docs/agent/design/`:1. **[style-guide.md](docs/agent/design/style-guide.md)** - Core rules, colors, typography, components2. **[design-system.md](docs/agent/design/design-system.md)** - Extended tokens, spacing, shadows3. **[swiss-design-system-prompt.md](docs/agent/design/swiss-design-system-prompt.md)** - AI prompt for Swiss UI## Colors| Name | Hex | Usage ||------|-----|-------|| Canvas | `#F0F0E8` | Background || Ink | `#000000` | Text, borders || Hyper Blue | `#1D4ED8` | Primary actions || Signal Green | `#15803D` | Success || Alert Orange | `#F97316` | Warning || Alert Red | `#DC2626` | Danger || Steel Grey | `#4B5563` | Secondary text |## Typography```font-serif → Headersfont-mono → Labels, metadata (uppercase, tracking-wider)font-sans → Body text```## Component Patterns```tsx// Button: Square corners, hard shadow, press effect<button className="rounded-none border-2 border-black shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">// Card: Hard shadow, no rounded corners<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">// Label: Mono, uppercase<label className="font-mono text-sm uppercase tracking-wider">```## Status Indicators```tsx<div className="w-3 h-3 bg-green-700" /> // Ready<div className="w-3 h-3 bg-amber-500" /> // Warning<div className="w-3 h-3 bg-red-600" /> // Error<div className="w-3 h-3 bg-blue-700" /> // Active```## Anti-Patterns (NEVER)- `rounded-*` (except `rounded-none`)- Gradients or blur shadows- Custom colors outside palette- Pastel or soft colors- Decorative icons without function## Retro Terminal ElementsFor dashboard/settings/empty states ONLY:```tsx<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>```**DO NOT use retro elements on resume components.**## Checklist- [ ] `rounded-none` on all components- [ ] Hard shadows (`shadow-[Xpx_Xpx_0px_0px_#000000]`)- [ ] Correct typography (serif headers, mono labels, sans body)- [ ] Colors from palette only- [ ] No gradients or blur effects---> Converted and distributed by [TomeVault](https://tomevault.io/claim/srbhr) — claim your Tome and manage your conversions.

Frequently asked questions

Srbhr Resume Matcher Design Principles