claude-workspace: Skill for Claude Code

CSS Architecture

Styling Strategy Decision

Approach	When	Trade-offs
Tailwind CSS	Most components, rapid iteration	Verbose JSX, but zero unused CSS
CSS Modules	Complex animations, stateful styles	Scoped by default, slightly more setup
CSS Custom Properties	Theme tokens, dynamic values	Great for runtime theming
Inline style	Only truly dynamic values	style={{ '--progress': ${pct}% }}

Tailwind CSS Patterns

Class Order Convention

Follow a consistent order for readability:

layout > position > sizing > spacing > typography > visual > state > responsive

<div className="
  flex items-center gap-4        {/* layout */}
  relative                        {/* position */}
  w-full max-w-md h-12           {/* sizing */}
  px-4 py-2 mt-6                 {/* spacing */}
  text-sm font-medium text-gray-900  {/* typography */}
  bg-white rounded-lg shadow-sm border  {/* visual */}
  hover:shadow-md focus:ring-2   {/* state */}
  md:max-w-lg lg:gap-6           {/* responsive */}
">

Extracting Repeated Patterns

// GOOD: Extract into a component (preserves tree-shaking)
function Badge({ variant, children }: BadgeProps) {
  const styles = {
    info: 'bg-blue-50 text-blue-700 ring-blue-600/20',
    success: 'bg-green-50 text-green-700 ring-green-600/20',
    warning: 'bg-yellow-50 text-yellow-800 ring-yellow-600/20',
    error: 'bg-red-50 text-red-700 ring-red-600/20',
  };

  return (
    <span className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${styles[variant]}`}>
      {children}
    </span>
  );
}

// AVOID: @apply in CSS (breaks tree-shaking)
// .badge { @apply inline-flex items-center rounded-md ... }

Conditional Classes

import { clsx } from 'clsx'; // or classnames
import { twMerge } from 'tailwind-merge';

// Utility for safe Tailwind class merging
function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// Usage
<button
  className={cn(
    'rounded-lg px-4 py-2 font-medium transition-colors',
    variant === 'primary' && 'bg-blue-600 text-white hover:bg-blue-700',
    variant === 'ghost' && 'bg-transparent text-gray-700 hover:bg-gray-100',
    disabled && 'opacity-50 cursor-not-allowed',
  )}
/>