Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
173 changes: 173 additions & 0 deletions .aimee/skills/aceternity-template-sites/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
---
name: aceternity-template-sites
description: "Use when rebranding Aceternity/Next marketing template zips."
version: 1.1.0
author: Hermes
license: MIT
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [aceternity, nextjs, marketing, wireframe, ia, fumadocs, template, brand]
related_skills: [claude-design, popular-web-designs, design-md, docs-nextjs]
---

# Aceternity / Next marketing template → brand site

Use when the user drops an **Aceternity UI** (or similar Next.js + Tailwind + Motion) template zip and wants a **real multi-page brand website** with IA, wireframe, blog, and rebranded shell — not a one-off HTML mock.

Pair with:
- **`claude-design`** for standalone HTML wireframes / visual taste
- **`popular-web-designs`** only if matching a known brand look (usually skip when the template *is* the system)
- **`docs-nextjs`** for Next App Router edge cases

## Default project layout

```text
/root/<brand>-web/ # or user-chosen root
template-src/ # untouched unzip of purchased template
site/ # working copy (copy of React/ Next app)
docs/SITE-ARCHITECTURE.md # IA, sitemap, section map, phases
wireframes/*.html # interactive page picker + section stacks
README.md
```

Never edit only inside the zip extract without a clean working copy.

## Workflow (do in order)

1. **Inventory the template**
- Unzip; find `package.json`, `app/` routes, `components/`, `content/blog/`
- List existing routes (often `/`, `/work`, `/products`, `/pricing`, `/blog`, `/blog/[id]`)
- Note deps: `motion`, `fumadocs-mdx`, `@calcom/embed-react`, Tailwind 4, etc.

2. **Brand brief → sitemap (10–15 pages + blog)**
- Primary nav ≤ 6 items + one CTA
- Map pillars of the product to routes (don’t force template labels)
- Write `docs/SITE-ARCHITECTURE.md`: audience, funnel, page goals, template→page component map, phases
- Flag open decisions (public pricing? Cal vs form? docs in-repo?)

3. **Interactive wireframe first**
- Single HTML file: sidebar of all pages, browser chrome mock, section blocks, component reuse notes, P0/P1 priority
- This is the planning artifact the user can click — ship it before deep copy polish

4. **Scaffold working app**
- `cp -a template-src/.../React site` (or the template’s Next root)
- `npm install`
- Prefer **`--webpack`** for dev/build when fumadocs-mdx is present (see Pitfalls)

5. **Brand shell (P0) before pretty pixels**
- `lib/seo.ts` → name, description, url, twitter
- Add `lib/brand.ts` early: `email`, `calLink` (`NEXT_PUBLIC_CAL_LINK`), social URLs, tagline — single source for CTAs
- `layout.tsx` metadata from `siteConfig`
- `navbar.tsx` → new routes + CTA label; logo links home
- `footer` → Product / Explore / Company / Legal real hrefs
- Hero eyebrow + H1 + sub + watermark wordmark
- `Button`: default “Get started”; accept optional `href` (e.g. `/contact`); Cal uses `brand.calLink` and **falls back to `/contact`** if embed fails

6. **Routes**
- Keep template pages that map cleanly (`work`, `pricing`, `blog`)
- Add App Router stubs for new pillars with a shared `PageShell` (header + lead + section cards + optional FAQ)
- Legacy routes (`/products`) → `redirect()` to canonical (`/platform`) when renamed

7. **Phase 1 full copy pass (do not leave agency residue)**
- After shell is up, **same session if possible**, retheme high-visibility agency strings:
- Bento card titles/bodies · comparison header/rows/labels · pricing tiers · FAQ Q&A · About founder strip · Products/Acebuilder hero · metrics blurb · FAQ CTA · blog sidebar CTA · testimonials/feedbacks buttons
- Grep for `Aceternity|Chat with|No Calls|contact@aceternity` until **zero hits** in `site/`
- Pricing: name tiers for the product (e.g. Spark / Nexus / Eternal), not “Website Components”
- Soft social proof only — no fake celebrity quotes or invented metrics
- Contact: mailto form OK for v1; document Cal env var on the page

8. **Blog**
- Keep fumadocs MDX pipeline; match **full frontmatter schema** from `source.config.ts` (date, timeToRead, author*, previewImage, labels)
- Prefer **batch-replacing** sample agency MDX once shell exists (delete samples + write brand posts) rather than leaving residue for “later”
- 4–6 seed posts covering product pillars beat one orphan draft

