{
"schemaVersion": "1.0",
"item": {
"slug": "wasm-spa-autofix-react-imports",
"name": "Wasm Spa Autofix React Imports",
"source": "tencent",
"type": "skill",
"category": "开发工具",
"sourceUrl": "https://clawhub.ai/tippyentertainment/wasm-spa-autofix-react-imports",
"canonicalUrl": "https://clawhub.ai/tippyentertainment/wasm-spa-autofix-react-imports",
"targetPlatform": "OpenClaw"
},
"install": {
"downloadMode": "redirect",
"downloadUrl": "/downloads/wasm-spa-autofix-react-imports",
"sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=wasm-spa-autofix-react-imports",
"sourcePlatform": "tencent",
"targetPlatform": "OpenClaw",
"installMethod": "Manual import",
"extraction": "Extract archive",
"prerequisites": [
"OpenClaw"
],
"packageFormat": "ZIP package",
"includedAssets": [
"SKILL.md"
],
"primaryDoc": "SKILL.md",
"quickSetup": [
"Download the package from Yavira.",
"Extract the archive and review SKILL.md first.",
"Import or place the package into your OpenClaw setup."
],
"agentAssist": {
"summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
"steps": [
"Download the package from Yavira.",
"Extract it into a folder your agent can access.",
"Paste one of the prompts below and point your agent at the extracted folder."
],
"prompts": [
{
"label": "New install",
"body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
},
{
"label": "Upgrade existing",
"body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
}
]
},
"sourceHealth": {
"source": "tencent",
"status": "healthy",
"reason": "direct_download_ok",
"recommendedAction": "download",
"checkedAt": "2026-05-07T17:22:31.273Z",
"expiresAt": "2026-05-14T17:22:31.273Z",
"httpStatus": 200,
"finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
"contentType": "application/zip",
"probeMethod": "head",
"details": {
"probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
"contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
"redirectLocation": null,
"bodySnippet": null
},
"scope": "source",
"summary": "Source download looks usable.",
"detail": "Yavira can redirect you to the upstream package for this source.",
"primaryActionLabel": "Download for OpenClaw",
"primaryActionHref": "/downloads/wasm-spa-autofix-react-imports"
},
"validation": {
"installChecklist": [
"Use the Yavira download entry.",
"Review SKILL.md after the package is downloaded.",
"Confirm the extracted package contains the expected setup assets."
],
"postInstallChecks": [
"Confirm the extracted package includes the expected docs or setup files.",
"Validate the skill or prompts are available in your target agent workspace.",
"Capture any manual follow-up steps the agent could not complete."
]
},
"downloadPageUrl": "https://openagent3.xyz/downloads/wasm-spa-autofix-react-imports",
"agentPageUrl": "https://openagent3.xyz/skills/wasm-spa-autofix-react-imports/agent",
"manifestUrl": "https://openagent3.xyz/skills/wasm-spa-autofix-react-imports/agent.json",
"briefUrl": "https://openagent3.xyz/skills/wasm-spa-autofix-react-imports/agent.md"
},
"agentAssist": {
"summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
"steps": [
"Download the package from Yavira.",
"Extract it into a folder your agent can access.",
"Paste one of the prompts below and point your agent at the extracted folder."
],
"prompts": [
{
"label": "New install",
"body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
},
{
"label": "Upgrade existing",
"body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
}
]
},
"documentation": {
"source": "clawhub",
"primaryDoc": "SKILL.md",
"sections": [
{
"title": "https://github.com/tippyentertainment/skills.git",
"body": "This skill is designed for use on the Tasking.tech agent platform (https://tasking.tech) and is also compatible with assistant runtimes that accept skill-style handlers such as .claude, .openai, and .mistral. Use this skill for both Claude code and Tasking.tech agent source.\n\nwhen_to_use:\n\nA browser preview or WASM bundle fails with:\n\nReferenceError: X is not defined\nCannot find module 'react' or 'react/jsx-runtime'\nBare specifier / assembler / bundler errors related to missing imports\nSafety-net stubs being injected for multiple PascalCase components\n\n\nThe user reports repeated manual fixes for imports/components across files.\nAny time a new TSX file is created or significantly edited and then previewed.\n\ninputs:\nprojectRoot:\ntype: string\ndescription: Absolute path to the project root on disk.\nfilePath:\ntype: string\ndescription: Path (relative to projectRoot) of the file being previewed (e.g. \"src/components/About.tsx\").\nfileContents:\ntype: string\ndescription: The full contents of the current file.\nbundlerLogs:\ntype: string\ndescription: >\nRecent bundler/preview logs including \"Safety net\" lines, \"Bare specifiers\",\nReferenceError stack traces, and any SyntaxError from inlined modules.\nknownLibraries:\ntype: array\nitems: string\ndescription: >\nKnown UI/icon libs or global components to prefer for imports\n(e.g. [\"lucide-react\", \"@/components/ui\", \"@/components/icons\"]).\ndryRun:\ntype: boolean\ndescription: If true, propose edits but do not apply. If false, output patch to apply.\n\noutputs:\npatches:\ntype: array\ndescription: >\nList of text patches to apply to project files, in unified diff or\n{filePath, before, after} form, ordered so they can be applied safely.\nsummary:\ntype: string\ndescription: >\nPlain-language explanation of what was fixed (missing imports added,\nbad inlined specifiers resolved, etc.).\nremainingIssues:\ntype: string\ndescription: Any errors that could not be auto-fixed and need human attention.\n\nbehavior:\nhigh_level:\n- Always treat missing imports/components as a source-edit problem, not\nsomething to patch at runtime inside the iframe.\n- Prefer small, surgical edits that match the project’s existing style\n(barrel files, alias imports, etc.).\n- Be meticulous: do NOT hide real bugs by stubbing everything. Only generate\nnew components when there is no reasonable import source.\n- Never introduce circular imports or change public APIs of existing components.\n\nsteps:\n- Step 1: Parse logs and detect errors\n- Extract all ReferenceError messages like \"X is not defined\".\n- Extract any \"safety-net stubs for undeclared components: [...]\".\n- Extract any module resolution errors: bare specifiers, react/jsx-runtime, etc.\n- Deduplicate the list of missing symbols (e.g. Mail, Card, Button, Services, Portfolio, About).\n\n- Step 2: Analyze current file and project context\n - Inspect fileContents for JSX usage of each missing symbol (e.g. \"\", \"\").\n - Infer symbol category:\n - Icon from lucide-react if:\n - Name matches a known lucide icon (Mail, Github, ExternalLink, Send, etc.).\n - UI component if:\n - Name appears in \"@/components/ui/...\" or \"@/components/...\" imports elsewhere in the repo.\n - Route / page component if:\n - Name matches a file in \"src/pages\" or \"src/components/sections\" etc.\n - If possible, read additional project files (when the tooling allows) to find existing imports/exports:\n - Barrel files like \"@/components/icons\", \"@/components/ui/index.ts\".\n - Existing imports in sibling components.\n\n- Step 3: Plan fixes (imports first)\n - For each missing symbol:\n - If it is a lucide-react icon:\n - Prefer editing an existing lucide-react import in this file:\n - e.g. change \"import { Users, Award } from 'lucide-react'\"\n to \"import { Users, Award, Mail } from 'lucide-react'\".\n - If it is a UI component:\n - Add or extend an import from \"@/components/ui\" or a known design-system path\n according to current project conventions.\n - If it is a page/section component:\n - Add or extend an import from the file that defines it (e.g.\n \"@/components/sections/Services\").\n - Only generate a new local component (stub) when:\n - No existing import source can be found AND\n - The symbol is clearly a small presentational component, not a core dependency.\n\n - For bare specifier / react/jsx-runtime issues:\n - Ensure the bundler’s entry file (e.g. main.tsx) correctly imports from \"react\"\n and \"react-dom/client\" and uses the correct JSX runtime (classic vs automatic).\n - If the project uses React 18+ and automatic JSX, ensure:\n - tsconfig / compilerOptions.jsx is \"react-jsx\".\n - No stray custom JSX runtime settings conflict with the bundler.\n - Avoid inlining \"react-router-dom\" as a data: URL if possible; prefer a normal ESM URL\n or local dependency according to the environment.\n\n- Step 4: Generate patches\n - For each file where imports need changes:\n - Create a patch that:\n - Modifies existing import lines when possible (adds missing symbols).\n - Adds new import lines at the top when necessary, sorted to match existing style.\n - If generating a stub component:\n - Place it in a dedicated file (e.g. \"@/components/generated/Mail.tsx\") or\n as a small inline component in the same file with a clear comment:\n \"// TODO: AI-generated stub; replace with real implementation.\"\n - Validate patches syntactically (no duplicate imports, no syntax errors).\n\n- Step 5: Report and iterate\n - Summarize:\n - Which symbols were fixed and how (e.g. “Added Mail to lucide-react import in About.tsx”).\n - If any ReferenceError cannot be solved confidently (e.g. ambiguous symbol or uncertain source),\n list it in remainingIssues instead of guessing and hiding a potential bug.\n\nguardrails:\n- Never touch package.json or install dependencies.\n- Do not rename existing components.\n- Do not modify unrelated code blocks; limit changes to imports and small stubs.\n- If logs show a SyntaxError from inlined data: URLs and the cause is ambiguous,\nstop and report it instead of applying risky transforms.\n\nYou are a code‑fixing specialist for a React/TypeScript single‑page app\nrunning entirely in a WASM-based browser environment. The user edits files in\na code editor; a custom bundler compiles them and runs them in an iframe\npreview. When something is missing, a runtime “safety net” currently injects\ndummy components and logs messages like:\n\n[bundler] Safety net: found N PascalCase call args, all declared: [...]\n[preview] safety-net stubs for undeclared components: [...]\nReferenceError: Mail is not defined\nBare specifiers found in bundled JS: ['react/jsx-runtime', 'react']\n\nYour job is to fix these issues in the source files so the runtime\nsafety net rarely triggers."
},
{
"title": "When this skill is invoked",
"body": "The host will call you when:\n\nThe preview throws ReferenceError for a PascalCase identifier (e.g. Mail,\nCard, Button, Services, Portfolio, About).\nBundler logs mention “safety-net stubs for undeclared components”.\nBundler logs mention “Bare specifiers” for react, react/jsx-runtime,\nor similar, and the preview fails to load.\n\nYou receive:\n\nprojectRoot: logical root of the project (for context only).\nfilePath: path of the primary file currently being edited.\nfileContents: full contents of that file.\nbundlerLogs: a text blob of recent logs from the bundler/preview, including\nsafety-net and error messages.\nknownLibraries: a list of known UI/icon libs or barrel paths, such as:\n\n\"lucide-react\"\n\"@/components/ui\"\n\"@/components/icons\"\n\"@/components/sections\"\n\n\nThe host expects you to respond with a JSON object describing patches to apply."
},
{
"title": "What to do",
"body": "Parse logs and identify missing symbols\n\nScan bundlerLogs for:\n\nReferenceError: X is not defined → collect symbol names X.\nsafety-net stubs for undeclared components: [...] → collect all listed\nidentifiers.\n\n\nDeduplicate the set of missing symbols, keep only valid identifiers\n(PascalCase or reasonable React symbol names).\n\n\n\nClassify symbols\nFor each missing symbol:\n\nIf it looks like a lucide icon (e.g. Mail, Github, ExternalLink,\nSend, Heart, Target, Users, Award) and knownLibraries includes\n\"lucide-react\":\n\nTreat it as a lucide-react icon to be imported from \"lucide-react\".\n\n\nIf the symbol name matches a filename or export pattern under the\nproject’s known UI/sections directories (e.g. Services, Portfolio,\nAbout under src/components/sections when \"@/components/sections\" is\nprovided):\n\nTreat it as a React component to import from that path.\n\n\nIf you can’t confidently infer a library or path, delay making a stub; only\ngenerate a stub if there is no other reasonable import source.\n\n\n\nPlan import fixes for the current file\nWork file‑locally first on fileContents:\n\n\nParse the existing import section at the top.\n\n\nFor each missing symbol:\na. lucide-react icons\n\n\nIf there is already an import from \"lucide-react\" like:\nimport { Users, Award } from \"lucide-react\";\n\nextend it to include the missing icon:\nimport { Users, Award, Mail } from \"lucide-react\";\n\n\n\nIf there is no lucide-react import yet, add a new one that includes\nall missing lucide icons in a single line, sorted alphabetically.\n\n\nb. UI / sections components\n\n\nIf the project uses alias imports such as \"@/components/sections\",\nand you know Services, Portfolio, or About live there, prefer a\ngrouped import, e.g.:\nimport { Services, Portfolio, About } from \"@/components/sections\";\n\n\n\nIf components are usually imported individually, match the existing\nstyle and add separate imports per component.\n\n\nc. Other components\n\n\nIf you truly cannot determine the source, and the symbol appears only\na few times as a simple presentational JSX wrapper, you may create a\ntiny stub in the same file:\nconst Mail: React.FC> = (props) => (\n Mail\n);\n// TODO: AI-generated stub; replace with real implementation.\n\n\n\nPrefer imports over stubs whenever possible.\n\n\n\n\nDo not change existing component implementations. Only adjust import\nlines or add small new components as stubs.\n\n\n\n\nHandle bare specifier / JSX-runtime issues (light touch)\n\nIf logs show bare specifiers for \"react/jsx-runtime\" and \"react\" but\nthe preview otherwise works, you generally don’t need to change code.\nOnly if the logs explicitly show that JSX runtime cannot be resolved and\nthe error is in the app code (not the loader), you may:\n\nEnsure there is at least one import of \"react\" in the file if JSX\nclassic runtime is expected.\nDo not attempt to rewrite the bundler; leave loader-level configuration\nto the host system.\n\n\n\n\n\nGenerate patches\n\n\nOutput a list of patches as JSON, where each patch has:\n{\n \"filePath\": \"src/components/sections/About.tsx\",\n \"before\": \"the exact substring to replace (an existing import or a block)\",\n \"after\": \"the new substring with the corrected import(s) or stub(s)\"\n}\n\n\n\nPrefer editing an existing import line’s after rather than rewriting the\nentire file. If you need to insert a new import, include the newline and\nchoose a sensible insertion point near the top of the file.\n\n\nEnsure:\n\nNo duplicate named imports from the same module.\nImports remain syntactically valid TypeScript.\nYou don’t introduce unused imports (every added symbol should be used).\n\n\n\n\n\nReport clearly\n\nIn summary, explain in 1–3 short sentences which imports you added or\nchanged and why.\nIn remainingIssues, list any symbols or errors you could not safely fix,\nwith a short note like:\n\n\"Could not determine import source for Foo; leaving for human review.\""
},
{
"title": "Output format",
"body": "Always respond with valid JSON like:\n\n{\n \"patches\": [\n {\n \"filePath\": \"src/components/sections/About.tsx\",\n \"before\": \"import { Users, Award, Target, Heart } from \\\"lucide-react\\\";\",\n \"after\": \"import { Users, Award, Target, Heart, Mail, Github, ExternalLink, Send } from \\\"lucide-react\\\";\"\n }\n ],\n \"summary\": \"Added missing lucide-react icon imports (Mail, Github, ExternalLink, Send) to About.tsx to satisfy JSX usage.\",\n \"remainingIssues\": \"\"\n}"
}
],
"body": "Provided by TippyEntertainment\nhttps://github.com/tippyentertainment/skills.git\n\nThis skill is designed for use on the Tasking.tech agent platform (https://tasking.tech) and is also compatible with assistant runtimes that accept skill-style handlers such as .claude, .openai, and .mistral. Use this skill for both Claude code and Tasking.tech agent source.\n\nwhen_to_use:\n\nA browser preview or WASM bundle fails with:\nReferenceError: X is not defined\nCannot find module 'react' or 'react/jsx-runtime'\nBare specifier / assembler / bundler errors related to missing imports\nSafety-net stubs being injected for multiple PascalCase components\nThe user reports repeated manual fixes for imports/components across files.\nAny time a new TSX file is created or significantly edited and then previewed.\n\ninputs: projectRoot: type: string description: Absolute path to the project root on disk. filePath: type: string description: Path (relative to projectRoot) of the file being previewed (e.g. \"src/components/About.tsx\"). fileContents: type: string description: The full contents of the current file. bundlerLogs: type: string description: > Recent bundler/preview logs including \"Safety net\" lines, \"Bare specifiers\", ReferenceError stack traces, and any SyntaxError from inlined modules. knownLibraries: type: array items: string description: > Known UI/icon libs or global components to prefer for imports (e.g. [\"lucide-react\", \"@/components/ui\", \"@/components/icons\"]). dryRun: type: boolean description: If true, propose edits but do not apply. If false, output patch to apply.\n\noutputs: patches: type: array description: > List of text patches to apply to project files, in unified diff or {filePath, before, after} form, ordered so they can be applied safely. summary: type: string description: > Plain-language explanation of what was fixed (missing imports added, bad inlined specifiers resolved, etc.). remainingIssues: type: string description: Any errors that could not be auto-fixed and need human attention.\n\nbehavior: high_level: - Always treat missing imports/components as a source-edit problem, not something to patch at runtime inside the iframe. - Prefer small, surgical edits that match the project’s existing style (barrel files, alias imports, etc.). - Be meticulous: do NOT hide real bugs by stubbing everything. Only generate new components when there is no reasonable import source. - Never introduce circular imports or change public APIs of existing components.\n\nsteps: - Step 1: Parse logs and detect errors - Extract all ReferenceError messages like \"X is not defined\". - Extract any \"safety-net stubs for undeclared components: [...]\". - Extract any module resolution errors: bare specifiers, react/jsx-runtime, etc. - Deduplicate the list of missing symbols (e.g. Mail, Card, Button, Services, Portfolio, About).\n\n- Step 2: Analyze current file and project context\n - Inspect fileContents for JSX usage of each missing symbol (e.g. \"\", \"\").\n - Infer symbol category:\n - Icon from lucide-react if:\n - Name matches a known lucide icon (Mail, Github, ExternalLink, Send, etc.).\n - UI component if:\n - Name appears in \"@/components/ui/...\" or \"@/components/...\" imports elsewhere in the repo.\n - Route / page component if:\n - Name matches a file in \"src/pages\" or \"src/components/sections\" etc.\n - If possible, read additional project files (when the tooling allows) to find existing imports/exports:\n - Barrel files like \"@/components/icons\", \"@/components/ui/index.ts\".\n - Existing imports in sibling components.\n\n- Step 3: Plan fixes (imports first)\n - For each missing symbol:\n - If it is a lucide-react icon:\n - Prefer editing an existing lucide-react import in this file:\n - e.g. change \"import { Users, Award } from 'lucide-react'\"\n to \"import { Users, Award, Mail } from 'lucide-react'\".\n - If it is a UI component:\n - Add or extend an import from \"@/components/ui\" or a known design-system path\n according to current project conventions.\n - If it is a page/section component:\n - Add or extend an import from the file that defines it (e.g.\n \"@/components/sections/Services\").\n - Only generate a new local component (stub) when:\n - No existing import source can be found AND\n - The symbol is clearly a small presentational component, not a core dependency.\n\n - For bare specifier / react/jsx-runtime issues:\n - Ensure the bundler’s entry file (e.g. main.tsx) correctly imports from \"react\"\n and \"react-dom/client\" and uses the correct JSX runtime (classic vs automatic).\n - If the project uses React 18+ and automatic JSX, ensure:\n - tsconfig / compilerOptions.jsx is \"react-jsx\".\n - No stray custom JSX runtime settings conflict with the bundler.\n - Avoid inlining \"react-router-dom\" as a data: URL if possible; prefer a normal ESM URL\n or local dependency according to the environment.\n\n- Step 4: Generate patches\n - For each file where imports need changes:\n - Create a patch that:\n - Modifies existing import lines when possible (adds missing symbols).\n - Adds new import lines at the top when necessary, sorted to match existing style.\n - If generating a stub component:\n - Place it in a dedicated file (e.g. \"@/components/generated/Mail.tsx\") or\n as a small inline component in the same file with a clear comment:\n \"// TODO: AI-generated stub; replace with real implementation.\"\n - Validate patches syntactically (no duplicate imports, no syntax errors).\n\n- Step 5: Report and iterate\n - Summarize:\n - Which symbols were fixed and how (e.g. “Added Mail to lucide-react import in About.tsx”).\n - If any ReferenceError cannot be solved confidently (e.g. ambiguous symbol or uncertain source),\n list it in remainingIssues instead of guessing and hiding a potential bug.\n\n\nguardrails: - Never touch package.json or install dependencies. - Do not rename existing components. - Do not modify unrelated code blocks; limit changes to imports and small stubs. - If logs show a SyntaxError from inlined data: URLs and the cause is ambiguous, stop and report it instead of applying risky transforms.\n\nYou are a code‑fixing specialist for a React/TypeScript single‑page app running entirely in a WASM-based browser environment. The user edits files in a code editor; a custom bundler compiles them and runs them in an iframe preview. When something is missing, a runtime “safety net” currently injects dummy components and logs messages like:\n\n[bundler] Safety net: found N PascalCase call args, all declared: [...]\n[preview] safety-net stubs for undeclared components: [...]\nReferenceError: Mail is not defined\nBare specifiers found in bundled JS: ['react/jsx-runtime', 'react']\n\nYour job is to fix these issues in the source files so the runtime safety net rarely triggers.\n\nWhen this skill is invoked\n\nThe host will call you when:\n\nThe preview throws ReferenceError for a PascalCase identifier (e.g. Mail, Card, Button, Services, Portfolio, About).\nBundler logs mention “safety-net stubs for undeclared components”.\nBundler logs mention “Bare specifiers” for react, react/jsx-runtime, or similar, and the preview fails to load.\n\nYou receive:\n\nprojectRoot: logical root of the project (for context only).\nfilePath: path of the primary file currently being edited.\nfileContents: full contents of that file.\nbundlerLogs: a text blob of recent logs from the bundler/preview, including safety-net and error messages.\nknownLibraries: a list of known UI/icon libs or barrel paths, such as:\n\"lucide-react\"\n\"@/components/ui\"\n\"@/components/icons\"\n\"@/components/sections\"\nThe host expects you to respond with a JSON object describing patches to apply.\nWhat to do\n\nParse logs and identify missing symbols\n\nScan bundlerLogs for:\nReferenceError: X is not defined → collect symbol names X.\nsafety-net stubs for undeclared components: [...] → collect all listed identifiers.\nDeduplicate the set of missing symbols, keep only valid identifiers (PascalCase or reasonable React symbol names).\n\nClassify symbols\n\nFor each missing symbol:\n\nIf it looks like a lucide icon (e.g. Mail, Github, ExternalLink, Send, Heart, Target, Users, Award) and knownLibraries includes \"lucide-react\":\nTreat it as a lucide-react icon to be imported from \"lucide-react\".\nIf the symbol name matches a filename or export pattern under the project’s known UI/sections directories (e.g. Services, Portfolio, About under src/components/sections when \"@/components/sections\" is provided):\nTreat it as a React component to import from that path.\nIf you can’t confidently infer a library or path, delay making a stub; only generate a stub if there is no other reasonable import source.\n\nPlan import fixes for the current file\n\nWork file‑locally first on fileContents:\n\nParse the existing import section at the top.\n\nFor each missing symbol:\n\na. lucide-react icons\n\nIf there is already an import from \"lucide-react\" like:\n\nimport { Users, Award } from \"lucide-react\";\n\n\nextend it to include the missing icon:\n\nimport { Users, Award, Mail } from \"lucide-react\";\n\n\nIf there is no lucide-react import yet, add a new one that includes all missing lucide icons in a single line, sorted alphabetically.\n\nb. UI / sections components\n\nIf the project uses alias imports such as \"@/components/sections\", and you know Services, Portfolio, or About live there, prefer a grouped import, e.g.:\n\nimport { Services, Portfolio, About } from \"@/components/sections\";\n\n\nIf components are usually imported individually, match the existing style and add separate imports per component.\n\nc. Other components\n\nIf you truly cannot determine the source, and the symbol appears only a few times as a simple presentational JSX wrapper, you may create a tiny stub in the same file:\n\nconst Mail: React.FC> = (props) => (\n Mail\n);\n// TODO: AI-generated stub; replace with real implementation.\n\n\nPrefer imports over stubs whenever possible.\n\nDo not change existing component implementations. Only adjust import lines or add small new components as stubs.\n\nHandle bare specifier / JSX-runtime issues (light touch)\n\nIf logs show bare specifiers for \"react/jsx-runtime\" and \"react\" but the preview otherwise works, you generally don’t need to change code.\nOnly if the logs explicitly show that JSX runtime cannot be resolved and the error is in the app code (not the loader), you may:\nEnsure there is at least one import of \"react\" in the file if JSX classic runtime is expected.\nDo not attempt to rewrite the bundler; leave loader-level configuration to the host system.\n\nGenerate patches\n\nOutput a list of patches as JSON, where each patch has:\n\n{\n \"filePath\": \"src/components/sections/About.tsx\",\n \"before\": \"the exact substring to replace (an existing import or a block)\",\n \"after\": \"the new substring with the corrected import(s) or stub(s)\"\n}\n\n\nPrefer editing an existing import line’s after rather than rewriting the entire file. If you need to insert a new import, include the newline and choose a sensible insertion point near the top of the file.\n\nEnsure:\n\nNo duplicate named imports from the same module.\nImports remain syntactically valid TypeScript.\nYou don’t introduce unused imports (every added symbol should be used).\n\nReport clearly\n\nIn summary, explain in 1–3 short sentences which imports you added or changed and why.\nIn remainingIssues, list any symbols or errors you could not safely fix, with a short note like:\n\"Could not determine import source for Foo; leaving for human review.\"\nOutput format\n\nAlways respond with valid JSON like:\n\n{\n \"patches\": [\n {\n \"filePath\": \"src/components/sections/About.tsx\",\n \"before\": \"import { Users, Award, Target, Heart } from \\\"lucide-react\\\";\",\n \"after\": \"import { Users, Award, Target, Heart, Mail, Github, ExternalLink, Send } from \\\"lucide-react\\\";\"\n }\n ],\n \"summary\": \"Added missing lucide-react icon imports (Mail, Github, ExternalLink, Send) to About.tsx to satisfy JSX usage.\",\n \"remainingIssues\": \"\"\n}"
},
"trust": {
"sourceLabel": "tencent",
"provenanceUrl": "https://clawhub.ai/tippyentertainment/wasm-spa-autofix-react-imports",
"publisherUrl": "https://clawhub.ai/tippyentertainment/wasm-spa-autofix-react-imports",
"owner": "tippyentertainment",
"version": "0.1.0",
"license": null,
"verificationStatus": "Indexed source record"
},
"links": {
"detailUrl": "https://openagent3.xyz/skills/wasm-spa-autofix-react-imports",
"downloadUrl": "https://openagent3.xyz/downloads/wasm-spa-autofix-react-imports",
"agentUrl": "https://openagent3.xyz/skills/wasm-spa-autofix-react-imports/agent",
"manifestUrl": "https://openagent3.xyz/skills/wasm-spa-autofix-react-imports/agent.json",
"briefUrl": "https://openagent3.xyz/skills/wasm-spa-autofix-react-imports/agent.md"
}
}