[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6ADKT7TX2NCX2TCXH1N90DR":3,"skill-same:01M6ADKT7TX2NCX2TCXH1N90DR":59},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":23,"linkOnly":24,"markdownContent":25,"markdownBody":26,"frontMatter":27,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":37,"ownerDescription":38,"updatedAt":39,"install":40,"resources":52},"01M6ADKT7TX2NCX2TCXH1N90DR","migrate-component",null,"Migrate a UI component from one framework to another, preserving behavior and tests.","davila7\u002Fclaude-with-skills","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHY7XW1NT6J5EJ61Q42B",13,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F02-intermediate\u002Flesson-04-arguments\u002Fexamples\u002Fmigrate-component\u002FSKILL.md",[],[19,20,21,22],"component","migrate component","framework","ui","2026-11-10 10:12:30",false,"---\ntitle: \"migrate-component\"\nname: migrate-component\ndescription: \"Migrate a UI component from one framework to another, preserving behavior and tests.\"\ndisable-model-invocation: true\nargument-hint: \"[component-name] [from-framework] [to-framework]\"\n---\n\n## Migrate component\n\nMigrate the $0 component from $1 to $2.\n\n### Step 1: Read the current implementation\n\nFind and read the current $0 component file. Search for it:\n- In `src\u002Fcomponents\u002F`, `components\u002F`, `app\u002Fcomponents\u002F`, or similar common locations\n- Using `grep -r \"$0\" --include=\"*.$1*\" -l` if the framework extension is known (e.g., `.vue`, `.jsx`)\n\nRead all files that make up the component:\n- The main component file\n- Any associated style files (`.css`, `.scss`, `.module.css`)\n- Any associated test files (`*.test.*`, `*.spec.*`)\n\nIf you cannot find the component, stop and ask the user for the file path.\n\n### Step 2: Understand props, state, and behavior\n\nBefore writing any code, document:\n- All props the component accepts (name, type, default value, whether required)\n- All internal state (what it tracks and how it changes)\n- All events the component emits or callbacks it invokes\n- Side effects (data fetching, subscriptions, DOM manipulation)\n- The rendered structure (what it produces visually or structurally)\n\nThis documentation becomes the specification the new implementation must satisfy.\n\n### Step 3: Write the equivalent in $2\n\nWrite the $0 component in $2, matching the same public API:\n- Same prop names and types\n- Same event names and payloads\n- Same rendered structure (or nearest equivalent in $2)\n- Same behavior for all documented state transitions\n\nUse idiomatic $2 patterns. Do not transliterate $1 patterns directly into $2 if $2 has a better way to express the same thing.\n\n### Step 4: Update tests\n\nRewrite any tests associated with the original component to use $2 testing conventions:\n- Update imports to point to the new component file\n- Update any framework-specific test utilities (e.g., `mount` from $1 to the $2 equivalent)\n- Preserve all test cases — every behavior tested in $1 must be tested in $2\n\n### Step 5: Report what changed and what needs manual review\n\nProduce a brief report:\n\n**Changed:**\n- List of files created or modified\n\n**Preserved:**\n- Confirmation that all props, events, and behaviors have equivalents\n\n**Needs manual review:**\n- Any behavior that could not be automatically preserved (e.g., a lifecycle hook that has no direct equivalent in $2)\n- Any $1-specific third-party libraries used in the original that may not have $2 equivalents\n- Performance characteristics that may differ between frameworks\n\nDo not delete the original $1 component file. Leave that for the user to remove after verifying the migration.\n","## Migrate component\n\nMigrate the $0 component from $1 to $2.\n\n### Step 1: Read the current implementation\n\nFind and read the current $0 component file. Search for it:\n- In `src\u002Fcomponents\u002F`, `components\u002F`, `app\u002Fcomponents\u002F`, or similar common locations\n- Using `grep -r \"$0\" --include=\"*.$1*\" -l` if the framework extension is known (e.g., `.vue`, `.jsx`)\n\nRead all files that make up the component:\n- The main component file\n- Any associated style files (`.css`, `.scss`, `.module.css`)\n- Any associated test files (`*.test.*`, `*.spec.*`)\n\nIf you cannot find the component, stop and ask the user for the file path.\n\n### Step 2: Understand props, state, and behavior\n\nBefore writing any code, document:\n- All props the component accepts (name, type, default value, whether required)\n- All internal state (what it tracks and how it changes)\n- All events the component emits or callbacks it invokes\n- Side effects (data fetching, subscriptions, DOM manipulation)\n- The rendered structure (what it produces visually or structurally)\n\nThis documentation becomes the specification the new implementation must satisfy.\n\n### Step 3: Write the equivalent in $2\n\nWrite the $0 component in $2, matching the same public API:\n- Same prop names and types\n- Same event names and payloads\n- Same rendered structure (or nearest equivalent in $2)\n- Same behavior for all documented state transitions\n\nUse idiomatic $2 patterns. Do not transliterate $1 patterns directly into $2 if $2 has a better way to express the same thing.\n\n### Step 4: Update tests\n\nRewrite any tests associated with the original component to use $2 testing conventions:\n- Update imports to point to the new component file\n- Update any framework-specific test utilities (e.g., `mount` from $1 to the $2 equivalent)\n- Preserve all test cases — every behavior tested in $1 must be tested in $2\n\n### Step 5: Report what changed and what needs manual review\n\nProduce a brief report:\n\n**Changed:**\n- List of files created or modified\n\n**Preserved:**\n- Confirmation that all props, events, and behaviors have equivalents\n\n**Needs manual review:**\n- Any behavior that could not be automatically preserved (e.g., a lifecycle hook that has no direct equivalent in $2)\n- Any $1-specific third-party libraries used in the original that may not have $2 equivalents\n- Performance characteristics that may differ between frameworks\n\nDo not delete the original $1 component file. Leave that for the user to remove after verifying the migration.\n",{"name":5,"title":5,"description":7,"argument-hint":28,"disable-model-invocation":29},"[component-name] [from-framework] [to-framework]",true,"main","55e6468ba43345d07c8a68de983e58403db57c25","src\u002Fcontent\u002Fdocs\u002F02-intermediate\u002Flesson-04-arguments\u002Fexamples\u002Fmigrate-component",1,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills","https:\u002F\u002Fclaude-with-skills.vercel.app","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-05-15 21:54:25",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":29},[42,45,48],{"tool":43,"command":44},"npx","npx skills add davila7\u002Fclaude-with-skills --skill migrate-component",{"tool":46,"command":47},"bunx","bunx skills add davila7\u002Fclaude-with-skills --skill migrate-component",{"tool":49,"command":50},"pnpm","pnpm dlx skills add davila7\u002Fclaude-with-skills --skill migrate-component","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F02-intermediate\u002Flesson-04-arguments\u002Fexamples\u002Fmigrate-component\u002FSKILL.md",[53],{"path":54,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":57,"sourceHtmlUrl":58},"scripts\u002Fgenerate_markdown_seed.py","SCRIPT","脚本",9437,"https:\u002F\u002Fgithub.com\u002Fvertesia\u002Fcomposableai\u002Fblob\u002Fmain\u002Ftemplates\u002Fplugin-template\u002F.agents\u002Fskills\u002Fvertesia-demo-content\u002Fscripts\u002Fgenerate_markdown_seed.py",[60,76,87,93,101,111],{"skillNo":61,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":64,"categories":65,"keywords":66,"publishedAt":23},"01M6ADNEC991ZW0GD2D4MY6NEP","tag-version","Bump the package version and create an annotated git tag. Accepts a semantic version number (1.2.0) or a bump type (patch, minor, major). Does not push — use the publish skill to push. Use as part of a release workflow.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F03-advanced\u002Flesson-08-plugins-and-distribution\u002Fexamples\u002Frelease-plugin\u002Fskills\u002Ftag-version\u002FSKILL.md",[],[67,68,69,70,71,72,73,74,75],"tag version","workflow","create","release","git","push","npm","package","publish",{"skillNo":77,"name":70,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":23},"01M6ADNCNHCXNHVAW43ZV43ZC8","Run the complete release workflow: changelog entry, version bump, git tag, and GitHub release. Invokes changelog-entry, tag-version, and publish in sequence. Use when releasing a new version of the project.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F03-advanced\u002Flesson-08-plugins-and-distribution\u002Fexamples\u002Frelease-plugin\u002Fskills\u002Frelease\u002FSKILL.md",[],[70,71,82,73,83,84,75,85,86,68],"changelog","changelog entry","run","status","github",{"skillNo":88,"name":75,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":23},"01M6ADNAWDDDDX4CS69E1D496X","Push the current branch and all tags to origin, then create a GitHub release using the latest tag and its CHANGELOG.md entry. Use after tag-version to complete a release.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F03-advanced\u002Flesson-08-plugins-and-distribution\u002Fexamples\u002Frelease-plugin\u002Fskills\u002Fpublish\u002FSKILL.md",[],[75,72,86,69,70,71,82],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":23},"01M6ADN9MP0ASQ6SX14NEPP5XE","changelog-entry","Draft the changelog entry for all unreleased commits in Keep a Changelog format. Groups commits into Added, Changed, Fixed, Removed, and Security. Use before releasing a new version or when updating CHANGELOG.md.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F03-advanced\u002Flesson-08-plugins-and-distribution\u002Fexamples\u002Frelease-plugin\u002Fskills\u002Fchangelog-entry\u002FSKILL.md",[],[83,82,100,71],"security",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":23},"01M6ADN8243TD9X8FH7FCQ608R","auto-format-on-edit","Automatically format code files after every edit using Prettier and ESLint. Active in the background whenever Claude edits a file. Formatting is silent — no prompts, no output unless a formatter fails. Use when you want consistent formatting enforced automatically during a coding session.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F03-advanced\u002Flesson-07-hooks-in-skills\u002Fexamples\u002Fauto-format-on-edit\u002FSKILL.md",[],[108,109,110],"auto format on edit","code","file",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":122,"publishedAt":23},"01M6ADN5VVNV7Y2WPYQA13M4ZQ","code-quality-audit","Run a comprehensive code quality audit covering security, performance, and maintainability. Use for quarterly audits, pre-release reviews, or when onboarding to a large codebase.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-with-skills\u002Fblob\u002Fmain\u002Fsrc\u002Fcontent\u002Fdocs\u002F03-advanced\u002Flesson-06-context-window-mastery\u002Fexamples\u002Flightweight-orchestrator\u002FSKILL.md",[117],{"categoryNo":118,"categoryName":119,"taxonomyType":120,"taxonomyTypeDesc":121},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[123,124,109,125,126,84,70,127,100],"code quality audit","audit","code quality","performance","onboarding"]