From f0c907b7c29258b964fbe8de7e6e1f882cbf8dbc Mon Sep 17 00:00:00 2001 From: Yogesh Rao Date: Wed, 13 May 2026 14:26:14 +0530 Subject: [PATCH] =?UTF-8?q?feat:=20improve=20component-scaffold=20skill=20?= =?UTF-8?q?score=2010%=20=E2=86=92=2089%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hey @art-alexeyenko 👋 I ran your skills through `tessl skill review` at work and found some targeted improvements for `content-sdk-component-scaffold`. Here's the full before/after: | Skill | Before | After | Change | |-------|--------|-------|--------| | content-sdk-component-scaffold | 10% | 89% | +79% | | content-sdk-component-registration | 89% | 89% | 0% | | content-sdk-field-usage-image-link-text | 83% | 83% | 0% | | content-sdk-route-configuration | 83% | 83% | 0% | | content-sdk-editing-safe-rendering | 70% | 70% | 0% | | content-sdk-troubleshoot-editing | 69% | 69% | 0% | The remaining 8 skills (`component-data-strategy`, `component-variants`, `dictionary-and-i18n`, `graphql-data-fetching`, `multisite-management`, `site-setup-and-env`, `sitemap-robots`, `upgrade-assistant`) also scored 10% due to the same unquoted-colon frontmatter issue — happy to send follow-up PRs for those if this one looks good. - [x] This PR follows the [Contribution Guide](https://github.com/Sitecore/content-sdk/blob/dev/CONTRIBUTING.md) - [ ] Changelog updated - [ ] Upgrade guide entry added ## Description / Motivation The `content-sdk-component-scaffold` skill scored 10% because its YAML frontmatter description contained an unquoted colon (`App Router: decide Server vs Client...`) which breaks YAML parsing — the review tool couldn't evaluate the skill at all. I picked this skill because it's the first one listed in Skills.md and the most common developer starting point (scaffolding new components). Changes applied to both the App Router and Pages Router template versions:
Changes made - **Fixed YAML frontmatter**: Wrapped the `description` field in quotes to fix the YAML parsing error caused by an unquoted colon - **Enhanced description**: Added specific file paths (`.sitecore/component-map.ts`, `.sitecore/component-map.client.ts`) and additional trigger terms (`React component`, `layout placeholders`) for better skill matching - **Added concrete code example**: Included a copy-paste-ready TSX snippet showing a properly structured component with typed props, `Field` imports, and params handling - **Structured workflow as numbered steps**: Converted bullet points to a clear 1→2→3→4→5 sequence (create file → define props → decide server/client → register → build & verify) - **Added verification step**: Step 5 now includes confirming the component resolves in layout preview or editing mode after building
I also stress-tested your `content-sdk-component-registration` skill against a few real-world task evals and it held up really well on server-vs-client component map routing — scored 89% out of the box. Kudos for that. Honest disclosure — I work at @tesslio where we build tooling around skills like these. Not a pitch — just saw room for improvement and wanted to contribute. Want to self-improve your skills? Just point your agent (Claude Code, Codex, etc.) at [this Tessl guide](https://docs.tessl.io/evaluate/optimize-a-skill-using-best-practices) and ask it to optimize your skill. Ping me — [@yogesh-tessl](https://github.com/yogesh-tessl) — if you hit any snags. ## Testing Details - [x] Manual Test/Other — Ran `tessl skill review` before and after on both template versions. Both went from 10% → 89%. Description dimension: 100%. Content dimension: 73%. ## Types of changes - [ ] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) Thanks in advance 🙏 --- .../content-sdk-component-scaffold/SKILL.md | 36 ++++++++++++++++--- .../content-sdk-component-scaffold/SKILL.md | 33 ++++++++++++++--- 2 files changed, 60 insertions(+), 9 deletions(-) diff --git a/packages/create-content-sdk-app/src/templates/nextjs-app-router/.agents/skills/content-sdk-component-scaffold/SKILL.md b/packages/create-content-sdk-app/src/templates/nextjs-app-router/.agents/skills/content-sdk-component-scaffold/SKILL.md index 643b2b6aa0..5b1c442d4e 100644 --- a/packages/create-content-sdk-app/src/templates/nextjs-app-router/.agents/skills/content-sdk-component-scaffold/SKILL.md +++ b/packages/create-content-sdk-app/src/templates/nextjs-app-router/.agents/skills/content-sdk-component-scaffold/SKILL.md @@ -1,6 +1,6 @@ --- name: content-sdk-component-scaffold -description: Creates new Sitecore components with correct file structure, props interface, and placement under src/components/. Use when adding a new component from scratch or scaffolding a component. App Router: decide Server vs Client and register in the appropriate map. +description: "Creates new Sitecore components with correct file structure, props interface, and placement under src/components/. Use when adding a new component from scratch, scaffolding a component, or creating a React component for Sitecore layout placeholders. App Router uses separate server (.sitecore/component-map.ts) and client (.sitecore/component-map.client.ts) component maps." --- # Content SDK Component Scaffold (App Router) @@ -13,11 +13,37 @@ Scaffold new Sitecore components so they integrate with the layout and editing p - Task involves creating a new React component that will be rendered from Sitecore layout/placeholders. - User mentions "new component," "add component," or "component file structure." -## How to perform +## How to Perform -- Create a new file under `src/components/` (or existing feature folder). Define props (fields, params), export a single default component. -- Decide Server vs Client: default Server; add `'use client'` only if the component needs hooks or event handlers. -- Register the component in the correct map (content-sdk-component-registration). Run `npm run build` to verify. +1. Create a new file under `src/components/` (or an existing feature folder). +2. Define a props interface with the component's fields and params, then export a single default component: + +```tsx +import { Text, Field } from '@sitecore-content-sdk/react'; + +interface HeroBannerProps { + fields: { + heading: Field; + subheading: Field; + }; + params: { [key: string]: string }; +} + +export default function HeroBanner({ fields, params }: HeroBannerProps) { + return ( +
+ + +
+ ); +} +``` + +3. Decide Server vs Client: default to Server Component. Add `'use client'` only if the component needs hooks, event handlers, or browser APIs. +4. Register the component in the correct map (see content-sdk-component-registration): + - Server components → `.sitecore/component-map.ts` + - Client components → `.sitecore/component-map.client.ts` +5. Run `npm run build` and confirm the component resolves in layout preview or editing mode. ## Hard Rules diff --git a/packages/create-content-sdk-app/src/templates/nextjs/.agents/skills/content-sdk-component-scaffold/SKILL.md b/packages/create-content-sdk-app/src/templates/nextjs/.agents/skills/content-sdk-component-scaffold/SKILL.md index 6a508d100e..5181fa7e4c 100644 --- a/packages/create-content-sdk-app/src/templates/nextjs/.agents/skills/content-sdk-component-scaffold/SKILL.md +++ b/packages/create-content-sdk-app/src/templates/nextjs/.agents/skills/content-sdk-component-scaffold/SKILL.md @@ -1,6 +1,6 @@ --- name: content-sdk-component-scaffold -description: Creates new Sitecore components with correct file structure, props interface, and placement under src/components/. Use when adding a new component from scratch or scaffolding a component. Pages Router: register in .sitecore/component-map.ts only. +description: "Creates new Sitecore components with correct file structure, props interface, and placement under src/components/. Use when adding a new component from scratch, scaffolding a component, or creating a React component for Sitecore layout placeholders. Pages Router uses a single component map at .sitecore/component-map.ts." --- # Content SDK Component Scaffold (Pages Router) @@ -13,9 +13,34 @@ Scaffold new Sitecore components so they integrate with the layout and editing p - Task involves creating a new React component that will be rendered from Sitecore layout/placeholders. - User mentions "new component," "add component," or "component file structure." -## How to perform - -- Create a new file under `src/components/` (or existing feature folder). Define props (fields, params), export a single default component. Register in `.sitecore/component-map.ts` (content-sdk-component-registration). Run `npm run build` to verify. +## How to Perform + +1. Create a new file under `src/components/` (or an existing feature folder). +2. Define a props interface with the component's fields and params, then export a single default component: + +```tsx +import { Text, Field } from '@sitecore-content-sdk/react'; + +interface HeroBannerProps { + fields: { + heading: Field; + subheading: Field; + }; + params: { [key: string]: string }; +} + +export default function HeroBanner({ fields, params }: HeroBannerProps) { + return ( +
+ + +
+ ); +} +``` + +3. Register the component in `.sitecore/component-map.ts` (see content-sdk-component-registration). +4. Run `npm run build` and confirm the component resolves in layout preview or editing mode. ## Hard Rules