DEV Community

Cover image for One Open Source Project a Day (No.50): The TypeScript Wizard Pushed His .claude Directory to GitHub and Hit #1 Worldwide Overnight
WonderLab
WonderLab

Posted on

One Open Source Project a Day (No.50): The TypeScript Wizard Pushed His .claude Directory to GitHub and Hit #1 Worldwide Overnight

Introduction

"My agent skills that I use every day to do real engineering — not vibe coding."
— Matt Pocock, README first line

This is article No.50 in the "One Open Source Project a Day" series. Today's project is skills (GitHub).

Let's start with what makes this repository unusual.

It's not a new framework. It's not a big company's open-source release. It's not even a runnable program. It's just one engineer's .claude working directory — 21 Markdown files, each telling Claude Code how to behave in a specific engineering scenario.

Matt Pocock pushed this directory to GitHub. No promotion. No blog post explaining it. No YouTube demo. No Hacker News submission.

In 24 hours: 22,000 Stars. GitHub Trending #1 globally.

Final count: 30,800+ Stars.

This wasn't random. The same day, free-claude-code pulled 1,701 stars and awesome-codex-skills pulled 517. Three repositories dominated the Trending page with one shared theme: how to configure your AI to work the way you want it to.

That day, GitHub's community voted: we need this.

What You'll Learn

  • Why "configuring how your AI works" is becoming a serious engineering practice
  • All 8 core skills broken down: grill-me, tdd, triage-issue, and more
  • The "vertical slice" and "anti-vibe-coding" philosophy
  • How to install and adapt these skills to your own workflow

Prerequisites

  • Have used Claude Code or a similar AI coding assistant
  • Familiar with basic software engineering concepts (TDD, refactoring, PRDs)

Project Background

What Is It?

skills is the public version of Matt Pocock's personal Claude Code skill library. Each "skill" is a standalone folder with a SKILL.md as the main file, describing how an Agent should work in a specific engineering scenario — goal, steps, constraints, output format.

Installation is frictionless:

npx skills@latest add mattpocock/skills/grill-me
# Copies the SKILL.md into your .claude/ directory
Enter fullscreen mode Exit fullscreen mode

About the Author: Matt Pocock

Matt Pocock's position in the TypeScript community is something like its chief evangelist:

  • GitHub: 10,300+ followers
  • Identity: "TypeScript wizard" (GitHub bio), "I teach devs for a living" (X/Twitter)
  • Notable projects:
    • Total TypeScript: Comprehensive production-grade TypeScript course — his core business
    • ts-reset (8,400 ⭐): Called "the CSS Reset for TypeScript"
    • evalite (1,500 ⭐): LLM application evaluation in TypeScript
    • sandcastle (1,000 ⭐): TypeScript sandbox coding agent orchestration
  • AI Hero Newsletter: ~60,000 subscribers
  • Background: Former Vercel engineer, former Stately engineer; used to be a vocal coach (yes, seriously)

He isn't primarily someone who builds tools for others — he's first and foremost an engineer who uses AI seriously every day. This repository is a direct output of his actual work process.

Project Stats

  • GitHub Stars: 30,800+ (22,000 in first 24 hours)
  • 🍴 Forks: 2,400+
  • 📝 Commits: 34
  • 📄 License: MIT
  • 📦 Install tool: npx skills@latest
  • 📰 Newsletter: AI Hero (60,000 subscribers)

Key Features

Core Philosophy: Deliberately Slow AI Down

Most people's mental model for AI-assisted coding is "generate" — have it write functions, fill boilerplate, produce whole pages, faster the better. The industry calls this Vibe Coding.

Matt's approach is the opposite. Most of what he teaches Claude to do isn't generating code — it's thinking the problem through before writing a single line.

Here's what that looks like:

grill-me — His Most Useful Skill

Matt has called this his most useful skill.

What it does: Turn Claude into a relentless technical interviewer who interrogates your design until you run out of answers.

Not the AI that gently suggests two improvements and calls it done. This one hunts — every branch, every edge case, every assumption you haven't made explicit — one question at a time, until you find yourself thinking "damn, I hadn't thought that through."

