Stats
Actions
Tags
From gir-web
Enforce a precise, minimal design system inspired by Linear, Notion, and Stripe. Use this skill when building dashboards, admin interfaces, or any UI that needs Jony Ive-level precision - clean, modern, minimalist with taste. Every pixel matters.
How this skill is triggered — by the user, by Claude, or both
Slash command
/gir-web:design-principlesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Precise, crafted design for enterprise software, SaaS dashboards, admin interfaces. Jony Ive-level precision with intentional personality.
Precise, crafted design for enterprise software, SaaS dashboards, admin interfaces. Jony Ive-level precision with intentional personality.
Before code, commit to a direction. Don't default.
Precision & Density — Tight, monochrome, info-forward (Linear, Raycast, terminal)
Warmth & Approachability — Generous spacing, soft shadows, friendly (Notion, Coda)
Sophistication & Trust — Cool tones, layered depth, gravitas (Stripe, Mercury)
Boldness & Clarity — High contrast, dramatic negative space (Vercel)
Utility & Function — Muted, functional density (GitHub)
Data & Analysis — Chart-optimized, numbers first (analytics, BI)
Pick one or blend two.
Light: Open, clean. Dark: Technical, focused, premium.
Accent: ONE meaningful color. Blue=trust, Green=growth, Orange=energy.
4px micro | 8px tight | 12px standard | 16px comfortable | 24px generous | 32px major
TLBR must match. Exception: content creates visual balance.
Stick to 4px grid. Sharp=technical, round=friendly. Pick system, commit.
Borders-only: Clean, technical (Linear, Raycast)
Subtle shadow: Soft lift (0 1px 3px rgba(0,0,0,0.08))
Layered shadows: Rich, premium (Stripe, Mercury)
Surface shifts: Background tints for hierarchy
Choose ONE, commit.
Vary internal structure for content. Keep surface treatment consistent (border, shadow, radius, padding, typography).
UI controls deserve container treatment. Never native form elements — build custom.
Custom select: display: inline-flex + white-space: nowrap
Monospace for numbers/IDs/codes/timestamps. tabular-nums for columns.
Phosphor Icons. Only if removal loses meaning. Give standalone icons background containers.
150ms micro | 200-250ms transitions | cubic-bezier(0.25, 1, 0.5, 1) | No bounce/spring
Four levels: foreground → secondary → muted → faint
Gray builds structure. Color only for status, action, error, success.
Screens need grounding — nav, location indicator, user context.
Consider same background for sidebar + content (border for separation).
Every interface: obsessed over 1px differences. Not stripped — crafted. Context-driven.
Different products want different things. Let context guide aesthetic.
Goal: Intricate minimalism with appropriate personality.
npx claudepluginhub rivit-studio/gir --plugin gir-webEnforces precise, minimal UI design for dashboards, admin panels, and SaaS apps by avoiding generic AI patterns and guiding product-specific choices.
Generates craft-first interface designs for dashboards, SaaS apps, admin panels, settings, tools, and data interfaces, focusing on layout hierarchy, design tokens, states, and visual direction. Not for marketing pages.
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"