chore: apply /review polish for UX-gap branch

Review-driven follow-ups to 9ebcb3a (zero critical findings; 13 informational):

- SidebarFooter: full-width skills.sh link gets focus-visible:ring-inset so the
  ring renders inside the control instead of clipping the footer border (matches
  AgentItem full-width convention); gear stays ring-2 (icon-button convention).
- MarketplaceDashboard test: mount fetch asserted toBe(1) (was >0) — locks the
  thunk in-flight guard deduping StrictMode's double-mount; verified 3x green.
- MarketplaceDashboard test: settled-empty case asserts the fresh TTL cache
  short-circuits the mount thunk (not.toHaveBeenCalled).
- MarketplaceDetailPanel test: rename describe to 'trending placeholders' so it
  covers the loading/empty/error cases it actually exercises.
- resolveTrendingView: compress JSDoc to the 1-line house rule.
- DESIGN.md: add Focus Indicators rule, pin amber shades by role (400 status /
  500 warning+bookmark), and split the skeleton a11y rule into primary
  (role=status) vs dense-grid decorative (aria-hidden) surfaces.

Author: ryota-murakami

DESIGN.md

@@ -66,14 +66,30 @@ The app uses OKLCH CSS variables, driven by `THEME_PRESETS` in
 
 Status colors must remain semantically stable:
 
-| Status               | Color                   |
-| -------------------- | ----------------------- |
-| Valid / linked       | `--success` fixed green |
-| Broken               | Amber                   |
-| Missing              | `--muted-foreground`    |
-| Orphan / destructive | `--destructive`         |
-| Local skill type     | Emerald                 |
-| G-Stack skill type   | `--gstack`              |
+| Status                | Color                    |
+| --------------------- | ------------------------ |
+| Valid / linked        | `--success` fixed green  |
+| Broken / inaccessible | Amber (see amber shades) |
+| Missing               | `--muted-foreground`     |
+| Orphan / destructive  | `--destructive`          |
+| Local skill type      | Emerald                  |
+| G-Stack skill type    | `--gstack`               |
+
+Amber shades — Tailwind ships several amber steps; pin them by role so the
+"needs review" hue stays consistent and reviews don't churn:
+
+| Role                                                       | Class                     |
+| ---------------------------------------------------------- | ------------------------- |
+| Broken / inaccessible / needs-review status text + icons   | `text-amber-400`          |
+| Warning-dialog icon glyphs, bookmark / star, stat emphasis | `text-amber-500`          |
+| Amber tint backgrounds (badges, status chips, fills)       | `bg-amber-500/{10,15,20}` |
+
+`text-amber-400` is the app-wide needs-review hue (`SymlinkStatus`, `badge`
+broken variant, `HealthWidget`); `text-amber-500` is the slightly stronger amber
+for warning affordances and the bookmark accent. Tint backgrounds always use the
+`amber-500` base at low alpha regardless of which text shade sits on them. The
+lone exception is `text-amber-300` for badge text on a denser amber tint, where
+the lighter step is needed for contrast.
 
 Rules:
 
@@ -350,11 +366,20 @@ Rules:
   structure) so the panel does not reflow when real data lands. (Linear, GitHub,
   Vercel load lists this way.)
 - A skeleton is silent to assistive tech: the visible "Loading…" text it
