Claude Code Plugins

Community-maintained marketplace

Feedback

frontend-design

@vnzzzz/slim
0
0

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill for UI tasks that build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name frontend-design
description Create distinctive, production-grade frontend interfaces with high design quality. Use this skill for UI tasks that build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
license Complete terms in LICENSE.txt

Use this skill to design and implement bold, production-ready frontends when the request involves UI. Combine it with repository UI/UX requirements (docs/ui/requirements.md) and existing design systems.

Design Thinking

Before coding, lock in a clear, memorable direction:

  • Purpose: What problem does the interface solve? Who uses it?
  • Tone: Commit to a strong aesthetic (e.g., brutalist/raw, retro-futuristic, editorial/magazine, luxury/refined, playful/toy-like, industrial/utilitarian). Choose one and execute it precisely.
  • Constraints: Framework, performance, accessibility, build tooling.
  • Differentiation: What makes this unforgettable? Aim for a single standout idea.

Then build working code (HTML/CSS/JS, React, templ, etc.) that is:

  • Production-grade and functional
  • Visually striking with a cohesive point of view
  • Meticulous in spacing, motion, and detail

Frontend Aesthetics Guidelines

  • Typography: Pick characterful, non-default fonts; pair a distinctive display font with a refined body font. Avoid Arial/Inter/Roboto/system defaults.
  • Color & Theme: Define a strong palette with CSS variables; prefer decisive dominance + accents over timid mixes.
  • Motion: Use meaningful animations (page load, staggered reveals, purposeful hover states). Prefer CSS; keep motion aligned to the chosen aesthetic.
  • Spatial Composition: Consider asymmetry, overlap, generous negative space or intentional density. Avoid cookie-cutter layouts.
  • Background & Details: Build atmosphere with gradients, meshes, textures, layered transparencies, dramatic shadows, decorative borders, custom cursors, or grain overlays—matching the aesthetic.

Avoid generic AI-looking designs (purple-on-white defaults, predictable layouts, overused fonts, interchangeable components). Each UI should feel intentionally crafted for its context. Match implementation effort to the chosen style: maximalism demands rich effects; minimalism demands precise restraint.