vscode-sidebar-terminal: Skill for Claude Code

Frontend Design

Create interfaces with intentional aesthetics and professional execution. Avoid generic "template" looks.

Design Process

Before writing code, answer these questions:

1. Purpose — What problem does this interface solve? Who uses it?
2. Tone — What aesthetic direction? (brutalist, luxury, playful, editorial, retro-futuristic, etc.)
3. Constraints — Device targets, accessibility requirements, performance budget
4. Signature — What single element makes this memorable?

Commit to a direction. Timid design is worse than bold design with flaws.

Typography

Font Selection

Avoid overused defaults. Choose typefaces that reinforce the interface's personality.

/* BAD: Generic, seen everywhere */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* GOOD: Distinctive and paired intentionally */
--font-display: 'Instrument Serif', serif;      /* headings */
--font-body: 'Satoshi', sans-serif;              /* body text */
--font-mono: 'Berkeley Mono', monospace;         /* code */

Typographic Details

/* Tabular numbers for aligned columns */
.data-cell { font-variant-numeric: tabular-nums; }

/* Balanced headings prevent widow words */
h1, h2, h3 { text-wrap: balance; }

/* Proper ellipsis character */
.truncate::after { content: '\2026'; } /* … not ... */

Handle text overflow deliberately:

/* Single line truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-line clamping */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex children need min-w-0 for truncation to work */
.flex-child { min-width: 0; }

Color Systems

Theme Architecture

Build on CSS custom properties with clear semantic naming.

:root {
  /* Primitives */
  --gray-50: oklch(0.98 0.005 240);
  --gray-900: oklch(0.15 0.01 240);
  --accent: oklch(0.65 0.25 30);

  /* Semantic tokens */
  --color-bg: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: oklch(0.55 0.01 240);
  --color-border: oklch(0.88 0.005 240);
  --color-accent: var(--accent);
  --color-accent-hover: oklch(0.58 0.28 30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-900);
    --color-text: var(--gray-50);
    --color-text-muted: oklch(0.65 0.01 240);
    --color-border: oklch(0.28 0.005 240);
  }
}