feat: adopt frontend-design (Apache 2.0 fork) + progressive-disclosure extensions

Forked verbatim from anthropics/skills/skills/frontend-design (Apache 2.0).
LICENSE.txt preserved. Upstream SKILL.md prose (aesthetic guidance,
archetype list, anti-pattern callouts) kept intact.

Extensions added (clearly marked, load progressively — base SKILL.md
stays lean for simple cases):

SKILL.md:
  - Description extended with explicit negative triggers: narrow
    maintenance (single CSS bug, dependency upgrade, a11y-only retrofit),
    operational contexts where stakeholder has specified "minimal,
    functional, no creative direction," backend / API work, non-web UIs
    (mobile native, desktop, terminal), and refactoring without visible
    design component.
  - New "Workflow" section at the end of SKILL.md: four phases (intake,
    commitment, build, review) with pointers to reference files. Simple
    component tweaks skip the workflow; non-trivial redesigns walk it.
  - New "References" section: table mapping file → load-when condition.
  - Attribution footer marking upstream source + what's locally added.

references/workflow.md (~150 lines)
  Intake questions (purpose, audience, operational context, functional
  priority, technical constraints, brand references, success criteria).
  Commitment step (archetype pick, trade-offs, font pairing, palette,
  motion, layout as one-line decisions). Build reminders. Review
  pointer. Guidance on when to skip phases.

references/accessibility.md (~200 lines)
  WCAG AA contrast thresholds + practical check guidance. Keyboard
  navigation + focus management. Semantic HTML + ARIA rules. Reduced-
  motion CSS snippet. Smoke checklist. Operational-context note for
  defense / ISR work.

references/responsive.md (~160 lines)
  Mobile-first vs desktop-first decision. Named breakpoints (Tailwind-
  style) vs magic pixels. Container queries. Aesthetic translation
  table — how each archetype handles small-screen scaling. Responsive
  typography with clamp(). Operational-dashboard note: desktop-primary
  is a legitimate product decision.

references/design-review.md (~170 lines)
  Archetype check (does the build read as what was committed to?).
  Anti-pattern grep for fonts, palette, layout, motion, backgrounds,
  components. Code-quality-match check (ornate design + lazy code =
  failure). Performance sanity. Convergence check (if last 3 builds
  all used the same archetype, break the pattern). The one-sentence
  test for memorability.

references/rationale-template.md (~160 lines)
  Template for design-rationale.md alongside the build. Nine sections
  (purpose, archetype, locked decisions, deliberately absent,
  accessibility, responsive, implementation, open questions,
  references). Filled example using a DeepSat SOCOM demo landing page
  to show density and specificity.

Structure matches Anthropic's own pdf / docx / webapp-testing pattern
(SKILL.md entry + references/ for progressive disclosure). Makefile
SKILLS extended; make install symlinks globally.

Adoption caveat resolved: name kept as `frontend-design` (not renamed
to ui-design) — "frontend" signals scope (web code, not mobile /
desktop / terminal UIs), upstream parity preserved for attribution.

1 files changed, 90 insertions, 0 deletions

