# Rahman Resources

> Reusable Next.js + Convex + shadcn vertical-slice template kitab. Copy-first. Production-grade.

Site: https://resource.rahmanef.com
Repo: https://github.com/rahmanef63/resource-site
Author: Rahman (https://rahmanef.com)

## Stack

- [Next.js 16](https://nextjs.org/docs)
- [React 19](https://react.dev)
- [TypeScript 5.6](https://www.typescriptlang.org)
- [Tailwind CSS 4](https://tailwindcss.com)
- [shadcn/ui](https://ui.shadcn.com)
- [Convex (self-hosted)](https://docs.convex.dev/self-hosting)
- [@convex-dev/auth](https://labs.convex.dev/auth)
- [Dokploy](https://dokploy.com)
- [Radix UI](https://www.radix-ui.com)
- [Lucide Icons](https://lucide.dev)

## What's in the box

- **Vertical-Slice Architecture**: Each feature owns its config, page, views, components, settings, agent, and Convex mirror. Add or remove a feature by adding or removing one folder.
- **Copy-First Flow**: Never greenfield. Every artifact comes from a proven source project (internal kitab-core, rahmanef.com, cescadesigns, notion-clone). Edit imports, ship.
- **shadcn-only UI**: All components are shadcn primitives or composed from them. ResponsiveDialog, DateField, FileUpload — no raw HTML buttons or dialogs.
- **audit-bp Gated**: Best-practice auditor pulls latest Next 16 / React 19 / Convex docs via Context7 before scoring. Score ≥80 to ship.
- **Dokploy in One Command**: si-coder skill creates the GitHub repo, pushes, configures Dokploy, sets DNS, and triggers deploy. Zero human involvement.
- **Self-hosted Convex + @convex-dev/auth**: No Clerk. Self-hosted Convex backend in the same docker-compose. Postgres-backed for prod.
- **Auto-generated Slice Docs**: Per-slice DEPS.md, CONTRACT.md, STATUS.md, USAGE.md generated from imports + defineFeature config.
- **Cookbook + Recipes**: 8 layout variants and 8 feature drop-ins (block editor, command palette, db views, comments, ...) ready to mount.

## Layouts

### Personal Brand OS
- slug: `personal-brand-os`  category: `website-template`  source: saudivisuals.com + cescadesigns
- Full-app personal site — public landing (hero, blog, portfolio, services, resources, contact) + admin dashboard (posts, leads, chatbot, comments). Inspired by saudivisuals.com + cescadesigns. Fill-in-the-blank with lorem ipsum.
- repo path: `app/preview/personal-brand-os`
- primary file: `app/preview/personal-brand-os/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/personal-brand-os
- agent recipe: Run `npx rr init <app> --template personal-brand-os` (or `npx rr add personal-brand-os` inside an existing project). Personal Brand OS = full-app template (public + admin). 1) Default `npx rr add personal-brand-os` runs `--at root`: routes promoted to app/(public)/ + app/admin/, and /preview/personal-brand-os/* path constants in nav-config/site-config/robots/sitemap auto-rewritten. (Pass `--at preview` only for sandbox demos that keep /preview/personal-brand-os/* URLs.) 2) Edit components/templates/personal-brand/shared/site-config.ts — set brandName, ownerName, baseUrl, twitter, email. 3) Wire convex-templates/personal-brand-os/* into your convex/features/personal-brand-os/ (kitab ships them outside `convex/` so the bundler doesn't try to compile scaffolds without _generated) and add @convex-dev/auth on admin routes. 4) Replace localStorage StoreProvider with Convex queries (schema mirrors localStorage shape).

### Agency Studio OS
- slug: `agency-studio-os`  category: `website-template`  source: saudivisuals.com + cescadesigns
- Full-app B2B agency / studio site — public (home, services, work + project detail, about, contact) + admin (dashboard, projects pipeline, clients, services, leads, settings). Inspired by saudivisuals.com + cescadesigns.
- repo path: `app/preview/agency-studio-os`
- primary file: `app/preview/agency-studio-os/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/agency-studio-os
- agent recipe: Run `npx rr init <app> --template agency-studio-os`. Agency Studio OS = full-app B2B agency template (public + admin). 1) Move app/preview/agency-studio-os/{robots,sitemap,opengraph-image}.* to app root. 2) Copy public into app/(public)/, admin into app/(admin)/. 3) Edit components/templates/agency-studio/shared/site-config.ts — set studioName, brandName, baseUrl, twitter, email. 4) Wire convex-templates/agency-studio-os/* into your convex/ (kitab ships them outside `convex/` so the bundler doesn't try to compile scaffolds without _generated) and add @convex-dev/auth on admin routes. 5) Replace localStorage StoreProvider with Convex queries.

### Landing — Hero Carousel
- slug: `landing-hero-carousel`  category: `marketing`  source: cescadesigns
- Full-width image carousel hero with auto-fade + dot indicators. Originally CMS-driven via Convex. Best for visual brands.
- repo path: `cookbook/layouts/landing-hero-carousel`
- primary file: `cookbook/layouts/landing-hero-carousel/src/HeroSection.tsx`
- detail: https://resource.rahmanef.com/layouts/landing-hero-carousel
- agent recipe: Run `npx rr add landing-hero-carousel`. Mount the HeroSection from cookbook/layouts/landing-hero-carousel as the hero of the marketing route group. Provide image array via props or wire to Convex api.heroImages.list.

### Landing — Asymmetric Masonry
- slug: `landing-asymmetric-masonry`  category: `marketing`  source: rahmanef.com
- 8-slot repeating asymmetric grid. Intersection-observer staggered scroll-reveal. Lifted from rahmanef.com portfolio.
- repo path: `cookbook/layouts/landing-asymmetric-masonry`
- primary file: `cookbook/layouts/landing-asymmetric-masonry/src/PortfolioGrid.tsx`
- detail: https://resource.rahmanef.com/layouts/landing-asymmetric-masonry
- agent recipe: Run `npx rr add landing-asymmetric-masonry`. Use PortfolioGrid for case-study or portfolio pages. Items array shape: { id, title, cover, href, category }. The 8-slot pattern repeats; supply at least 8 items for the layout to bloom.

### Landing — Bento Grid
- slug: `landing-bento`  category: `marketing`  source: synthesized
- Feature-grid marketing landing. Compose Card + Magnetic + KineticHeading. Modern SaaS feel.
- repo path: `cookbook/layouts/landing-bento`
- primary file: `README.md`
- detail: https://resource.rahmanef.com/layouts/landing-bento
- agent recipe: Run `npx rr add landing-bento`. Compose a 3-column CSS grid with explicit area assignments per feature. Mix Card sizes (1x1, 1x2, 2x1, 2x2) for visual rhythm.

### Landing — Kinetic Text
- slug: `landing-kinetic-text`  category: `marketing`  source: rahmanef.com
- Brand-forward landing. Letter-stagger headings + magnetic CTAs + marquee strips. Motion-heavy.
- repo path: `cookbook/layouts/landing-kinetic-text`
- primary file: `README.md`
- detail: https://resource.rahmanef.com/layouts/landing-kinetic-text
- agent recipe: Run `npx rr add landing-kinetic-text`. Use motion primitives marquee, kinetic-heading, magnetic from components/motion (already imported into the kitab from rahmanef.com). All respect prefers-reduced-motion automatically.

### Dashboard — Three Column
- slug: `dashboard-three-column`  category: `dashboard`  source: kitab-core
- Kitab flagship. Left tree / main / right inspector. Resizable, collapsible, mobile drawer fallback. Used by Database, Tasks, Contacts.
- repo path: `cookbook/layouts/dashboard-three-column`
- primary file: `template-base/frontend/shared/ui/layout/container/three-column/ThreeColumnLayout.tsx`
- detail: https://resource.rahmanef.com/layouts/dashboard-three-column
- agent recipe: Run `npx rr add dashboard-three-column`. Mount inside app/dashboard/<slice>/page.tsx. Wrap with the kitab's <ThreeColumnLayout>. Slot in slice-specific sidebars and inspectors. Mobile auto-collapses to drawers.

### Dashboard — IDE
- slug: `dashboard-ide`  category: `dashboard`  source: synthesized
- Activity bar + tabs + editor + bottom panel. Editor-first apps (notion, code, doc tools).
- repo path: `cookbook/layouts/dashboard-ide`
- primary file: `README.md`
- detail: https://resource.rahmanef.com/layouts/dashboard-ide
- agent recipe: Run `npx rr add dashboard-ide`. Compose grid: 48px activity bar + tabs row + editor/inspector flex row + bottom console. Wire activity bar items to dispatch into tabs/inspector store.

### Dashboard — Mobile Dock
- slug: `dashboard-mobile-dock`  category: `dashboard`  source: kitab-core
- Mobile-first auth app. MobileTopBar + content + MobileDashboardDock bottom nav. Native-app feel on mobile, sidebar on desktop.
- repo path: `cookbook/layouts/dashboard-mobile-dock`
- primary file: `template-base/frontend/shared/ui/layout/dashboard/MobileDashboardShell.tsx`
- detail: https://resource.rahmanef.com/layouts/dashboard-mobile-dock
- agent recipe: Run `npx rr add dashboard-mobile-dock`. Use ResponsiveDashboardShell which branches desktop (sidebar) vs mobile (dock). Customize MobileDashboardDock items and MobileTopBar workspace switcher to your domain.

### CMS — Public Storefront
- slug: `cms-public-storefront`  category: `cms`  source: kitab-core cms-lite
- E-commerce / blog public storefront. Convex read-only. Cart context + currency selector + i18n.
- repo path: `cookbook/layouts/cms-public-storefront`
- primary file: `README.md`
- detail: https://resource.rahmanef.com/layouts/cms-public-storefront
- agent recipe: Run `npx rr add cms-public-storefront`. Port kitab-core slices/cms-lite/ into your project's app/(cms)/ route group. Fetch products/pages from Convex via api.cmsLite.* queries.

### Notion Page Clone OS — localStorage demo (pointer to open-silong for production)
- slug: `notion-page-clone-os`  category: `website-template`  source: synthesized + notion-shell wrappers + notion-blocks bundle; production stack at github.com/rahmanef63/open-silong
- localStorage-only DEMO of a Notion-clone surface — tree-structured sidebar + page editor + embedded databases. Built from rr's notion-shell wrappers (NotionSidebar / NotionPage / NotionBlock / NotionDatabase) + notion-blocks primitives (equation / code / notify / drag-fill grid) + createTemplateStore (localStorage + BroadcastChannel). No Convex, no auth, no multi-user — drop-in starter for evaluating the UI or embedding a Notion-style editor in your own project. **For the production-grade Convex-backed product (multi-workspace + auth + sharing + comments + snapshots + MCP), use the open-source open-silong repo: https://github.com/rahmanef63/open-silong (silong.rahmanef.com).** This rr template is the DEMO; the github repo is the PRODUCT.
- repo path: `app/preview/notion-page-clone-os`
- primary file: `app/preview/notion-page-clone-os/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/notion-page-clone-os
- agent recipe: Run `npx rr init <app> --template notion-page-clone-os`. Cascades notion-shell (wrappers) + notion-blocks (4 editor primitives) + icon-picker. Edit components/templates/notion-page-clone/shared/site-config.ts to set brand; seed.ts to bootstrap docs + databases. Sidebar CRUD already wired — hover a row → +/✎/🗑.

### SaaS Marketing OS
- slug: `saas-marketing-os`  category: `website-template`  source: synthesized + mdx-blog feature
- Marketing site for a SaaS product — landing, pricing, features, blog, changelog, about, contact — backed by a full admin panel (Pages, Posts, Pricing, Features, Customers, Subscriptions, Leads, Changelog, Settings). Same grouped Pages + Features sidebar pattern as every other template.
- repo path: `app/preview/saas-marketing-os`
- primary file: `app/preview/saas-marketing-os/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/saas-marketing-os
- agent recipe: Run `npx rr init <app> --template saas-marketing-os`. SaaS Marketing OS = public-only marketing template. Blog + changelog use MDX (add the mdx-blog feature). Edit components/templates/saas-marketing/shared/site-config.ts to set product name, tagline, pricing tiers, contact email.

### Kreator Studio OS
- slug: `kreator-studio-os`  category: `website-template`  source: synthesized
- Multi-channel content planner + voice trainer + repurposing engine + carousel maker. Public newsletter site + admin (planner, voice, scripts, carousels, assets, performance, comments). Bahasa Indonesia, ID-first.
- repo path: `app/preview/kreator-studio-os`
- primary file: `app/preview/kreator-studio-os/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/kreator-studio-os
- agent recipe: Run `npx rr init <app> --template kreator-studio-os`. Kreator Studio OS = full-app content-creator template (public newsletter + 9-tab admin). 1) Edit components/templates/kreator-studio/shared/site-config.ts (brandName, ownerName, baseUrl, twitter). 2) Replace localStorage StoreProvider with Convex queries (state shape mirrors localStorage). 3) Wire Resend for newsletter + Midtrans tip-jar on public CTA. 4) Voice/Scripts/Carousels admin views are scaffolds — wire to ai-router (mid tier for voice-train/voice-apply, nano for shortform script).

### Konsultan OS
- slug: `konsultan-os`  category: `website-template`  source: synthesized
- Consultancy workspace — public services landing + case studies + admin (CRM, proposals AI, kontrak ID-aware, projects, PajakAware billing, documents). Indonesian-tax aware (PPN/PPh).
- repo path: `app/preview/konsultan-os`
- primary file: `app/preview/konsultan-os/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/konsultan-os
- agent recipe: Run `npx rr init <app> --template konsultan-os`. Konsultan OS = full-app consultancy template (public services + 7-tab admin). 1) Edit components/templates/konsultan/shared/site-config.ts (brandName, ownerName, baseUrl). 2) Replace localStorage StoreProvider with Convex queries. 3) Add @convex-dev/auth + RBAC on /admin routes. 4) Wire Resend for proposal email + e-sign provider for contracts. 5) Billing view is PajakAware-ready — connect to Midtrans + Indonesian-tax calc on invoice generation.

### Wirausaha OS
- slug: `wirausaha-os`  category: `website-template`  source: synthesized
- Indonesian UKM operations hub — public storefront + 8-tab admin (multi-business registry, inventory, orders, customers/CRM, finance with AI laporan, staff). Bahasa Indonesia, mobile-first public.
- repo path: `app/preview/wirausaha-os`
- primary file: `app/preview/wirausaha-os/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/wirausaha-os
- agent recipe: Run `npx rr init <app> --template wirausaha-os`. Wirausaha OS = full-app UKM template (mobile-first public storefront + 8-tab admin). 1) Edit components/templates/wirausaha/shared/site-config.ts. 2) Replace localStorage StoreProvider with Convex queries. 3) Wire Midtrans + QRIS for orders. 4) Add WhatsApp-bot for order confirmations. 5) Finance view scaffolds AI-laporan — connect to ai-router (mid tier) for narrative generation from monthly aggregates.

### Riset Kit
- slug: `riset-kit`  category: `website-template`  source: synthesized
- Research workspace — public knowledge-base reader + admin (document library, AI reader, literature review, citations, notes). Bahasa Indonesia academic-style, vector-search ready.
- repo path: `app/preview/riset-kit`
- primary file: `app/preview/riset-kit/public/page.tsx`
- detail: https://resource.rahmanef.com/layouts/riset-kit
- agent recipe: Run `npx rr init <app> --template riset-kit`. Riset Kit = full-app research template (public KB reader + 6-tab admin). 1) Edit components/templates/research/shared/site-config.ts. 2) Replace localStorage StoreProvider with Convex queries. 3) Add @convex-dev/auth on /admin (single owner suffices). 4) Document library expects pdf-extract + vector-search — wire convex-vector-search component. 5) AI Reader wires ai-router (mid tier) for QA over uploaded PDFs. 6) Lit-review matrix is a scaffold — wire AI summarizer per cell.

### Hero — Centered
- slug: `hero-centered`  category: `marketing`  source: kitab
- Single-column centered hero with eyebrow pill, headline, sub-copy, and dual CTA. Radial gradient backdrop.
- repo path: `app/preview/hero-centered`
- primary file: `app/preview/hero-centered/page.tsx`
- detail: https://resource.rahmanef.com/layouts/hero-centered
- agent recipe: Run `npx rr add hero-centered`. Pure layout. Drop into landing pages where the product needs minimum framing. Replace the eyebrow pill with a status badge or release tag. Two CTAs is the sweet spot.

### Hero — Split (Text + Visual)
- slug: `hero-split`  category: `marketing`  source: kitab
- Two-column hero: left copy + feature list + CTAs, right visual slot. 9-cell mock grid placeholder for product shot.
- repo path: `app/preview/hero-split`
- primary file: `app/preview/hero-split/page.tsx`
- detail: https://resource.rahmanef.com/layouts/hero-split
- agent recipe: Run `npx rr add hero-split`. Right column accepts any visual — screenshot, product mock, illustration, or live demo iframe. Feature list pairs Lucide icons with one-line value props.

### Hero — Bento Background
- slug: `hero-bento-bg`  category: `marketing`  source: kitab
- Bento mini-grid behind a centered headline. Radial mask focuses the eye on the copy while the grid hints at features.
- repo path: `app/preview/hero-bento-bg`
- primary file: `app/preview/hero-bento-bg/page.tsx`
- detail: https://resource.rahmanef.com/layouts/hero-bento-bg
- agent recipe: Run `npx rr add hero-bento-bg`. Background tiles get a radial mask so the center stays readable. Use 6-8 tiles with asymmetric spans (col-span-2 row-span-2 for one, others 1x1). Lucide icon in each tile.

### Hero — Video Loop (dark)
- slug: `hero-video-loop`  category: `marketing`  source: kitab
- Dark-mode hero with conic-gradient animated backdrop (stand-in for video). Play CTA, headline, dual CTA.
- repo path: `app/preview/hero-video-loop`
- primary file: `app/preview/hero-video-loop/page.tsx`
- detail: https://resource.rahmanef.com/layouts/hero-video-loop
- agent recipe: Run `npx rr add hero-video-loop`. Replace the conic-gradient backdrop with a muted <video autoplay loop>. Keep the dark theme — light text on motion only reads when the contrast is hard.

### Hero — Animated Text
- slug: `hero-animated-text`  category: `marketing`  source: kitab
- Rotating word inside the headline cycles every 2s with gradient text + fade-slide transition. Lightweight, no extra deps.
- repo path: `app/preview/hero-animated-text`
- primary file: `app/preview/hero-animated-text/page.tsx`
- detail: https://resource.rahmanef.com/layouts/hero-animated-text
- agent recipe: Run `npx rr add hero-animated-text`. Use absolute-positioned word slots with translate-y + opacity transitions. The invisible placeholder word keeps the bounding box stable.

### Pricing — Three Tier
- slug: `pricing-three`  category: `marketing`  source: kitab
- Classic 3-tier card layout. Middle tier highlighted with Most Popular badge + soft shadow.
- repo path: `app/preview/pricing-three`
- primary file: `app/preview/pricing-three/page.tsx`
- detail: https://resource.rahmanef.com/layouts/pricing-three
- agent recipe: Run `npx rr add pricing-three`. Three is the magic number for SaaS pricing — fewer feels limited, more triggers analysis paralysis. Middle tier should be the one you actually want to sell.

### Pricing — Four Tier
- slug: `pricing-four`  category: `marketing`  source: kitab
- Four-tier with Best Value badge on tier 3. Compact card chrome, 4-column grid that collapses gracefully.
- repo path: `app/preview/pricing-four`
- primary file: `app/preview/pricing-four/page.tsx`
- detail: https://resource.rahmanef.com/layouts/pricing-four
- agent recipe: Run `npx rr add pricing-four`. Use when you genuinely have four distinct tiers (free / solo / team / enterprise). Don't pad to four — use the three-tier variant if the fourth is forced.

### Pricing — Monthly/Yearly Toggle
- slug: `pricing-toggle`  category: `marketing`  source: kitab
- 3-tier with a monthly/yearly pill toggle. Yearly price strikethroughs the monthly, -20% savings badge inside the toggle.
- repo path: `app/preview/pricing-toggle`
- primary file: `app/preview/pricing-toggle/page.tsx`
- detail: https://resource.rahmanef.com/layouts/pricing-toggle
- agent recipe: Run `npx rr add pricing-toggle`. Default to yearly — that's the conversion-optimized choice. Show the monthly strikethrough so the savings feel real, not implied.

### Pricing — Feature Comparison
- slug: `pricing-compare`  category: `marketing`  source: kitab
- Single comparison table: feature rows × plan columns. Check/Minus icons, header row with prices, sticky CTA row.
- repo path: `app/preview/pricing-compare`
- primary file: `app/preview/pricing-compare/page.tsx`
- detail: https://resource.rahmanef.com/layouts/pricing-compare
- agent recipe: Run `npx rr add pricing-compare`. Use for complex products where buyers actually compare. Mix boolean rows (Check/Minus) with string-value rows ("1", "10", "Unlimited") for clarity.

### Pricing — Usage Slider
- slug: `pricing-slider`  category: `marketing`  source: kitab
- Range slider drives the price. Tier name and per-seat cost update live. Single-card layout, focus on the math.
- repo path: `app/preview/pricing-slider`
- primary file: `app/preview/pricing-slider/page.tsx`
- detail: https://resource.rahmanef.com/layouts/pricing-slider
- agent recipe: Run `npx rr add pricing-slider`. Use for usage-based or seat-based products. Make the breakpoints transparent — buyers should be able to predict the next price without surprises.

### Accordion — Classic FAQ
- slug: `accordion-faq`  category: `marketing`  source: kitab
- Single-open FAQ accordion. ChevronDown rotates, content reveals below. Clean, compact, perfect for support pages.
- repo path: `app/preview/accordion-faq`
- primary file: `app/preview/accordion-faq/page.tsx`
- detail: https://resource.rahmanef.com/layouts/accordion-faq
- agent recipe: Run `npx rr add accordion-faq`. Single-open keeps the page short. Use when answers are independent. Switch to multi-open if buyers tend to scan multiple answers at once.

### Accordion — Grouped Sections
- slug: `accordion-grouped`  category: `marketing`  source: kitab
- FAQ split into themed groups (Getting Started / Slices / Billing). Each group is its own card. Independent open state per item.
- repo path: `app/preview/accordion-grouped`
- primary file: `app/preview/accordion-grouped/page.tsx`
- detail: https://resource.rahmanef.com/layouts/accordion-grouped
- agent recipe: Run `npx rr add accordion-grouped`. Use when the FAQ is long (>10 items) and questions cluster naturally. Each group's Item owns its open state for predictable UX.

### Accordion — Sidebar Navigation
- slug: `accordion-sidebar`  category: `marketing`  source: kitab
- Docs-style: left nav switches sections, right pane shows the section's accordion. Two-axis navigation in one layout.
- repo path: `app/preview/accordion-sidebar`
- primary file: `app/preview/accordion-sidebar/page.tsx`
- detail: https://resource.rahmanef.com/layouts/accordion-sidebar
- agent recipe: Run `npx rr add accordion-sidebar`. Use for help/docs pages with section breadth. Keep section count ≤ 5 — beyond that, the sidebar gets noisy. Reset accordion state on section change.

### Accordion — Smooth Animated
- slug: `accordion-animated`  category: `marketing`  source: kitab
- Grid-row transition for true height animation, no janky calc. Each item is a rounded card with rotating plus → primary close icon.
- repo path: `app/preview/accordion-animated`
- primary file: `app/preview/accordion-animated/page.tsx`
- detail: https://resource.rahmanef.com/layouts/accordion-animated
- agent recipe: Run `npx rr add accordion-animated`. The grid-template-rows trick lets CSS animate to-auto-height natively. No JS measurement, no jank. Pair with rounded card chrome for premium feel.

### Accordion — Multi-open
- slug: `accordion-multi`  category: `marketing`  source: kitab
- All items can be open at once. Expand-all / Collapse-all toggle in header. Best for compare-style reading.
- repo path: `app/preview/accordion-multi`
- primary file: `app/preview/accordion-multi/page.tsx`
- detail: https://resource.rahmanef.com/layouts/accordion-multi
- agent recipe: Run `npx rr add accordion-multi`. Use when answers reference each other or buyers want to keep multiple sections visible (changelogs, release notes, feature comparison FAQs).

### Blog — Card Grid
- slug: `blog-grid`  category: `cms`  source: kitab
- 3-column responsive card grid. Cover thumbnail (HSL gradient), title, excerpt, author·date·read meta. Default blog index shape.
- repo path: `app/preview/blog-grid`
- primary file: `app/preview/blog-grid/page.tsx`
- detail: https://resource.rahmanef.com/layouts/blog-grid
- agent recipe: Run `npx rr add blog-grid`. Default to 3 columns at lg. Use the Thumb helper for cover generation when posts don't ship an image yet — HSL gradient by post.hue keeps each card distinct.

### Blog — Dense List
- slug: `blog-list`  category: `cms`  source: kitab
- Single-column scannable list. Thumbnail left, meta + title + excerpt right. High density, low scroll.
- repo path: `app/preview/blog-list`
- primary file: `app/preview/blog-list/page.tsx`
- detail: https://resource.rahmanef.com/layouts/blog-list
- agent recipe: Run `npx rr add blog-list`. Use for archives or category pages where the reader is hunting a specific post. Compact thumbnail keeps the line height tight.

### Blog — Magazine Layout
- slug: `blog-magazine`  category: `cms`  source: kitab
- Editorial spread: large hero post (2/3 width) + secondary featured + tail of headlines. Issue-number header gives quarterly feel.
- repo path: `app/preview/blog-magazine`
- primary file: `app/preview/blog-magazine/page.tsx`
- detail: https://resource.rahmanef.com/layouts/blog-magazine
- agent recipe: Run `npx rr add blog-magazine`. Use for content-heavy publications. Hero post earns the visual real estate; the sidebar carries breadth. Mix typography sizes for editorial rhythm.

### Blog — Masonry
- slug: `blog-masonry`  category: `cms`  source: kitab
- CSS columns-based masonry with varying card heights for organic rhythm. break-inside-avoid keeps each card intact.
- repo path: `app/preview/blog-masonry`
- primary file: `app/preview/blog-masonry/page.tsx`
- detail: https://resource.rahmanef.com/layouts/blog-masonry
- agent recipe: Run `npx rr add blog-masonry`. CSS columns are the cheap masonry — no JS, no layout shift. Vary the thumbnail height via a HEIGHTS array (h-44 to h-80). DOM order ≠ visual order — design around it.

### Blog — Featured Hero + Tail
- slug: `blog-featured`  category: `cms`  source: kitab
- Full-bleed cover hero on the first post, then a tight 2-column grid for the rest. Cinematic open, fast scroll for the tail.
- repo path: `app/preview/blog-featured`
- primary file: `app/preview/blog-featured/page.tsx`
- detail: https://resource.rahmanef.com/layouts/blog-featured
- agent recipe: Run `npx rr add blog-featured`. Use for marketing-driven content sites (newsletter, podcast, brand journal) where the lead story carries the visit. Tail grid keeps the index scrollable without losing the hero impact.

## Slices

Drop-in vertical features. Each ships the metadata trio (`slice.json` + `slice.contract.ts` + `slice.manifest.json`). Install with `npx rr add <slug>` — CLI auto-augments env, installs deps, and copies into `frontend/slices/<slug>/` (+ optional `convex/features/<slug>/`).

### Convex Auth — Multi-Provider Sign-in
- slug: `convex-auth`  kind: `backend`  category: `auth`
- @convex-dev/auth with Password (PBKDF2-SHA256 100k, self-hosted-friendly), Anonymous (guest), Google OAuth, and Resend magic-link. Ships a production SignInPage with i18n, prop-driven provider list, and split Login/Register tabs. No Clerk.
- install: `npx rr add convex-auth`
- detail: https://resource.rahmanef.com/slices/convex-auth

### DOKU — Indonesia Payment
- slug: `doku-payment`  kind: `full`  category: `payment`
- Pembayaran lokal Indonesia via DOKU — Checkout (hosted) + Direct (VA / QRIS / e-Wallet / PayLater / Minimarket / Kartu). HMAC-signed REST + signature-verified webhook + idempotent retries. Sibling slice to midtrans-payment dengan paymentOrders schema yang dishare.
- install: `npx rr add doku-payment`
- detail: https://resource.rahmanef.com/slices/doku-payment

### Midtrans — Indonesia Payment
- slug: `midtrans-payment`  kind: `full`  category: `payment`
- Pembayaran lokal Indonesia via Midtrans Snap (BCA, Mandiri, BRI, e-wallet GoPay/OVO/Dana, QRIS). Webhook untuk konfirmasi. Provider-isolated under components/providers/midtrans + actions/midtrans so Doku/Stripe land as siblings.
- install: `npx rr add midtrans-payment`
- detail: https://resource.rahmanef.com/slices/midtrans-payment

### Resend — Transactional & Newsletter
- slug: `resend-newsletter`  kind: `backend`  category: `email`
- Transactional email + newsletter blast via Resend. Double opt-in flow + audience segmentation. Magic-link delivery for Convex Auth.
- install: `npx rr add resend-newsletter`
- detail: https://resource.rahmanef.com/slices/resend-newsletter

### AI Chat — Workbench / Sidebar / Search
- slug: `ai-chat`  kind: `full`  category: `ai`
- One conversational AI feature, three render modes. Same Convex backend (threads + streaming + tool calls + RAG), pick the surface via prop:

  • workbench — Claude.ai / ChatGPT three-column page (default)
  • sidebar — collapsible copilot panel inside another CRUD app
  • search — single-question + answer + citations (Perplexity)

Use cases:
  – Customer-support chatbot embedded in your marketing site
  – Developer copilot in your PR/docs admin
  – Knowledge-base search over your blog + docs corpus
  – Internal AI assistant in your dashboard

What it ships: multi-provider (Anthropic / OpenAI / Google / Mistral / Ollama), multimodal (text + image + PDF + audio), typed tool calls with inline inspector, agent mode (plan→execute→reflect), branching threads, RAG citations, resumable streams, usage telemetry. Public surface = consumer chat; admin surface = persona, fallback, guardrails per-bot.
- install: `npx rr add ai-chat`
- detail: https://resource.rahmanef.com/slices/ai-chat

### AI Studio — Generation Canvas
- slug: `ai-studio`  kind: `full`  category: `ai`
- AI is the primary UI — single big prompt input → live-streaming output → variation grid → version tree. Suno / Midjourney / Lovable / v0 pattern. Output kinds: text, code, image, audio (configurable per template).

Use cases:
  – AI image generation product (creative output)
  – AI logo / banner / social-post studio
  – AI code-snippet generator (component scaffolder)
  – AI music / voiceover producer
  – AI blog-draft factory (text)

Features: prompt history, branch + compare outputs, like + favorite, share-to-link, templates from ai-admin.
- install: `npx rr add ai-studio`
- detail: https://resource.rahmanef.com/slices/ai-studio

### AI Agents — Autonomous Workers
- slug: `ai-agents`  kind: `full`  category: `ai`
- Background AI workers. Define an agent (skill × model × tools × max-iter), trigger it on-demand or on a cron schedule, watch the step-by-step trace as it runs. Devin / Replit-Agent / Manus pattern.

Use cases:
  – Nightly audit-bp on the codebase (PR-reviewer style)
  – Weekly SEO crawl + content suggestions
  – Auto-moderate comment queue
  – Scheduled data ingestion + summarization
  – Long-form research task with multi-source citations

Features: queue + live trace, per-step retry policy, hard cost cap, shareable trace URLs, full audit-log integration.
- install: `npx rr add ai-agents`
- detail: https://resource.rahmanef.com/slices/ai-agents

### AI Admin — Console (Instructions · Skills · Tools · Agents · Providers)
- slug: `ai-admin`  kind: `full`  category: `ai`
- Central operator console for the whole AI stack. Every other ai-* feature reads its registries from here. Tabs ordered to match the build-flow:

  1. Providers   — register Anthropic / OpenAI / Google / Mistral / Ollama (API keys AES-encrypted at rest)
  2. Models      — per-provider catalog (capabilities, context window, pricing)
  3. Instructions — custom system-prompt library (Claude Projects-style)
  4. Skills      — named instruction + model default + tool defaults (consumed by chat + studio)
  5. Tools       — JSON-schema function specs + impl (http / convex / shell) + sandbox flag
  6. Agents      — skill × model × tools × max-iter (consumed by ai-agents)
  7. Budgets     — per-workspace cost caps + alerts + hard kill
  8. Audit       — every AI call: actor / agent / tokens / cost / latency / outcome

Includes Create-Agent / Create-Skill / Create-Tool / Create-Instruction wizards.
- install: `npx rr add ai-admin`
- detail: https://resource.rahmanef.com/slices/ai-admin

### AI Router — Backend Provider Proxy
- slug: `ai-router`  kind: `backend`  category: `ai`
- Backend infrastructure (no UI). Single proxy that every other ai-* feature calls. Tier-routed — nano (Haiku) for classification, mid (Sonnet) for chat, flagship (Opus) for deep reasoning. Per-call usage log + cost guard. Works with direct provider keys or OpenRouter umbrella.

Not something you mount — installed automatically as a peer when you add ai-chat / ai-studio / ai-agents.
- install: `npx rr add ai-router`
- detail: https://resource.rahmanef.com/slices/ai-router

### Convex Vector Search
- slug: `vector-search`  kind: `full`  category: `search`
- Embeddings-based search via Convex's built-in vector index. Embed via OpenAI text-embedding-3-small (1536-dim), query via vectorIndex().
- install: `npx rr add vector-search`
- detail: https://resource.rahmanef.com/slices/vector-search

### MDX Blog
- slug: `mdx-blog`  kind: `ui`  category: `content`
- Markdown-with-JSX untuk blog post. File-based MDX content collection. Portable defineMdxBlog(opts) factory dengan 4 config props (basePath, contentDir, labels.list, nav) — defaults preserve legacy /blog + content/blog. Auto-generate ToC, reading-time, syntax highlight, plus embed React components inline.
- install: `npx rr add mdx-blog`
- detail: https://resource.rahmanef.com/slices/mdx-blog

### Cal.com Booking
- slug: `cal-com-booking`  kind: `full`  category: `data`
- Embedded Cal.com booking widget + webhook receiver to mirror bookings into Convex.
- install: `npx rr add cal-com-booking`
- detail: https://resource.rahmanef.com/slices/cal-com-booking

### Full Width Toggle
- slug: `full-width-toggle`  kind: `ui`  category: `ui`
- Page-container width toggle (contained / wide / full). Per-device localStorage + cross-tab sync. Ships useFullWidth hook + FullWidthToggle button (icon/button/segment variants) + WidthContainer wrapper. Zero backend, zero env.
- install: `npx rr add full-width-toggle`
- detail: https://resource.rahmanef.com/slices/full-width-toggle

### Command Menu
- slug: `command-menu`  kind: `ui`  category: `ui`
- Renderless ⌘K command palette + generic search modal. Consumer supplies CommandGroup[] + onSelect + label bag; slice owns dialog chrome, ⌘K hotkey, MRU history. Pulled UP from notion-page-clone's command-palette renderless surface (Wave N+3.7) — Nosion adapters dropped at the kitab boundary.
- install: `npx rr add command-menu`
- detail: https://resource.rahmanef.com/slices/command-menu

### Motion Primitives (8)
- slug: `motion-primitives`  kind: `ui`  category: `ui`
- Eight ready-to-style motion components: marquee, kinetic-heading, magnetic, cursor-spotlight, stat-counter, reading-progress, grain, lightbox. Framer-Motion-powered, tree-shakeable. Facade slice — pulls from template-base/frontend/slices/motion-primitives.
- install: `npx rr add motion-primitives`
- detail: https://resource.rahmanef.com/slices/motion-primitives

### Responsive Dialog (Sheet ↔ Modal)
- slug: `responsive-dialog`  kind: `ui`  category: `ui`
- ResponsiveDialog — auto-switches between bottom Sheet (mobile) and centered Dialog (desktop) at the md breakpoint. Same API as shadcn Dialog. Kitab forbids raw <dialog>; use this everywhere. Facade slice — pulls from template-base/frontend/slices/responsive-dialog.
- install: `npx rr add responsive-dialog`
- detail: https://resource.rahmanef.com/slices/responsive-dialog

### Dashboard Shell — Responsive
- slug: `dashboard-shell`  kind: `ui`  category: `ui`
- ResponsiveDashboardShell — desktop sidebar + topbar, mobile dock + sheet sidebar, breakpoint-aware. Ports superspace's layout/dashboard/{Desktop,Mobile,Responsive}DashboardShell + sidebar primary/secondary slots. Facade slice — pulls from template-base/frontend/slices/dashboard-shell.
- install: `npx rr add dashboard-shell`
- detail: https://resource.rahmanef.com/slices/dashboard-shell

### Three-Column Layout — Sidebar/Content/Inspector
- slug: `three-column`  kind: `ui`  category: `ui`
- ThreeColumnLayoutAdvanced — collapsible left/right + resizable widths + responsive breakpoints + PanelSection compound (Header/Items/Footer) + per-panel footer slots. Models shadcn sidebar API for the panel interior. Pair with PanelGroup/PanelMenu/PanelSeparator primitives. Trigger ≠ header (V-wave separation rule).
- install: `npx rr add three-column`
- detail: https://resource.rahmanef.com/slices/three-column

### BroadcastChannel — Cross-tab Sync
- slug: `broadcast-channel-sync`  kind: `ui`  category: `realtime`
- Same-origin cross-tab + cross-iframe state sync via BroadcastChannel API. Tiny, no backend, no install.
- install: `npx rr add broadcast-channel-sync`
- detail: https://resource.rahmanef.com/slices/broadcast-channel-sync

### RBAC — Tiered System Roles
- slug: `rbac-roles`  kind: `backend`  category: `auth`
- Workspace-scoped RBAC with 6 system roles (owner/admin/manager/staff/client/guest) and three tier presets — solo, influencer, organization. Env-based platform admin bypass via PLATFORM_ADMIN_EMAILS. checkPermission / requirePermission helpers, role seeding mutation, @convex-dev/auth aware (no Clerk).
- install: `npx rr add rbac-roles`
- detail: https://resource.rahmanef.com/slices/rbac-roles

### Admin Panel — Unified Product Admin
- slug: `admin-panel`  kind: `full`  category: `infra`
- 17-section admin surface (events, funnels, attribution, users, A/B, flags, pricing, CMS, email, audit, ...) gated by RBAC. Auto-filters sidebar by tier (solo/influencer/organization) and user permissions. Single backend resolver (getMyAdminAccess) mirrors frontend gate so UI can never leak.
- install: `npx rr add admin-panel`
- detail: https://resource.rahmanef.com/slices/admin-panel

### Event Tracking — P0 Instrumentation
- slug: `event-tracking`  kind: `full`  category: `data`
- Client SDK + Convex ingestion endpoint for structured product events. Auto-captures page_view/signup/login + UTM/referrer/first-touch attribution. Batched flush via requestIdleCallback. Targets <100ms p99 ingestion.
- install: `npx rr add event-tracking`
- detail: https://resource.rahmanef.com/slices/event-tracking

### Theme Preset Switcher
- slug: `theme-preset-switcher`  kind: `ui`  category: `ui`
- Runtime theme swap (colors + fonts + shadows + tracking). OKLch CSS vars per preset. Persists to localStorage + Convex. Add a new preset by appending a CSS block in app/globals.css with [data-theme="<name>"], then register in preset-groups.ts.
- install: `npx rr add theme-preset-switcher`
- detail: https://resource.rahmanef.com/slices/theme-preset-switcher

### Icon Picker
- slug: `icon-picker`  kind: `ui`  category: `ui`
- Emoji + lucide icon picker with search, 10-color palette, Twemoji/native toggle, recents tracking. One string stores emoji OR lucide:Name OR with ?c=hex tint — backwards-compat with raw-emoji fields. Two variants: Popover (compact trigger) and Inline (full sheet/dialog use). Lifted 2026-05-16 from notion-page-clone — full implementation (19 files) including emoji-keywords search index, twemoji renderer, lucide-catalog, recents store, style-pref hook.
- install: `npx rr add icon-picker`
- detail: https://resource.rahmanef.com/slices/icon-picker

### Call to Action
- slug: `cta`  kind: `ui`  category: `ui`
- Brutalist call-to-action section — eyebrow label, serif headline, body, arrow CTA. Pair with CtaButton standalone for inline placements. Lifted 2026-05-16 from rahmanef.com; assumes Tailwind tracking-brutal / tracking-brutal-sm utilities OR drop them for the default tracking scale.
- install: `npx rr add cta`
- detail: https://resource.rahmanef.com/slices/cta

### Hero
- slug: `hero`  kind: `ui`  category: `ui`
- Editorial split-grid landing hero — eyebrow pill + large serif H1 + italic pull-quote + 1-2 button CTA row + right-column portrait card with optional caption. Fully props-driven (title/quote/ctas/image). Sanitized from rahmanef.com on 2026-05-16: SITE_CONFIG hardcode dropped, custom Heading/Section primitives replaced with raw semantic elements + stock Tailwind tracking-widest so the slice ships without consumer preset utilities.
- install: `npx rr add hero`
- detail: https://resource.rahmanef.com/slices/hero

### Rate Limit
- slug: `rate-limit`  kind: `backend`  category: `infra`
- Convex-backed per-key request counter. Atomic check-and-increment via `consume` mutation; expired rows pruned by `_pruneExpired` internalMutation wired to a 5-min cron. Replaces single-replica in-memory Map so multi-replica Next deployments share buckets. Caller chooses key namespace (csp:<ip>, mcp:<ip>, oauth_token:<ip>). Lifted 2026-05-16 from rahmanef.com.
- install: `npx rr add rate-limit`
- detail: https://resource.rahmanef.com/slices/rate-limit

### Subscribers
- slug: `subscribers`  kind: `backend`  category: `email`
- Newsletter list with honeypot + per-email rate-limit + token-based unsubscribe + admin remove. Public `subscribe` returns status strings (`created` / `already` / `resubscribed` / `honeypot`); admin `listAll` / `count` queries gated by `requireAdmin` (rr `_shared/auth`). Lifted 2026-05-16 from rahmanef.com; sanitized: token args dropped, sibling `analyticsEvents` insert removed — wrap subscribe in a consumer action if you want funnel telemetry.
- install: `npx rr add subscribers`
- detail: https://resource.rahmanef.com/slices/subscribers

### Testimonials
- slug: `testimonials`  kind: `backend`  category: `content`
- Quote/name/role rotator backend. Public `listAll` + `get` (no auth — testimonials are public), admin CRUD via `requireAdmin`, internal `seed` for one-shot bootstrap. Indexed by `order` so carousel/grid keeps stable rotation. Lifted 2026-05-16 from rahmanef.com; token-based admin gate swapped for rr `_shared/auth`.
- install: `npx rr add testimonials`
- detail: https://resource.rahmanef.com/slices/testimonials

### Services
- slug: `services`  kind: `backend`  category: `content`
- Service offerings backend — title + summary + deliverables array + sort order. Public read, admin CRUD, internal seed. Pairs with a frontend services grid/list (consumer-side). Lifted 2026-05-16 from rahmanef.com; token-based admin gate swapped for rr `_shared/auth`.
- install: `npx rr add services`
- detail: https://resource.rahmanef.com/slices/services

### Socials
- slug: `socials`  kind: `backend`  category: `content`
- Single source of truth for profile/social links. Powers JSON-LD `Person.sameAs` (Google entity graph), IndieWeb `<link rel="me">` tags, and footer/contact/about UI surfaces. URL-deduped, ordered, `visible` / `featured` / `relMe` / `sameAs` flags. Lifted 2026-05-16 from rahmanef.com; token-based admin gate swapped, baked-in 14-platform rahmanef seed dropped — `seed` now takes items via args so each adopter ships their own list.
- install: `npx rr add socials`
- detail: https://resource.rahmanef.com/slices/socials

### Create Your MCP
- slug: `create-your-mcp`  kind: `full`  category: `ai`
- Turn any rr-based app into an MCP server that ChatGPT custom apps, Claude.ai connectors, Cursor MCP, and other AI clients authenticate to. OAuth 2.1 + PKCE flow with code → bearer exchange, env-configured vendor-host allowlist, single-use codes, 1-year bearer tokens, scope-tagged tools, opaque error collapsing, constant-time token compare. Static MCP_API_KEY fallback for service-account / CI scripts. Sanitized 2026-05-16 from rahmanef.com's production MCP integration — vendor literals (chatgpt.com / OpenAI paths) replaced with MCP_OAUTH_ALLOWED_HOSTS + MCP_OAUTH_ALLOWED_PATH_PREFIXES env vars so the slice ships portable.
- install: `npx rr add create-your-mcp`
- detail: https://resource.rahmanef.com/slices/create-your-mcp

### Contact Form + Resend
- slug: `contact-form-resend`  kind: `full`  category: `email`
- Contact form posting to Resend email API. Server Action + Zod input validation. Convex mutation for storage + Resend send.
- install: `npx rr add contact-form-resend`
- detail: https://resource.rahmanef.com/slices/contact-form-resend

### Admin — Generic Shell
- slug: `admin`  kind: `full`  category: `infra`
- Per-instance admin landing scaffold + portable nav-from-registry factory. Consumer supplies a SliceRegistryAdapter (each slice declares its own admin.activity[]) + queryTable reader; the slice's buildAdminStats(opts) emits the { counts, unreadMessages, activity } shape Convex's admin.stats query returns. Pulled UP from rahmanef.com (Wave N+3.1, commit b542389) — domain literals dropped at the kitab boundary. Gated by requireAdmin on Convex side; superadmin email gate via SUPER_ADMIN_EMAIL env.
- install: `npx rr add admin`
- detail: https://resource.rahmanef.com/slices/admin

### Platform Admin — Multi-Tenant Control Plane
- slug: `platform-admin`  kind: `full`  category: `infra`
- Multi-tenant SaaS control plane. Workspace lifecycle ops (list/delete/cascade), per-tenant tier presets (gates + quota), KPI dashboard grid. Consumer-domain bits injected via adapter props (tenantTablesAdapter / tierPresets / kpiSources). Contract-only scaffold; canonical implementation lands via /rr-send from superspace. See docs/contract-negotiations-2026-05-15.md §4.
- install: `npx rr add platform-admin`
- detail: https://resource.rahmanef.com/slices/platform-admin

### Audit Log — Workspace Events
- slug: `audit-log`  kind: `backend`  category: `infra`
- Workspace-scoped audit event recorder. Canonical logAuditEvent helper for mutations + actions; supports entity tracking, before/after diff, IP/user-agent capture.
- install: `npx rr add audit-log`
- detail: https://resource.rahmanef.com/slices/audit-log

### Comments — Threaded
- slug: `comments`  kind: `full`  category: `content`
- Polymorphic-target threaded comments. Consumer picks `TargetRef = { kind, id, subId? }` (e.g. page+block, blog+slug, task+id). Renderless <CommentsThread> + <CommentsAnchor> wrappers. useComments(bindings, opts) hook returns items + openCount + CRUD + forbiddenWords guard. Adapter pattern — see contract-negotiations §1.
- install: `npx rr add comments`
- detail: https://resource.rahmanef.com/slices/comments

### SEO — AI Metadata Generator
- slug: `seo`  kind: `full`  category: `content`
- Service slice for SEO metadata generation — Anthropic-backed action with per-user 24h cost guard + portable persona prop. No public route. Backend exposes generate + generateAndApply mutations gated by requireAdmin; consumers inject brand voice via the personaContext arg (or buildSeoSystemPrompt factory).
- install: `npx rr add seo`
- detail: https://resource.rahmanef.com/slices/seo

### Document Checklist — Job-Search Doc Tracker
- slug: `document-checklist`  kind: `full`  category: `content`
- Track required job-search documents (CV, KTP, ijazah, etc.) with country-scoped seed templates and per-user completion state. Ships an Indonesian default checklist. Toggle completed + notes + expiry per item.
- install: `npx rr add document-checklist`
- detail: https://resource.rahmanef.com/slices/document-checklist

### Pricing Page
- slug: `pricing-page`  kind: `ui`  category: `ui`
- Canonical pricing tier section — eyebrow + headline + 2/3/4 column tier grid with optional FAQ accordion below. Tiers fully data-driven (name/price/period/bullets/cta/featured/badge). Featured variant configurable (ring/scale/tint). Single SSOT — every saas/marketing template consumes this slice for pricing pages so admin-edited tiers propagate without per-template rewriting.
- install: `npx rr add pricing-page`
- detail: https://resource.rahmanef.com/slices/pricing-page

### Feature Grid
- slug: `feature-grid`  kind: `ui`  category: `ui`
- Canonical features grid section — eyebrow + headline + 1/2/3/4 column item grid in three layout variants (cards, minimal, alternating). Items accept Lucide icon component OR string label, optional image (next/image), optional link CTA. Single SSOT — every template consumes this slice for features pages so admin-edited items propagate without per-template duplication.
- install: `npx rr add feature-grid`
- detail: https://resource.rahmanef.com/slices/feature-grid

### Landing Sections
- slug: `landing-sections`  kind: `ui`  category: `infra`
- CRUD-driven admin editor for the public landing-page composition. Ships a pure reducer + LandingProvider store adapter + admin LandingView/LandingEditorView built on the shared CRUD primitives, plus a per-section LandingSectionShell that handles background image + custom Tailwind className overlay. Sections carry { kind, order, title, subtitle, enabled, imageUrl, imageRatio, bgImageUrl, className, config (JSON) } with up/down reorder arrows. Consumers map each `kind` (hero, features, pricing, blog, changelog, testimonials, portfolio, services, stats, newsletter, faq, cta, custom) to their own renderer wrapped in <LandingSectionShell>. Canonical pattern used by all 7 rr website templates.
- install: `npx rr add landing-sections`
- detail: https://resource.rahmanef.com/slices/landing-sections

### FAQ Section
- slug: `faq-section`  kind: `ui`  category: `ui`
- Canonical FAQ accordion section — eyebrow + headline + accordion item list. Three layouts (single column, two-column, grouped by category). Optional footer CTA ("Still have questions?"). Items fully data-driven. Single SSOT — every template consumes this slice for FAQ blocks so admin-edited Q&A propagates without per-template rewrite.
- install: `npx rr add faq-section`
- detail: https://resource.rahmanef.com/slices/faq-section

### Testimonials Grid
- slug: `testimonials-grid`  kind: `ui`  category: `ui`
- Canonical testimonials section — quote + author + role/company + optional avatar + optional star rating. Three layouts (uniform cards grid, centered quote-stack, CSS masonry). `featured` testimonials get a ring accent. Pairs naturally with the `testimonials` backend slice (Convex queries) but has zero coupling — pass any item array.
- install: `npx rr add testimonials-grid`
- detail: https://resource.rahmanef.com/slices/testimonials-grid

### Blog Section
- slug: `blog-section`  kind: `ui`  category: `ui`
- Canonical blog list + detail section. <BlogListSection> renders 3 layouts (cards grid, minimal list, featured-split with hero + side rail). <BlogPostView> renders the single-post page with cover + meta + paragraph-split body. Both pass through `hrefFor`/`backHref` so each template controls routing — single SSOT for /blog and /blog/[slug] across all templates.
- install: `npx rr add blog-section`
- detail: https://resource.rahmanef.com/slices/blog-section

### Changelog Feed
- slug: `changelog-feed`  kind: `ui`  category: `ui`
- Canonical /changelog or /whats-new section. Entries support 5 kinds (feature/improvement/fix/chore/breaking) with color-coded badges. Three layouts (timeline with date-rail, large cards, minimal list). Optional `limit` for "Recent updates" excerpts on home pages. Optional `groups` per entry for sub-sectioned bullet lists.
- install: `npx rr add changelog-feed`
- detail: https://resource.rahmanef.com/slices/changelog-feed

### Portfolio Section
- slug: `portfolio-section`  kind: `ui`  category: `ui`
- Canonical portfolio list + detail section. <PortfolioListSection> renders 3 layouts (uniform 16:9 grid, CSS masonry, asymmetric with featured hero). <PortfolioDetailView> renders title + meta + cover + body + gallery + external link + related items. Both pass through `hrefFor`/`backHref` so each template controls routing — single SSOT for /portfolio and /portfolio/[slug] across agency-studio and personal-brand.
- install: `npx rr add portfolio-section`
- detail: https://resource.rahmanef.com/slices/portfolio-section

### Notion Blocks — editor primitive bundle
- slug: `notion-blocks`  kind: `ui`  category: `ui`
- One install ships four notion-style block primitives: KaTeX equation, highlight.js code block, per-page subscription bell, drag-fill grid cell selection. Each is config-driven with zero shared-state coupling — drops into any React surface (marketing landing, admin panel, editor, doc page). Bundled to keep the catalog tight; per-block narrow imports still available via individual peer slices.
- install: `npx rr add notion-blocks`
- detail: https://resource.rahmanef.com/slices/notion-blocks

### Theme Presets — tweakcn loader + 30+ color schemes
- slug: `theme-presets`  kind: `ui`  category: `ui`
- Tweakcn theme preset loader — fetches from /r/registry.json + applies CSS variable overrides to next-themes. Ships <ThemePicker> popover, <TweakcnSwitcher> for quick toggle, <ThemeColorSync> for live preview, and a 30+ preset catalog. localStorage key `nosion:theme-preset` (preserved verbatim — host can rename for new deploys). Pure React + Tailwind v4 + next-themes. No backend.
- install: `npx rr add theme-presets`
- detail: https://resource.rahmanef.com/slices/theme-presets

### Files — pluggable upload + URL resolver with storage-adapter contract
- slug: `files`  kind: `ui`  category: `data`
- Host-pluggable file upload + URL resolution. Ships <FileUploadButton>, <FileChip>, useFileUpload(), useFileUrl() — all reading from a FilesAdapter the host wires via <FilesAdapterProvider>. Bundled localStorage demo adapter stores blobs as data URLs (small files only). Drop in your own adapter for Convex / S3 / GCS / R2. The slice itself has zero backend coupling, proving the storage-adapter pattern for the rest of the open-silong blocked-pending-adapter wave (cover, workspace-io, templates, …).
- install: `npx rr add files`
- detail: https://resource.rahmanef.com/slices/files

### Equation — Notion-style KaTeX block primitive
- slug: `equation`  kind: `ui`  category: `ui`
- Inline-or-display LaTeX equation block — Notion-inspired primitive. KaTeX-rendered with edit/preview toggle, raw-text fallback when KaTeX fails to parse. Pure UI primitive (zero Convex tables, zero global state). Lifted from notion-page-clone (Nosion). Use standalone OR bundled via the notion-blocks bundle. Drop into any React surface — docs, marketing landing, editor.
- install: `npx rr add equation`
- detail: https://resource.rahmanef.com/slices/equation

### Code Block — Notion-style syntax-highlighted code primitive
- slug: `code-block`  kind: `ui`  category: `ui`
- Highlight.js-powered code block — Notion-inspired primitive. Language selector dropdown (auto-detect + 50+ language packs), copy-to-clipboard button, line-wrap toggle. Pure-UI primitive — no Convex tables. Lifted from notion-page-clone (Nosion). Use standalone OR bundled via notion-blocks.
- install: `npx rr add code-block`
- detail: https://resource.rahmanef.com/slices/code-block

### Notifications — Notion-style per-page Notify Me
- slug: `notifications`  kind: `ui`  category: `ui`
- Pure-client per-page subscription primitive — Notion-inspired bell button + popover. State stored in localStorage (no backend needed). Shipped as a `NotifyMePopover` toggled from a page-action bell. Frequency choices: instant / daily digest / weekly digest. Lifted from notion-page-clone (Nosion). Use standalone OR bundled via notion-blocks.
- install: `npx rr add notifications`
- detail: https://resource.rahmanef.com/slices/notifications

### Database Cell Selection — Notion-style drag-fill + multi-select
- slug: `database-cell-selection`  kind: `ui`  category: `ui`
- Notion-style grid cell interaction primitives: drag-fill (Sheets/Excel-style range fill), multi-cell selection with shift-click + arrow-key extension, paste-from-clipboard column adapter. Pure-UI hooks + components, no Convex tables. Lifted from notion-page-clone (Nosion). Pair with any tabular UI (notion-shell databases, ag-grid, custom React table, etc.).
- install: `npx rr add database-cell-selection`
- detail: https://resource.rahmanef.com/slices/database-cell-selection

### Notion Database — embedded DB surface (6 views, optional)
- slug: `notion-database`  kind: `ui`  category: `ui`
- Portable Notion-style database surface. Optional companion to notion-shell — install shell alone for pages + sidebar + block editor, add notion-database when you want embedded databases. Ships NotionDatabase (full DB UI w/ ViewTabs + ViewOptions + per-column menu), NotionProperty (value + schema editor), 10 property-cell types (text / number / checkbox / select / multi_select / status / date / url / email / phone), 6 built-in views (Table / Board / List / Gallery / Calendar / Feed), and pure helpers (applyView, groupBy, bucketByDate). Domain types live in notion-shell (single source of truth — Page.rowOfDatabaseId + rowProps reference them) and re-exported here for convenience. Lifted from notion-page-clone (Nosion) — CI-wave split (2026-05-21).
- install: `npx rr add notion-database`
- detail: https://resource.rahmanef.com/slices/notion-database

### Notion Shell — page + sidebar + block editor primitives (pure, no database)
- slug: `notion-shell`  kind: `ui`  category: `ui`
- Portable Notion-style PAGE + SIDEBAR + BLOCK editor primitives. CI-wave (2026-05-21) split the database surface out — install the optional `notion-database` peer for embedded TableView / BoardView / ListView / GalleryView / CalendarView / FeedView, NotionDatabase, NotionProperty, ViewTabs, ViewOptions, ColumnHeaderMenu, property-cells. notion-shell alone gives you Notion-clone pages + sidebar + editor without the database weight. Domain types (Database, Property, PropertyValue, DbView, DatabaseViewConfig, DatabaseFilter, DatabaseSort) remain in notion-shell as the single source of truth (Page.rowOfDatabaseId + rowProps reference them). FULL OLD DESC BELOW: Portable Notion-style wrapper primitives. PAGE EDITOR: NotionPage (optional cover image band + header + body), NotionHeader / NotionSidebar / NotionBlock (live inline-markdown decorator, hover actions menu, optional dragHandle slot), SlashMenu (searchable block-type picker w/ keyboard nav), BlockActionsMenu (turn-into / duplicate / delete), InsertBlockButton (`+` trigger w/ SlashMenu), SortableBlockList (@dnd-kit render-prop wrapper for block reorder), PageActionsMenu (header dropdown: cover/favorite/duplicate/export/trash). DATABASE: NotionDatabase (full DB surface w/ tabs + options + per-column menu), NotionProperty (10 property-cell types), 6 built-in views (Table/Board/List/Gallery/Calendar/Feed), ViewTabs, ViewOptions (sort + filter + search popover), ColumnHeaderMenu. SPECIALISED BLOCK RENDERERS: ImageRenderer (URL + caption + preview), EmbedRenderer (YouTube/Vimeo/Loom/Figma/CodePen/Spotify auto-detect + iframe fallback). Pure helpers: applyView, groupBy, bucketByDate. Pure / props-driven — host owns data + change handlers.
- install: `npx rr add notion-shell`
- detail: https://resource.rahmanef.com/slices/notion-shell

## Agent API

JSON catalog endpoints for AI agents:

```
GET /api/knowledge                 # full catalog (resources + slices + layouts)
GET /api/knowledge?type=slice      # only Tier-3 slices
GET /api/knowledge?type=template   # only website templates
GET /api/knowledge?type=layout     # only layouts (sections, pages)
GET /api/knowledge?slice=<slug>    # detail for one slice
GET /api/knowledge?resource=<slug> # detail for any resource
GET /api/knowledge?layout=<slug>   # detail for one layout (legacy)
```

Response shape: `{ resources: [...], slices: [...], layouts: [...], counts: {...}, rules: [...] }`.
Each `resources[]` entry has `{ source, slug, title, description, category, tags, href, previewPath, install }` — agents can install any via `install` field.

## Hard rules (12-rule doctrine — full text at /best-practice)

- NO Clerk. Use @convex-dev/auth.
- All UI = shadcn primitives. No raw HTML buttons / dialogs / native date/file inputs.
- Copy-first flow. Never greenfield — copy from a source project, adjust imports.
- Stack: Next 16 + React 19 + Tailwind 4 + Convex self-hosted + TS strict.
- Next 16: use `proxy.ts` not `middleware.ts`; `next/link` + `next/image` only.
- Workspace isolation per Convex query (`.withIndex('by_workspace', …)`).
- No bare `.collect()` — use `.withIndex(...).take(N)` or paginate.
- Every public mutation/query MUST declare `args:` validators + server-side authz (`requireUser`/`requireAdmin`).
- RBAC + audit log on every mutation.
- `NEXT_PUBLIC_*` only for non-sensitive values.
- **File modularity: 200-line hard cap per source file** (excl. catalog/seed/_generated). Compose, don't accumulate. Gate: `npm run audit:file-size`.
- Slice contract: `slice.json` + `slice.contract.ts` + `slice.manifest.json` mandatory per slice. Imports resolve via `@/components/ui/*`, `@/shared/*`, `@/features/<own-slug>/*`, `@convex/*`, or relative-within-slice.
- Solo-dev: push direct to main (no PR); Dokploy auto-deploys on push.

## How to install

Fresh project (recommended):
```
npx rahman-resources init my-app   # or alias: npx rr init my-app
cd my-app
cp .env.example .env.local         # fill NEXT_PUBLIC_CONVEX_URL
npm install --legacy-peer-deps
npx convex dev --once              # generates convex/_generated
npm run dev
```

Add a template or slice into an existing project:
```
npx rr add <slug>                  # auto-detects TEMPLATE vs SLICE,
                                   # auto-augments .env.example,
                                   # auto-installs npm deps
```

## Audit chain (run before deploy)
```
npm run validate:all               # full chain: slices + templates + file-size + manifests + contracts
npm run audit:slices               # slice contract violations
npm run audit:templates            # template scaffold violations
npm run audit:file-size            # 200-line modularity cap
```

## Deploy (Dokploy via sc-all)
```
# Invoke the sc-all skill in Claude Code — orchestrates
# sc-dokploy + sc-convex: creates repo, pushes, configures Dokploy,
# deploys self-hosted Convex backend, sets DNS, triggers build.
```