From 19b04463e21e0db037d66853770a33bc19f2f1a5 Mon Sep 17 00:00:00 2001 From: Yogesh Rao Date: Mon, 18 May 2026 13:00:36 +0530 Subject: [PATCH] feat: improve theme-creator skill score from 54% to 90% MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hey @glendaviesnz 👋 I ran your skills through `tessl skill review` at work and found some targeted improvements for the `theme-creator` skill. Here's the full before/after: | Skill | Before | After | Change | |-------|--------|-------|--------| | theme-creator | 54% | 90% | +36% | | auditing | 68% | 68% | — | | block-creator | 72% | 72% | — | | design-previews-creator | 68% | 68% | — | | plugin-creator | 89% | 89% | — | | site-creator | 63% | 63% | — | | studio | 61% | 61% | — | | wordpress-creator | 82% | 82% | — |
What changed in theme-creator - **Expanded frontmatter description** — added concrete actions (theme.json configuration, block templates, template parts, global styles) and a full "Use when..." clause with natural trigger terms (FSE theme, full site editing, block-based theme, Gutenberg templates) - **Added `functions.php` bootstrap example** — copy-paste-ready snippet for enqueueing `style.css` and editor styles, replacing the previous prose-only instruction - **Added full-width section block markup pattern** — concrete HTML example showing the strict outer/inner shell pattern with `align:"full"` and `align:"wide"`, replacing verbose bullet-point descriptions - **Trimmed layout rules** — consolidated 10 bullet points into 4 focused rules plus the concrete example, cutting redundancy while preserving all guidance - **Removed Ownership section** — this was meta-documentation that restated what the workflow already conveys; the skill delegation references to `studio` and `auditing` are preserved inline
I also stress-tested your `plugin-creator` skill against a few real-world task evals and it held up really well on REST endpoint scaffolding with capability checks and nonce verification. 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. Thanks in advance 🙏 --- skills/theme-creator/SKILL.md | 63 ++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 23 deletions(-) diff --git a/skills/theme-creator/SKILL.md b/skills/theme-creator/SKILL.md index 576c599..11f9b25 100644 --- a/skills/theme-creator/SKILL.md +++ b/skills/theme-creator/SKILL.md @@ -1,20 +1,11 @@ --- name: theme-creator -description: Create a modern WordPress block theme. +description: "Create a modern WordPress block theme with theme.json configuration, block templates, template parts, and global styles for a Studio-backed site. Use when the user asks to build a WordPress theme, FSE theme, full site editing theme, block-based theme, or requests visual design work involving theme.json, block patterns, or Gutenberg templates." --- # Theme Creator -Use this skill when the user wants a new WordPress theme or a substantial visual overhaul for a local Studio site. - -## Ownership - -This skill owns: - -- block theme implementation rules -- landing page and template composition -- WordPress-native layout structure for theme content -- theme-local artifact placement inside the selected Studio site +Use this skill when the user asks to create a WordPress theme, build an FSE or block-based theme, design a full site editing layout, configure theme.json, or do a substantial visual overhaul for a local Studio site. Use `studio` for the review loop after making changes. Use `auditing` when the user wants performance, accessibility, or broader frontend QA after the theme work. @@ -60,24 +51,50 @@ Once you are committed to the theme implementation workflow and before the main - Use proper block markup only. - No decorative HTML comments outside block delimiters. - Put visual styling in `style.css`. -- Block themes do not automatically load `style.css` on the front end. You must explicitly enqueue it in `functions.php` with `wp_enqueue_style( '-style', get_stylesheet_uri() )` on the `wp_enqueue_scripts` hook. +- Block themes do not automatically load `style.css` on the front end — enqueue it explicitly in `functions.php` (see example below). - Enqueue editor styles so the editor resembles the front end. - Add `prefers-reduced-motion` handling when using animations. +### functions.php bootstrap + +```php +-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) ); +} ); +add_action( 'after_setup_theme', function () { + add_editor_style( 'style.css' ); +} ); +``` + ## Layout rules -- Choose the layout approach that best fits the brief. Do not force every site into full-width landing-page bands. -- If you decide full-width sections are appropriate for this site type or brief, use WordPress-native full-width section structure first. -- For those sections, make the outer top-level `core/group` block use `{"align":"full","layout":{"type":"default"}}`. -- For full-width landing-page sections, use a strict shell pattern: - - outer section: `core/group` with `align:"full"` and `layout.type:"default"` - - inner content shell: immediate child `core/group` with `align:"wide"` - - primary `core/columns` inside that shell should also use `align:"wide"` when the section is meant to feel expansive -- Keep readable text and card grids inside an inner container block instead of constraining the outer full-width section itself. -- Do not leave intermediate groups or columns at constrained or default width between the full-width section and the main content shell unless the design intentionally calls for a narrow reading measure. +- Choose the layout approach that best fits the brief — not every site needs full-width landing-page bands. - Keep `theme.json` layout settings aligned with the design, including sensible `contentSize` and `wideSize` values. -- Do not rely on CSS alone to make a constrained block look full width when Gutenberg block alignment should carry that responsibility. -- If screenshots still show boxed or constrained sections after using full-width blocks, inspect wrapper alignment, serialized block markup, template layout, and `theme.json` before adding custom breakout CSS. +- Use Gutenberg block alignment instead of CSS-only workarounds for full-width sections. +- If screenshots show boxed sections after using full-width blocks, inspect wrapper alignment, serialized block markup, and `theme.json` before adding custom breakout CSS. + +### Full-width section pattern + +When full-width sections are appropriate, use this strict shell: + +```html + +
+ +
+ +
+ +
+ +
+ +
+ +``` + +Keep readable text and card grids inside the inner `align:"wide"` shell. Do not leave intermediate groups at constrained width between the full-width outer section and the content shell. ## Verification flow