CtrlK
BlogDocsLog inGet started
Tessl Logo

webiny-website-builder

Building Website Builder editor components, theming, and CMS integration using @webiny/website-builder-nextjs. Use this skill when the developer wants to create editor components for the Website Builder, register components with createComponent, define configurable inputs (text, number, boolean, color, select, file/image, slot, lexical, object, tags), type the component's props correctly (especially file/image inputs, which are objects with { src, width, height, ... } and NOT plain strings, and lexical inputs which are { html, state } objects), set up component groups, customize the theme (CSS variables, createTheme, Tailwind bridge, fonts), build Server Components that fetch CMS data, or understand the WB architecture (Admin iframe + Next.js). Also use for anything related to the Website Builder starter kit.

72

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

80%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A dense, highly actionable reference packed with executable code and two valuable lookup tables, with little basic-concept padding. It reads as a topical reference rather than a sequenced workflow with validation checkpoints, and a large monolithic file with no split references limits progressive disclosure.

Suggestions

Add a short end-to-end 'build a component' workflow with an explicit verification checkpoint (e.g., run `next build` or load the editor and confirm the component appears) so the setup→create→register→verify sequence has a validation step rather than implicit gaps.

Split the detailed prop-types table and theming reference into referenced files (e.g., `references/input-types.md`, `references/theming.md`) and keep SKILL.md as an overview with one-level-deep links, improving progressive disclosure for a file this size.

Remove the TL;DR/Architecture redundancy — the TL;DR restates the architecture detailed immediately below — to tighten token usage.

DimensionReasoningScore

Conciseness

Lean and high-signal: two dense lookup tables (input factories and runtime prop shapes) plus complete code, with almost no explanation of basics Claude already knows; the only mild redundancy is the TL;DR restating the Architecture section. Every section earns its place.

3 / 3

Actionability

Fully executable, copy-paste-ready examples throughout — Banner.tsx, the createComponent registration block, theme.css/theme.ts/tailwind.css, and the async ProductListing Server Component with real sdk.cms.listEntries usage and error handling.

3 / 3

Workflow Clarity

Organized as a topical reference rather than a sequenced workflow; the only checklist-like sequences are version matching ("yarn webiny --version") and the 4-file font table, with no explicit validate→fix→retry checkpoint for the create→register→verify path.

2 / 3

Progressive Disclosure

A single ~450-line file with no bundle or reference files; sections are well-organized and navigable, but content that could be split (the full prop-types table, theming reference) is inline with no one-level-deep references.

2 / 3

Total

10

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A highly specific, well-triggered description that names concrete capabilities and provides an explicit 'Use this skill when' clause tied to a distinct Webiny niche. All four dimensions score at the top of the scale.

DimensionReasoningScore

Specificity

Lists many concrete actions — "create editor components... register components with createComponent, define configurable inputs (text, number, boolean, color, select, file/image, slot, lexical, object, tags)... set up component groups, customize the theme... build Server Components that fetch CMS data" — well beyond vague domain naming. Uses third-person gerund voice ("Building"), so no voice penalty applies.

3 / 3

Completeness

Explicitly answers both what ("Building Website Builder editor components, theming, and CMS integration") and when ("Use this skill when the developer wants to create editor components for the Website Builder... Also use for anything related to the Website Builder starter kit").

3 / 3

Trigger Term Quality

Covers natural terms a developer would say — "Website Builder", "editor components", "theming", "CMS data", "Server Components", "starter kit" — alongside the API names, giving good coverage rather than bare jargon.

3 / 3

Distinctiveness Conflict Risk

Tightly scoped to a distinct niche ("@webiny/website-builder-nextjs", "Website Builder") with triggers unlikely to fire for adjacent skills; related skills (webiny-sdk, webiny-project-structure) are non-overlapping.

3 / 3

Total

12

/

12

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
webiny/webiny-js
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.