Dimension feedback row

Per-skill feedback row on /results. Weak rows borrow the error border; each card carries the dimension score, an inline narrative, and an action sub-card pointing at the next remediation step.

Preview

High-Level Design

4.0

You proposed write-through caching with a clear consistency story. Strong on tradeoffs. Could explore quorum reads at higher load.

iTry the same problem again at L3 →

Scale Estimation

2.8 → 2.2

2.2

Numbers were directional but napkin math was off — storage growth at 50× over 3 years, not 5×.

iRe-read scale-estimation primer →

Source

apps/docs/app/recipes/dim-row-results/recipe.tsx

export default function DimRowResultsRecipe() {
  return (
    <div className="flex flex-col gap-3">
      <div className="border-stroke bg-surface flex flex-col gap-3 rounded-xl border px-5 py-4">
        <div className="flex items-center justify-between gap-3">
          <h4 className="text-ink-1 text-sm font-semibold">High-Level Design</h4>
          <span
            className="font-mono text-sm font-bold tabular-nums"
            style={{ color: 'var(--color-score-passing)' }}
          >
            4.0
          </span>
        </div>
        <div className="my-3 h-1.5 w-full rounded-full bg-[var(--color-score-approaching)]" />
        <p className="text-ink-2 text-sm leading-relaxed">
          You proposed write-through caching with a clear consistency story.{' '}
          <strong className="text-ink-1">Strong on tradeoffs.</strong> Could explore quorum reads at
          higher load.
        </p>
        <a
          href="#dim-row-results"
          className="border-stroke bg-surface-2 text-ink-2 hover:text-ink-1 flex items-center gap-2.5 rounded-lg border px-3 py-2 text-xs no-underline"
        >
          <span
            className="text-label flex h-[22px] w-[22px] items-center justify-center rounded-md font-semibold"
            style={{ background: 'var(--color-info-surface)', color: 'var(--color-info-text)' }}
          >
            i
          </span>
          Try the same problem again at L3 →
        </a>
      </div>
      <div
        className="bg-surface flex flex-col gap-3 rounded-xl border px-5 py-4"
        style={{ borderColor: 'var(--color-error-border)' }}
      >
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-2">
            <h4 className="text-ink-1 text-sm font-semibold">Scale Estimation</h4>
            <span
              className="text-ink-3 text-2xs rounded-full px-1.5 py-px font-mono tabular-nums"
              style={{ border: '1px dashed var(--color-warning-border)' }}
            >
              2.8 → 2.2
            </span>
          </div>
          <span
            className="font-mono text-sm font-bold tabular-nums"
            style={{ color: 'var(--color-score-approaching-text)' }}
          >
            2.2
          </span>
        </div>
        <p className="text-ink-2 text-sm leading-relaxed">
          Numbers were directional but napkin math was off —{' '}
          <strong className="text-ink-1">storage growth at 50× over 3 years</strong>, not 5×.
        </p>
        <a
          href="#dim-row-results"
          className="border-stroke bg-surface-2 text-ink-2 hover:text-ink-1 flex items-center gap-2.5 rounded-lg border px-3 py-2 text-xs no-underline"
        >
          <span
            className="text-label flex h-[22px] w-[22px] items-center justify-center rounded-md font-semibold"
            style={{ background: 'var(--color-info-surface)', color: 'var(--color-info-text)' }}
          >
            i
          </span>
          Re-read scale-estimation primer →
        </a>
      </div>
    </div>
  );
}

export default function DimRowResultsRecipe() {
  return (
    <div className="flex flex-col gap-3">
      <div className="border-stroke bg-surface flex flex-col gap-3 rounded-xl border px-5 py-4">
        <div className="flex items-center justify-between gap-3">
          <h4 className="text-ink-1 text-sm font-semibold">High-Level Design</h4>
          <span
            className="font-mono text-sm font-bold tabular-nums"
            style={{ color: 'var(--color-score-passing)' }}
          >
            4.0
          </span>
        </div>
        <div className="my-3 h-1.5 w-full rounded-full bg-[var(--color-score-approaching)]" />
        <p className="text-ink-2 text-sm leading-relaxed">
          You proposed write-through caching with a clear consistency story.{' '}
          <strong className="text-ink-1">Strong on tradeoffs.</strong> Could explore quorum reads at
          higher load.
        </p>
        <a
          href="#dim-row-results"
          className="border-stroke bg-surface-2 text-ink-2 hover:text-ink-1 flex items-center gap-2.5 rounded-lg border px-3 py-2 text-xs no-underline"
        >
          <span
            className="text-label flex h-[22px] w-[22px] items-center justify-center rounded-md font-semibold"
            style={{ background: 'var(--color-info-surface)', color: 'var(--color-info-text)' }}
          >
            i
          </span>
          Try the same problem again at L3 →
        </a>
      </div>
      <div
        className="bg-surface flex flex-col gap-3 rounded-xl border px-5 py-4"
        style={{ borderColor: 'var(--color-error-border)' }}
      >
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-2">
            <h4 className="text-ink-1 text-sm font-semibold">Scale Estimation</h4>
            <span
              className="text-ink-3 text-2xs rounded-full px-1.5 py-px font-mono tabular-nums"
              style={{ border: '1px dashed var(--color-warning-border)' }}
            >
              2.8 → 2.2
            </span>
          </div>
          <span
            className="font-mono text-sm font-bold tabular-nums"
            style={{ color: 'var(--color-score-approaching-text)' }}
          >
            2.2
          </span>
        </div>
        <p className="text-ink-2 text-sm leading-relaxed">
          Numbers were directional but napkin math was off —{' '}
          <strong className="text-ink-1">storage growth at 50× over 3 years</strong>, not 5×.
        </p>
        <a
          href="#dim-row-results"
          className="border-stroke bg-surface-2 text-ink-2 hover:text-ink-1 flex items-center gap-2.5 rounded-lg border px-3 py-2 text-xs no-underline"
        >
          <span
            className="text-label flex h-[22px] w-[22px] items-center justify-center rounded-md font-semibold"
            style={{ background: 'var(--color-info-surface)', color: 'var(--color-info-text)' }}
          >
            i
          </span>
          Re-read scale-estimation primer →
        </a>
      </div>
    </div>
  );
}