Skill

frontend-design

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.

npx claudepluginhub rivit-studio/gir --plugin gir-web

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Create distinctive, production-grade frontend interfaces avoiding generic "AI slop" aesthetics.

Supporting Assets

LICENSE.txt

SKILL.md

Similar Skills

angular-new-app

100.1k

Creates new Angular apps using Angular CLI with flags for routing, SSR, SCSS, prefixes, and AI config. Follows best practices for modern TypeScript/Angular development. Use when starting Angular projects.

angular-angular-1

ui-ux-pro-max

72.7k

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.

ui-ux-pro-max

context7-cli

53.8k

Executes ctx7 CLI to fetch up-to-date library documentation, manage AI coding skills (install/search/generate/remove/suggest), and configure Context7 MCP. Useful for current API refs, skill handling, or agent setup.

3 files

upstash-context7-1

Stats

Parent Repo Stars1

Parent Repo Forks0

Last CommitFeb 27, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

frontend-design

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.