How to vibe codeSkribra

Prerequisites

• Node.jsfree

  Required runtime for building and running the Next.js application.

• GitHubfree

  Version control and deployment pipeline source repository.

• 

  OpenAI API Keypay-as-you-go

  Powers long-form article generation, outlines, and FAQ schemas.

• 

  DataForSEO Accountpay-as-you-go

  Provides live keyword volume and difficulty metrics for strategy generation.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding the full-stack Next.js application, writing complex multi-step LLM pipelines, and iterating on background workers.

• Cursor

  Ideal for fine-tuning UI components, Tailwind styles, and reviewing generated markdown editor views.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js app with Tailwind CSS, shadcn/ui, Neon Postgres database connection, and better-auth configuration.

   Initialize a new Next.js project with App Router, TypeScript, Tailwind CSS, and shadcn/ui. Set up Drizzle ORM connected to Neon Postgres. Implement better-auth with email/password authentication for a single-user personal setup. Create database tables for 'projects' (id, name, url, target_icp, tone, created_at), 'keywords' (id, project_id, keyword, volume, difficulty, intent, status), 'articles' (id, project_id, keyword_id, title, content_markdown, cover_image_url, status, published_at), and 'maintenance_logs' (id, project_id, action_type, details, created_at). Ensure all foreign keys, indexes, and TypeScript types are correctly defined. Verify the build runs cleanly with no type errors.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Keyword Research & Strategy Engine

   Integrate the DataForSEO API to fetch keyword suggestions, volume, and difficulty scores based on user product descriptions.

   Build a DataForSEO API service client in TypeScript that takes a seed keyword or product URL context, queries DataForSEO for related keyword metrics (search volume, CPC, keyword difficulty), and returns a parsed list of opportunities. Implement a server action in Next.js that saves selected keywords to the database and populates a rolling 30-day content calendar queue. Add a clean dashboard view using shadcn/ui table and badge components to display keyword opportunities, filter by intent (informational, commercial), and trigger content generation queues.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Long-Form Article Generation Pipeline

   Build an AI writing pipeline using Vercel AI SDK and Anthropic/OpenAI APIs to draft 1,700–3,300 word articles with structured headings, FAQ schemas, and inline citations.

   Implement a multi-stage article generation pipeline using the Vercel AI SDK. Stage 1: Generate a comprehensive outline with H1, H2, and H3 headers based on the selected keyword and ICP definition. Stage 2: Execute parallel sub-agent prompts to draft sections in batches, targeting 2,000+ words in total with a humanized B2B SaaS tone. Stage 3: Automatically generate an FAQ section with corresponding JSON-LD schema markup. Stage 4: Call the Fal.ai Flux API using an on-brand prompt derived from the article title to generate a cover image, saving the resulting image URL. Store the compiled markdown article in the database with status 'draft'. Include error handling and retry logic for rate limits.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04CMS Publishing & IndexNow Integration

   Implement publishing connectors for webhook endpoints and automatic IndexNow protocol submission upon article publication.

   Build a publishing service that pushes finalized markdown articles to a configured custom webhook URL or WordPress REST API endpoint (with title, content HTML/markdown, slug, and metadata). Implement an IndexNow API utility that automatically broadcasts newly published article URLs to search engines (Bing/Yandex/Google via IndexNow endpoint) within 24 hours of publishing. Add a publishing management UI in the Next.js dashboard allowing manual approval or toggle to auto-publish.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Background Maintenance Agents & Analytics

   Set up background cron jobs using Inngest or Vercel Cron to simulate maintenance agents (Weaver internal linker and Keeper refresher) inspecting content performance.

   Create a background job runner using Inngest to simulate Skribra's maintenance agents. Implement 'Weaver', an agent that scans existing published articles in a project, identifies keyword overlaps and contextual relationship opportunities, and inserts internal markdown links between older posts and newly published content. Implement 'Keeper/Scout', an agent that evaluates simulated Google Search Console impressions and clicks, flagging stale posts or keyword cannibalization risks in a review queue table. Build a dashboard tab displaying active maintenance suggestions with one-click approval buttons.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Skribra