-  replaces was announced; pulsing bars are not. So the skeleton container MUST
-  carry `role="status"` plus a descriptive `aria-label` (e.g. "Loading trending
-  skills"), and the inner placeholder rows are `aria-hidden`. Swapping announced
-  text for a bare skeleton is an accessibility regression, not a neutral visual
-  change.
+  replaces was announced; pulsing bars are not. How to restore the announcement
+  depends on whether the skeleton is a **primary loading surface** or a
+  **decorative one in a dense grid**:
+  - **Primary loading surface** — a main panel or list the user is actively
+    waiting on (e.g. the Trending panel). The skeleton container MUST carry
+    `role="status"` plus a descriptive `aria-label` (e.g. "Loading trending
+    skills"), and the inner placeholder rows are `aria-hidden`. Swapping
+    announced text for a bare skeleton here is an accessibility regression.
+  - **Decorative skeleton in a dense widget grid** — many small widgets loading
+    at once (e.g. `dashboard/widgets/*Skeleton`). It MAY instead be fully
+    `aria-hidden`, because announcing each of N silhouettes would fire a burst of
+    competing "Loading…" messages; the surrounding region's own status copy
+    covers the wait. Pick one mode — never put `role="status"` and `aria-hidden`
+    on the same element (they contradict).
 - A panel that renders a skeleton must actually request its data. A skeleton with
   no fetch behind it is a permanent broken-looking spinner; own the fetch on
   mount (guarded by a cache TTL) wherever the populated state is the intended
@@ -398,6 +423,25 @@ Baseline:
 - Use native controls before custom roles.
 - Do not remove focus outlines without a visible replacement.
 
+Focus indicators:
+
+The shared `button.tsx` is the source of truth — every variant ships
+`focus-visible:ring-1 ring-ring` (see Buttons). Use it for any standard button so
+the focus treatment is inherited, not re-invented. For focusable elements that
+genuinely can't use it (clickable rows, footer links, hand-rolled icon buttons):
+
+- Always pair `focus-visible:outline-none` with a visible `focus-visible:ring-*
+ring-ring`, and always use `focus-visible`, never bare `focus` — bare `focus`
+  also fires on pointer click, flashing a ring at mouse users.
+- Ring width tracks prominence, not a rigid tier: compact in-surface controls may
+  match `button.tsx`'s `ring-1`; standalone hand-rolled controls commonly use
+  `ring-2` (e.g. `BookmarkItem`, the sidebar gear). Both are fine as long as the
+  ring reads clearly against `--ring`. Do not treat a single width as mandatory.
+- Full-width or edge-adjacent controls add `focus-visible:ring-inset` so the ring
+  renders inside the control instead of clipping against a container border —
+  full-width rows (`AgentItem`), the footer `skills.sh` link, and underline-style
+  tabs all use the inset ring.
+
 Target sizing:
 
 This is a pointer-driven desktop app (mouse and trackpad), so the mobile 44px

src/renderer/src/components/marketplace/MarketplaceDashboard.browser.test.tsx

@@ -204,9 +204,10 @@ describe('MarketplaceDashboard — trending placeholders', () => {
     // Assert — the dashboard owns its own trending fetch (it is not piggy-backing
     // on SkillsMarketplace's default 'all-time' request), keyed to the trending
     // filter so the skeleton resolves without the user opening the ranking tab.
-    await expect
-      .poll(() => mockLeaderboard.mock.calls.length)
-      .toBeGreaterThan(0)
+    // Exactly one IPC call: the thunk's in-flight guard dedupes StrictMode's
+    // double-mount (the first dispatch sets status:'loading' synchronously, so
+    // the second dispatch's `condition` short-circuits before reaching IPC).
+    await expect.poll(() => mockLeaderboard.mock.calls.length).toBe(1)
     expect(mockLeaderboard).toHaveBeenCalledWith({ filter: 'trending' })
   })
 
@@ -242,6 +243,9 @@ describe('MarketplaceDashboard — trending placeholders', () => {
     await expect
       .element(screen.getByText('No trending skills available'))
       .toBeInTheDocument()
+    // …and the fresh (idle, just-fetched) cache entry short-circuits the mount
+    // thunk via its TTL guard, so no redundant IPC refetch fires.
+    expect(mockLeaderboard).not.toHaveBeenCalled()
   })
 
   it('shows an offline notice when the trending fetch failed and nothing is cached', async () => {

src/renderer/src/components/marketplace/MarketplaceDetailPanel.browser.test.tsx

@@ -144,7 +144,7 @@ describe('MarketplaceDetailPanel routing', () => {
   })
 })
 
-describe('MarketplaceDashboard empty state', () => {
+describe('MarketplaceDashboard trending placeholders', () => {
   it('shows a loading skeleton, announced to screen readers, before trending skills have been fetched', async () => {
     // Arrange
     const store = await createStore()

src/renderer/src/components/marketplace/marketplaceDashboardHelpers.ts

@@ -4,16 +4,9 @@ import type { LeaderboardStatus } from '@/shared/types'
 export type TrendingView = 'populated' | 'loading' | 'error' | 'empty'
 
 /**
- * Decide which Trending panel state the marketplace dashboard renders from the
- * cached skill count and fetch status. Extracted as a pure function so the
- * four-way visual branch is unit-testable without React Testing Library (per
- * the src/renderer `.coderabbit.yaml` guideline) and stays exhaustive.
- *
- * Precedence is stale-while-revalidate: any cached skills win first (so a
- * background refresh never blanks the list), then an in-flight/never-started
- * fetch shows the skeleton, then a failed fetch shows the offline notice, and
- * only a successful-but-empty result is treated as a genuine empty.
- *
+ * Pick the dashboard Trending panel's visual state from cached count + fetch
+ * status, stale-while-revalidate: cached skills win, then in-flight → skeleton,
+ * then failure → offline notice, then a successful-but-empty result → empty.
  * @param trendingSkillCount - Number of trending skills available to render.
  * @param status - Cache fetch status for the trending filter, or `undefined` when never fetched.
  * @returns

src/renderer/src/components/sidebar/SidebarFooter.tsx

@@ -36,7 +36,7 @@ export const SidebarFooter = React.memo(
         <button
           type="button"
           onClick={handleSkillsLinkClick}
-          className="flex flex-1 items-center justify-center gap-1.5 rounded-sm text-xs font-medium font-mono text-muted-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="flex flex-1 items-center justify-center gap-1.5 rounded-sm text-xs font-medium font-mono text-muted-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
         >
           <span>skills.sh</span>
           <ExternalLink className="h-3 w-3" />