rivit-studio/frontend-design
plugins/gir-web/skills/frontend-design/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add rivit-studio/gir frontend-designInstall 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 12, 2026, 2:12 AM40.1s2 files scanned
SKILL.md
- name:
- frontend-design
- description:
- 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.
- license:
- Complete terms in LICENSE.txt
Create distinctive, production-grade frontend interfaces avoiding generic "AI slop" aesthetics.
Design Thinking
Before coding, commit to a BOLD direction:
- Purpose: What problem? Who uses it?
- Tone: Pick extreme — brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
- Constraints: Framework, performance, accessibility
- Differentiation: What's UNFORGETTABLE?
Key: Intentionality, not intensity. Execute with precision.
Guidelines
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.
Never
Generic AI aesthetics:
- Inter, Roboto, Arial, system fonts
- Purple gradients on white
- Predictable layouts
- Cookie-cutter patterns
Vary themes, fonts, aesthetics. Never converge on common choices (Space Grotesk).
Match Complexity to Vision
Maximalist = elaborate code, extensive animations
Minimalist = restraint, precision, subtle details
Elegance = executing vision well
Don't hold back. Show what's possible.
Related Skills
rivit-studio/routing-stub
testing
VerifiedTrustedCommunity
GIR orchestration core — routing rules, delegation tiers, cost discipline, Graphify integration, escalation trigger, and lazy-load instructions. Always loaded.
1SKILL.mdUpdated Apr 30, 2026
rivit-studio/parallel-agents
tools
VerifiedTrustedCommunity
Native parallel agent execution using Claude Code's built-in Agent tool with worktree isolation. On-demand skill — load when parallel work is needed.
1SKILL.mdUpdated Apr 30, 2026
rivit-studio/autonomous-mode
testing
VerifiedTrustedCommunity
Autonomous execution mode for GIR — unattended operation, cap fail-safe, checkpoint/resume protocol. On-demand skill loaded by /gir:run.
1SKILL.mdUpdated Apr 30, 2026
rivit-studio/web-tools
tools
VerifiedTrustedCommunity
MCP tool reference for web development — v0, Figma, Vercel. Apply when doing UI generation or deployment for frontend work.
1SKILL.mdUpdated Apr 12, 2026