fix: close UX gaps across app surfaces

Sweep from /ux-gap-detector over the whole app, plus the design-review
follow-ups. Behaviour-safe focus/contrast/motion polish, one wiring fix,
and the DESIGN.md rules the review surfaced.

Focus visibility (was: no visible focus on several controls)
- SkillItem unlink / delete / bookmark X, AgentItem row, SidebarFooter
  skills.sh + gear, SourceLink repo-filter + external link, SkillDetail
  tabs, and the dialog close X all gain focus-visible rings.

Theme selector
- Drop hover:scale-110 jank on the colour swatches; the hover affordance
  is now a quiet bg-muted tile (transition-colors) on the swatch button.
- Selected-swatch ring ring-white -> ring-foreground so it stays visible
  in light mode (ring-white was invisible on a light background).

Severity + scale
- SkillDetail Valid/Broken/Inaccessible counts colour by severity when
  non-zero (success / amber) and stay muted at zero.
- Skills Marketplace heading: 28px + subtitle -> text-lg (no hero-scale
  type in the shell). Dashboard stat numbers text-3xl -> text-2xl
  tabular-nums.
- CodePreview loading / no-files containers h-48 -> h-full so they fill
  the panel instead of floating.
- Card: rounded-xl + shadow -> rounded-lg, border-only.

Trending panel (the wiring fix)
- MarketplaceDashboard now owns its own loadLeaderboard('trending') mount
  fetch. Nothing requested trending on this surface before (only
  SkillsMarketplace, which defaults to 'all-time'), so its placeholder
  never resolved. Four-way view (populated / loading / error / empty) via
  a pure resolveTrendingView helper + ts-pattern; TrendingSkeleton carries
  role="status" + aria-label; a TrendingError offline notice replaces a
  silent blank on failure.

Settings
- General + Appearance ToggleGroups: justify-start (left-aligned under
  their labels, not stretched). Appearance font-size range gains a focus
  ring.

Bulk-confirm dialog
- AlertTriangle icon (destructive=red, copy=amber) via a module-scope
  helper so MainContent stays at its complexity baseline.

DESIGN.md
- New "Loading and Skeletons" section (fixed-shape skeleton, role="status"
  a11y, a skeleton must own its fetch) and a segmented-control
  left-align rule.

Author: ryota-murakami

DESIGN.md

@@ -297,6 +297,12 @@ Rules:
 - Tabs should be compact and stable.
 - Use underline, border, or subtle background to communicate selection.
 - Do not increase container height on hover or active state.
+- A segmented control sits left-aligned under its own label, sized to its
+  content — it does not stretch full-width or center in the row. Stretching reads
+  as a primary tab bar; a secondary setting toggle should stay a compact,
+  left-anchored affordance. Apply `justify-start` to the ToggleGroup whenever its
+  parent is a full-width flex column. (macOS System Settings, Linear preference
+  toggles.)
 - Keep Radix roles in mind when testing: some toggle groups expose `radio`.
 
 ### Lists and Rows
@@ -336,6 +342,24 @@ Rules:
   heading for a search miss. This is the operational reading of principle 5's
   "no noisy empty states."
 
