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.

68

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

78%Weight 40%Scale 1-5

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

A highly actionable, information-dense body with executable code for every task and clear sequencing, held back by repetition of the file-input warning and by being a single long file instead of an overview plus one-level-deep reference files.

Suggestions

Move the input-type runtime-shape table and the worked FeatureCard example into a references/ file (e.g. references/input-types.md) and keep a short summary table in SKILL.md, so the main file stays an overview.

State the file/lexical input-object warning once (in the input-types section) instead of three times — the description, the table intro, and the worked-example note all repeat it.

Consider adding an explicit verification step after registration (e.g., confirm the component appears in the editor's palette under its group) to close the workflow's feedback loop.

DimensionReasoningScore

Conciseness

Efficient and dense with SDK-specific facts Claude would not know (type tables, registration requirements, the four-file font-change checklist), with only minor trimmable over-explanation: the file/lexical-input warning is repeated three times and the ASCII architecture diagram is expendable. Not anchor 5 because of that repetition; not 3 since no section is padding.

4 / 5

Actionability

Fully executable, copy-paste-ready guidance throughout: starter-kit clone commands, env var block, complete Banner and FeatureCard components, registration array, and a working async ProductListing server component using sdk.cms.listEntries — covering the common cases for each task.

5 / 5

Workflow Clarity

Setup, component creation, registration, and theming are clearly sequenced, and the Data Flow section explains the end-to-end pipeline; tasks are unambiguous with no destructive or batch operations requiring validation. Not 5 because explicit checkpoints (e.g., 'verify the component appears in the editor palette') are absent.

4 / 5

Progressive Disclosure

The body is well-sectioned and navigable, but it is a ~470-line monolith with no bundle files: the input-type reference table, worked examples, and theming reference material are inlined where references/ files would keep SKILL.md an overview. Matches 'content that should be separate is inline' better than the minor-gaps anchor.

3 / 5

Total

16

/

20

Passed

Description

88%Weight 40%Scale 1-5

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 strong description: it states concrete capabilities comprehensively and includes an explicit, trigger-rich 'Use when' clause in third person. The only weaknesses are a few missing natural synonyms and slight overlap with a sibling Webiny CMS skill.

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)', 'customize the theme (CSS variables, createTheme, Tailwind bridge, fonts)', 'build Server Components that fetch CMS data' — giving comprehensive, not minor-gap, coverage (anchor 5, above anchor 4).

5 / 5

Completeness

Clearly answers 'what' ('Building Website Builder editor components, theming, and CMS integration using @webiny/website-builder-nextjs') and 'when' with explicit trigger phrases ('Use this skill when the developer wants to...', 'Also use for anything related to the Website Builder starter kit'), matching the anchor-5 example exactly.

5 / 5

Trigger Term Quality

Good keyword coverage with natural phrases like 'editor components', 'customize the theme', 'fetch CMS data', and 'Website Builder starter kit', but common synonyms ('page builder', 'Webiny' alone) are missing and the jargon density (WB, createComponent) is high — noticeably above the midpoint, just short of comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

A clear niche anchored to @webiny/website-builder-nextjs and Website Builder-specific triggers, but 'CMS integration' and 'build Server Components that fetch CMS data' create minor overlap risk with a closely related Headless CMS SDK skill — mostly distinct rather than minimal-conflict.

4 / 5

Total

18

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

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.