feat: Featured technique card with gradient border and enriched recent-…

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/CreatorDetail.tsx"
- "frontend/src/App.css"

GSD-Task: S03/T02

.gsd/milestones/M017/slices/S03/S03-PLAN.md

@@ -29,7 +29,7 @@
   - Estimate: 20m
   - Files: backend/schemas.py, backend/routers/creators.py
   - Verify: cd backend && python -c "from schemas import CreatorTechniqueItem; fields = list(CreatorTechniqueItem.model_fields.keys()); assert 'summary' in fields and 'topic_tags' in fields and 'key_moment_count' in fields; print('OK')"
-- [ ] **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.
+- [x] **T02: Featured technique card with gradient border and enriched recent-card grid rendered on creator detail page** — 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
 

.gsd/milestones/M017/slices/S03/tasks/T01-VERIFY.json

@@ -0,0 +1,16 @@
+{
+  "schemaVersion": 1,
+  "taskId": "T01",
+  "unitId": "M017/S03/T01",
+  "timestamp": 1775207254785,
+  "passed": true,
+  "discoverySource": "task-plan",
+  "checks": [
+    {
+      "command": "cd backend",
+      "exitCode": 0,
+      "durationMs": 4,
+      "verdict": "pass"
+    }
+  ]
+}

.gsd/milestones/M017/slices/S03/tasks/T02-SUMMARY.md

@@ -0,0 +1,82 @@
+---
+id: T02
+parent: S03
+milestone: M017
+provides: []
+requires: []
+affects: []
+key_files: ["frontend/src/api/public-client.ts", "frontend/src/pages/CreatorDetail.tsx", "frontend/src/App.css"]
+key_decisions: ["Used null-check guard + IIFE for featured technique to satisfy strict TS noUncheckedIndexedAccess"]
+patterns_established: []
+drill_down_paths: []
+observability_surfaces: []
+duration: ""
+verification_result: "npx tsc --noEmit exits 0. npm run build exits 0. grep confirms creator-featured and recent-card classes in CreatorDetail.tsx. Backend schema check confirms enriched fields present."
+completed_at: 2026-04-03T09:10:03.442Z
+blocker_discovered: false
+---
+
+# T02: Featured technique card with gradient border and enriched recent-card grid rendered on creator detail page
+
+> Featured technique card with gradient border and enriched recent-card grid rendered on creator detail page
+
+## What Happened
+---
+id: T02
+parent: S03
+milestone: M017
+key_files:
+  - frontend/src/api/public-client.ts
+  - frontend/src/pages/CreatorDetail.tsx
+  - frontend/src/App.css
+key_decisions:
+  - Used null-check guard + IIFE for featured technique to satisfy strict TS noUncheckedIndexedAccess
+duration: ""
+verification_result: passed
+completed_at: 2026-04-03T09:10:03.442Z
+blocker_discovered: false
+---
+
+# T02: Featured technique card with gradient border and enriched recent-card grid rendered on creator detail page
+
+**Featured technique card with gradient border and enriched recent-card grid rendered on creator detail page**
+
+## What Happened
+
+Extended CreatorTechniqueItem TypeScript interface with summary, topic_tags, and key_moment_count. Restructured CreatorDetail technique list: first technique renders as a prominent featured card with gradient border-image, summary, category badge, TagList, and moment count. Remaining techniques use the recent-card class pattern with the same enriched fields. Added .creator-featured CSS adapted from .home-featured.
+
+## Verification
+
+npx tsc --noEmit exits 0. npm run build exits 0. grep confirms creator-featured and recent-card classes in CreatorDetail.tsx. Backend schema check confirms enriched fields present.
+
+## Verification Evidence
+
+| # | Command | Exit Code | Verdict | Duration |
+|---|---------|-----------|---------|----------|
+| 1 | `cd frontend && npx tsc --noEmit` | 0 | ✅ pass | 3100ms |
+| 2 | `cd frontend && npm run build` | 0 | ✅ pass | 3100ms |
+| 3 | `grep -q 'creator-featured' frontend/src/pages/CreatorDetail.tsx` | 0 | ✅ pass | 50ms |
+| 4 | `grep -q 'recent-card' frontend/src/pages/CreatorDetail.tsx` | 0 | ✅ pass | 50ms |
+| 5 | `cd backend && python -c "from schemas import CreatorTechniqueItem; ..."` | 0 | ✅ pass | 500ms |
+
+
+## Deviations
+
+Added null-check guard before IIFE for featured technique to satisfy Vite's stricter TS build config (noUncheckedIndexedAccess).
+
+## Known Issues
+
+None.
+
+## Files Created/Modified
+
+- `frontend/src/api/public-client.ts`
+- `frontend/src/pages/CreatorDetail.tsx`
+- `frontend/src/App.css`
+
+
+## Deviations
+Added null-check guard before IIFE for featured technique to satisfy Vite's stricter TS build config (noUncheckedIndexedAccess).
+
+## Known Issues
+None.

