Payload Application Development
0Payload is a Next.js native CMS offering a TypeScript-first architecture, complete with an admin panel, database management, REST/GraphQL APIs, authentication, and file storage. It's ideal for developers looking to build customizable content management solutions.
12400Updated 1mo ago
CMS
Quick InstallView Source
$ npx skills add https://github.com/payloadcms/skills --skill payloadOverview
About This Skill
This skill provides comprehensive development guidelines for Payload CMS projects, enabling AI agents to work effectively with Payload's TypeScript-first architecture. It covers essential workflows including collection and field configuration, hook implementation, access control patterns for RBAC and multi-tenant setups, and complex API queries across REST and GraphQL. The skill helps developers and AI agents debug validation errors, security issues, relationship queries, and hook behavior while working with Payload's database adapters (MongoDB, Postgres, SQLite) and advanced features like jobs queue, localization, and custom plugins.
How to Use
Install using the command: `$ npx skills add https://github.com/payloadcms/skills --skill payload`
Use Cases
Migrate content from another CMS to Payload CMS
Create and manage collections and fields
Implement custom endpoints and background job queues
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/payloadcms/skills --skill payloadAlternative Install (Git Clone)
git clone https://github.com/payloadcms/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a Payload CMS application for a [COMPANY] in the [INDUSTRY] sector. The application should include: a custom admin panel, [DATA] management, REST and GraphQL APIs, user authentication, and file storage. Use TypeScript for all components and provide a step-by-step guide for deployment. Focus on scalability and customization for [COMPANY]'s specific workflows.
Example Output
# Payload CMS Application for EcoMart ## Overview Successfully deployed a custom Payload CMS application for EcoMart, a sustainable e-commerce platform. The system includes: ### Core Features - **Admin Panel**: Custom dashboard for managing products, blog posts, and user data with role-based access. - **Data Management**: Structured collections for products (e.g., `name`, `price`, `eco_score`, `category`), blog posts, and customer reviews. - **APIs**: REST endpoints for frontend integration and GraphQL for flexible queries (e.g., fetching products by `eco_score` > 80). - **Authentication**: JWT-based login for admin users and OAuth for customer accounts. - **File Storage**: Integrated with AWS S3 for product images and blog assets. ### Technical Stack - **Framework**: Next.js 14 - **Language**: TypeScript - **Database**: PostgreSQL (hosted on Supabase) - **Deployment**: Vercel ### Key Customizations - Added `eco_score` field to products for sustainability filtering. - Implemented a `subscription` collection to manage newsletter signups. - Built a custom `order` collection with Stripe integration for payment processing. ### Deployment Steps 1. **Setup**: Ran `npx create-payload-app` and selected the PostgreSQL template. 2. **Configuration**: Updated `payload.config.ts` to include EcoMart-specific collections and S3 storage. 3. **Authentication**: Configured NextAuth.js for admin and customer logins. 4. **Deployment**: Deployed to Vercel with environment variables for database and S3. ### Next Steps - Integrate with Shopify for inventory management. - Add a loyalty points system for repeat customers. --- *Deployed on [DATE]. Total development time: 3 weeks.*
Apply to these tools
Browse all toolsPayload
Developer-first headless CMS and application framework
Finnapps Restaurant Application
Connects people with the best tastes in their cities
WEM No-Code Enterprise Development & Agentic AI Orchestration Platform
Revolutionize your business operations with no-code software and AI.
DevPumas AI Agent Development
One-stop software solution for AI agent development
Teamsprint Enterprise Application Solutions
Performance-Steigerung durch unternehmensweite SaaS-Lösungen
Compatible MCP servers
Browse all MCP serversFind the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan