# Help guide: how this site works

> Instructions for the AI agent reading this file:
> 1. This file is a complete guide, written for a person and for you. Read all of it before you change anything.
> 2. Follow the steps in order. Treat each prompt block as the exact instruction to carry out, then stop and check the result before the next step.
> 3. Use the stack the guide names. Do not swap libraries or add new ones unless a step tells you to.
> 4. The attachments at the end are project context: decisions, conventions and rules. Keep them in mind for every step and follow their rules.
> 5. When something in the guide does not match the project in front of you, say so and ask before improvising.

How guides unlock, what is inside each one, and how the attachments work with nemu. Free to read, no account needed.

Source: https://courses.dragos.cc/courses/help

---

Everything on this site in one page: how guides unlock, what is inside each one, and what the attachments are for. This guide is free, so you can read it without an account.

## How guides unlock

Every guide belongs to one reel. To unlock it:

1. Comment on the reel. The caption tells you what to write.
2. Open the link I send you in your DMs. It is private and tied to your Instagram account.
3. Create a free account, or sign in if you already have one. The guide unlocks on your account and stays unlocked.

You only link Instagram once. After that, every guide you unlock from a reel lands on the same account, and the **Guides** page marks it **Unlocked**.

> Opened the link on your phone but signed up on your laptop? Open the same link again while signed in and it links to that account.

## What is inside a guide

Each guide follows the same order, so you always know where to look.

| Part | What you get |
| --- | --- |
| The prompt | The exact prompt behind the result, ready to copy |
| The steps | What to ask next after the first output, in order |
| The stack | The libraries used and why each one is there |
| The files | Source files to download, when the build has them |
| Attachments | Context files for nemu, so your agent starts with the build |

## Copying the prompt

Prompts sit in a block like this one. The **Copy prompt** button in its corner copies the whole thing.

```prompt
Build a full-screen hero section in Next.js. The first frame is already moving: a slow animated gradient behind a huge headline that fills the width of the screen. The headline animates in word by word from below. Dark theme, one accent colour, no stock photos.
```

Commands and code get their own block with syntax colours:

```bash
npx create-next-app@latest my-site --ts --tailwind
cd my-site && npm run dev
```

### Follow-ups

The first output is rarely the final one. Each guide lists the follow-up prompts I used, one at a time, in the order that worked. Send them one by one instead of all at once, so you can see what each one changed.

## Files and attachments

Guides with a build have a **Download the files** button at the top. That is the source of the finished site.

Attachments are smaller files listed at the end of a guide, under **Attachments**. They are context for nemu, not code: the decisions, the stack and the file map of the build, written as notes an agent can read.

## Keep the context between sessions

Coding agents forget the project the moment a session ends. The next morning you explain the stack, the decisions and what is left again before any real work starts.

[nemu](https://nemu.cc/?ref=dragos) Context keeps short notes about each project: decisions, conventions, gotchas and a handoff saying where the work stopped. Any agent you connect reads them when a session starts, on any machine. It is included on the free plan.

To use the attachments from a guide:

1. Install the nemu CLI and connect your agent, for example with `nemu setup claude`.
2. Download the attachments from the guide.
3. Add them to a vault in your nemu workspace, or paste them into your agent as the first message.

The guides work fine without nemu. The attachments are a shortcut, not a requirement.

## Your account

- **No email verification.** Sign up with any email and password and you are in.
- **No spam.** Your email is used for signing in, nothing else.
- **Linked Instagram accounts** show on your account page, with any username changes.

## When something goes wrong

- **The link says it does not exist anymore.** Comment on the reel again and you get a new one.
- **The link was already used by another account.** Each link unlocks one account. Sign in to the account you used the first time.
- **A guide still shows Locked.** Open the link from your DMs again while signed in to the account you want it on.

---

## Source files

The finished source for this build can be downloaded from https://courses.dragos.cc/courses/help.

---

## Attachments

### Project context

Decisions, stack and file map of the example build, written as notes an agent can read.

```md
# Project context: hero section

## What this is
A single full-screen hero section, animated from the first frame, built in Next.js with Tailwind.

## Decisions
- One accent colour on a dark background. No gradients behind text other than the hero field.
- The headline is the hero: huge, full width, animated word by word.
- Motion respects prefers-reduced-motion and pauses when the tab is hidden.

## Stack
- Next.js (App Router), TypeScript, Tailwind CSS.
- No animation library unless the effect needs one.

## Where things live
- app/page.tsx renders the hero.
- components/hero.tsx holds the headline and the background.

## Next step
Check the hero at 390, 1024 and 1440 pixels wide and fix overflow.
```

### Agent rules

The rules the agent should follow while working on the build.

```md
# Agent rules for this build

- Change only what was asked.
- Keep the first frame moving: nothing static or empty at load.
- Text on the hero must be readable in under one second on a phone.
- Test at 390, 1024 and 1440 pixels wide before saying something is done.
- Respect prefers-reduced-motion for every animation.
```