DEV Community

Cover image for I created a skill for visual learner like me
Neil James Monzales
Neil James Monzales

Posted on

I created a skill for visual learner like me

#ai #claude #agents #learning

Background

It's been more than a year when I started my journey with agentic coding. Within months, the software industry shifted quickly from vibe coding to spec-driven development. There's so many methodology popping up every single day. Overwhelming right? But all these methodologies boil down to reading/writing tons of markdown files.

The Problem

cat problem meme.jpeg
Having a lot of documents to read boggles my mind. Most of the time, I get easily distracted by just reading it. I've tried different ways for me to be able to absorb the context, none of them worked for me. So I decided to build a skill tailored to my preferences.

What I built?

I built doc-server, a tiny local web app that serves the project spec/plans/context served as HTML so I can quickly navigate the docs, and get context to the project. It can support multiple projects/worktrees served in one port. This is a read-only documentation reviewer, but gets updated if there are documents added on the repo.

How it works?

how-it-works

  • The doc-server is a Python-based local HTTP server that turns the markdown files Claude Code writes into a browsable, styled website.

  • By default, agent writes divergent documents it detects from the worktree into a branch-based routes.

  • Branch-based routing. Every project’s docs land at a predictable URL: http://localhost:8910/<project>/<branch>/. Whether you’re on main or a worktree on feat/auth, the URL always matches your current branch. This means multiple worktrees coexist without colliding

  • Sync on refresh. The server re-reads the markdown files from
    ~/.claude/doc-server/ on every page load. No rebuild step, no file watcher. Just refresh the browser, and you see the latest version of whatever the agent just wrote.

  • As mentioned, it is a local app, but for accessibility, I used tailscale (mesh vpn) to access the docs privately everywhere, especially when I am away from my machine.

Screenshots

doc-server-screenshot

I created a system prompt on my code editor to provide the worktree context so /doc-server skill can pick it up and render the summary on the home page.

What's next?

I am still refining this skill as you read this article, but please do try it! Here are the installation instructions:

# Add this marketplace, then install a plugin from it:
/plugin marketplace add nljms/skills
/plugin install doc-server@nljms-skills

# Or browse and install interactively after adding the marketplace:
/plugin marketplace add nljms/skills
/plugin
Enter fullscreen mode Exit fullscreen mode

Submit issues or feature requests on this repo: https://github.com/nljms/skills. I am open for collaboration, just let me know! πŸ˜„

Top comments (0)