Forem: Dev Diaries

My Senior Dev - AI-Powered Code Reviews Built for Power Users

Dev Diaries — Tue, 09 Dec 2025 22:27:35 +0000

This is a submission for the https://dev.to/challenges/mux

What I Built

My Senior Dev is a webapp App that provides deep, multi-perspective
code reviews using specialized AI agents. It optimizes for efficiency, thoroughness and insight

designed specifically for power users who need comprehensive analysis of critical code changes.

It uses three specialized AI agents working in concert:

Claude for security vulnerability analysis
GPT-4 for code quality and architectural review
GPT-4 synthesis for combining perspectives into actionable insights

Instead of surface-level suggestions, you get the kind of thorough,
multi-angle code review that senior developers provide:

Traditional tools:

"Consider using const instead of let on line 42"

My Senior Dev:

"Security: This endpoint lacks rate limiting (DoS 
risk) 
# Code Quality: Database transaction isn't properly scoped (race 
conditions)  
# Architecture: Violates repository pattern from auth-service.ts
# Recommendation: Add rate limiting, wrap in transaction, move to 
UserRepository"

My Pitch Video

Demo

https://myseniordev.com/demo/
Full experience: https://myseniordev.com/?token=msd-beta-2024-invite

The Story Behind It

As a senior developer, I spent hours on thorough reviews for complex
PRs - checking security, architecture, performance, and
maintainability. While AI tools were getting good at surface
suggestions, none provided the multi-perspective, comprehensive
analysis that complex changes actually need.

My Senior Dev fills this gap. When you have a critical database
migration, security-sensitive auth flow, or complex algorithm, you want
more than "use const instead of let." You want to be able to chat with an AI persona
on a file by file, line by line basis.

Technical Highlights

Multi-Agent Architecture: Specialized agents with specific expertise
rather than one general-purpose AI.

Configurable Depth: Teams can tune intensity - staff_engineer for deep
architectural review, junior_engineer for standard checks,
product_manager for business impact.

GitHub-Native: Seamless webhook integration, bi-directional comment
sync, three feedback types (line-specific, file-level, PR-wide).

Power User Features: Chat interface with agents, historical trend
analysis, custom per-repo instructions, selective triggering for
critical PRs only.

Tech Stack:

Backend: Node.js, TypeScript, Hono, Drizzle ORM, PostgreSQL
Frontend: React, TypeScript, Tailwind CSS
AI: Anthropic API (Claude), OpenAI API (GPT-4)
Infrastructure: GitHub Actions, Pulumi IaC

What Makes It Unique

It is intended to work with other AI review tools but is optimized for the human
to review, making it fast and fun to review code. With all of the AI code being produced
engineers time will be spent more and more reviewing AI produced code. The tools
to review code should be optimized for a human to be able to understand the code
and leverage AI in a complimentary way to assist in that understanding.

In addition the interface should make it dead simple and fast to go through
the files of a pull request.

The future isn't replacing human judgment - it's augmenting
expert-level analysis and making senior engineer insights consistently
available for every critical code change.

PRPM - The Universal Package Manager for AI Prompts

Dev Diaries — Tue, 09 Dec 2025 22:05:42 +0000

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by
Mux

What I Built

PRPM (Prompt Package Manager) is npm for AI coding assistants. It's a universal package manager that lets developers install, share, and convert AI prompts, rules, skills, and agents across different AI coding tools like Claude Code, Cursor, Windsurf, GitHub Copilot, Continue, Kiro, and more.

Instead of manually copying prompt files between projects or being locked into one AI tool's ecosystem, PRPM
provides a single command to install packages that work everywhere:

npx prpm install @anthropic/typescript-best-practices --as cursor
npx prpm install @vercel/nextjs-expert --as claude

My Pitch Video

Demo

Try it now without installing:
npx prpm search typescript
npx prpm install @sanjeed5/typescript

The Story Behind It

Every AI coding assistant has its own format for rules and instructions - Cursor uses .cursorrules, Claude Code uses
.claude/ directories, Windsurf uses .windsurfrules, Copilot uses .github/copilot-instructions.md. Developers were
copy-pasting the same best practices between tools and projects, with no way to share or version them.