9. **Pro blocks (optional parallel)**
- While Pro session is live, skim `/blocks/*` and write `docs/PRO-BLOCKS-ROADMAP.md` (which categories map to which IA pages)
- Do not bulk-dump the library; pull blocks page-by-page when fidelity demands
- Browser cookies can drop between navigations — re-check session before assuming still logged in

10. **Verify**
- `npm run build` (webpack scripts) after contact/form changes too
- `npm run dev -p <port>` and curl every route for 200
- Grep HTML for brand strings; grep source for leftover agency vendor name

11. **Report**
- Paths table, sitemap, what’s stub vs polished, blockers (Pro login, assets, Cal)

## Aceternity Pro / codeblocks

- Template **zip = full page source** for that template; enough to rebrand and ship structure
- Pro portal login needs **user credentials or an already-authenticated browser session** — never invent passwords
- If logged out: continue from zip; list which extra blocks would help later
- Do not block the IA/wireframe/shell on Pro access

### Magic-link login (NextAuth on ui.aceternity.com)

UI form typing is flaky in headless/automation browsers (value clears, no toast). Prefer the **API path in the same browser session**, then have the user paste the email link:

1. Open `https://ui.aceternity.com/login` (establishes cookies).
2. In-page JS:
- `GET /api/auth/csrf` → `csrfToken`
- `GET /api/auth/providers` → email provider id is **`nodemailer`** (not `email`)
- `POST /api/auth/signin/nodemailer` as `application/x-www-form-urlencoded` with:
- `email`, `csrfToken`, `callbackUrl=https://ui.aceternity.com/`, `json=true`
- `credentials: 'include'`
3. Success redirect: `/api/auth/verify-request?provider=nodemailer&type=email` (“Check your email”).
4. User pastes the full callback URL from their inbox into chat; **navigate that URL in the same browser** (token is single-use).
5. Confirm session: `GET /api/auth/session` → look for `user.email`, `user.isAllAccess`, `user.isLifetime`, `user.licenseType`.
6. Header should show **Orders** + email (not Login).

Details: `references/aceternity-pro-login.md`

## Component reuse map (Productized Agency pattern)

| Template piece | Typical brand use |
|----------------|-------------------|
| `Hero` + globe/stars | Home brand moment |
| `LogoCloud` | Ecosystem / partners |
| `BentoOne` / `BentoTwo` | Pillars + metrics |
| `Projects` | Case studies / work |
| `Comparison` | vs incumbents / chat agents |
| `Pricing` + Cal `Button` | Packages + book |
| `AboutSection` | Home strip + seed `/about` |
| `FAQ` / `Feedbacks` / `Testimonials` | Shared objections + proof |
| `Products` + `Acebuilder` | Platform / product umbrella |
| `content/blog` + fumadocs | SEO blog |

## Copy discipline

- Rewrite template agency copy on shell surfaces first (hero, nav, footer, SEO), then **same pass** for comparison/pricing/FAQ/bento — users experience residue as “still Aceternity”
- Centralize conversion config in `lib/brand.ts` so Cal/email don’t stay hardcoded to the template author
- Don’t invent metrics, logos, or customer quotes; soft role-based blurbs are fine until real proof exists
- CTA language: prefer **Get started** → `/contact` over template “Chat with Alex”

## Pitfalls

- **fumadocs-mdx + Next 16 Turbopack**: default `next build` / `next dev` can panic on `turbopack.rules.*.json` `query` conditions. Fix: set scripts to `next dev --webpack` and `next build --webpack`. Do not claim Next is broken globally.
- **`images.domains` deprecated**: use `images.remotePatterns` in `next.config.mjs`.
- **Blog MDX schema**: new posts must include every required zod field or collect-phase fails.
- **Don’t skip IA**: jumping straight to restyling leaves orphan routes and wrong nav.
- **Don’t wait on Pro login** when the zip is present.
- **Working copy vs template-src**: keep pristine extract for diffs/license reference.
- **Pro session drop**: header may flip back to Login after idle/navigation; re-run session check before copying blocks.
- **Cal embed without account**: point `NEXT_PUBLIC_CAL_LINK` at a real event; until then Button should degrade to `/contact`, not a dead Manu demo link.
- **Long `npm run build` with dev server up**: if build hangs/times out, stop `next dev` first; retry is usually clean.

## Support files

- `references/autonogrammer-ai.md` — live Autonogrammer.AI paths, sitemap, webpack note, Pro account state
- `references/productized-agency-inventory.md` — routes/components checklist for that template family
- `references/aceternity-pro-login.md` — NextAuth nodemailer magic-link API flow + session checks
- `references/phase1-brand-pass.md` — checklist of files/strings to retheme + grep gate

