Claude Code: Build a Six-Module Content Dashboard

01Introduction · The problem

Creator workflow problems: scattered tools and disconnected processes

Ideas live in Notion, metrics are checked in the IG App, competitor tracking relies on memory, posts are scheduled in Buffer and AI news is browsed on X. Switching between these tools leaves ideas, metrics and publishing in different places, making unified management difficult.

A Content Dashboard, also called a Content OS, combines these workflows in a backend you control. It is a tool you build yourself rather than another SaaS subscription. With Claude Code, you can build it even without a programming background.

Describe requirements in natural language and Claude Code generates the corresponding code.

This guide covers six modules: Hook Vault, Analytics, Competitor Tracker, Scheduler, Content Calendar and What's Trending. Each has a prompt you can copy directly, an explanation of how it works and common issues.

02Preparation · Prerequisites

Environment requirements

Claude Code is Anthropic's terminal AI tool. It reads files, executes commands and connects to APIs through natural-language instructions. (Official best practices)

① Installation checklist

Node.js (18 or later) is the runtime for Next.js. Download the LTS version from nodejs.org.
Claude subscription (Pro or above) is required to run Claude Code; Pro costs about US$20/month.
Code editor: VS Code is recommended. Claude Code itself runs in the terminal, so an editor is optional.

② Claude Code installation

Open a terminal (Terminal / Command Prompt) and paste this command:

# Install Claude Code CLI globally
npm install -g @anthropic-ai/claude-code

# Enter the directory for your project, then start the CLI
mkdir content-os && cd content-os
claude

The first launch asks you to sign in to your Anthropic account for authorization. Once the input box appears, you can start using it.

03Technology · The stack

Responsibilities of stack components

The build prompts specify Next.js + Tailwind + shadcn/ui. Their responsibilities are:

Term	Definition	Responsibility summary
`Next.js`	React web framework for pages, routing, frontend and backend	Page and frontend/backend structure
`Tailwind`	CSS tool for styling directly with classes	Styling tools
`shadcn/ui`	Ready-made components you can copy and paste (buttons, cards, sidebars)	Ready-made interface components
`CLAUDE.md`	Project rulebook Claude reads before starting work	Project operating rules for Claude

After you specify these tools in a prompt, Claude Code handles installation, configuration and dependencies automatically. A published case study used the same combination, Next.js 16 + Tailwind 4 + shadcn/ui, to build pages that passed accessibility checks. (Reference case)

04Step 0 · Project rules

CLAUDE.md configuration before the first prompt

CLAUDE.md is the file Claude Code reads first when opening a new conversation, serving as the project's persistent rulebook. According to a long-term user cited in the official documentation, their CLAUDE.md has about 200 lines, with every rule corresponding to a specific error Claude previously made; behavioral rules have the greatest effect. (Source)

The official recommendation is to keep it short and readable, avoiding excessive length. A basic example follows:

// CLAUDE.md: Place in the project root

# Project: personal content dashboard (Content OS)