I built PRPM because prompts are becoming as important as code dependencies. Just like npm revolutionized JavaScript
package sharing, PRPM creates an ecosystem where the community can publish, discover, and reuse AI coding
knowledge.

The "aha moment" was realizing that all these formats are fundamentally similar - they're just markdown with
metadata. A universal converter could translate between them losslessly, letting one package work everywhere.

Technical Highlights

Cross-Format Conversion Engine: PRPM parses each format into a canonical intermediate representation, then converts
to any target format. This handles nuances like:

Cursor's MDC frontmatter vs Claude's YAML frontmatter
Different directory structures (.cursor/rules/ vs .claude/skills/)
Format-specific features (Kiro's fileMatch patterns, Copilot's applyTo globs)

Progressive Disclosure: When a target format doesn't natively support a package type (e.g., Cursor doesn't have
"skills"), PRPM uses the emerging AGENTS.md standard to install packages in a format-agnostic way that still works.

Integrity Verification: Packages are checksummed in prpm.lock to detect tampering, similar to npm's lockfile
approach.

Tech Stack:

TypeScript monorepo with Turborepo
CLI built with Commander.js
Registry API on Fastify + PostgreSQL
Webapp on Next.js 15
Deployed on AWS Elastic Beanstalk via Pulumi IaC

Why and how to use collections in jekyll

Dev Diaries — Wed, 05 Jun 2019 08:05:41 +0000

Why Use Collections?

This site is built on Jekyll which we'll write more about later but essentially
this site is built as a blog. We also have quite a few social media posts
that we want to provide more content about on our website. This way, we can share some content on social media and send readers to our site for more information. Since we have long form blog posts already that is our posts type. We wanted another way to provide another type of content but didn't want it to be a full post. Enter what we call _social posts. These are a collection (see what we did there?) of all the social media posts on the site. This way to display them we can avoid any needless filtering of the blog post by a certain tag or category. Jekyll collections give us an easy way out of the box to create a subtype on our blog 🙌.

How

The first thing we needed to do was update our config to "register" the new
collection:

collections:
  social-posts:
    output: true

Here we name the collection social-posts and declare that we want it to output a page for each document. This way each social post will have it's own dedicated page so when users go to our site to learn more information they can see an entire page dedicated to Text navigation: jumping between words for example.

Now that we have that, we need to make the directory so Jekyll knows to grab the social posts. So, in the root of our project we make the directory:

mkdir _social_posts

Then create our post within that directory. We change directory (cd) into
the directory (folder) we just made and then create (touch) the first post:

cd _social__posts
touch text-navigation.md

And bingo! We have a new collection of social media posts with one post (text-navigation). Want to see how we integrated it on this site? Check out our commit because don't talk about it, code about it. We'll be posting much more about how this site was built and as we add in more features we'll of course blog about it, because sharing is caring.

Original Post on Dev Diaries

SCSS: Ampersand Rules

Dev Diaries — Sat, 11 May 2019 12:53:47 +0000

Explanation

Using the & after a declaration you can set a css rule to apply given that the
selector that has the & after actually applies when it is the parent of the element it is nested under. 🤔? So basically, you read the rule inside out. So in the first example you read if .parent-in-this-case & is the parent of .some-class, then apply this rule.

Why? 🧐

So why might you do this? One example is to affect a style for only ie-9 for
example and if you apply a class when a browser is ie-9 or below you can set specific styles within a block that only apply when ie-9 is the parent class on the html tag. Check the docs here.The & in scss offers a lot of power, but can also be a bit confusing so be mindful of your usage! Let's check out some examples:

# scss
.some-class {
    font-weight: normal;

    .parent-in-this-case & {
        font-style: italic;  
  }
}

That compiles to this css:

.some-class {
  font-weight: normal;
}
.parent-in-this-case .some-class {
  font-style: italic;
}

Here is some other useful ampersand usage:

