Claude Code Plugins

Community-maintained marketplace

Feedback

frontend-design

@krazyuniks/guitar-tone-shootout
0
0

Visual design for Guitar Tone Shootout - design tokens, colors, typography, component patterns, and aesthetic principles. Use for UI decisions and styling.

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 Visual design for Guitar Tone Shootout - design tokens, colors, typography, component patterns, and aesthetic principles. Use for UI decisions and styling.

Frontend Design

Activation: design, colors, theme, styling, tokens, UI, visual, dark mode, component style

Full Reference: Wiki: Design/Style-Guide

Design Direction

  • Aesthetic: Professional audio tool (Quad Cortex / DAW inspired)
  • Theme: Dark primary
  • Target: Musicians, audio engineers, content creators
  • Font: Inter (project standard)

Design Tokens

Colors

Token Value Use
--bg-base #0a0a0a Page background
--bg-surface #141414 Cards
--accent-primary #3b82f6 CTAs, links
--block-di #3b82f6 DI tracks (blue)
--block-amp #f59e0b Amps (amber)
--block-cab #22c55e Cabinets (green)
--block-effect #a855f7 Effects (purple)

Typography

Use Class
Body text-base font-normal (16px, 400)
Heading text-2xl font-semibold (24px, 600)
Caption text-xs font-medium (12px, 500)
Mono font-mono (JetBrains Mono)

Component Patterns

Card:

<div className="bg-[#141414] border border-[#333333] rounded-lg p-4
                hover:bg-[#1f1f1f] transition-colors">

Button:

<button className="px-4 py-2 bg-blue-600 text-white rounded-md font-medium
                   hover:bg-blue-700 disabled:opacity-50">

Block Card (signal chain blocks):

const blockStyles = {
  di:     { border: 'border-blue-500/50',   bg: 'bg-blue-500/10' },
  amp:    { border: 'border-amber-500/50',  bg: 'bg-amber-500/10' },
  cab:    { border: 'border-green-500/50',  bg: 'bg-green-500/10' },
  effect: { border: 'border-purple-500/50', bg: 'bg-purple-500/10' },
};

Aesthetic Principles

Do

  • Intentional choices - Bold maximalism and refined minimalism both work
  • Dominant colors with sharp accents - Not timid, evenly-distributed palettes
  • Atmosphere and depth - Gradients, textures, layered transparencies
  • Purposeful motion - High-impact moments over scattered micro-interactions

Avoid ("AI Slop")

  • Overused fonts without character
  • Cliched color schemes (purple gradients on white)
  • Predictable layouts and component patterns
  • Cookie-cutter design lacking context-specific character

Full Documentation