Payload CMS Skill

Payload CMS Skill

Comprehensive reference for Payload CMS development including data modeling, API usage, and admin customization.

Overview

Payload is a headless CMS and application framework built on Next.js. This skill covers collections, fields, hooks, access control, Local API operations, authentication, uploads, globals, plugins, and admin panel styling.

Quick Reference: Which File Do I Need?

Reference Files Summary

Core Data & API

Authentication & Users

Content & Media

Admin Panel

Configuration & Infrastructure

Common Workflows

Creating a New Collection

1. Read collections.md for config structure
2. Read fields.md to add your data fields
3. Read access-control.md to set permissions
4. Optionally read hooks.md for lifecycle logic

Building a Custom API Endpoint

1. Read local-api.md for query syntax
2. Read authentication.md if auth context needed
3. Read access-control.md to understand permissions

Enabling File Uploads

1. Read uploads.md for upload config
2. Read fields.md for upload/​relationship field linking
3. Read plugins.md if using cloud storage (S3, etc.)

Theming the Admin Panel

1. Read admin-styling.md for CSS variables and classes
2. Focus on elevation variables for dark/​light mode
3. Use @layer payload for overrides

Quick Lookup Patterns

# Find hook types
grep -n "beforeChange\|afterChange" references/​hooks.md

# Find field types
grep -n "type:" references/​fields.md

# Find access control patterns
grep -n "role\|RBAC" references/​access-control.md

# Find query operators
grep -n "equals\|contains\|greater" references/​local-api.md

# Find CSS variables
grep -n "elevation\|gutter" references/​admin-styling.md

Key Patterns

Getting Payload Instance (Server-Side)

import { getPayload } from 'payload'
import config from '@payload-config'

const payload = await getPayload({ config })

Basic Query

const posts = await payload.find({
  collection: 'posts',
  where: { status: { equals: 'published' } },
  limit: 10,
})

Access Control Function

access: {
  read: () => true, // Public
  create: ({ req }) => !!req.user, // Authenticated
  update: ({ req, id }) => req.user?.id === id, // Owner only
}

Official Documentation

• Payload Docs
• Collections
• Fields
• Hooks
• Access Control
• Local API
• Authentication
• Uploads
• Globals
• Plugins
• Customizing CSS