Skip to content

feat: improve external-component-migration skill score#4484

Open
yogesh-tessl wants to merge 1 commit into
Skyscanner:mainfrom
yogesh-tessl:improve/skill-review-optimization
Open

feat: improve external-component-migration skill score#4484
yogesh-tessl wants to merge 1 commit into
Skyscanner:mainfrom
yogesh-tessl:improve/skill-review-optimization

Conversation

@yogesh-tessl
Copy link
Copy Markdown

@yogesh-tessl yogesh-tessl commented May 13, 2026

Hey Skyscanner (@Skyscanner) 👋

truly impressive. 538 stars on a design system that bridges Figma and code, with workflows for syncing variables and code connect, that's a serious investment in keeping design and engineering in sync. The migration skills for v42 and external components are a nice touch for helping teams upgrade smoothly.

ran your skills through tessl skill review at work and found some targeted improvements. Here's the before/after:

Skill Before After Change
backpack-external-component-migration 83% 90% +7%

I focused on backpack-external-component-migration since it had the most improvement headroom, specifically in content conciseness and progressive disclosure.

Changes made

Content conciseness (1/3 → 2/3):

  • Eliminated duplicate troubleshooting content - Phase 3.4 "Common Acceptance Failures" and "Common Issues & Solutions" covered the same problems (import paths, snapshot mismatches, Sass tokens). Merged and deduplicated into a single TROUBLESHOOTING.md bundle file
  • Removed "Why no HTML element spread?" rationale paragraph - the ❌ NO constraint rules already capture the requirement; the explanation restated what Claude already understands about React prop spreading
  • Removed duplicate "API Encapsulation for New Components" Notes section - identical to the ❌ NO rules in section 2.2
  • Removed "Performance Considerations" Notes section - generic guidance Claude already knows (bundle size, dynamic imports, polyfills)
  • Moved changelog (~34 lines) from frontmatter to separate CHANGELOG.md

Progressive disclosure (2/3 → improved):

  • Created TROUBLESHOOTING.md bundle file with merged, deduplicated troubleshooting content (lint errors, Sass tokens, module resolution, CSS classes, accessibility, coverage, snapshots)
  • Created CHANGELOG.md bundle file for version history
  • Added references to both bundle files in the References section

Frontmatter cleanup:

  • Fixed description format from block scalar (|) to standard quoted string
  • Removed non-standard frontmatter keys (author, version, date, changelog) that triggered the frontmatter_unknown_keys warning - version history now lives in CHANGELOG.md
  • Validation warnings reduced from 2 to 1

quick honest disclosure. I work at https://github.com/tesslio where we build tooling around skills like these. Not a pitch, just saw room for improvement and wanted to contribute.

if you want to self-improve your skills, or define your own scenarios to pressure test, just ask your agent (Claude Code, Codex, etc.) to evaluate and optimize your skill with Tessl. Ping me @yogesh-tessl, if you hit any snags.

Hey @Skyscanner 👋

I ran your skills through `tessl skill review` at work and found some targeted improvements. Here's the full before/after:

| Skill | Before | After | Change |
|-------|--------|-------|--------|
| backpack-external-component-migration | 83% | 90% | +7% |
| backpack-v42-migration | 89% | 89% | — |
| backpack-code-review-checklist | 88% | 88% | — |

I focused on `backpack-external-component-migration` since it had the most improvement headroom — specifically in content conciseness and progressive disclosure.

<details>
<summary>Changes made</summary>

**Content conciseness (1/3 → 2/3):**
- Eliminated duplicate troubleshooting content — Phase 3.4 "Common Acceptance Failures" and "Common Issues & Solutions" covered the same problems (import paths, snapshot mismatches, Sass tokens). Merged and deduplicated into a single `TROUBLESHOOTING.md` bundle file
- Removed "Why no HTML element spread?" rationale paragraph — the ❌ NO constraint rules already capture the requirement; the explanation restated what Claude already understands about React prop spreading
- Removed duplicate "API Encapsulation for New Components" Notes section — identical to the ❌ NO rules in section 2.2
- Removed "Performance Considerations" Notes section — generic guidance Claude already knows (bundle size, dynamic imports, polyfills)
- Moved changelog (~34 lines) from frontmatter to separate `CHANGELOG.md`

**Progressive disclosure (2/3 → improved):**
- Created `TROUBLESHOOTING.md` bundle file with merged, deduplicated troubleshooting content (lint errors, Sass tokens, module resolution, CSS classes, accessibility, coverage, snapshots)
- Created `CHANGELOG.md` bundle file for version history
- Added references to both bundle files in the References section

**Frontmatter cleanup:**
- Fixed `description` format from block scalar (|) to standard quoted string
- Removed non-standard frontmatter keys (author, version, date, changelog) that triggered the frontmatter_unknown_keys warning — version history now lives in CHANGELOG.md
- Validation warnings reduced from 2 to 1

**Net result:** SKILL.md reduced from 745 → 576 lines (−23%) while preserving all actionable content — code templates, workflow phases, verification checklist, and domain-specific guidance remain intact.

</details>

I also stress-tested your `backpack-external-component-migration` skill against a few real-world task evals and it held up really well on migrating an `unstable_backpack`-prefixed component with full Sass token conversion and accessibility test wiring. 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 🙏
Copilot AI review requested due to automatic review settings May 13, 2026 14:30
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the backpack-external-component-migration Claude skill content to be more concise and to push detailed material into dedicated bundle files, improving readability while keeping key guidance discoverable.

Changes:

  • Deduplicated and moved troubleshooting content into a new TROUBLESHOOTING.md.
  • Moved version history out of frontmatter into a new CHANGELOG.md and linked it from the skill.
  • Simplified SKILL.md by removing repeated rationale/notes sections and cleaning up frontmatter keys/format.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
.claude/skills/backpack-external-component-migration/TROUBLESHOOTING.md New bundled troubleshooting guide consolidating common failure modes and fixes.
.claude/skills/backpack-external-component-migration/SKILL.md Frontmatter cleanup + progressive-disclosure links; removed duplicated sections.
.claude/skills/backpack-external-component-migration/CHANGELOG.md New bundled changelog containing prior version history previously in frontmatter.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.


**Symptom:** Lint fails with errors in `dist-sassdoc/`, `dist/`, or other generated directories

**Fix:** Ensure `.eslintignore` includes all generated directories:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants