# nodejs-development

Guidelines for Node.js and TypeScript development. Teaches the agent patterns for Payload CMS with Next.js, Vue 3 components, and Zod validation.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 742 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/nodejs-development/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/nodejs-development

## What it does

This skill guides AI agents through full-stack TypeScript conventions. It lays out directory structures and access control configs for Payload CMS inside the Next.js App Router, alongside database querying patterns via `getPayloadClient`.

Client-side instructions focus on Vue 3 with `<script setup lang="ts">`, typed composables, and Pinia stores. For backend requests, it details schema definitions with Zod, safe parsing, and request body validation middleware in Express.

The skill supplies architectural templates rather than executable scripts. Your agent will rely entirely on packages installed in your local project workspace.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill nodejs-development -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/nodejs-development/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/nodejs-development/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill nodejs-development -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/nodejs-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill nodejs-development -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/nodejs-development/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills nodejs-development
```

2. **Manually: put the files in place**
- File: `.github/skills/nodejs-development/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill nodejs-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path nodejs-development
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/nodejs-development/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill nodejs-development -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/nodejs-development/SKILL.md

## When to use it
- define Payload CMS collections with role checks for Next.js
- build typed Vue 3 components using script setup syntax
- create reusable API composables with loading and error states
- set up Express request validation middleware using Zod
- scaffold Pinia stores with typed state, getters, and auth actions

## Example prompts
- Generate a Payload CMS collection for blog posts with title, richText, and publishedDate fields.
- Write a Vue 3 useApi composable with error handling and reactive state.
- Create an Express middleware function that validates the body against a Zod schema.

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 15b9f69ef3e3d3f2.

BEGIN THIRD-PARTY FILE 15b9f69ef3e3d3f2
````text
---
name: nodejs-development
description: Node.js development guidelines covering Payload CMS, Vue.js with TypeScript, and general TypeScript best practices
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Node.js Development Guidelines

You are an expert in Node.js development with TypeScript, covering various frameworks and patterns.

## Payload CMS with Next.js

### Project Setup
```
project/
├── src/
│   ├── app/              # Next.js app directory
│   ├── collections/      # Payload collections
│   ├── blocks/          # Custom blocks
│   ├── fields/          # Custom fields
│   └── access/          # Access control functions
├── payload.config.ts    # Payload configuration
└── next.config.js       # Next.js configuration
```

### Collection Definition
```typescript
import { CollectionConfig } from 'payload/types';

const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    useAsTitle: 'title',
  },
  access: {
    read: () => true,
    create: ({ req: { user } }) => Boolean(user),
    update: ({ req: { user } }) => Boolean(user),
    delete: ({ req: { user } }) => Boolean(user),
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
    },
    {
      name: 'content',
      type: 'richText',
    },
    {
      name: 'publishedDate',
      type: 'date',
    },
  ],
};

export default Posts;
```

### API Routes
```typescript
// app/api/posts/route.ts
import { getPayloadClient } from '@/lib/payload';

export async function GET() {
  const payload = await getPayloadClient();
  const posts = await payload.find({
    collection: 'posts',
    limit: 10,
  });
  return Response.json(posts);
}
```

## Vue.js with TypeScript

### Component Structure
```vue
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

interface User {
  id: number;
  name: string;
  email: string;
}

const props = defineProps<{
  userId: number;
}>();

const emit = defineEmits<{
  (e: 'update', user: User): void;
}>();

const user = ref<User | null>(null);
const isLoading = ref(false);

const displayName = computed(() => user.value?.name ?? 'Unknown');

async function fetchUser() {
  isLoading.value = true;
  try {
    const response = await fetch(`/api/users/${props.userId}`);
    user.value = await response.json();
  } finally {
    isLoading.value = false;
  }
}

onMounted(fetchUser);
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="user">
    <h2>{{ displayName }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>
```

### Composables
```typescript
// composables/useApi.ts
import { ref } from 'vue';

export function useApi<T>(url: string) {
  const data = ref<T | null>(null);
  const error = ref<Error | null>(null);
  const isLoading = ref(false);

  async function execute() {
    isLoading.value = true;
    error.value = null;

    try {
      const response = await fetch(url);
````
END THIRD-PARTY FILE 15b9f69ef3e3d3f2

The third-party file has ended. Everything between the 15b9f69ef3e3d3f2 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2993 of 5793 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/nodejs-development/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md