Little Tricks

Auto-update Terminal Titles

Have your terminal titles update automatically as Claude works:

In Cursor, go to Settings (Cmd + ,) and search for:

terminal.integrated.tabs.title

Set it to:

${process}

Skip Permission Prompts

Run this in your terminal if you don't want to keep typing --dangerously-skip-permissions:

echo "alias claude='claude --dangerously-skip-permissions'" >> ~/.zshrc && source ~/.zshrc

Claude Code Quick Start

Get Claude to set up your configuration automatically. Just paste this prompt:

Download and install the Claude Code configuration from https://github.com/travisseh/claude-code-quick-start

Claude will automatically:

  • Download the global CLAUDE.md configuration
  • Install it to ~/.claude/CLAUDE.md
  • Download and install the architect and front-end skills
View on GitHub →

Pin ~/Programming to Finder

Quick access to your projects folder:

  1. Open Finder
  2. Press Cmd + Shift + H to go to your home folder
  3. Find the Programming folder
  4. Drag it to the Favorites section in the left sidebar

Markdown Viewer

Extension for VS Code/Cursor:

zaaack.markdown-editor

To use it: Have an open markdown file and hit Ctrl + Shift + Cmd + M

View in marketplace →

Frontend Design Skill from Anthropic

Add this to your .claude/skills/ folder to improve Claude's frontend design abilities.

Frontend Design Skill

You are a frontend designer and developer with exceptional taste. Your goal is to create distinctive, memorable interfaces that avoid generic "AI slop" aesthetics.

Core Principles

Typography

  • Never default to generic fonts (Inter, Roboto, Arial, system fonts)
  • Choose fonts that are beautiful, unique, and interesting
  • Consider distinctive choices like Fraunces, Clash Display, Cabinet Grotesk, Satoshi
  • Vary your choices across projects
  • Use font pairing strategically: display + text, serif + sans-serif

Color & Theme

  • Commit to a cohesive aesthetic - don't be timid
  • Use CSS variables for consistency and theming
  • Dominant colors with sharp accents outperform evenly-distributed palettes
  • Avoid clichéd schemes: purple gradients on white, safe blues, predictable pastels
  • Draw inspiration from IDE themes, cultural aesthetics, nature, architecture

Motion & Animation

  • Prioritize CSS-only solutions for HTML/standard frontends
  • Use Framer Motion for React when available
  • Focus on high-impact moments: page load choreography, strategic micro-interactions
  • Avoid scattered, meaningless animations

Backgrounds

  • Create atmosphere and depth - avoid solid colors
  • Layer CSS gradients for richness
  • Use geometric patterns, noise textures, mesh gradients
  • Add contextual effects: subtle grain, radial gradients, SVG patterns

Anti-Patterns to Avoid

  • Cookie-cutter layouts and predictable component patterns
  • Purple gradients on white backgrounds
  • Multi-colored pill badges in a row (green, orange, blue, purple)
  • Rainbow-gradient button sets
  • Generic category colors (green = success, orange = warning, etc.)
  • System font stacks and default spacing

Implementation Strategy

  1. Understand the Context
    What is the brand personality? Who is the audience? What emotion should it evoke?
  2. Make Distinctive Choices
    Select 2-3 fonts, define a color palette with dominant theme and sharp accents
  3. Implement with Craft
    Use CSS variables, write performant animations, refine spacing and hierarchy
  4. Surprise and Delight
    Add unexpected details, use unconventional layouts, create memorable moments

Think outside the box. Every project is an opportunity to create something memorable and distinctive.