USM

Appearance

usm/mkt-language-tabs [planned] ​

Marketing site language support section — clickable logo carousel showing 12 language logos. Click a language to reveal its frameworks and route detection example. Full grid with all languages/frameworks goes in help docs.

Status: planned

Intent ​

The marketing site needs to communicate that USM scans 12 languages and 30+ frameworks. A logo carousel shows all 12 language logos at once (breadth), and clicking one reveals its frameworks + route detection code example (depth). Logos provide instant recognition. Full reference grid goes in help docs for completeness.

Decisions ​

Decision: Use a clickable logo carousel, not tabs

Rationale: Tabs hide breadth (only one visible at a time). A logo row shows all 12 languages instantly. Clicking reveals frameworks + code example for that language. Compact, interactive, visual.

Alternatives considered:

  • Tabbed interface (one tab per language) — rejected: Hides breadth — visitor only sees one language at a time
  • Full grid (all languages and frameworks visible) — rejected: Too much information for marketing — better in docs

Consequences: Need language logos (Simple Icons) and a carousel component

simple-icons [accepted] ​

Decision: Use Simple Icons (simpleicons.org) for language and framework logos

Rationale: Simple Icons has 3000+ monochrome SVG brand icons including all 12 languages and ~18 of the 30+ frameworks. Free, open source, SVG (crisp at all sizes). Monochrome by default — perfect for dark theme.

Consequences: Less popular frameworks (chi, gin, Axum, Crow, etc.) won't have logos — show as text chips

full-grid-in-docs [accepted] ​

Decision: Full language/framework reference grid goes in help docs, not marketing site

Rationale: Marketing site should be concise (carousel). Help docs should be comprehensive (full grid with all 12 languages and all 30+ frameworks). This matches the docs vs marketing split.

Consequences: New help docs page: 'Language Support' with full grid

Flows ​

Between Token Comparison and Tool Logos sections. 12 language logos in a horizontal row. Default: TypeScript selected. Click a logo to reveal frameworks + route detection code example.

  1. render → section heading 'Scans 12 languages, 30+ frameworks'
  2. render → row of 12 language logos (Simple Icons SVGs, 50% opacity, selected at 100%)
  3. render → active language: framework name chips (logo where available, text where not)
  4. render → active language: route detection code example in mono font
  5. observe → user clicks a logo → content updates to that language

Render full language grid in help docs (render-docs-grid) ​

New page in help docs: 'Language Support'. Full grid showing all 12 languages, all 30+ frameworks, manifest file, and route detection pattern for each.

  1. generate → language-support.md from multi-lang-scan spec data
  2. render → grid: language, manifest file, frameworks, route pattern
  3. write → .usm-workspace/docs/language-support.md

Contracts ​

All 12 language logos visible at once in the carousel

Acceptance criteria:

  • [ ] 12 language logos in a horizontal row
  • [ ] Logos at 50% opacity, selected at 100%
  • [ ] Default: TypeScript selected
  • [ ] Clicking a logo updates frameworks + code example below

framework-display ​

Frameworks shown as chips with logo where available

Acceptance criteria:

  • [ ] Frameworks with Simple Icons logo: logo + name
  • [ ] Frameworks without logo: name only as text chip
  • [ ] All frameworks for the selected language visible

code-example-per-language ​

Route detection code example shown for each language

Acceptance criteria:

  • [ ] TypeScript: app.get('/users', handler)
  • [ ] Python: @app.get('/users')
  • [ ] Go: r.GET('/users', handler)
  • [ ] Rust: .route('/users', get(handler))
  • [ ] Java: @GetMapping('/users')
  • [ ] C#: [HttpGet('users')]
  • [ ] Ruby: get '/users' do
  • [ ] PHP: Route::get('/users', ...)
  • [ ] Elixir: get('/users', UserController, :index)
  • [ ] Swift: routes.get('users')
  • [ ] Scala: path('users') { get { handler } }
  • [ ] C++: CROW_ROUTE(app, '/users')

docs-grid-comprehensive ​

Help docs page lists all languages and frameworks

Acceptance criteria:

  • [ ] Table with columns: Language, Manifest, Frameworks, Route Pattern
  • [ ] All 12 languages present
  • [ ] All 30+ frameworks listed

Carousel works on mobile

Acceptance criteria:

  • [ ] Logo row scrolls horizontally on mobile
  • [ ] Selected logo clearly highlighted
  • [ ] Code example wraps on small screens

Tests ​

all-logos-visible ​

Given:

  • page_loaded: true

Then:

  • assertion: 12 language logos visible in carousel
  • assertion: TypeScript selected by default

click-to-switch ​

Given:

  • page_loaded: true

Then:

  • assertion: clicking Python logo shows FastAPI, Flask, Django
  • assertion: code example updates to @app.get syntax

mobile-scroll ​

Given:

  • mobile_viewport: true

Then:

  • assertion: logo row scrolls horizontally
  • assertion: selected logo visible

docs-page-generated ​

Given:

  • generate_run: true

Then:

  • assertion: language-support.md exists in docs
  • assertion: all 12 languages in table

Implementation ​

  • Primary: web/src/app/page.tsx
  • Test code status: none

See Also ​

  • usm/cli-multi-lang-scan
  • usm/gen-help-reference