diff --git a/frontend-design/references/responsive.md b/frontend-design/references/responsive.md
new file mode 100644
index 0000000..18be11f
--- /dev/null
+++ b/frontend-design/references/responsive.md
@@ -0,0 +1,90 @@
+# Responsive
+
+Mobile is the dominant traffic profile for consumer web; desktop dominates operational and enterprise contexts. Commit to a primary viewport early — retrofitting responsive behavior into a desktop-only design is more expensive than building with breakpoints from the start.
+
+## Decision: Mobile-First or Desktop-First
+
+**Mobile-first** (build the small-screen layout first, scale up):
+- Consumer web, marketing, e-commerce, public-facing apps
+- Progressive enhancement ethos — base experience works everywhere, more features at larger sizes
+- CSS reads as `/* default (mobile) */` → `@media (min-width: X)` overrides
+- Simpler to keep working on constrained devices
+
+**Desktop-first** (design for a big screen, gracefully degrade):
+- Operational dashboards, ISR displays, pro tools, internal enterprise apps
+- Information density is the point; mobile is a fallback or unsupported
+- CSS reads as `/* default (desktop) */` → `@media (max-width: X)` overrides
+- Harder to keep working when the small screen is an afterthought
+
+Pick one deliberately. Hybrids (different viewport designs for "phone / tablet / desktop" with no progression ethos) usually produce three mediocre layouts rather than one good one.
+
+## Breakpoints
+
+Use **named, consistent** breakpoints — not magic numbers scattered across files. A design-system variable keeps them coherent.
+
+**Typical set** (Tailwind's values are reasonable defaults):
+
+| Name | Width | Use |
+|---|---|---|
+| sm | 640px | Large phones, phablets |
+| md | 768px | Tablets, small laptops |
+| lg | 1024px | Laptops |
+| xl | 1280px | Desktops |
+| 2xl | 1536px | Large desktops, wide monitors |
+
+**Don't** introduce a breakpoint at an arbitrary exact pixel. If content reflows badly at 820px, push `md` up to 840px or decide the design needs an actual rearrangement at that size — not a pixel workaround.
+
+**Container queries** (`@container`) are now broadly supported and are often a better answer than viewport breakpoints for components that live in varied contexts. A card that's 300px wide in a sidebar and 900px wide on a detail page should branch on *its* size, not the viewport's.
+
+## Aesthetic Translation by Archetype
+
+Archetypes don't all respond to screen size the same way. Match the translation strategy to the direction chosen:
+
+| Archetype | Small-screen translation |
+|---|---|
+| Maximalist chaos | Simplify, don't dilute. Fewer layered effects; preserve the rule-breaking layout feel. |
+| Brutally minimal | Scales naturally. Ensure spacing scales with viewport — "generous" at 1920px ≠ "generous" at 375px. |
+| Retro-futuristic | Stacked vertical scroll with preserved detail. Don't lose the motif elements (grids, glows, terminal text) even if resized. |
+| Organic / natural | Reflow gracefully; the aesthetic comes from shape and color, not grid. Near-free on mobile. |
+| Luxury / refined | Preserve whitespace proportions. The whitespace *is* the design. Don't cram. |
+| Playful / toy-like | Often translates well; the whimsy is in shapes/colors/animations, not layout. |
+| Editorial / magazine | Hardest. Magazine spreads assume two-page layouts. Single column on mobile, but preserve type hierarchy and whitespace choreography. |
+| Brutalist / raw | Scales naturally. Monospace and visible-grid aesthetics don't fight small screens. |
+| Art deco / geometric | Retain the geometric motifs as accents; simplify complex patterns. |
+| Soft / pastel | Reflow easily. Watch contrast on smaller screens where brightness shifts. |
+| Industrial / utilitarian | Operational dashboards often unsupported on mobile — that's a legitimate product decision. If mobile is required, prioritize scanning over interaction. |
+
+## Responsive Typography
+
+- Use `clamp(min, preferred, max)` for fluid type that never breaks the layout:
+  ```css
+  h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
+  ```
+- Line length: aim for 45-75 characters per line at the primary viewport. On mobile, 30-40 is fine for body text.
+- Line height scales inversely — tighter on headlines, looser on body, typically `1.2` → `1.6`.
+
+## Images and Media
+
+- `max-width: 100%` is the baseline; `object-fit: cover` for images that need to fill a container at different aspect ratios
+- Use `<picture>` for art direction (different crops per viewport), not just different sizes
+- `srcset` for resolution switching; browsers handle the choice automatically
+- Hero backgrounds at 4K don't belong on mobile — deliver appropriately sized assets
+
+## Operational Dashboard Note
+
+For DeepSat-style ISR / operational work: the primary viewport is almost always a large desktop monitor. Mobile is unsupported. Don't pretend otherwise. If mobile is a declared requirement:
+
+- Prioritize *read-only* scanning over interactive manipulation
+- Key metrics first, secondary details collapsed behind interactions
+- Assume poor bandwidth + intermittent connectivity — data-sparing matters
+- Don't split the canonical desktop layout 1:4 onto mobile tiles — design a separate layout with the same information priorities
+
+## Smoke Checklist
+
+- [ ] Primary viewport decided and documented in the rationale
+- [ ] Named breakpoints — no magic pixel values in CSS
+- [ ] Works at `sm`, `md`, `lg`, `xl` tests (at minimum)
+- [ ] Typography scales fluidly or has tuned ramps per breakpoint
+- [ ] Images use appropriate sizes per viewport
+- [ ] At 200% browser zoom, layout still holds
+- [ ] No horizontal scroll (unintentional) on any common viewport