about-page

name: about-page description: Add a standard About page to any web app, what it is, the tech stack, and an FAQ, wired into a footer link with a sticky footer. Built with Spartan + Tailwind (the canonical component layer) and falls back to semantic HTML so it ships reliably. Use whenever building, polishing, or shipping an app, every app should have one. Triggers on "add an about page", "about page", "footer about link", or as a standard step in app build/polish. category: frontend argument-hint: [--app ] [--no-faq] allowed-tools: Bash(npx ) Bash(npm ) Bash(nx ) Bash(git ) Read Write Edit

About page

Every app gets an About page. It is the page that tells a visitor what the thing is, what it is built on, and answers the obvious questions, and it is a cheap, high-trust signal that the app is real and cared for. Add it as a standard step when building or polishing any app.

What it must contain

Hero, what it is. One short paragraph: what the app does and who it is for. Lead with the value, not the tech.
Why it exists. The problem it solves, one short paragraph.
The stack. A compact table or list: layer · tech · one-line note. Be honest about what is live vs in progress.
FAQ. Three to five real questions a visitor would actually ask (what is this data, is it real, do you store anything about me, why this approach). Accordion style. Skip with --no-faq.
A back link to the main screen.

Keep it plain and specific (honour /ro:write-copy: no em-dashes, no AI-tell filler). The About page is the one place you state the honest scope, so say what is real and what is coming. House defaults apply: light mode by default (dark via the app's toggle), and a little cheek in the FAQ answers is welcome (it is the page where personality is safest).

How to wire it

A route at /about (its own component / route file).
A footer link to it, present on every screen.

A sticky footer: the footer sits at the bottom even on short pages. The reliable pattern is a flex column at full height:

<div class="min-h-screen flex flex-col">
  <header>…</header>
  <main class="flex-1">…</main>
  <footer>… <a href="/about">About</a></footer>
</div>

UI: Spartan + Tailwind

The canonical component layer is Spartan (spartan-ng) + Tailwind. Use Spartan's helm components where they fit:

FAQ → hlm-accordion.
The stack list → hlm-card.
Buttons / links → hlm-button.

If Spartan is not yet wired in the app, use semantic HTML + Tailwind so the page still ships, and leave a note to upgrade the FAQ to hlm-accordion. A native <details>/<summary> styled with Tailwind is a perfectly good accordion with zero dependencies:

<details class="group rounded-xl border px-5 py-3.5">
  <summary class="cursor-pointer list-none flex items-center justify-between font-medium">
    {{ question }}
    <span class="transition-transform group-open:rotate-45">+</span>
  </summary>
  <p class="mt-3 text-sm">{{ answer }}</p>
</details>

Framework notes

Angular (Nx): a standalone About component + a route in app.routes.ts; the root component becomes the layout shell (header + <router-outlet> + footer). Use routerLink for the footer link.
TanStack Start / React: a routes/about.tsx route + a shared layout component with the footer; <Link to="/about">.
Astro: src/pages/about.astro + the shared layout footer.

Tailwind gotcha (Nx monorepos)

In an Nx (or any non-root-app) workspace, set the Tailwind content glob absolute to the config file, or Tailwind scans the wrong directory and purges every utility (you get a tiny base-only stylesheet and an unstyled page):

const { join } = require('path');
module.exports = { content: [join(__dirname, 'src/**/*.{html,ts}')], ... };

/ro:app-polish — the broader pre-launch polish pass; the About page is one of its checks.
/ro:enterprise-stack, /ro:new-tanstack-app — app scaffolders; add the About page as a standard step.
/ro:write-copy — the voice rules the About copy must follow.