| name | opention |
| description | Build the Opention Notion clone using loop engineering. Read STATE and ROADMAP first; verify before marking milestones done. |
Opention — Agent Skill
Educational Notion clone. Follow loop engineering: read memory → implement smallest slice → verify independently → update STATE.
Before every session
- Read
docs/STATE.md — current phase and next task
- Read
docs/ROADMAP.md — find the first incomplete milestone
- Read
docs/VERIFY.md — done signal for that milestone
Stack
| Layer | Choice |
|---|
| Framework | Next.js 16 (App Router) in web/ |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Editor (Phase 2+) | TipTap |
| Database (Phase 3+) | SQLite + Drizzle ORM |
Conventions
- App code lives under
web/src/
- Components in
web/src/components/ — one component per file, kebab-case filenames
- Use
"use client" only when hooks or browser events are required
- Keep phases incremental; do not skip ahead on ROADMAP
- Match Notion aesthetics: warm grays (
#37352f, #f7f6f3, #e9e9e7)
Verification (required)
cd web && npm run verify
Must pass before updating ROADMAP checkboxes or STATE "Completed" section.
After every session
Update docs/STATE.md:
- Current phase
- What was completed
- What's next
- Any failures with error snippets
Out of scope
Auth, billing, real-time collaboration, Notion import — unless ROADMAP explicitly adds them.
