# HintDeck install (Claude Code skill)
This is the Claude Code skill format for installing HintDeck. The substance mirrors AGENTS.md — same product, same install flow. See https://hintdeck.com/AGENTS.md for the detailed framework-specific guidance.
## When to use this skill
Use when the user asks something like:
- "install hintdeck on this site"
- "add hintdeck"
- "set up tooltips with hintdeck"
- "wire in my hintdeck account"
Do NOT use this skill to author tooltip content. Tooltips are managed in the HintDeck dashboard, not in the user's codebase.
## Required input
The user's HintDeck public key. Format: `hd_pk_` + 16 hex chars (e.g. `hd_pk_72008b26aeb51f79`). If absent, ask once and stop until provided. Never invent.
## Step 1 — detect the framework
Read the project root. Look for one of:
- `next.config.{ts,mjs,js}` → Next.js (check `app/` vs `pages/` for router)
- `astro.config.{ts,mjs,js}` → Astro
- `remix.config.{ts,mjs,js}` or `app/root.tsx` → Remix
- `svelte.config.{ts,js}` → SvelteKit
- `vite.config.{ts,js}` + `index.html` → Vite vanilla
- No framework config → plain HTML
If none match, ask the user what platform they're on.
## Step 2 — locate the layout file
| Framework | File | Insertion point |
|---|---|---|
| Next.js (App) | `app/layout.tsx` | Inside ``, after `{children}`, using `next/script` `strategy="afterInteractive"` |
| Next.js (Pages) | `pages/_document.tsx` | Inside ``, after `` |
| Astro | `src/layouts/*.astro` (the global layout) | Near bottom of `` |
| Remix | `app/root.tsx` | Inside ``, after `` |
| SvelteKit | `src/app.html` | Inside ``, after `%sveltekit.body%` |
| Vite vanilla | `index.html` | Inside ``, near bottom |
| Squarespace/Webflow/Framer | (no-code) | Tell user to paste in Footer Code panel — do NOT edit a codebase |
## Step 3 — write the snippet
```html
```
Substitute `USER_PUBLIC_KEY` with the user's actual key.
For Next.js use `next/script` instead:
```tsx
import Script from "next/script";
```
## Step 4 — confirm and stop
Run a typecheck if applicable. Tell the user:
> Installed HintDeck. Deploy to see it live. Then go to https://app.hintdeck.com to add tooltips visually — click any element on your site, write the tooltip, publish. New tooltips appear within 60 seconds.
## Hard rules
- One script tag per site. Do NOT install multiple times.
- Always `async`. Never blocking.
- Always before ``. Never in ``.
- Never `npm install` anything — there is no HintDeck npm package.
- Never write tooltip text in code.
- Never invent a public key.
## Reference
- Full per-framework guide: https://hintdeck.com/AGENTS.md
- Dashboard: https://app.hintdeck.com
- Support: hello@hintdeck.com