RonanCodes/skills/about-page

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

1. Hero, what it is. One short paragraph: what the app does and who it is for. Lead with the value, not the tech.
2. Why it exists. The problem it solves, one short paragraph.
3. The stack. A compact table or list: layer · tech · one-line note. Be honest about what is live vs in progress.
4. 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.
5. 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}')], ... };

Related

• /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.