The `/new-module` Skill: Scaffolding Sanity Modules in Seconds with Claude Code

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:

/new-module <module name>

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/<module-name>.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/<module-name>.tsx for pure RSC, or a src/ui/modules/<module-name>/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:

/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.

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.