frontend/src/App.css

@@ -2806,6 +2806,60 @@ a.app-footer__repo:hover {
   line-height: 1.4;
 }
 
+/* ── Creator Featured Technique ─────────────────────────────────────── */
+
+.creator-featured {
+  display: block;
+  max-width: 100%;
+  margin-bottom: 1.25rem;
+  padding: 1.25rem 1.5rem;
+  background: var(--color-bg-surface);
+  border: 1px solid transparent;
+  border-image: linear-gradient(135deg, #22d3ee, #a855f7) 1;
+  text-decoration: none;
+  color: inherit;
+  position: relative;
+}
+
+.creator-featured__label {
+  margin-bottom: 0.5rem;
+}
+
+.creator-featured__title {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+}
+
+.creator-featured:hover .creator-featured__title {
+  color: var(--color-accent-hover);
+}
+
+.creator-featured__summary {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+  margin-top: 0;
+}
+
+.creator-featured__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.creator-featured__moments {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
 /* ══════════════════════════════════════════════════════════════════════════════
    TOPICS BROWSE — Card Grid Layout
    ══════════════════════════════════════════════════════════════════════════════ */

frontend/src/api/public-client.ts

@@ -178,6 +178,9 @@ export interface CreatorTechniqueItem {
   title: string;
   slug: string;
   topic_category: string;
+  summary: string | null;
+  topic_tags: string[] | null;
+  key_moment_count: number;
   created_at: string;
 }
 

frontend/src/pages/CreatorDetail.tsx

@@ -14,6 +14,7 @@ import {
 import CreatorAvatar from "../components/CreatorAvatar";
 import { SocialIcon } from "../components/SocialIcons";
 import SortDropdown from "../components/SortDropdown";
+import TagList from "../components/TagList";
 import { catSlug } from "../utils/catSlug";
 import { useDocumentTitle } from "../hooks/useDocumentTitle";
 import { useSortPreference } from "../hooks/useSortPreference";
@@ -184,26 +185,76 @@ export default function CreatorDetail() {
         {techniques.length === 0 ? (
           <div className="empty-state">No techniques yet.</div>
         ) : (
+          <>
+            {/* Featured technique — first in sorted order */}
+            {techniques[0] != null && (() => {
+              const featured = techniques[0];
+              return (
+                <Link
+                  to={`/techniques/${featured.slug}`}
+                  className="creator-featured"
+                >
+                  <span className="creator-featured__label section-heading section-heading--accent">
+                    Featured Technique
+                  </span>
+                  <span className="creator-featured__title">
+                    {featured.title}
+                  </span>
+                  {featured.summary && (
+                    <p className="creator-featured__summary">
+                      {featured.summary}
+                    </p>
+                  )}
+                  <span className="creator-featured__meta">
+                    <span className={`badge badge--cat-${catSlug(featured.topic_category)}`}>
+                      {featured.topic_category}
+                    </span>
+                    {featured.topic_tags && featured.topic_tags.length > 0 && (
+                      <TagList tags={featured.topic_tags} max={4} pillClass="pill--tag" />
+                    )}
+                  </span>
+                  <span className="creator-featured__moments">
+                    {featured.key_moment_count} moment{featured.key_moment_count !== 1 ? "s" : ""}
+                  </span>
+                </Link>
+              );
+            })()}
+
+            {/* Remaining techniques — recent-card grid */}
+            {techniques.length > 1 && (
               <div className="creator-techniques__list">
-            {techniques.map((t, i) => (
+                {techniques.slice(1).map((t, i) => (
                   <Link
                     key={t.slug}
                     to={`/techniques/${t.slug}`}
-                className="creator-technique-card card-stagger"
+                    className="recent-card card-stagger"
                     style={{ '--stagger-index': i } as React.CSSProperties}
                   >
-                <span className="creator-technique-card__title">
+                    <span className="recent-card__title">
                       {t.title}
                     </span>
-                <span className="creator-technique-card__meta">
+                    {t.summary && (
-                  <span className="badge badge--category">
+                      <span className="recent-card__summary">
+                        {t.summary}
+                      </span>
+                    )}
+                    <span className="recent-card__meta">
+                      <span className={`badge badge--cat-${catSlug(t.topic_category)}`}>
                         {t.topic_category}
                       </span>
+                      {t.topic_tags && t.topic_tags.length > 0 && (
+                        <TagList tags={t.topic_tags} max={3} pillClass="pill--tag" />
+                      )}
+                    </span>
+                    <span className="recent-card__moments">
+                      {t.key_moment_count} moment{t.key_moment_count !== 1 ? "s" : ""}
                     </span>
                   </Link>
                 ))}
               </div>
             )}
+          </>
+        )}
       </section>
     </div>
   );