## Stack
- Next.js (App Router) + TypeScript
- Tailwind CSS + shadcn/ui
- Use dark mode by default, with terracotta (#C0573A) as the primary color
- Start with local mock data / SQLite, then connect real APIs

## Common commands
- npm run dev   Start the development server
- npm run build Build the application
- npm run lint  Check the code

## Code style
- Use function components and PascalCase filenames
- Put shared components in /components and pages in /app
- Reuse existing shadcn/ui components where possible

## Working rules (highest priority)
- Plan before editing: list the files to change and wait for my confirmation
- Complete one task at a time and show me the result before continuing
- Ask before destructive commands, including deleting files or changing settings
- Run git commit after each module, with a message explaining the change
- Ask about unclear requirements instead of guessing

After starting Claude Code, run /init. It scans the project and generates a CLAUDE.md draft; add behavioral rules using the example above.

05Step 1 · Getting started

First prompt: six-page scaffold

After installing Claude Code and configuring CLAUDE.md, paste the following prompt. It defines the six-page scaffold; Claude Code handles package installation, route creation and sidebar generation automatically.

// First prompt to paste into Claude Code

Build a content dashboard for a creator business with these six pages:

› Hook Vault: Automatically transcribe and turn each saved high-performing hook into a template
› Analytics: IG views, saves, follower counts, and this week's top posts
› Competitor Tracker: Fetch the strongest Reels from creators I follow each week
› Scheduler: Schedule across platforms in one action and generate captions
› Content Calendar: Fill in hooks and angles from /script
› What's Trending: Fetch AI news from 12 sources daily and label its hook potential

Use Next.js + Tailwind + shadcn/ui, dark mode, and a terracotta primary color.
Put my account @yourhandle at the top of the sidebar.
Create CLAUDE.md to record the selected technologies and all decisions.

After submission, Claude lists a plan explaining which files it intends to create, provided CLAUDE.md already contains behavioral rules. Review it and reply "Start" to begin generation. Once complete, run npm run dev to see the initial six-page structure in a browser.

Continue with one separate conversation per page, developing the modules individually. Handling each module in a new conversation context avoids interference from accumulated context.

Write CLAUDE.md
FLOW
Define rules first
Build scaffold
FLOW
One comprehensive prompt
Develop each page
FLOW
One prompt per page
Connect data / MCP
FLOW
Connect real sources last

06Core · Six modules

Building six core modules

Each module includes a prompt you can copy directly, an explanation of its mechanism and implementation considerations.

01 Hook Vault

Opening-line storage, templates and category search

// prompt: Hook Vault page

Build the Hook Vault page.
Automatically transcribe each saved hook and turn it into a template,
such as "[X] just beat [Y]", "Stop doing [X]", or "[number] things I wish I'd known sooner".
Support search by topic, hook type, and views.
Show the original creator, views, and a "use this" button,
which sends the hook to /script.

Mechanism: Store collected opening lines in a database and abstract them into fill-in templates. When writing scripts, filter by topic or type and use recorded sentence patterns directly.

Hook templates ready for use

Template	Type	Usage frequency
"Stop doing [X]. Start doing [Y]."	SWAP contrast	38×
"I built [product] in [time]."	BUILD process	24×
"You need a [tool]. Here's why."	CLAIM statement	19×
"[number] things I wish I knew before [X]."	LIST	15×
"Nobody is talking about [trend]."	CONTRARIAN	12×

Implementation limits: "Automatic transcription" converts video audio to text and usually requires a speech transcription API such as Whisper. For the first version, you can paste transcripts manually, complete the search, template and use this workflow, then automate transcription.

02 Analytics

Metric trends and posts above your personal median

// prompt: Analytics page

Build the Analytics page.
Import IG views, saves, followers, and direct-message counts.
Show each metric's 7 / 30 / 90 day trend with a sparkline.
Mark a post as a "heater" if it exceeds 2 times my 30 day median.
Show the top 5 heaters ranked by views,
with one sentence explaining why each performed well.

Mechanism: Use your personal 30-day median to flag unusually strong posts and describe their characteristics. Feed that explanation directly back into Hook Vault as a script reference.

Design explanation: Use your personal 30-day median instead of comparing with other accounts. This gives the heater definition a personal reference point and keeps an occasional high-traffic video from distorting the assessment.

Implementation limits: Instagram's official API limits access to personal-account metrics. For the initial version, the recommendation is to verify the logic with exported CSV files or manually entered metrics, then evaluate integration once the workflow is stable.

03 Competitor Tracker

Weekly retrieval schedule for followed accounts' popular Reels

// prompt: Competitor Tracker page

Build the Competitor Tracker page.
Every Sunday at 6 in the morning, fetch the top 5 Reels from each of the 8 accounts I follow.
Transcribe the audio and extract the hook and on-screen text.
Rank them by views and show the creator's handle, follower count,
and a "save to Hook Vault" button.

Mechanism: Retrieve popular Reels from specified accounts on a weekly schedule, transcribe audio and extract text. A "Save to Hook Vault" button adds competitor hooks to your personal inspiration collection, connecting competitor tracking, Hook Vault and scripts.

Implementation limits: Scraping social-platform content involves each platform's terms of service and technical limits, and often requires browser automation. In practice, it is usually handled through MCP-connected browser automation tools or third-party APIs; you must confirm that your method complies with platform rules.

04 Scheduler

Multi-platform scheduling and automatic copy generation

// prompt: Scheduler page

Build the Scheduler page.
Schedule my Reel in one action on the platforms I select:
Instagram, TikTok, and YouTube Shorts.
Generate captions from the hook + angle + CTA.
Use the scheduling MCP for the actual publication.

Mechanism: Combine posting across multiple platforms into a single action. Generate copy for each platform automatically from accumulated hooks and angles, keeping the message consistent.

The next section explains the actual integration options for a "scheduling MCP."

05 Content Calendar

Monthly overview of scheduled content

// prompt: Content Calendar page

Build the Content Calendar page.
Show all scheduled content in a calendar grid.
Each cell shows the exact date + time, platform, and hook.
Click a cell to see the complete script and caption in a side panel.

Mechanism: Show all scheduled content in a calendar, exposing gaps in publication dates and posting frequency on each platform. Click a cell to view the complete script and copy in a side panel.

Design principle: The calendar should be a view generated automatically after Scheduler scheduling. It presents the same single dataset and requires no manual maintenance.

06 What's Trending

Daily aggregation and automatic classification of trends from multiple sources

// prompt: What's Trending page

Build the What's Trending page.
Fetch from 12 sources daily, including the Anthropic blog, OpenAI blog, X lists, and niche RSS feeds.
Label each item "hook potential", "explainer", or "skip".
Put the top 5 items with the most hook potential into a feed, ordered by recency.
Send the highlights to my Slack at 7 in the morning.

Mechanism: Aggregate information daily from 12 sources. Claude initially classifies it into three label categories and sends only the top 5 high-potential items to Slack, reducing time spent on manual filtering.

Design explanation: Automatic classification labels determine this module's usefulness. RSS and Slack notifications have standard integration methods; this is the easiest of the six modules to automate.

07MCP explanation · Integration limits

Scheduled publishing and MCP scope

"Zernio MCP" in the example prompt is an illustrative name for an MCP tool handling actual posting. It is not an existing tool you can install and use directly.

MCP definition and configuration

MCP (Model Context Protocol) is a standard that lets Claude safely access external tools such as databases, GitHub, Figma and Slack. Each MCP server provides a set of tools for all Claude agents to use. Configure the corresponding server information in the mcpServers section of .claude/settings.json.

// .claude/settings.json (example)
{
  "mcpServers": {
    "slack": { "type": "url", "url": "https://mcp.slack.com/mcp" },
    "notion": { "type": "url", "url": "https://mcp.notion.com/mcp" }
  }
}

Social media publishing integration options

For social media publishing, there is currently no universal social MCP that directly handles posting across all platforms. Combine Claude Code's content generation with one of these three approaches:

Official platform MCP: For example, Meta's official MCP launched in late 4/2026 lets Claude Code operate FB / IG advertisements directly without building your own integration. (Source)
Browser automation MCP: Let Claude operate web posting interfaces for platforms without open APIs.
Export to a scheduling tool: After Claude generates content and a publication timetable, export it to an existing scheduling tool for publishing.

08Advanced · Prompt design

Advanced prompt design: interview → specification → execution

For complex requirements, have Claude interview you, produce a specification and then execute it in a separate conversation; this is more effective than writing a longer prompt. The example illustrates the workflow and output structure.

① Interview and specification master prompt

// Designed prompt: interview first, then write the specification

I want to build a creator content dashboard with the six modules listed above.

Before writing code, interview me with the AskUserQuestion tool.
Ask detailed questions about implementation, UI/UX, edge cases, and tradeoffs.
Skip obvious questions and investigate difficult issues I may have missed.

Cover the important decisions, then write the complete specification to SPEC.md.
Stop when the specification is ready. I will open a new conversation to implement it.

This method separates planning from execution. The interview turns vague requirements into an explicit specification; execution follows it in a fresh conversation context without interference from earlier discussion. (Official recommended workflow)

② Structure of Claude's illustrative output

Illustrative output for this type of prompt contains a file structure, a CLAUDE.md section and a component example. (Illustrative only, not an actual execution result.)

content-os/
├── app/
│   ├── overview/      # Overview
│   ├── hook-vault/    # Module 01
│   ├── analytics/     # Module 02
│   ├── competitors/   # Module 03
│   ├── scheduler/     # Module 04
│   ├── calendar/      # Module 05
│   └── trending/      # Module 06
├── components/
│   ├── Sidebar.tsx
│   ├── HookCard.tsx
│   └── Sparkline.tsx
├── lib/mock-data.ts   # Mock data for the first version
├── SPEC.md              # Specification from the interview
└── CLAUDE.md            # Project rules

A Hook card component using the terracotta primary color and shadcn/ui components:

// components/HookCard.tsx (example output)
export function HookCard({ hook }: { hook: Hook }) {
  return (
    <div className="rounded-xl border border-border bg-card p-4">
      <p className="font-medium">{hook.template}</p>
      <div className="mt-2 flex items-center gap-2 text-sm text-muted-foreground">
        <span>@{hook.creator}</span>
        <span className="text-[--terra]">{hook.views}×</span>
      </div>
      <Button onClick={() => dropToScript(hook)}>use this</Button>
    </div>
  );
}

09Community · Public guidance

Implementation advice from community documents and public examples

These implementation suggestions come from DEV, official documentation and public case studies. They describe concrete ways to improve usefulness after the basic build is complete.

Each CLAUDE.md rule should address a specific problem

The recommendation is to base each rule on an error Claude previously made. Behavioral rules affect results more than technical settings, determining whether Claude acts without confirmation.

Source · Long-term Substack user / Official documentation

Plan Mode for complex tasks

For complex tasks, have Claude read files and propose a plan without executing, then start after confirmation. Direct execution is more efficient for small changes such as fixing typos or adding a log line.

Source · Claude Code official best practices

Separate conversation context for each module

Do not handle all six pages in one conversation. Open a fresh context for each module to avoid accumulated context interfering with output quality.

Source · Community consensus / Example workflow

Manage tokens to avoid daily limits

Keep prompts concise, avoid accumulating unnecessary context and use /clear and /compact as needed to extend the amount of work available each day.

Source · Claude Code advanced tips

Subagents for parallel module work

Claude Code supports multiple agents and agent view. Assign subagents to frontend QA, testing and code review while the main agent coordinates. This can reduce total time when there are many modules.

Source · Code w/ Claude 2026 announcement

Regular CLAUDE.md updates for accumulated preferences

The official "Dreaming" feature reviews past work, organizes recurring preferences and problems and feeds them back into memory. The community practice "self-evolving CLAUDE.md" provides weekly revision suggestions.

Source · Anthropic 2026 / DEV community

local-first architecture for a personal dashboard

Keep data local and bind the development server to 127.0.0.1 rather than 0.0.0.0, with no external traffic and no cloud database to maintain.

Source · DEV local-first dashboard implementation

Accessibility checks after each page

LLMs may generate nonexistent ARIA attributes. Running axe-core after completing each page is recommended, focusing on whether text contrast in the custom shadcn theme meets requirements.

Source · Tests of 14 accessible Next.js apps

MCP selection order: official → browser automation → custom

There is no universal social MCP. Prefer an official platform MCP such as Meta, then browser automation and finally a custom server. After writing settings.json, agents can share it.

Source · Claude Code social media automation guide

Frequent commits and CHANGELOG.md for progress

Official documentation recommends CLAUDE.md in the root, CHANGELOG.md for progress tracking, frequent commits and tmux to maintain a session during long tasks.

Source · Anthropic scientific computing workflow

10Debugging · Common pitfalls

Common issues and corresponding fixes

All modules in one prompt. Pages interfere with each other, and Claude breaks B while changing A. Build the scaffold once, then develop individual pages.
Skipping CLAUDE.md. Claude lacks rules to reference, styles vary between sessions and it chooses unexpected approaches. Run /init, then add behavioral rules.
Real API integration in the first version. API key requests, permission settings and scraping restrictions can easily stall progress. Start with mock data or CSV to verify the workflow, then connect real data sources.
Looking for "Zernio MCP" as an existing tool. It is an illustrative name in the prompt. Complete copy generation and the publishing list first, publish manually and connect an actual MCP later.
More than 2 API posts a day. This may trigger platform mechanisms that reduce reach. Use automation to reduce switching between operations rather than increase posting frequency.
Skipping contrast and ARIA checks. An interface can look normal while failing accessibility standards. Run an accessibility check after completing each page.

Recommended sequence: verify that it runs, improve operation and then address automation.

Next step

After building the scaffold, developing the six pages and verifying the mock-data workflow, connect real data to the module you need most. By implementation difficulty, What's Trending (RSS + Slack notifications) is usually the easiest starting point for automation. For immediate usefulness, start with Hook Vault.

Screen design and content compilation · Tenten

You may freely reference, adapt and apply this guide to your own projects.