Webstudio CMS
Set up, administer, build, design, and publish with Webstudio (self-hosted or Cloud). Covers install/self-hosting, the Builder UI, the programmatic build path (writing Webstudio-na…
CB
@cbertucci33
Install
$ openclaw skills install @cbertucci33/webstudio-cmsWebstudio Self-Hosted CMS
Build pages by writing Webstudio-native build objects into the Postgres Build row,
then publish via the publisher API. This skill manages a self-hosted Webstudio
instance (Docker Compose) and everything you can do with it.
Quick Reference
| Topic | File |
|---|---|
| Install / self-host setup, CLI, deploy | install.md |
| Stack, services, health, gotchas | database.md (stack) |
| Build table schema, PostgREST, load/commit | database.md |
| Element tree, pages, instances, props | build-objects.md |
| Styling, css-data parser, tokens, breakpoints | styling.md |
| Pages, folders, assets, MinIO storage | assets-pages.md |
| Publishing, domains, auth tokens | publishing.md |
| Canvas verification, Playwright audit | verification.md |
| Full documented API surface | api.md |
| The Builder UI (canvas, navigator, modes) | ui-builder.md |
| Webstudio design system (tokens, variables) | design.md |
| Advanced features (CMS, variables, forms, AI) | features.md |
Read the file for the area you're working in BEFORE touching the build. The master file stays lean on purpose - detail lives in the per-area files.
Where things live
This skill is generic to any self-hosted Webstudio deployment. Replace the placeholders with your own values before relying on them:
- Deployment:
<your-dir>/docker-compose.ymland.env(seeapi.mdfor every env knob) - This skill folder: the skill itself (publishable as-is, pure markdown - no runnable code)
Critical Rules
- One fix per turn. Save a NEW named copy after every change. Never overwrite in place.
- Draft build =
where deployment is null order by "createdAt" desc limit 1. Always operate on the draft, never an arbitrary Build id. - Never hand-write a style value. Use Webstudio's own css-data parser (see
styling.md). - When you mutate instances, write back ALL loaded columns. Partial writes corrupt the build.
- Every styled element needs a bound local style source in
styleSourceSelections, or the style silently won't apply. - Styles are element-scoped with no cascade. Apply every needed property to every target instance; don't rely on inheritance.
- Publish SSG (
buildMode:"ssg"), not SSR - SSR needs a docker socket the publisher may not have. - Verify with canvas DOM measurements, not eyeballs. Text-only, no images into the model.
- Assets upload to MinIO (S3-compatible); they are not stored in Postgres.
Standard Workflow
- Open the draft build (see
database.md). - Make ONE change on one page/element (only what's asked, no extras).
- Save a NEW named copy of any script output.
- Verify by inspecting the canvas DOM / XML (see
verification.md).
Memory
Operator/instance-specific preferences are not part of this published skill. The skill is generic; any local customization lives in your own deployment notes, not here.
Top skills in this category
Baidu Wenku AI picture book of video
@ide-rea百度文库AI绘本是一个基于人工智能制作绘本视频的工具,支持生成静态绘本和动态绘本(URL输出)。能帮助文本内容创作者们在缺乏绘画技能的情况下,快速生成精美绘本视频,提高内容生产效率。无论是在儿童教育、亲子互动、品牌营销,还是在社交媒体内容创作等领域都能应用。
SuperDesign
@mpociotExpert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Video Frames
@steipeteExtract frames or short clips from videos using ffmpeg.
Frontend Design
@michaelmonetizedCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Remotion Video Toolkit
@shreefentsarComplete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.