--- 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." --- # The `/new-module` Skill: Scaffolding Sanity Modules in Seconds with Claude Code ![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) 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 a `/new-module` command callable as: ```sh 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/modules//schema.ts` with `defineModule` (not bare `defineType`). Groups (`content`, optionally `asset`); `defineModule` injects `module-attributes` and the Options group. Include a sensible `preview` 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. **Add a GROQ query fragment**: only if the module has nested CTAs with links, references, or other joins. Creates `src/modules//query.ts` exporting e.g. `MY_MODULE_QUERY` and wires it into `MODULES_QUERY`. Skip for simple scalar/block-only modules. 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**: always at `src/modules//index.tsx`. If the module needs client-side interactivity, keep the entry as a server component and add sibling `'use client'` files in the same folder. 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 run: ```sh code:/new-module resource-list ``` You'll get: - `src/modules/resource-list/schema.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) *Running the `/new-module` skill in Claude Code to generate a "resource-list" module* ![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) ## 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.**