Agent-Skills.md

Agent Skills: Frontend Design Skill

Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

UncategorizedID: 48Nauts-Operator/opencode-baseline/frontend-design

Repository

48Nauts-Operator/opencode-baseline
48Nauts-Operator
3

Install this agent skill to your local

pnpm dlx add-skill https://github.com/48Nauts-Operator/opencode-baseline/tree/HEAD/.opencode/skill/frontend-design

Skill Files

Browse the full folder contents for frontend-design.

Download Skill

Loading file tree…

.opencode/skill/frontend-design/SKILL.md

Skill Metadata

Name
frontend-design
Description
"Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics."

Frontend Design Skill

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

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
  • Constraints: Technical requirements (framework, performance, accessibility)
  • Differentiation: What makes this UNFORGETTABLE?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Frontend Aesthetics Guidelines

Typography

Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. Pair a distinctive display font with a refined body font.

Color & Theme

Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

Motion

Use animations for effects and micro-interactions. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.

Spatial Composition

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

Backgrounds & Visual Details

Create atmosphere and depth rather than defaulting to solid colors. Apply creative forms like:

  • Gradient meshes
  • Noise textures
  • Geometric patterns
  • Layered transparencies
  • Dramatic shadows
  • Decorative borders
  • Custom cursors
  • Grain overlays

NEVER Use

  • Overused font families (Inter, Roboto, Arial, system fonts)
  • Cliched color schemes (purple gradients on white backgrounds)
  • Predictable layouts and component patterns
  • Cookie-cutter design that lacks context-specific character

Implementation

Match implementation complexity to the aesthetic vision:

  • Maximalist designs: Need elaborate code with extensive animations and effects
  • Minimalist/refined designs: Need restraint, precision, and careful attention to spacing, typography, and subtle details

Remember: Claude is capable of extraordinary creative work. Don't hold back - show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Output

Implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail