--- title: "/new-module Skill: Scaffold Sanity Modules with Claude Code" description: "Automate the full 7-step Sanity module workflow: schema, registration, typegen, and React component, with one Claude Code command." --- ![/new-module Skill: Scaffold Sanity Modules with Claude Code](https://cdn.sanity.io/images/cyu7k2r0/production/c8ba24611799e5b7a615c4c6f6ef3fc58a8ed3de-2752x1536.png?blur=30&q=100&auto=format) # The \`/new-module\` Skill: Scaffolding Sanity Modules in Seconds with Claude Code ![Mitchell Christ](https://cdn.sanity.io/images/cyu7k2r0/production/26bddd620298806d202e516a4078eab89dc8117a-1254x1254.png?q=100&auto=format) By Mitchell Christ * [AI](https://sanitypress.dev/blog?category=ai), * [Sanity](https://sanitypress.dev/blog?category=sanity) Mar 30, 20264 min read On this page 1. [What Claude Code skills are](#what-claude-code-skills-are) 2. [The /new-module skill ✨](#the-new-module-skill) 3. [Using the skill](#using-the-skill) 4. [The broader pattern](#the-broader-pattern) 5. [Start building with SanityPress](#start-building-with-sanitypress) ### Ready to build your next website with SanityPress? [🚀 Get started today](https://sanitypress.dev/docs/getting-started) ![MLB baseball manager wearing an orange jersey with the lettering "Claude Skills" pointing and yelling from the dugout. tv screengrab without any scorebug info](https://cdn.sanity.io/images/cyu7k2r0/production/c8ba24611799e5b7a615c4c6f6ef3fc58a8ed3de-2752x1536.png?rect=231,0,2400,1486&q=100&auto=format) Adding a new content module to a Sanity + Next.js project involves a surprising number of touch points. You need a schema file, a registration in the schema index, an entry in the modules fragment, potentially a GROQ query update, a frontend component, and a registration in the component map. Miss one step and nothing breaks loudly: the module just silently doesn't appear, or renders without its data, or throws a TypeScript error after typegen. The pattern is consistent enough that it's a perfect candidate for automation. With Claude Code's slash commands, you can encode the entire workflow as a project-local skill and scaffold a new module with a single command. ## What Claude Code skills are Claude Code supports a `.claude/commands/` directory in your project root. Any markdown file you drop in there becomes a `/command-name` you can invoke from the Claude Code CLI: a reusable skill that Claude can execute on demand. The file's contents are the prompt, and you can use `$ARGUMENTS` to pass in a dynamic value at call time. So a skill at `.claude/commands/new-module.md` becomes `/new-module`, callable as: * Claude Code ``` /new-module ``` The `$ARGUMENTS` placeholder gets replaced with `hero-banner`, and Claude works through the skill's instructions top to bottom. ## The `/new-module` skill ✨ The skill itself is a step-by-step specification. Rather than a vague "create a Sanity module", it walks through each file that needs to change, in order, with code templates and explicit notes about edge cases. The seven steps it covers: 1. **Create the schema file**: generates `src/sanity/schemaTypes/modules/.ts` with the correct `defineType` structure, groups (`content`, `options`, optionally `asset`), the required `module-attributes` field, and a sensible `preview` implementation using `getBlockText` and `count`. 2. **Register the schema**: adds the import and the entry to `src/sanity/schemaTypes/index.ts`, in alphabetical order. 3. **Add to the module fragment**: inserts the `{ type: 'my-module' }` entry into the `of` array in `src/sanity/schemaTypes/fragments/modules.ts`. 4. **Update the GROQ query**: only if the module has nested CTAs with links, references, or other joins. The skill explicitly tells Claude to skip this step for simple scalar/block-only modules, which avoids unnecessary query bloat. 5. **Run typegen**: executes `npm run typegen` to regenerate `src/sanity/types.ts` and export the new type in PascalCase. 6. **Create the frontend component**: but first, Claude pauses and asks whether the module needs client-side interactivity. The answer determines the file layout: a single `src/ui/modules/.tsx` for pure RSC, or a `src/ui/modules//index.tsx` subdirectory layout when a sibling `client.tsx` will be needed later. 7. **Register the component**: adds the import and the `'my-module': MyModule` entry to `src/ui/modules/index.tsx`. The skill also includes a verification checklist at the end: typegen clean, TypeScript clean, module visible in Studio, component renders in preview. ## Using the skill Drop the markdown file into `.claude/commands/new-module.md`, then from Claude Code: * Claude Code ``` /new-module resource-list ``` You'll get: * `src/sanity/schemaTypes/modules/resource-list.ts` — ready to extend with your fields * Updated `index.ts` and `modules.ts` registrations * `ResourceList` exported from typegen * A frontend component stub with `moduleAttributes`, `PortableText`, and the right prop types already wired up From there you fill in the actual fields and layout. The scaffolding work — the part that's identical every time and easy to get slightly wrong — is already done. ![Running the /new-module skill in Claude Code to generate a "resource-list" module](https://cdn.sanity.io/images/cyu7k2r0/production/4c17a00ab5d0f29d78ceb2020a5f405020cf684e-1816x1852.png?q=100&auto=format) Running the `/new-module` skill in Claude Code to generate a "resource-list" module ## The broader pattern What makes this skill useful beyond the specific command is the structure: a prompt that encodes your project's conventions, handles branching decisions explicitly, and leaves the creative work to you. The module schema and component still need real design thinking. The seven-file shuffle does not. Any workflow in your project that has this shape — consistent steps, clear conventions, low-variance boilerplate — is worth encoding as a skill. New API route, new Sanity document type, new test file: the same idea applies. Skills live in `.claude/commands/` as plain markdown files. That's the whole system. ## Start building with SanityPress The `/new-module` skill ships with SanityPress — a production-ready starter built on Sanity, Next.js, and Tailwind. If you want a foundation where this kind of workflow is already set up and the conventions are already decided, it's a good place to start. Build your next module, your next page, your next website. [Get started with SanityPress today.](#) ![MLB male fans with the letters "Claude Skills" painted on their bellys, cheering in the stands. they have orange hair](https://cdn.sanity.io/images/cyu7k2r0/production/331e4ac1aa0e943a4d2a2174e2bd35bdec315590-2752x1536.png?q=100&auto=format) 1. [Home](https://sanitypress.dev/) 2. [Blog](https://sanitypress.dev/blog) 3. The \`/new-module\` Skill: Scaffolding Sanity Modules in Seconds with Claude Code ## Stop Scaffolding. Start Shipping. [🚀 Start building](https://sanitypress.dev/docs/getting-started)[⭐ Star on GitHub](https://sanitypress.dev/repo)