dotclaude

a next.js 14 dashboard whose .claude/ directory is the actual product.

the app reads its own .claude/ folder at request time and surfaces the skills, agents, hooks, connectors, and commands inside it. the repo is also designed to be forked as a starter kit. drop the .claude folder into any next.js project and you get a sane, opinionated claude code setup out of the box.

the meta pitch

most "claude code config" examples are toys. one skill, one hook, no context. this repo flips that.

the .claude folder is real and used in anger to build this dashboard. the dashboard exists to render that folder so you can see exactly what is in it without grepping the filesystem. everything is filesystem driven. no db. no external api calls. no vendor lock-in. you can fork it offline.

stack

next.js 14 (app router), react 18, typescript strict, tailwind (no component library), node.js fs for reading .claude/ at request time.

layout

.claude/                  # the product
  CLAUDE.md               # project-level guidance for claude code
  settings.json           # permissions + PreToolUse hook
  connectors.json         # external services this workspace knows about
  skills/
    add-page/SKILL.md     # scaffold a new dashboard route
    add-connector/SKILL.md
    ship-it/SKILL.md      # pre-flight checklist
  agents/
    ui-reviewer.md        # critiques ui changes
    connector-builder.md  # scaffolds connector entries
  hooks/
    pre-commit-lint.sh    # blocks commits or pushes if typecheck or lint fails
  commands/
    ship.md               # /ship slash command

app/                      # next.js routes
  page.tsx                # overview
  skills/page.tsx
  agents/page.tsx
  connectors/page.tsx
  api/claude-config/route.ts

components/               # small, handcrafted ui bits
lib/                      # claude-config + safe fs helpers

running it

npm install
npm run dev

open http://localhost:3000. the home page shows counts of skills, agents, connectors, hooks, and commands. each section page renders the raw SKILL.md, agent spec, or connector entry behind a disclosure, so you can read exactly what claude reads.

no secrets needed. .env.example lists env vars you would need if you extend the connectors to actually call external apis. none are required to run the dashboard.

reusing as a starter kit

# in your existing next.js project root
cp -R /path/to/dotclaude/.claude .

then:

1. read through .claude/CLAUDE.md and rewrite the "stack and conventions" and "code style" sections for your project
2. trim or extend the skills in .claude/skills/ so they reflect your workflows. generic skills age badly.
3. decide whether you want the pre-commit hook. if yes, make sure your project actually has npm run typecheck and npm run lint scripts. the hook calls them by name.
4. edit .claude/connectors.json to list services your workspace cares about.

that is it. nothing else to wire up.

project conventions

typescript strict, no any. server components by default. "use client" only when interactivity needs it. tailwind only (no css modules, no styled-components, no inline styles). commits are lowercase or sentence case, conversational, no conventional-commit prefixes.

status

shipped in a one-week sprint (2026-05-13 to 2026-05-20). small surface area on purpose. prs welcome, especially for new skills and agents that pull their weight.