Token discipline:

• Every color, spacing, radius, and font value maps to a design token
• No hardcoded hex values, raw pixel spacing, or ad hoc font sizes
• Semantic names: bg-[--color-primary] not bg-blue-600

Example — Button (React + TypeScript + Tailwind):

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-[--radius-md] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-focus] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        primary:
          "bg-[--color-primary] text-[--color-primary-fg] hover:bg-[--color-primary-hover]",
        secondary:
          "bg-[--color-surface-2] text-[--color-text] hover:bg-[--color-surface-3]",
        destructive:
          "bg-[--color-danger] text-[--color-danger-fg] hover:bg-[--color-danger-hover]",
        ghost: "hover:bg-[--color-surface-2] text-[--color-text]",
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-9 px-4 text-sm",
        lg: "h-11 px-6 text-base",
      },
    },
    defaultVariants: { variant: "primary", size: "md" },
  },
);

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof buttonVariants> & {
    loading?: boolean;
  };

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { className, variant, size, loading, disabled, children, ...props },
    ref,
  ) => (
    <button
      ref={ref}
      className={cn(buttonVariants({ variant, size }), className)}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      {...props}
    >
      {loading && (
        <svg
          className="h-4 w-4 animate-spin"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <circle
            className="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            strokeWidth="4"
          />
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
          />
        </svg>
      )}
      {children}
    </button>
  ),
);
Button.displayName = "Button";

export { Button, buttonVariants };

Step 4: Write the Tests

Write tests using the project's test setup (default: Vitest + Testing Library):

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Button } from './Button'

describe('Button', () => {
  it('renders with required props', () => {
    render(<Button>Save</Button>)
    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
  })

  it('is disabled and aria-busy when loading', () => {
    render(<Button loading>Save</Button>)
    const btn = screen.getByRole('button')
    expect(btn).toBeDisabled()
    expect(btn).toHaveAttribute('aria-busy', 'true')
  })

  it('disabled button does not fire onClick', async () => {
    const user = userEvent.setup()
    const onClick = vi.fn()
    render(<Button disabled onClick={onClick}>Delete</Button>)
    await user.click(screen.getByRole('button'))
    expect(onClick).not.toHaveBeenCalled()
  })

  it('is keyboard operable', async () => {
    const user = userEvent.setup()
    const onClick = vi.fn()
    render(<Button onClick={onClick}>Save</Button>)
    await user.tab()
    await user.keyboard('{Enter}')
    expect(onClick).toHaveBeenCalledOnce()
  })
})

Cover: renders correctly, all states, keyboard interaction, accessibility assertions.

Step 5: Summarize

┌─ Component: [Name] ─────────────────────────────────────────┐
│ File: [path]                                                  │
│ Stack: [framework + styling approach]                         │
│                                                               │
│ API                                                           │
│   Variants: [list]                                           │
│   Key props: [list]                                          │
│   Composition: children / slots / compound                    │
│   Ref forwarding: yes / no                                    │
│                                                               │
│ States: default · loading · error · empty · disabled          │
│                                                               │
│ Tokens: [semantic token names used]                           │
│ Spec gaps filled: [assumed states — flag for Form if any]     │
│                                                               │
│ a11y: [keyboard model, ARIA roles/properties]                 │
│ Tests: [N] — [coverage summary]                               │
└──────────────────────────────────────────────────────────────┘

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.