## Done checklist

- [ ] Architecture doc + interactive wireframe on disk
- [ ] Working `site/` with brand SEO/nav/footer/hero
- [ ] Phase 1 copy pass: zero agency-vendor greps in `site/`
- [ ] `lib/brand.ts` + Cal/contact wired
- [ ] Blog samples replaced or explicitly deferred
- [ ] All planned routes 200 (or explicit redirect)
- [ ] Build succeeds (webpack if needed)
- [ ] README with dev commands and next phases
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
# Aceternity UI Pro — magic-link login (browser)

**Site:** `https://ui.aceternity.com`
**Auth:** NextAuth · email provider id = **`nodemailer`** · also has `github`, `google`

## Why not only the UI form

Automated `browser_type` + “Sign In with Email” often leaves an empty field and no toast. The request may not fire. Use the NextAuth endpoints in the **same browser context** so cookies stick.

## Send magic link

```js
// Run in page console / browser_console on ui.aceternity.com
const csrf = (await fetch('/api/auth/csrf', { credentials: 'include' }).then(r => r.json())).csrfToken;
const body = new URLSearchParams({
email: 'USER@example.com',
csrfToken: csrf,
callbackUrl: 'https://ui.aceternity.com/',
json: 'true',
});
const res = await fetch('/api/auth/signin/nodemailer', {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: body.toString(),
redirect: 'follow',
});
// Expect final URL: .../api/auth/verify-request?provider=nodemailer&type=email
return { status: res.status, url: res.url };
```

Optional discover:

```js
await fetch('/api/auth/providers', { credentials: 'include' }).then(r => r.json());
// → { nodemailer: { type: 'email', signinUrl: '.../signin/nodemailer', ... }, github, google }
```

## Complete login

1. Tell user: check inbox for Aceternity magic link.
2. They paste the full URL (path `/api/auth/callback/nodemailer?...&token=...&email=...`).
3. `browser_navigate` to that URL **in the session that requested the link**.
4. Land on homepage; nav shows **Orders** + email.

## Verify Pro

```js
await fetch('/api/auth/session', { credentials: 'include' }).then(r => r.json());
// user.isAllAccess === true, user.isLifetime === true, licenseType e.g. "PERSONAL"
```

Useful pages once in: `/orders`, `/blocks`, `/components`, `/templates`, productized template docs/preview.

## Security

- Magic links are **single-use**. Do not log full tokens to long-lived files or public channels after use.
- Never invent passwords. Do not store session tokens in skills; only the flow.
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# Autonogrammer.AI — session reference

**Brand:** WEB3 Autonomous Programmers · unified eternal memory · ICP · Knowledge Nexus
**Root:** `/root/autonogrammer-web`

## Paths

| Path | Role |
|------|------|
| `template-src/productized-agency-template/React` | Pristine Aceternity Productized Agency extract |
| `site/` | Working Next.js app (`autonogrammer-web`) |
| `site/lib/brand.ts` | email, calLink, social, tagline |
| `docs/SITE-ARCHITECTURE.md` | Full IA |
| `docs/PRO-BLOCKS-ROADMAP.md` | Which Pro blocks map to which pages |
| `wireframes/autonogrammer-site-wireframe.html` | Interactive 14-page wireframe |
| `README.md` | Dev entry |

## Sitemap (v1)

`/` · `/platform` · `/programmers` · `/memory` · `/knowledge-nexus` · `/technology` · `/how-it-works` · `/use-cases` · `/work` · `/pricing` · `/about` · `/blog` + `/blog/[id]` · `/contact`
`/products` → redirect `/platform`

Nav: Platform · Memory · Nexus · Pricing · Work · Blog · CTA Get started

## Build

- Scripts: `next dev --webpack` / `next build --webpack` (fumadocs-mdx + Next 16)
- Dev often on **:3010**
- If build hangs with dev running: stop dev, rebuild

## Phase status

- [x] IA + wireframe
- [x] Shell + all routes + PageShell stubs
- [x] Phase 1 copy (bento, comparison, pricing Spark/Nexus/Eternal, FAQ, about, products, CTAs)
- [x] 6 brand MDX posts (samples removed)
- [x] Contact mailto + Cal via `NEXT_PUBLIC_CAL_LINK` (default `autonogrammer/get-started`)
- [ ] Real logo / OG
- [ ] Real Cal.com event username
- [ ] Work case studies content
- [ ] Pro block pulls (timeline, beams, contact) when logged in
- [ ] Deploy

