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?

collections.md

fields.md

hooks.md

access-control.md

local-api.md

rest-api.md

graphql.md

authentication.md

uploads.md

folders.md

globals.md

plugins.md

admin-styling.md

custom-components.md

rich-text.md

live-preview.md

versions.md

database.md

configuration.md

email.md

jobs-queue.md

query-presets.md

trash.md

typescript.md

production.md

Reference Files Summary

Core Data & API

collections.md

fields.md

globals.md

hooks.md

access-control.md

local-api.md

rest-api.md

graphql.md

Authentication & Users

authentication.md

email.md

Content & Media

uploads.md

folders.md

rich-text.md

versions.md

trash.md

Admin Panel

admin-styling.md

custom-components.md

live-preview.md

query-presets.md

Configuration & Infrastructure

configuration.md

database.md

plugins.md

typescript.md

jobs-queue.md

production.md

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