Key design choices in the skill:

  • One question at a time (no question barrages — forces systematic thinking)
  • Gives recommended answers (doesn't just ask, also helps you think)
  • Actively explores the codebase to answer questions itself, rather than always asking you
  • Goal: Resolve every decision branch before a single line of code is written
Scenario: You want to add a caching layer to your project
After grill-me:
  "What's your cache granularity — function-level or request-level?"
  "If cache keys collide, what's your invalidation strategy?"
  "Do you have race conditions? Multiple requests missing cache simultaneously?"
  "If the cache service goes down, what's your fallback?"
  "How do your tests mock the cache?"
  ...
After the interrogation, your design is either much tighter,
or you've realized you shouldn't build this at all.
Enter fullscreen mode Exit fullscreen mode

tdd — Enforced Red-Green-Refactor

This skill doesn't let Claude write out a full feature at once. It enforces a strict TDD workflow:

Tracer Bullet (build minimal working path first)
    ↓
Increment loop:
  Write one failing test
    ↓
  Write the minimum code to make it pass
    ↓
  Refactor (code cleaner, tests still green)
    ↓
  Next test...
Enter fullscreen mode Exit fullscreen mode

Key constraints from the SKILL.md:

  • No horizontal slicing: Writing all tests first before any implementation is forbidden (leads to over-engineering)
  • Tests verify behavior, not implementation: Test through public interfaces, not internals
  • Ships with 6 reference documents: deep-modules.md, interface-design.md, mocking.md, refactoring.md, tests.md

Slow, deliberate, old-fashioned — and exactly how serious engineers actually write code.

triage-issue — Diagnose First, Fix Second

When a bug report comes in, most people (and most AI assistants) react the same way: find the line, change it, open a PR.

Matt's triage-issue skill adds a step before fixing: thorough diagnosis.

Five-stage pipeline:

1. Capture the problem (understand the symptom)
2. Explore and diagnose (comb the codebase, find root cause)
3. Determine the fix (not the first viable fix — the best fix)
4. Design a TDD fix plan (write the test first, then implement)
5. Create a GitHub Issue (diagnosis + fix plan + acceptance criteria)
Enter fullscreen mode Exit fullscreen mode

The output isn't code. It's a GitHub Issue. When you (or another Agent) go to actually fix it, there's already a clear root-cause analysis and a test-driven roadmap waiting.

design-an-interface — Force Real Alternatives

This skill implements John Ousterhout's "Design It Twice" principle from A Philosophy of Software Design: for any important decision, generate at least two genuinely different approaches before choosing.

Implementation: Launch multiple parallel sub-Agents, each constrained to a different dimension:

Sub-Agent A: Minimum method count (minimize interface surface)
Sub-Agent B: Maximum flexibility (maximize extensibility)
Sub-Agent C: Optimize common cases (minimize usage friction)
Enter fullscreen mode Exit fullscreen mode

After the three proposals, it evaluates them across four dimensions: simplicity, generalizability, implementation efficiency, and "depth" (how much complexity does the interface hide). Then it helps you decide.

to-issues — Vertical Slice Decomposition

Breaking a feature plan into GitHub Issues sounds ordinary. The key is how it slices: vertical slices.

❌ Horizontal slicing (don't do this):
   Issue 1: Database Schema
   Issue 2: API layer
   Issue 3: Frontend UI
   Issue 4: Tests

✅ Vertical slicing (Matt's way):
   Issue 1: Users can create a basic draft (schema + API + UI + tests, all layers)
   Issue 2: Drafts can contain rich text content
   Issue 3: Drafts can be published
Enter fullscreen mode Exit fullscreen mode

Each Issue is classified as:

  • HITL (Human In The Loop): Requires human decision before proceeding
  • AFK (Away From Keyboard): Safe to run unattended

git-guardrails-claude-code — Stop AI From Deleting Your Work

Intercepts dangerous git commands via Claude Code's PreToolUse hook. Blocked operations:

git push (including --force)
git reset --hard
git clean -f / -fd
git branch -D
git checkout .
git restore .
Enter fullscreen mode Exit fullscreen mode

When Claude tries to run these, it receives: "it lacks authority to access these commands." Configurable at project level or globally.

Full Skill Inventory

Skill Purpose
to-prd Conversation context → structured PRD, submitted as GitHub Issue
request-refactor-plan Creates detailed refactor plans with small commits, refined through user interview
improve-codebase-architecture Finds architectural "deepening" opportunities using CONTEXT.md and ADR docs
setup-pre-commit Configures Husky + lint-staged + Prettier + type checks
ubiquitous-language Extracts DDD-style shared vocabulary from the current conversation
write-a-skill Creates new skills following the standard structure (a skill that writes skills)
edit-article Improves writing by restructuring sections and clarifying language
obsidian-vault Search, create, and manage notes in an Obsidian vault with wikilinks

Deep Dive

What a Skill File Actually Looks Like

Each skill is a standalone folder with SKILL.md as the main file. The tdd skill as an example:

skills/tdd/
├── SKILL.md           ← Main skill definition
├── deep-modules.md    ← Reference: deep module design principles
├── interface-design.md
├── mocking.md
├── refactoring.md
└── tests.md
Enter fullscreen mode Exit fullscreen mode

The SKILL.md structure:

# TDD

## Goal
Build features one vertical slice at a time using TDD...

## Steps
1. Tracer Bullet: First, write the minimal end-to-end path...
2. Increment: For each behavior to implement...
   a. Write a failing test
   b. Write minimal code to pass the test
   c. Refactor if needed

## Rules
- NO horizontal slicing...
- Tests should verify behavior, not implementation details...

## Resources
@deep-modules.md
@interface-design.md
Enter fullscreen mode Exit fullscreen mode

Plain text, no special syntax, no runtime dependencies. It's configuration as documentation.

Why "Configuring Your AI" Is Becoming Engineering Practice

Three AI-configuration repos dominating Trending on the same day isn't coincidence. It points at something structural:

Same models (GPT-4o, Claude Opus) — available to everyone
Same tools (Cursor, Claude Code) — download and install
Same subscription fees

Why do some people get 2x productivity from Claude Code
while others fight hallucinations and throwaway code all day?

The gap isn't the model. It's the configuration:
  • How you describe the boundaries of a problem
  • Which checkpoints require human sign-off
  • What engineering conventions to follow
  • Which mistakes you tolerate, which you don't

Nobody teaches you this. Nobody sells it.
You grind it out across weeks of daily use.
Enter fullscreen mode Exit fullscreen mode

Matt published what he ground out. The industry called this the "npm moment" for Claude Code Skills — just as npm let the Node.js community share reusable packages, Skills is enabling the Claude Code community to share workflow recipes. JetBrains and other major vendors started publishing official skills packages shortly after this repo went viral.

"Is Your .claude Directory Empty?"

This is the most valuable question this project raises.

If your .claude directory (or .cursorrules, or AGENTS.md) is empty, you're starting from zero every time. Your AI doesn't remember the mistake you made last month, doesn't know your project's architecture conventions, doesn't understand your team's code standards. It's a new hire every single session.

Matt's 21 skills aren't meant to be copied wholesale — he writes TypeScript, builds education products, his workflow probably looks different from yours. But he's provided a living sample of what it looks like when an engineer treats their AI configuration as a serious engineering artifact.


Resources

Official

Related


Summary

Key Takeaways

  1. Anti-vibe-coding: Most of Matt's skills aren't about generating code faster — they're about thinking through the problem more thoroughly before writing any. That's how senior engineers use AI.
  2. Vertical slice first: tdd, to-issues, and triage-issue all enforce "complete one full path at a time" over "finish all of layer X first" — this is a genuine engineering philosophy, not just a style preference
  3. Skill files are engineering artifacts: Like Dockerfile, .eslintrc, and tsconfig.json, your AI configuration is infrastructure worth maintaining and versioning
  4. The "npm moment" significance: This repo's virality marked a shift — Claude Code Skills is becoming a community-shared ecosystem, not just personal configuration files
  5. The gap is in configuration, not the model: Same Claude Opus, two different engineers — the difference is what they've built around it

Who Should Use This

  • Claude Code power users: Already using Claude Code and want a stricter, more reliable workflow
  • TypeScript engineers: Some skills (migrate-to-shoehorn, scaffold-exercises) are TypeScript-ecosystem specific
  • Engineers building their own skill library: Matt's repo is the best reference sample available; write-a-skill can even generate new skills for you
  • Engineering leads standardizing team AI practices: git-guardrails, to-issues, triage-issue can directly standardize how your team uses AI

A Question Worth Sitting With

The line in Matt's README deserves to be read more than once: "Agent skills for real engineers, not vibe coding."

Behind that line is a judgment: there are two paths for AI-assisted engineering. One path uses AI to generate more code, faster — Vibe Coding. The other uses AI to make every decision before that code more rigorous — AI as a stricter thinking partner, not a faster typist.

Both paths ship software. But they arrive at very different places.


Visit my personal site for more useful knowledge and interesting products

Top comments (0)