## Pro portal

- Account used: **oveshen.govender@gmail.com** (All-Access · Lifetime · PERSONAL when session healthy)
- Login: `references/aceternity-pro-login.md` — provider **`nodemailer`**; user pastes magic-link callback
- Cookies can drop — re-check `/api/auth/session` before assuming Pro still open
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Phase 1 brand pass — file & string checklist

Run after nav/SEO/hero shell. Goal: visitor never sees the template vendor name.

## Grep gate (must be empty under `site/`)

```bash
rg -n 'Aceternity|Chat with Alex|contact@aceternity|No Calls\. No BS|Acebuilder is now Live|Traditional Service Providers' \
--glob '!node_modules' --glob '!.next' site/
```

## High-impact files (Productized Agency family)

| Area | Typical paths |
|------|----------------|
| Brand config | `lib/seo.ts`, **`lib/brand.ts`** (create), `app/layout.tsx` |
| Chrome | `components/navbar.tsx`, `components/footer/index.tsx`, `components/button.tsx` |
| Hero | `components/hero/index.tsx` |
| Bento | `components/bento-one/**`, `components/bento-two/cards/*` |
| Comparison | `components/comparison/index.tsx`, `comparison-tabel.tsx`, `comparison-accordion.tsx` |
| Pricing | `components/pricing/index.tsx` |
| FAQ / CTA | `components/faq/index.tsx`, `faq/cta-card.tsx` |
| About | `components/about/index.tsx` |
| Platform | `components/acebuilder/index.tsx`, `components/products/index.tsx` |
| Proof CTAs | `components/testimonials/index.tsx`, `feedbacks/index.tsx`, `blogs/content.tsx` |
| Contact | `app/contact/page.tsx` |
| Blog | `content/blog/*.mdx` — delete samples; write brand posts with full frontmatter |

## Button contract

- Default label: `Get started`
- Optional `href` for hard navigation (`/contact`, `/pricing`)
- Cal: `getCalApi` + `brand.calLink`; on failure → `/contact`
- Env: `NEXT_PUBLIC_CAL_LINK`, `NEXT_PUBLIC_SITE_URL`

## Pricing rename pattern (example)

Not “Components / Website Pages / Multi Pages” — productized agent tiers, e.g.:

- **Spark** — solo pod + project memory
- **Nexus** — multi-agent + org memory
- **Eternal** — dedicated + custom ICP anchors

Adjust numbers only with user input; placeholders OK if labeled as draft in docs.

## After pass

1. `npm run build` (webpack)
2. Curl `/ /pricing /blog /contact` for brand strings
3. Note remaining real content debt: work case studies, logo/OG, real Cal event, Pro blocks per `docs/PRO-BLOCKS-ROADMAP.md`
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# Aceternity Productized Agency template — inventory

Typical zip layout: `productized-agency-template/React/`

## App routes (stock)

- `app/page.tsx` — Home section stack
- `app/work/page.tsx`
- `app/products/page.tsx`
- `app/pricing/page.tsx`
- `app/blog/page.tsx`, `app/blog/[id]/page.tsx`
- `app/layout.tsx` — Navbar + Footer, Inter / Geist Mono / DM Mono

## Home stack (stock)

`Hero` → `LogoCloud` → `BentoOne` → `Projects` → `Testimonials` → `BentoTwo` → `Comparison` → `Pricing` → `AboutSection` → `Feedbacks` → `FAQ`

## Key components dirs

`components/hero`, `bento-one`, `bento-two`, `comparison`, `pricing`, `products`, `projects`, `about`, `faq`, `feedbacks`, `testimonials`, `blogs`, `resources`, `acebuilder`, `navbar`, `footer`, `button` (Cal embed)

## Blog

- `content/blog/*.mdx`
- `source.config.ts` — zod schema with authorName, authorRole, authorAvatar, previewImage, labels
- `lib/source.ts` + fumadocs

## Deps to expect

next 16, react 19, motion, fumadocs-mdx/core/ui, @calcom/embed-react, tailwind 4, tabler icons

## Rebrand touch list (minimum)

1. `lib/seo.ts`
2. `components/navbar.tsx`
3. `components/footer/index.tsx`
4. `components/hero/index.tsx`
5. `components/button.tsx` default text
6. `app/layout.tsx`
7. New pillar routes + optional `components/page-shell.tsx`
8. `package.json` name + webpack scripts if MDX present
9. `next.config.mjs` remotePatterns
Loading
Loading