Stats
Actions
Tags
From gir-web
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/gir-web:frontend-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create distinctive, production-grade frontend interfaces avoiding generic "AI slop" aesthetics.
Create distinctive, production-grade frontend interfaces avoiding generic "AI slop" aesthetics.
Before coding, commit to a BOLD direction:
Key: Intentionality, not intensity. Execute with precision.
Typography: Distinctive fonts, not generic (Arial, Inter, Roboto). Pair display + body fonts.
Color: Cohesive aesthetic, CSS variables. Dominant colors with sharp accents beat timid palettes.
Motion: High-impact moments — page load staggered reveals > scattered micro-interactions. Scroll-triggering, surprising hovers.
Composition: Unexpected layouts. Asymmetry, overlap, diagonal flow, grid-breaking. Generous negative space OR controlled density.
Backgrounds: Atmosphere and depth — gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
Generic AI aesthetics:
Vary themes, fonts, aesthetics. Never converge on common choices (Space Grotesk).
Maximalist = elaborate code, extensive animations
Minimalist = restraint, precision, subtle details
Elegance = executing vision well
Don't hold back. Show what's possible.
npx claudepluginhub rivit-studio/gir --plugin gir-webCreates distinctive, production-grade frontend interfaces with bold aesthetics and meticulous attention to typography, color, motion, and spatial composition.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.