skills.rest
viewingstudio
viewingstudioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

new-block

Scaffolds new page-section blocks across Pages CMS config, zod schema, and Astro components.

Updated May 18, 2026
Search Tags:#zod#scaffold#astro#component generator#page builder#content schema#pages cms
One-click install
npx skills add https://github.com/viewingstudio/artlogicspecialist-v2 --skill new-block-viewingstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-block
Source: https://github.com/viewingstudio/artlogicspecialist-v2/tree/main/.claude/skills/new-block
Command: npx skills add https://github.com/viewingstudio/artlogicspecialist-v2 --skill new-block-viewingstudio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new page-builder section to a Pages CMS + Astro site requires editing four separate files, and schema mismatches between them are the most common source of bugs. This Skill coordinates all four edits so the CMS config, zod validation, component, and renderer stay in sync. ## Core Features & Use Cases - Four-touchpoint scaffolding: Adds the block definition to .pages.yml, a matching zod variant to src/content.config.ts, a new Astro component skeleton, and the dispatch entry in BlockRenderer.astro. - Field-type mapping: Translates Pages CMS field types (string, rich-text, image, reference, object lists, and more) into correct zod schemas and TypeScript prop types. - Convention enforcement: Applies project rules such as UUID-based cross-collection references, layout primitive usage, and snake_case name matching between YAML and zod. - Use Case: Ask for a testimonials carousel block with a heading and a list of quotes, and receive all four file edits with a confirmed field spec before any code is written. ## Quick Start Ask the assistant to add a new page-section block, describing its name and the fields it needs in plain English.

Frequently Asked Questions about new-block

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new block to a Pages CMS Astro site?▼

Adding a block requires four edits: append the block definition under blocks in .pages.yml, add a matching zod variant to the sections discriminated union in content.config.ts, create a component in src/components/blocks/, and register it in BlockRenderer.astro.

How do Pages CMS field types map to zod schemas?▼

Each Pages CMS type has a zod equivalent: string and text become z.string(), number becomes z.number(), image becomes image().or(z.string()), and object lists become z.array(z.object(...)). Optional YAML fields get .optional() in zod.

Why does my new block fail validation after adding it?▼

Validation failures usually come from schema mismatches between .pages.yml and content.config.ts. Check that the block name in YAML is byte-identical to the z.literal value and that every YAML field has a matching zod field with the same optionality.

Should block references to other collections use filenames or UUIDs?▼

Cross-collection references must key off uuid fields, not filenames, because filenames change while UUIDs remain stable. Configure the reference with options value set to {fields.uuid} and store it as z.string() in zod.

What are the limitations of this block scaffolding approach?▼

The scaffold produces only a structural skeleton with layout primitives and leaves final styling as a TODO for the user. It also does not run the dev server or typecheck automatically, so verification is a separate step.

Related Skills

Explore More Software Engineering Skills→
dt418dt418

astro-blog

Automate Astro blog setup with content collections, RSS feeds, and sitemaps.

Community
Advanced
ccedilandccediland

cms-self-edit

Configure Sveltia CMS so non-technical clients edit Astro site content via git-based commits.

Community
Advanced
naviktnavikt
1

aksel-spacing

Build responsive layouts using Aksel v8+ spacing tokens and layout primitives.

Official
Intermediate
homeworkclubcohomeworkclubco

new-block

Generate YAML config, Zod schema, Astro component, and renderer integration for new page-section blocks.

Community
Intermediate