# Angular Template Prompts — How to Use
## Standard-Driven HTML Generation for Claude Code

---

## The Core Principle

These prompts do NOT prescribe HTML markup.
They tell Claude Code **what content to render** and **which of your
existing files to learn the markup patterns from**.

Claude Code reads your reference file → learns your components,
class names, spacing patterns → applies them to the new template.

Result: every CollabSpace template looks like it was written
by the same developer who wrote your other 40 modules.

---

## How to Run Each Prompt

```
1. Open Claude Code in the Angular project root
2. Say: "Read CLAUDE.md first."
3. Then: "Read @[your reference file] to understand our template patterns."
4. Then: "Now implement @collabspace-prompts/prompts/templates/T08_toolbar.md"
```

Or in one instruction:
```
"Read CLAUDE.md. Then read @src/app/modules/[module]/[reference-file].html
as our template standard. Then implement
@collabspace-prompts/prompts/templates/T08_toolbar.md"
```

---

## Placeholder Tags — Replace Before Running

Every prompt contains placeholder tags you must fill in before
handing to Claude Code:

```
[REF:LIST_PAGE]      → path to your list/grid page template
[REF:DETAIL_PAGE]    → path to your form/detail page template
[REF:DASHBOARD]      → path to your dashboard/overview page template
[REF:MODAL]          → path to your modal/dialog component template
[REF:FORM_FIELD]     → path to a form with fields, validation, errors
[REF:TABLE]          → path to a page with a data table
[REF:CARD]           → path to a page using card/panel wrappers
[REF:SIDE_PANEL]     → path to a slide-in or side panel component
[REF:CHAT_OR_PANEL]  → path to a floating panel or notification area
```

You only need to fill in the ones used in each specific prompt.
If you don't have an equivalent, delete that line from the prompt.

---

## Template Prompts in This Folder

| File | Component | Page Type | Key References Needed |
|------|-----------|-----------|----------------------|
| T08_toolbar.md | Floating Toolbar | Floating overlay | [REF:MODAL] or any overlay |
| T09_dashboard.md | Session Dashboard | List/overview page | [REF:DASHBOARD] + [REF:LIST_PAGE] |
| T10_create_session.md | Create Session Form | Form page | [REF:DETAIL_PAGE] + [REF:FORM_FIELD] |
| T11_detail_panel.md | Detail Side Panel | Slide-in panel | [REF:SIDE_PANEL] + [REF:DETAIL_PAGE] |
| T12_chat_panel.md | Chat Panel | Floating panel | [REF:CHAT_OR_PANEL] |
| T13_cursor_overlay.md | Cursor Overlay | Full-viewport overlay | minimal — no reference needed |
| T14_invite_modal.md | Invite Modal | Modal/dialog | [REF:MODAL] + [REF:FORM_FIELD] |
| T15_session_card.md | Session Card | Reusable card | [REF:CARD] + [REF:LIST_PAGE] |
| T16_config_page.md | Config Page | Settings/admin form | [REF:DETAIL_PAGE] + [REF:FORM_FIELD] |

---

## What Claude Code Will Do

For each prompt it will:

1. Read your reference file(s)
2. Identify: wrapper components, button variants, input components,
   error display, loading states, empty states, table/list markup
3. Read the content spec in the prompt (what data to show)
4. Read the signals/bindings spec (what TS properties to bind to)
5. Generate the .html file using YOUR components and patterns
6. Generate/update the .scss file with only component-specific overrides
   (no re-styling of things your design system already handles)

---

## What to Do If Claude Code Invents Patterns

If you see Claude Code using raw `<button>` where you have a `<gb-button>`
or inventing CSS classes, add this line to your instruction:

```
"If you are unsure whether a shared component exists for something,
check @src/app/shared/components/ before using a raw HTML element."
```