+### Loading and Skeletons
+
+- A fixed-shape skeleton — not a single "Loading…" text line — is the default
+  first-load placeholder for any list or panel whose populated layout is known.
+  Mirror the populated layout (same row count, same chip / text / trailing
+  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.
+- 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
+  resting state.
+
 ### Cards and Widgets
 
 - Use cards for repeated standalone items, dashboard widgets, dialogs, and

src/renderer/settings/sections/Appearance.tsx

@@ -73,7 +73,7 @@ const BackgroundBlurRangeInput = React.memo(function BackgroundBlurRangeInput({
       value={value}
       onChange={handleInputChange}
       aria-label={label}
-      className="h-2 min-w-0 flex-1 accent-primary"
+      className="h-2 min-w-0 flex-1 accent-primary rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
     />
   )
 })
@@ -171,6 +171,7 @@ export const Appearance = React.memo(function Appearance(): React.ReactElement {
           type="single"
           variant="outline"
           size="sm"
+          className="justify-start"
           value={installedSearchCountDisplay}
           onValueChange={handleSearchCountDisplayChange}
           aria-label={INSTALLED_SEARCH_COUNT_DISPLAY_LABEL}

src/renderer/settings/sections/General.tsx

@@ -301,6 +301,7 @@ export const General = React.memo(function General(): React.ReactElement {
           type="single"
           variant="outline"
           size="sm"
+          className="justify-start"
           value={settings.defaultSkillTab}
           onValueChange={handleDefaultTabChange}
           aria-label="Default tab when opening a skill"

src/renderer/src/components/layout/MainContent.tsx

@@ -1,4 +1,5 @@
 import {
+  AlertTriangle,
   ArrowDownAZ,
   ArrowUpAZ,
   CheckSquare,
@@ -280,6 +281,23 @@ function getBulkDeleteTargetSummary(
   }
 }
 
+/**
+ * Pick the bulk-confirm dialog's warning-icon tint: red for the irreversible
+ * delete, amber for the lighter unlink. Module-scope (taking the whole state,
+ * so the call site needs no optional chain) keeps this branch out of
+ * MainContent's complexity budget.
+ * @param bulkConfirm - Pending bulk confirm dialog state, or null when closed.
+ * @returns Tailwind text-color class for the AlertTriangle glyph.
+ * @example
+ * bulkConfirmIconColorClass({ kind: 'delete', ... }) // => 'text-destructive'
+ * bulkConfirmIconColorClass({ kind: 'unlink', ... }) // => 'text-amber-500'
+ */
+function bulkConfirmIconColorClass(
+  bulkConfirm: BulkConfirmState | null,
+): string {
+  return bulkConfirm?.kind === 'delete' ? 'text-destructive' : 'text-amber-500'
+}
+
 /**
  * Disable destructive confirm when every reviewed row is stale and no cleanup can run.
  * @param bulkConfirm - Pending bulk confirm dialog state.
@@ -1371,11 +1389,16 @@ export const MainContent = React.memo(
         >
           <DialogContent className="max-w-md">
             <DialogHeader>
-              <DialogTitle>
-                {bulkConfirm?.kind === 'delete'
-                  ? `Delete ${bulkConfirm.skillNames.length} ${pluralize(bulkConfirm.skillNames.length, 'skill')}?`
-                  : `Unlink ${bulkConfirm?.skillNames.length ?? 0} ${pluralize(bulkConfirm?.skillNames.length ?? 0, 'skill')} from ${bulkConfirm?.agentName ?? 'agent'}?`}
-              </DialogTitle>
+              <div className="flex items-center gap-2">
+                <AlertTriangle
+                  className={`h-5 w-5 ${bulkConfirmIconColorClass(bulkConfirm)}`}
+                />
+                <DialogTitle>
+                  {bulkConfirm?.kind === 'delete'
+                    ? `Delete ${bulkConfirm.skillNames.length} ${pluralize(bulkConfirm.skillNames.length, 'skill')}?`
+                    : `Unlink ${bulkConfirm?.skillNames.length ?? 0} ${pluralize(bulkConfirm?.skillNames.length ?? 0, 'skill')} from ${bulkConfirm?.agentName ?? 'agent'}?`}
+                </DialogTitle>
+              </div>
               <DialogDescription>
                 {bulkConfirm?.kind === 'delete'
                   ? renderBulkDeleteDescription({

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

@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { Provider } from 'react-redux'
-import { describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { render } from 'vitest-browser-react'
 
 import type { RootState } from '@/renderer/src/redux/store'
@@ -20,7 +20,30 @@ import type {
 // is active with no skill previewed. It reads three slices (installed count,
 // bookmark count, trending leaderboard cache) and lets the user pick a trending
 // row for preview. This file guards: the trending-row click → previewSkill
-// selection, and the loading vs settled-empty trending placeholders.
+// selection, the loading/error/settled-empty trending placeholders, and the
+// mount fetch that populates the panel.
+
+// The dashboard dispatches `loadLeaderboard('trending')` on mount, whose thunk
+// reads `window.electron.marketplace.leaderboard`. Browser-mode tests replace
+// the preload bridge, so the IPC surface is stubbed. The default is a
+// never-resolving promise: it lets each test pin the leaderboard state it seeded
+// without a late `fulfilled` action racing in and overwriting the rendered
+// branch (the fresh-cache TTL guard already blocks the fetch for seeded tests).
+const mockLeaderboard = vi.fn()
+
+beforeEach(() => {
+  mockLeaderboard.mockReset()
+  mockLeaderboard.mockReturnValue(new Promise<SkillSearchResult[]>(() => {}))
+  vi.stubGlobal('electron', {
+    marketplace: {
+      leaderboard: mockLeaderboard,
+    },
+  })
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
 
 /**
  * Build a `SkillSearchResult` fixture so each test varies only the field it
@@ -58,8 +81,10 @@ function makeLeaderboardData(
 
 /**
  * Render MarketplaceDashboard over the real marketplace + skills + bookmark
- * reducers, seeded with `preloadedState`. The dashboard has no mount thunk, so
- * the seeded state is rendered verbatim with no async settling.
+ * reducers, seeded with `preloadedState`. The dashboard fires a mount fetch, but
+ * the stubbed IPC defaults to a never-resolving promise so seeded state renders
+ * without a late `fulfilled` overwriting it; fresh seeded entries also short-
+ * circuit the thunk via its cache-TTL guard.
  * @param preloadedState - Partial marketplace + skills + bookmarks state to seed
  */
 async function renderDashboard(preloadedState: {
@@ -170,16 +195,31 @@ describe('MarketplaceDashboard — trending preview selection', () => {
 })
 
 describe('MarketplaceDashboard — trending placeholders', () => {
-  it('shows a loading placeholder while the trending leaderboard has not loaded yet', async () => {
+  it('requests the trending leaderboard on mount so the panel populates itself', async () => {
+    // Arrange — an unseeded trending slot means the cache-TTL guard cannot
+    // short-circuit, so the mount thunk must reach the IPC bridge.
+    // Act
+    await renderDashboard({ marketplace: { leaderboard: {} } })
+
+    // 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)
+    expect(mockLeaderboard).toHaveBeenCalledWith({ filter: 'trending' })
+  })
+
+  it('shows a loading skeleton, announced to screen readers, while the trending leaderboard has not loaded yet', async () => {
     // Arrange — no trending cache entry means trendingData is undefined, which
     // the dashboard treats as still loading.
     const { screen } = await renderDashboard({
       marketplace: { leaderboard: {} },
     })
 
-    // Act + Assert
+    // Act + Assert — pulsing rows expose an accessible loading status
     await expect
-      .element(screen.getByText('Loading trending skills...'))
+      .element(screen.getByRole('status', { name: 'Loading trending skills' }))
       .toBeInTheDocument()
   })
 
@@ -203,4 +243,29 @@ describe('MarketplaceDashboard — trending placeholders', () => {
       .element(screen.getByText('No trending skills available'))
       .toBeInTheDocument()
   })
+
+  it('shows an offline notice when the trending fetch failed and nothing is cached', async () => {
+    // Arrange — an errored trending entry with zero cached skills is the
+    // failure state, distinct from both loading and a settled-empty list. The
+    // mount thunk re-fetches errored filters (errors bypass the TTL gate), so
+    // the IPC mock must reject for state to settle back on the error branch
+    // instead of getting stuck on the in-flight skeleton.
+    mockLeaderboard.mockRejectedValue(new Error('network down'))
+    const { screen } = await renderDashboard({
+      marketplace: {
+        leaderboard: {
+          trending: makeLeaderboardData({
+            skills: [],
+            status: 'error',
+            error: 'network down',
+          }),
+        },
+      },
+    })
+
+    // Act + Assert
+    await expect
+      .element(screen.getByText('Trending unavailable'))
+      .toBeInTheDocument()
+  })
 })