dankofly/design-principles
.claude/skills/design-principles/SKILL.md
Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles.
testing
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add dankofly/Swing_B2B design-principlesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 9:27 AM19.2s1 file scanned
SKILL.md
- name:
- design-principles
- description:
- Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles.
- user-invocable:
- true
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
Critical Rules (Always Apply)
Colors
| Name | Hex | Usage |
|------|-----|-------|
| Canvas | #F0F0E8 | Background |
| Ink | #000000 | Text, borders |
| Hyper Blue | #1D4ED8 | Primary actions |
| Signal Green | #15803D | Success |
| Alert Red | #DC2626 | Danger |
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-* - Always use rounded-none
❌ Gradients or blur shadows
❌ Custom colors outside palette
❌ Pastel or soft colors
❌ Decorative icons without function
Retro Terminal Elements
Use bracket syntax for UI chrome ONLY (dashboard, settings, empty states):
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
<span className="font-mono text-xs uppercase">[ LOADING... ]</span>
DO NOT use retro elements on resume components - keep resume areas professional.
Quick Checklist
- [ ] Using
rounded-noneon 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
Related Skills
dankofly/ui-ux-pro-max
tools
VerifiedTrustedCommunity
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
SKILL.mdUpdated Apr 17, 2026
dankofly/ui-review
development
VerifiedTrustedCommunity
Review UI changes against Swiss International Style design system. Checks colors, typography, borders, shadows, spacing, and anti-patterns. Use before committing any frontend UI changes.
SKILL.mdUpdated Apr 17, 2026
dankofly/tailwind-patterns
development
VerifiedTrustedCommunity
Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
SKILL.mdUpdated Apr 17, 2026
dankofly/receiving-code-review
development
VerifiedTrustedCommunity
Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation
SKILL.mdUpdated Apr 17, 2026