---
estimated_steps: 28
estimated_files: 3
skills_used: []
---

# T02: Frontend card-based related techniques section

Replace the plain list rendering of related techniques with a responsive card grid. Update the TypeScript interface to match the enriched backend schema.

## Steps

1. **Update `RelatedLinkItem` in `frontend/src/api/public-client.ts`**: Add `creator_name: string`, `topic_category: string`, `reason: string` fields (all optional with defaults for backward compat with empty strings).

2. **Replace list with card grid in `frontend/src/pages/TechniquePage.tsx`**: Remove the `<ul>` list and replace with a CSS grid of cards. Each card shows:
   - Technique title as a clickable `<Link>` to `/techniques/{target_slug}`
   - Creator name (if non-empty) in muted text
   - Topic category as a small badge (reuse existing `.badge` CSS patterns)
   - Reason text in small muted text below
   Use semantic class names: `.related-card`, `.related-card__title`, `.related-card__creator`, `.related-card__badge`, `.related-card__reason`

3. **Update CSS in `frontend/src/App.css`**: Replace `.technique-related__list` styles with:
   - `.technique-related__grid`: CSS grid, 2 columns on desktop (min-width: 600px), 1 column on mobile
   - `.related-card`: background var(--color-surface-card), border-radius, padding, border using existing design tokens
   - `.related-card__title`: link color, font-weight 600
   - `.related-card__creator`: muted text, small font
   - `.related-card__badge`: reuse existing badge pattern (small, inline, category-colored)
   - `.related-card__reason`: muted, italic, smallest font size
   Keep the existing `.technique-related` and `.technique-related h2` styles.

4. **Build verification**: Run `cd frontend && npm run build` to confirm zero TypeScript errors and successful production build.

## Must-Haves

- [ ] `RelatedLinkItem` TypeScript interface includes creator_name, topic_category, reason
- [ ] Related section renders as card grid, not plain list
- [ ] Cards show title (linked), creator name, category badge, reason
- [ ] Responsive: 2 columns on desktop, 1 on mobile
- [ ] `npm run build` passes with zero errors

## Verification

- `cd frontend && npm run build 2>&1 | tail -5` — build succeeds with zero errors
- `grep -c 'related-card' frontend/src/App.css` returns >= 4 (card styles exist)
- `grep -q 'creator_name' frontend/src/api/public-client.ts` confirms type updated

## Inputs

- ``frontend/src/api/public-client.ts` — existing RelatedLinkItem interface (line 48-52)`
- ``frontend/src/pages/TechniquePage.tsx` — existing related section rendering (line 494-511)`
- ``frontend/src/App.css` — existing .technique-related styles (line 1774-1808)`

## Expected Output

- ``frontend/src/api/public-client.ts` — RelatedLinkItem with creator_name, topic_category, reason fields`
- ``frontend/src/pages/TechniquePage.tsx` — card-based related techniques grid replacing plain list`
- ``frontend/src/App.css` — new .related-card grid styles replacing .technique-related__list`

## Verification

cd frontend && npm run build 2>&1 | tail -5
