scaffold-section

Generate Gold Standard .liquid section scaffolds with schema, content slots, and CSS stub.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/fluid-commerce/DesignOS --skill scaffold-section
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: scaffold-section
Source: https://github.com/fluid-commerce/DesignOS/tree/main/.claude/skills/scaffold-section
Command: npx skills add https://github.com/fluid-commerce/DesignOS --skill scaffold-section

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill generates a Gold Standard .liquid section scaffold with a pre-filled schema, enabling teams to rapidly create consistently structured website sections while maintaining brand alignment.

Core Features & Use Cases

  • Pre-filled Gold Standard schema block including section name, class, color scheme, padding controls, content-for-header flag, and preset block types.
  • Content slots markers for easy content insertion: <!-- SLOT: heading -->, <!-- SLOT: body -->, <!-- SLOT: media -->, <!-- SLOT: cta -->.
  • CSS stub with scoped styles tied to the section ID and brand tokens for visual consistency.
  • Clear post-scaffold steps to validate schema and tailor settings for specific sections.

Quick Start

Run node tools/scaffold.cjs <section-name> to generate a new .liquid section scaffold.

Frequently Asked Questions about scaffold-section

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

FAQPage Schema
How do I generate a Liquid section scaffold for a new website section?

To generate a Liquid section scaffold, run the scaffold tool via node tools/scaffold.cjs <section-name>. This produces a ready-to-edit .liquid file containing a pre-filled schema block, content-slot markers, and a minimal CSS stub for rapid development.

What is a Gold Standard .liquid section scaffold and when do I need one?

A Gold Standard .liquid section scaffold is a structured skeleton file for multi-section websites, needed when creating new hero banners or content sections. It delivers pre-filled schema settings, content-slot markers, and scoped CSS stubs to ensure structural consistency.

Does the scaffold section template include schema blocks for Shopify Liquid?

Yes, the scaffold section template includes a pre-filled schema block for Shopify Liquid sections. This schema contains the section name, class, color scheme, padding controls, content-for-header flag, and preset block types for immediate customization.

Can I use the scaffold tool to create layout slots for hero banners and content sections?

Yes, you can use the scaffold tool to create layout slots for hero banners and content sections. It generates clear content-slot markers like heading, body, media, and cta directly within the .liquid file for easy content insertion.

What's the best way to ensure brand alignment when creating new .liquid sections?

The best way to ensure brand alignment is generating a .liquid section scaffold with a pre-filled Gold Standard schema and CSS stub. The scoped styles are tied to the section ID and brand tokens, maintaining visual consistency across the website.

What are the limitations of using a scaffold tool for website section creation?

The scaffold tool generates a foundational .liquid file structure but requires post-scaffold steps to validate the schema and tailor settings. You must manually insert actual content into the slot markers and expand the minimal CSS stub for full section functionality.