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

# T02: Add featured technique card and restyle grid to recent-card pattern

Update the frontend to consume the enriched technique fields: render the first technique as a featured card with gradient border, and restyle remaining cards to match the recent-card pattern.

## Steps

1. Read `frontend/src/api/public-client.ts` and add to the `CreatorTechniqueItem` interface:
   - `summary: string | null`
   - `topic_tags: string[] | null`
   - `key_moment_count: number`

2. Read `frontend/src/pages/CreatorDetail.tsx`. In the technique list section:
   - Extract the first technique from the sorted array as `featuredTechnique`, remaining as `gridTechniques`
   - Above the existing grid, render the featured technique card (only when it exists) as a `Link` to `/techniques/{slug}` with class `creator-featured`. Include: title, summary (if present), category badge, TagList for topic_tags (if present), moment count.
   - Change the grid cards from `creator-technique-card` to `recent-card` class. Add summary, topic_tags (TagList), and moment count spans inside each card.
   - Import `TagList` component if not already imported.

3. Read `frontend/src/App.css`. Add `.creator-featured` styles adapted from `.home-featured`:
   - Same gradient `border-image` (linear-gradient 135deg cyan→purple)
   - Same surface background, padding, text alignment
   - Omit the creator link (we're already on the creator page)
   - Add `__title`, `__summary`, `__meta`, `__moments` sub-classes
   - Add a `.creator-featured__label` for a 'Featured Technique' heading
   - Remove or comment out the old `.creator-technique-card` rules (or leave them — they become dead CSS)

4. Run `cd frontend && npx tsc --noEmit` — must exit 0.
5. Run `cd frontend && npm run build` — must exit 0.

## Must-Haves

- [ ] `CreatorTechniqueItem` interface has summary, topic_tags, key_moment_count
- [ ] Featured technique card rendered above grid with gradient border and summary
- [ ] Grid technique cards use `recent-card` class pattern with summary, tags, moment count
- [ ] TypeScript compiles with zero errors
- [ ] Production build succeeds

## Verification

- `cd frontend && npx tsc --noEmit` exits 0
- `cd frontend && npm run build` exits 0
- `grep -q 'creator-featured' frontend/src/pages/CreatorDetail.tsx` confirms featured card class
- `grep -q 'recent-card' frontend/src/pages/CreatorDetail.tsx` confirms grid restyle

## Inputs

- ``frontend/src/api/public-client.ts` — CreatorTechniqueItem interface to extend`
- ``frontend/src/pages/CreatorDetail.tsx` — current technique list rendering with creator-technique-card class`
- ``frontend/src/App.css` — existing .home-featured and .recent-card styles to reference/adapt`
- ``backend/schemas.py` — T01 output: enriched CreatorTechniqueItem schema as reference for field names`

## Expected Output

- ``frontend/src/api/public-client.ts` — CreatorTechniqueItem with summary, topic_tags, key_moment_count`
- ``frontend/src/pages/CreatorDetail.tsx` — featured card + recent-card grid rendering`
- ``frontend/src/App.css` — .creator-featured styles added`

## Verification

cd frontend && npx tsc --noEmit && npm run build && grep -q 'creator-featured' src/pages/CreatorDetail.tsx && grep -q 'recent-card' src/pages/CreatorDetail.tsx && echo 'ALL OK'