.el {
    font-size: 12px;
    &:hover {
        color: blue;
    }
    &.active {
        font-weight: bold;
    }
    &--larger {
        font-size: 14px;
    }
}

That compiles to this css:

.el {
  font-size: 12px;
}
.el:hover {
  color: blue;
}
.el.active {
  font-weight: bold;
}
.el--larger {
  font-size: 14px;
}

Here you can see the convenience and power of the ampersand. If you're using something like BEM it makes it very easy and quick too add in custom elements and modifier classes.

Original Post on Dev Diaries
Instagram Post On Dev Diaries

Creating Symlinks in Linux

Dev Diaries — Wed, 01 May 2019 12:18:15 +0000

A SymLink in Linux is a special kind of file that points to an actual file or directory, basically a shortcut, but a little different as a symlink is an actual pointer to the source file or directory. Symlinks can be very useful for example if you want to version files you can bump a version app_v2 but just have a symlink that refers app_latest that just references the latest version.

ln -s /path/to/source /path/to/symlink

Some useful SymLink options are:

-f   If the target file already exists, then unlink it and force the link

-n   Useful with the -f option, replace the symlink that might point to a directory

One important thing to remember is that you must use the full path when creating symlinks and not the relative paths. For example if you have this as your filesystem

> ls
image.png

We want to create another directory (folder) called pics that contains a symlink
to image.png within it.

> mkdir pics

> ls
image.png
pics

If we tried to symlink just using relative paths the symlink would be broken:

> ln -s image.png ./pics/image.png

Instead, we should use the full path and in our case we can use the $PWD value which expands to our present working directory:

> ln -s $PWD/image.png $PWD/pics/image.png

Another option is to actually change directories into the pics directory and create the symlink from there:

> cd pics
> ln -s ../image.png image.png

Original Post on Dev Diaries
Instagram Post On Dev Diaries

SCSS in three minutes

Dev Diaries — Sun, 28 Apr 2019 15:43:35 +0000

Our favorite resources

Wait, wait, what is it?

Before we go racing off, it might be good to talk about what is SASS/SCSS. SCSS is a preprocessor which means it needs to be processed down to another format (css) and is a superset of CSS. That just means we get to use features that aren't part of the CSS standard and move a bit faster when writing css. Since SCSS is a superset of CSS it also means that regular old CSS is valid SCSS, and that makes transitioning from CSS to SCSS that much easier and just requires you to rename some files. We've been throwing around SCSS and then linking to SASS so you might be wondering what the difference between the two is...This Stackoverflow answer sums it up nicely, but basically SCSS is the newer version and the two are just two different syntaxes. We recommend you use SCSS. Want to learn more about what exactly SCSS is? Check this article

Let's do this

We're a fan of keeping things as light weight as possible so we're just going
to opt for a npm script to coordinate the scss compilation process. This could
easily be changed to integrate with webpack, gulp, grunt, broccoli, brunch or whatever you're using.

So let's install node-sass which will handle building our scss files. In our project root let's install it via npm.

npm install --save node-sass

Now we need to add in a script to watch when we edit scss files and compile
them down into valid css files. So we'll add in a npm script to handle that:

"scripts": {
    "scss": "npx node-sass -w scss/app.scss -o assets/css/"
  }

Curious what npx is? Read about it here. Basically it allows us a quickly call a node package and in this case call a local package. As noted in the comments, we don't even have to write npx at the beginning since we're calling it via a npm script so could also just write node-sass -w scss/app.scss -o assets/css/. We then tell node-sass to watch our scss file app.scss and output the result into our assets directory inside the css directory. Let's make some scss files

cd scss & touch app.scss

Let's add some scss to our app.scss file:

$black: #000000;
.container {
    margin: 0 auto;
        &:hover {
            border: 1px solid $black;
        }
}

Now if we check what's in our css directory we'll see this:

.container {
  margin: 0 auto; }
  .container:hover {
    border: 1px solid black; }

Cool! It took our scss and outputted valid css that we can use. Let's see a video of all this in action, in under 3 minutes!

Original Post on Dev Diaries