adr-source-v2
A Modern Website Development Framework Built on Next.js and Hygraph CMS
Install & Use
Copy this prompt and send it to your AI assistant (Claude / Cursor / TRAE / Codex / WorkBuddy etc.) to auto-install:
Help me install this AI Skill: adr-source-v2. It is used for: A Modern Website Development Framework Built on Next.js and Hygraph CMS Full Skill content: https://321skill.com/skills/adr-source-v2/raw/index.md Read that page and install it.
The prompt includes a link to the full Skill content. You can also view the full content.
adr-source-v2 is a modern website development framework built on Next.js 14, designed to solve the tedious problems developers face when rapidly building content-driven websites—such as manually integrating a CMS, configuring environments, and handling preview versus production modes. It comes pre-integrated with Hygraph CMS (formerly GraphCMS) and provides a complete, out-of-the-box workflow, from environment variable configuration and dependency installation to a local development server.
Usage is straightforward: clone the repository, configure the environment variables related to your Hygraph space as instructed, run pnpm install to install dependencies, and then execute pnpm dev to start the local development server for real-time viewing and editing of pages in your browser. The framework incorporates Next.js best practices, such as font optimization.
This framework is ideal for developers who need to quickly launch a frontend project with robust content management capabilities, especially teams focused on content display, marketing websites, or blogs. It lowers the technical barrier of integrating Next.js with a headless CMS from scratch.
Note that this framework is deeply coupled with Hygraph CMS. If you plan to use another CMS (like Strapi or Contentful) or no CMS at all, significant modifications will be required. Additionally, the project has specific requirements for Node.js and pnpm versions, so ensure your local environment matches.
Key Features
Compared to generic Next.js starter templates, it offers deep integration with Hygraph CMS, pre-configured with production and preview environment tokens, webhook validation, draft mode, and other complete setups required for enterprise-grade content management features. This allows developers to immediately focus on business logic development rather than underlying integrations.
Limitations
Not suitable for rapid prototyping projects that need to avoid Hygraph CMS or use other headless CMSs.
FAQ
How do I obtain environment variables like CMS_PROD_TOKEN from Hygraph?
You need to create and retrieve production and preview API tokens, as well as webhook secrets, in the Hygraph backend under Settings -> API Access for the corresponding Space.
Can I use npm or yarn instead of pnpm?
The project lock file is pnpm-lock.yaml. Using pnpm is strongly recommended to ensure dependency consistency. Using other package managers may require manually resolving dependency issues.
Installation guide for AI assistants
If your AI coding assistant (Claude Code, Cursor, TRAE etc.) can see this page, send it this message to auto-install:
Visit https://321skill.com/skills/adr-source-v2/raw/index.md to read the original Skill definition (Markdown format) for adr-source-v2, and install it according to the instructions.
Raw Markdown URL for AI: /skills/adr-source-v2/raw/index.md