New version 0.5.10

You have 0.5.5. Found when this page was made.

What's new:

Write a component as a :::callout … ::: block too; it renders like ```

Run in a terminal:

npx skills update answer-me-with-html -y

Or tell your agent:

Update answer-me-with-html

Home composer — the row under the deck

Lead: The home screen asks "what do you want to make" three times. The deck's Agent mode ▾ lists Swarm, Research, Build, Docs, Sheets and Slides. The pill row under it arms the same modes. The gallery tabs under the pills show the same kinds a third time. The deck stays. The row under it must do a different job.

A

Today: three rows, one question

Home today, desktop 1280 wide

table

| Row | What it shows | Same as || Deck band | Agent mode ▾ · Plugins ▾ · Artifacts ▾ | — || Pill row | Build a site · Make a deck · Research it · Make a sheet · Put a team on it | Agent mode ▾ (Build, Slides, Research, Sheets, Swarm) || Gallery tabs | Docs · Slides · Sites · Sheets | Agent mode ▾ and the pill row |

B

Option 1 — Templates own the row (recommended)

The mode pills go. The gallery tabs move up and become the one row under the deck. "Continue: <last chat>" leads the row when a recent chat exists. Picking a template already arms its mode, so nothing is lost. Research and Team stay one click away in Agent mode ▾.

React · Option 1

C

Option 2 — Pick up where you left off

The row shows your own recent work, not modes: the last chat, the last artifact and the last project. The gallery and its tabs stay below.

React · Option 2

Problem: Artifacts ▾ in the deck already lists recent artifacts, so the "Open" chip repeats it.

D

Option 3 — Real starter sentences

The row shows three full sentences that fill the box when clicked ("Rebuild a site from its URL"). They do not arm a mode. The gallery stays below.

React · Option 3

Problem: the screen keeps three stacked groups (deck, sentences, gallery), so it is still busy.

E

Pick one

All options apply to desktop, the ai.allternit.com phone layout and the m.allternit.com PWA. On the phone the row sits under the deck and the gallery scrolls below it.

Which row goes under the home composer deck?Option 1 — templates own the row, Continue chip first suggestedOption 2 — recent work chipsOption 3 — starter sentences

---
title: Home composer — the row under the deck
template: sheet
---
Lead: The home screen asks "what do you want to make" three times. The deck's **Agent mode ▾** lists Swarm, Research, Build, Docs, Sheets and Slides. The pill row under it arms the same modes. The gallery tabs under the pills show the same kinds a third time. The deck stays. The row under it must do a different job.

## A Today: three rows, one question
![Home today, desktop 1280 wide](/tmp/claude-501/-Users-joe/709f7b0a-7b25-4bfe-a360-bcf20bd7db48/scratchpad/home-before.png)

```table
| Row | What it shows | Same as |
| Deck band | Agent mode ▾ · Plugins ▾ · Artifacts ▾ | — |
| Pill row | Build a site · Make a deck · Research it · Make a sheet · Put a team on it | Agent mode ▾ (Build, Slides, Research, Sheets, Swarm) |
| Gallery tabs | Docs · Slides · Sites · Sheets | Agent mode ▾ and the pill row |
```

## B Option 1 — Templates own the row (recommended)
The mode pills go. The gallery tabs move up and become the one row under the deck. "Continue: <last chat>" leads the row when a recent chat exists. Picking a template already arms its mode, so nothing is lost. Research and Team stay one click away in Agent mode ▾.
```react css=src/design/theme.css title="Option 1" h=420
const Deck = () => (
  <div className="w-full rounded-2xl border border-neutral-200 bg-white">
    <div className="px-4 pt-3 pb-2 text-neutral-400 text-[15px]">Ask anything, or paste something to work through</div>
    <div className="flex items-center gap-3 px-3 pb-3 text-[13px] text-neutral-600"><span className="rounded-lg bg-neutral-100 px-2.5 py-1">+ Add files</span><span>Auto</span><span>Allternit Cloud · Select Model ▾</span><span className="ml-auto size-7 rounded-full bg-neutral-300" /></div>
    <div className="flex items-center gap-4 border-t border-neutral-200 rounded-b-2xl px-4 py-2.5 text-[13px] font-semibold text-neutral-700"><span>◆ Agent mode ⌃</span><span className="text-neutral-300">|</span><span>Plugins ⌃</span><span className="text-neutral-300">|</span><span>Artifacts ⌃</span></div>
  </div>
);
const Card = ({t}) => <div className="rounded-xl border border-neutral-200 bg-white"><div className="h-16 rounded-t-xl bg-neutral-800" /><div className="p-2 text-[12px] font-semibold">{t}</div></div>;
export default function App() {
  const [tab, setTab] = React.useState('Docs');
  return (
    <div className="mx-auto max-w-[560px] p-4 font-sans">
      <Deck />
      <div className="mt-5 flex items-center gap-1 text-[13px]">
        <span className="mr-2 rounded-full border border-neutral-200 px-3 py-1 text-neutral-700">↻ Continue: Q3 pricing notes</span>
        {['Docs','Slides','Sites','Sheets'].map(k => <button key={k} onClick={() => setTab(k)} className={'rounded-md px-2 py-1 ' + (tab===k ? 'bg-neutral-100 text-neutral-900' : 'text-neutral-500')}>{k} <span className="text-[11px] opacity-60">6</span></button>)}
      </div>
      <div className="mt-3 grid grid-cols-3 gap-3">{[1,2,3].map(i => <Card key={i} t={`${tab} template ${i}`} />)}</div>
    </div>
  );
}
```

## C Option 2 — Pick up where you left off
The row shows your own recent work, not modes: the last chat, the last artifact and the last project. The gallery and its tabs stay below.
```react css=src/design/theme.css title="Option 2" h=330
export default function App() {
  return (
    <div className="mx-auto max-w-[560px] p-4 font-sans">
      <div className="w-full rounded-2xl border border-neutral-200 bg-white">
        <div className="px-4 pt-3 pb-8 text-neutral-400 text-[15px]">Ask anything, or paste something to work through</div>
        <div className="flex items-center gap-4 border-t border-neutral-200 px-4 py-2.5 text-[13px] font-semibold text-neutral-700"><span>◆ Agent mode ⌃</span><span className="text-neutral-300">|</span><span>Plugins ⌃</span><span className="text-neutral-300">|</span><span>Artifacts ⌃</span></div>
      </div>
      <div className="mt-5 flex flex-wrap justify-center gap-2 text-[13px] text-neutral-700">
        <span className="rounded-full border border-neutral-200 px-3 py-1.5">↻ Continue: Q3 pricing notes</span>
        <span className="rounded-full border border-neutral-200 px-3 py-1.5">▤ Open: Kickoff deck</span>
        <span className="rounded-full border border-neutral-200 px-3 py-1.5">▢ Project: Website refresh</span>
      </div>
      <div className="mt-6 flex gap-3 text-[13px] text-neutral-500"><span className="rounded-md bg-neutral-100 px-2 py-1 text-neutral-900">Docs</span><span>Slides</span><span>Sites</span><span>Sheets</span></div>
    </div>
  );
}
```
Problem: Artifacts ▾ in the deck already lists recent artifacts, so the "Open" chip repeats it.

## D Option 3 — Real starter sentences
The row shows three full sentences that fill the box when clicked ("Rebuild a site from its URL"). They do not arm a mode. The gallery stays below.
```react css=src/design/theme.css title="Option 3" h=300
export default function App() {
  return (
    <div className="mx-auto max-w-[560px] p-4 font-sans">
      <div className="w-full rounded-2xl border border-neutral-200 bg-white">
        <div className="px-4 pt-3 pb-8 text-neutral-400 text-[15px]">Ask anything, or paste something to work through</div>
        <div className="flex items-center gap-4 border-t border-neutral-200 px-4 py-2.5 text-[13px] font-semibold text-neutral-700"><span>◆ Agent mode ⌃</span><span className="text-neutral-300">|</span><span>Plugins ⌃</span><span className="text-neutral-300">|</span><span>Artifacts ⌃</span></div>
      </div>
      <div className="mt-5 flex flex-col gap-1.5 text-[13px] text-neutral-600">
        {['Rebuild a site from its current URL','Brief me on a company before a call','Turn this document into 8 slides'].map(s => <span key={s} className="rounded-lg px-3 py-1.5 hover:bg-neutral-100">→ {s}</span>)}
      </div>
    </div>
  );
}
```
Problem: the screen keeps three stacked groups (deck, sentences, gallery), so it is still busy.

## E Pick one
All options apply to desktop, the ai.allternit.com phone layout and the m.allternit.com PWA. On the phone the row sits under the deck and the gallery scrolls below it.
```ask
Which row goes under the home composer deck?
* Option 1 — templates own the row, Continue chip first
- Option 2 — recent work chips
- Option 3 — starter sentences
```