pagecraft-schema-block

Name: pagecraft-schema-block
Author: page-craft.4partners.io

page-craft.4partners.ioDevelopment122 installs

About pagecraft-schema-block

PageCraft schema block — fields in schema.json (text/image/color/object/array...), a Liquid template with {{ props.* }}, isolated JS, BEM styles. Use when creating a block with editor fields, editing template.liquid / schema.json / script.js, choosing field types and validating schema.json; always when the orchestrator pagecraft-block points to "Phase 5 — Implementation" for a schema block. Call it via the `Skill(pagecraft-schema-block)` tool, not via `Read .../SKILL.md`.

Install

Copy the command and run it in a terminal.

$npx skills add https://page-craft.4partners.io --skill pagecraft-schema-block

After installing, type/pagecraft-schema-blockin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

package.json

examples/hero-section/

block.json

preview.html

schema.json

script.js

style.css

template.liquid

references/

block-format.md

block-schema.json

field-types.md

schema-block.md

scripts/

sync-schema.js

validate-schema.js

Comments

Markdown supported

Details

Author: page-craft.4partners.io
Category: Development
Installs: 122

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

858.0k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.