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.
npx claudepluginhub rivit-studio/gir --plugin gir-webThis skill uses the workspace's default tool permissions.
Precise, crafted design for enterprise software, SaaS dashboards, admin interfaces. Jony Ive-level precision with intentional personality.
Enforces precise, minimal UI design for dashboards, admin panels, and SaaS apps by avoiding generic AI patterns and guiding product-specific choices.
Guides craft of dashboards, admin panels, SaaS apps, tools with intent-focused typography, navigation, data displays, and tokens to avoid generic patterns.
Generates distinctive production-grade frontend UIs for web components, pages, and apps with bold creative designs avoiding generic AI aesthetics.
Share bugs, ideas, or general feedback.
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.