[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KK7DHAEH7P631H4WJSCTPS":3,"skill-same:01M6KK7DHAEH7P631H4WJSCTPS":59},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":27,"linkOnly":28,"markdownContent":29,"markdownBody":30,"frontMatter":31,"refName":32,"commitSha":33,"skillDirectory":34,"forksCount":13,"repositoryHtmlUrl":35,"repositoryHomepageUrl":6,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M6KK7DHAEH7P631H4WJSCTPS","web3-fullstack-systematic-build",null,"Systematic approach to building full-stack Web3 applications layer by layer","AG064\u002FOpenSpace","AG064","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F184930299?v=4","01M6KHVFG7TB73NHX3RDYSTMH2","01M6KHVFMM7XA2PZA9Z83PHS3V",0,"MIT","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fgdpval_bench\u002Fskills\u002Fweb3-fullstack-systematic-build\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26],"web3","build","systematic","fullstack","web3 fullstack systematic build","applications","stack","full","layer","2026-11-10 10:12:30",false,"---\nname: web3-fullstack-systematic-build\ndescription: Systematic approach to building full-stack Web3 applications layer by layer\n---\n\n# Web3 Full-Stack Systematic Build\n\nThis skill provides a structured, layer-by-layer approach to building complex full-stack Web3 applications. Follow this sequence to maintain clarity, reduce coupling, and enable incremental testing even when tool failures occur.\n\n## Phase 1: Project Structure\n\nFirst, establish the complete directory structure before writing any code:\n\n```\nproject-name\u002F\n├── contracts\u002F\n│   ├── interfaces\u002F\n│   ├── core\u002F\n│   ├── libraries\u002F\n│   └── deployment\u002F\n├── frontend\u002F\n│   ├── src\u002F\n│   │   ├── components\u002F\n│   │   ├── hooks\u002F\n│   │   ├── config\u002F\n│   │   └── utils\u002F\n│   └── public\u002F\n├── scripts\u002F\n│   ├── deploy\u002F\n│   └── test\u002F\n├── zk-circuits\u002F\n└── docs\u002F\n```\n\n**Action:** Create all directories upfront using:\n```bash\nmkdir -p contracts\u002F{interfaces,core,libraries,deployment}\nmkdir -p frontend\u002Fsrc\u002F{components,hooks,config,utils}\nmkdir -p frontend\u002Fpublic\nmkdir -p scripts\u002F{deploy,test}\nmkdir -p zk-circuits docs\n```\n\n## Phase 2: Interface Contracts First\n\nDefine all interface contracts **before** implementing logic. This establishes clear API boundaries.\n\n**Example interface structure:**\n```solidity\n\u002F\u002F contracts\u002Finterfaces\u002FIToken.sol\n\u002F\u002F SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\ninterface IToken {\n    function transfer(address to, uint256 amount) external returns (bool);\n    function balanceOf(address account) external view returns (uint256);\n    function approve(address spender, uint256 amount) external returns (bool);\n}\n```\n\n**Actions:**\n1. List all external protocols you'll integrate (e.g., Aave, Connext, Uniswap)\n2. Create interface files for each protocol's required functions\n3. Create interfaces for your own contracts' public APIs\n4. Validate interface completeness before proceeding\n\n## Phase 3: Core Contract Implementation\n\nImplement contracts in dependency order, starting with libraries, then core logic.\n\n**Order of implementation:**\n1. **Libraries** - Utility functions with no state dependencies\n2. **Base contracts** - Abstract contracts with shared logic\n3. **Core contracts** - Main business logic implementing interfaces\n4. **Integration contracts** - Contracts that bridge multiple protocols\n\n**Example:**\n```solidity\n\u002F\u002F contracts\u002Fcore\u002FPrivatePool.sol\n\u002F\u002F SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\nimport \"..\u002Finterfaces\u002FIToken.sol\";\nimport \"..\u002Flibraries\u002FSafeMath.sol\";\n\ncontract PrivatePool {\n    using SafeMath for uint256;\n    \n    IToken public token;\n    mapping(address => uint256) private balances;\n    \n    constructor(address _token) {\n        token = IToken(_token);\n    }\n    \n    function deposit(uint256 amount) external {\n        token.transferFrom(msg.sender, address(this), amount);\n        balances[msg.sender] = balances[msg.sender].add(amount);\n    }\n}\n```\n\n**Actions:**\n1. Implement one contract at a time\n2. Compile and test each contract before moving to the next\n3. Keep contracts focused on single responsibilities\n4. Document all state variables and functions\n\n## Phase 4: Frontend Configuration\n\nSet up frontend infrastructure before building components.\n\n**Create these config files first:**\n\n1. **Network configuration** (`frontend\u002Fsrc\u002Fconfig\u002Fnetworks.js`):\n```javascript\nexport const networks = {\n  mainnet: {\n    chainId: 1,\n    rpcUrl: process.env.REACT_APP_MAINNET_RPC,\n    explorer: 'https:\u002F\u002Fetherscan.io'\n  },\n  testnet: {\n    chainId: 5,\n    rpcUrl: process.env.REACT_APP_TESTNET_RPC,\n    explorer: 'https:\u002F\u002Fgoerli.etherscan.io'\n  }\n};\n```\n\n2. **Contract addresses** (`frontend\u002Fsrc\u002Fconfig\u002Fcontracts.js`):\n```javascript\nexport const contractAddresses = {\n  PrivatePool: process.env.REACT_APP_PRIVATE_POOL_ADDRESS,\n  Token: process.env.REACT_APP_TOKEN_ADDRESS\n};\n```\n\n3. **ABI imports** (`frontend\u002Fsrc\u002Fconfig\u002Fabis\u002F`):\n```javascript\n\u002F\u002F Import compiled contract ABIs here\nimport PrivatePoolABI from '.\u002FPrivatePool.json';\nexport { PrivatePoolABI };\n```\n\n**Actions:**\n1. Create environment variable templates (`.env.example`)\n2. Set up Web3 provider configuration (ethers.js, web3.js, or wagmi)\n3. Configure wallet connection logic\n4. Create utility functions for common operations\n\n## Phase 5: Component Development\n\nBuild frontend components in this order:\n\n1. **Utility components** - Buttons, inputs, modals (no Web3 logic)\n2. **Web3 wrapper components** - Wallet connection, network switcher\n3. **Contract interaction components** - Forms that call contract functions\n4. **Data display components** - Components showing on-chain data\n5. **Page components** - Assembling everything into pages\n\n**Example component:**\n```jsx\n\u002F\u002F frontend\u002Fsrc\u002Fcomponents\u002FDepositForm.jsx\nimport { useState } from 'react';\nimport { useContractWrite } from 'wagmi';\nimport { PrivatePoolABI } from '..\u002Fconfig\u002Fabis';\n\nexport function DepositForm({ contractAddress, tokenAddress }) {\n  const [amount, setAmount] = useState('');\n  \n  const { write: deposit } = useContractWrite({\n    address: contractAddress,\n    abi: PrivatePoolABI,\n    functionName: 'deposit',\n    args: [BigInt(amount)]\n  });\n\n  return (\n    \u003Cform onSubmit={(e) => { e.preventDefault(); deposit(); }}>\n      \u003Cinput \n        value={amount} \n        onChange={(e) => setAmount(e.target.value)}\n        placeholder=\"Amount\"\n      \u002F>\n      \u003Cbutton type=\"submit\">Deposit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n**Actions:**\n1. Create components with clear prop interfaces\n2. Implement error handling for all Web3 interactions\n3. Add loading states for pending transactions\n4. Test each component in isolation\n\n## Phase 6: Deployment Scripts\n\nCreate deployment scripts last, after all contracts are complete and tested.\n\n**Structure:**\n```javascript\n\u002F\u002F scripts\u002Fdeploy\u002F01_deploy_token.js\nasync function main() {\n  const Token = await ethers.getContractFactory(\"Token\");\n  const token = await Token.deploy();\n  await token.deployed();\n  console.log(\"Token deployed to:\", token.address);\n  \n  \u002F\u002F Save address for frontend config\n  fs.writeFileSync(\n    'frontend\u002F.env',\n    `REACT_APP_TOKEN_ADDRESS=${token.address}\\n`,\n    { flag: 'a' }\n  );\n}\n```\n\n**Actions:**\n1. Create deployment scripts for each contract in dependency order\n2. Include address saving mechanism for frontend integration\n3. Create verification scripts for block explorers\n4. Document deployment parameters and expected outputs\n\n## Key Principles\n\n1. **Interface-first design** - Define contracts before implementing\n2. **Layer-by-layer progression** - Complete each phase before next\n3. **Incremental testing** - Test at each layer, not just at the end\n4. **Configuration before components** - Set up infrastructure first\n5. **Documentation at each step** - Update docs as you progress\n\n## Recovery from Failures\n\nIf a tool failure occurs:\n1. Note which phase completed successfully\n2. Resume from the last completed phase\n3. Re-validate interfaces and contracts before continuing\n4. Use the directory structure as a progress checklist\n\nThis systematic approach ensures partial progress is preserved and the overall architecture remains coherent even when interruptions occur.","# Web3 Full-Stack Systematic Build\n\nThis skill provides a structured, layer-by-layer approach to building complex full-stack Web3 applications. Follow this sequence to maintain clarity, reduce coupling, and enable incremental testing even when tool failures occur.\n\n## Phase 1: Project Structure\n\nFirst, establish the complete directory structure before writing any code:\n\n```\nproject-name\u002F\n├── contracts\u002F\n│   ├── interfaces\u002F\n│   ├── core\u002F\n│   ├── libraries\u002F\n│   └── deployment\u002F\n├── frontend\u002F\n│   ├── src\u002F\n│   │   ├── components\u002F\n│   │   ├── hooks\u002F\n│   │   ├── config\u002F\n│   │   └── utils\u002F\n│   └── public\u002F\n├── scripts\u002F\n│   ├── deploy\u002F\n│   └── test\u002F\n├── zk-circuits\u002F\n└── docs\u002F\n```\n\n**Action:** Create all directories upfront using:\n```bash\nmkdir -p contracts\u002F{interfaces,core,libraries,deployment}\nmkdir -p frontend\u002Fsrc\u002F{components,hooks,config,utils}\nmkdir -p frontend\u002Fpublic\nmkdir -p scripts\u002F{deploy,test}\nmkdir -p zk-circuits docs\n```\n\n## Phase 2: Interface Contracts First\n\nDefine all interface contracts **before** implementing logic. This establishes clear API boundaries.\n\n**Example interface structure:**\n```solidity\n\u002F\u002F contracts\u002Finterfaces\u002FIToken.sol\n\u002F\u002F SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\ninterface IToken {\n    function transfer(address to, uint256 amount) external returns (bool);\n    function balanceOf(address account) external view returns (uint256);\n    function approve(address spender, uint256 amount) external returns (bool);\n}\n```\n\n**Actions:**\n1. List all external protocols you'll integrate (e.g., Aave, Connext, Uniswap)\n2. Create interface files for each protocol's required functions\n3. Create interfaces for your own contracts' public APIs\n4. Validate interface completeness before proceeding\n\n## Phase 3: Core Contract Implementation\n\nImplement contracts in dependency order, starting with libraries, then core logic.\n\n**Order of implementation:**\n1. **Libraries** - Utility functions with no state dependencies\n2. **Base contracts** - Abstract contracts with shared logic\n3. **Core contracts** - Main business logic implementing interfaces\n4. **Integration contracts** - Contracts that bridge multiple protocols\n\n**Example:**\n```solidity\n\u002F\u002F contracts\u002Fcore\u002FPrivatePool.sol\n\u002F\u002F SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\nimport \"..\u002Finterfaces\u002FIToken.sol\";\nimport \"..\u002Flibraries\u002FSafeMath.sol\";\n\ncontract PrivatePool {\n    using SafeMath for uint256;\n    \n    IToken public token;\n    mapping(address => uint256) private balances;\n    \n    constructor(address _token) {\n        token = IToken(_token);\n    }\n    \n    function deposit(uint256 amount) external {\n        token.transferFrom(msg.sender, address(this), amount);\n        balances[msg.sender] = balances[msg.sender].add(amount);\n    }\n}\n```\n\n**Actions:**\n1. Implement one contract at a time\n2. Compile and test each contract before moving to the next\n3. Keep contracts focused on single responsibilities\n4. Document all state variables and functions\n\n## Phase 4: Frontend Configuration\n\nSet up frontend infrastructure before building components.\n\n**Create these config files first:**\n\n1. **Network configuration** (`frontend\u002Fsrc\u002Fconfig\u002Fnetworks.js`):\n```javascript\nexport const networks = {\n  mainnet: {\n    chainId: 1,\n    rpcUrl: process.env.REACT_APP_MAINNET_RPC,\n    explorer: 'https:\u002F\u002Fetherscan.io'\n  },\n  testnet: {\n    chainId: 5,\n    rpcUrl: process.env.REACT_APP_TESTNET_RPC,\n    explorer: 'https:\u002F\u002Fgoerli.etherscan.io'\n  }\n};\n```\n\n2. **Contract addresses** (`frontend\u002Fsrc\u002Fconfig\u002Fcontracts.js`):\n```javascript\nexport const contractAddresses = {\n  PrivatePool: process.env.REACT_APP_PRIVATE_POOL_ADDRESS,\n  Token: process.env.REACT_APP_TOKEN_ADDRESS\n};\n```\n\n3. **ABI imports** (`frontend\u002Fsrc\u002Fconfig\u002Fabis\u002F`):\n```javascript\n\u002F\u002F Import compiled contract ABIs here\nimport PrivatePoolABI from '.\u002FPrivatePool.json';\nexport { PrivatePoolABI };\n```\n\n**Actions:**\n1. Create environment variable templates (`.env.example`)\n2. Set up Web3 provider configuration (ethers.js, web3.js, or wagmi)\n3. Configure wallet connection logic\n4. Create utility functions for common operations\n\n## Phase 5: Component Development\n\nBuild frontend components in this order:\n\n1. **Utility components** - Buttons, inputs, modals (no Web3 logic)\n2. **Web3 wrapper components** - Wallet connection, network switcher\n3. **Contract interaction components** - Forms that call contract functions\n4. **Data display components** - Components showing on-chain data\n5. **Page components** - Assembling everything into pages\n\n**Example component:**\n```jsx\n\u002F\u002F frontend\u002Fsrc\u002Fcomponents\u002FDepositForm.jsx\nimport { useState } from 'react';\nimport { useContractWrite } from 'wagmi';\nimport { PrivatePoolABI } from '..\u002Fconfig\u002Fabis';\n\nexport function DepositForm({ contractAddress, tokenAddress }) {\n  const [amount, setAmount] = useState('');\n  \n  const { write: deposit } = useContractWrite({\n    address: contractAddress,\n    abi: PrivatePoolABI,\n    functionName: 'deposit',\n    args: [BigInt(amount)]\n  });\n\n  return (\n    \u003Cform onSubmit={(e) => { e.preventDefault(); deposit(); }}>\n      \u003Cinput \n        value={amount} \n        onChange={(e) => setAmount(e.target.value)}\n        placeholder=\"Amount\"\n      \u002F>\n      \u003Cbutton type=\"submit\">Deposit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n**Actions:**\n1. Create components with clear prop interfaces\n2. Implement error handling for all Web3 interactions\n3. Add loading states for pending transactions\n4. Test each component in isolation\n\n## Phase 6: Deployment Scripts\n\nCreate deployment scripts last, after all contracts are complete and tested.\n\n**Structure:**\n```javascript\n\u002F\u002F scripts\u002Fdeploy\u002F01_deploy_token.js\nasync function main() {\n  const Token = await ethers.getContractFactory(\"Token\");\n  const token = await Token.deploy();\n  await token.deployed();\n  console.log(\"Token deployed to:\", token.address);\n  \n  \u002F\u002F Save address for frontend config\n  fs.writeFileSync(\n    'frontend\u002F.env',\n    `REACT_APP_TOKEN_ADDRESS=${token.address}\\n`,\n    { flag: 'a' }\n  );\n}\n```\n\n**Actions:**\n1. Create deployment scripts for each contract in dependency order\n2. Include address saving mechanism for frontend integration\n3. Create verification scripts for block explorers\n4. Document deployment parameters and expected outputs\n\n## Key Principles\n\n1. **Interface-first design** - Define contracts before implementing\n2. **Layer-by-layer progression** - Complete each phase before next\n3. **Incremental testing** - Test at each layer, not just at the end\n4. **Configuration before components** - Set up infrastructure first\n5. **Documentation at each step** - Update docs as you progress\n\n## Recovery from Failures\n\nIf a tool failure occurs:\n1. Note which phase completed successfully\n2. Resume from the last completed phase\n3. Re-validate interfaces and contracts before continuing\n4. Use the directory structure as a progress checklist\n\nThis systematic approach ensures partial progress is preserved and the overall architecture remains coherent even when interruptions occur.",{"name":5,"description":7},"main","ff671ef61ed6587c49bd54c81cdc751c0b99e363","gdpval_bench\u002Fskills\u002Fweb3-fullstack-systematic-build","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace","https:\u002F\u002Fgithub.com\u002FAG064","AG064, E.Mi.\r\n\r\nA person who thinks all the time, yet all they have to think is nothing. I want to improve the world and work on open source projects","2026-10-08 06:53:48",{"source":8,"skillName":5,"commands":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add AG064\u002FOpenSpace --skill web3-fullstack-systematic-build",{"tool":45,"command":46},"bunx","bunx skills add AG064\u002FOpenSpace --skill web3-fullstack-systematic-build",{"tool":48,"command":49},"pnpm","pnpm dlx skills add AG064\u002FOpenSpace --skill web3-fullstack-systematic-build","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fgdpval_bench\u002Fskills\u002Fweb3-fullstack-systematic-build\u002FSKILL.md",true,[53],{"path":54,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":57,"sourceHtmlUrl":58},".skill_id","OTHER","其他",45,"https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fgdpval_bench\u002Fskills\u002Fweb3-fullstack-systematic-build\u002F.skill_id",[60,84,101,110,139,155],{"skillNo":61,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":64,"categories":65,"keywords":66,"publishedAt":27},"01M6KKMPWA0B5SCCH766F8M5EA","write-special-chars-ts-check","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) using a Python heredoc script, plus a reliable TypeScript type-checking step that filters output to only the newly-written files to avoid being misled by pre-existing errors.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-ts-check\u002FSKILL.md",[],[67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83],"write special chars ts check","check","write","filters","Existing","type-checking","for","errors","script","output","type","files","only","template","file","python","typescript",{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":27},"01M6KKMJXVBNVEY3TRK055F4A7","write-special-chars-readback","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) using a Python heredoc script, with mandatory post-write verification via read_file and cleanup of \u002Ftmp helper scripts.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-readback\u002FSKILL.md",[],[91,92,69,80,93,94,81,82,95,96,97,98,99,73,75,100],"readback","write special chars readback","cleanup","read","scripts","verification","via","post","helper","with",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":27},"01M6KKMEGX9M9NC105J0W3Q5B9","write-special-chars-heredoc","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) by using a Python heredoc script executed via shell.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-heredoc\u002FSKILL.md",[],[69,108,82,73,97,80,109,81,75],"write special chars heredoc","shell",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":121,"publishedAt":27},"01M6KKM8EJ2AATVHZBNB916WT0","worldmonitor-reference","Curated architecture index of the WorldMonitor open-source dashboard. Reference for extracting patterns — vanilla TypeScript, Panel class hierarchy, service layer, CSS grid, API edge functions, refresh scheduler, and 60+ data source integrations.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fworldmonitor-reference\u002FSKILL.md",[116],{"categoryNo":117,"categoryName":118,"taxonomyType":119,"taxonomyTypeDesc":120},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[122,123,124,125,83,126,127,128,129,130,73,26,131,132,133,134,135,136,137,138],"reference","worldmonitor","worldmonitor reference","dashboard","css","architecture","extracting","hierarchy","source","panel","patterns","edge functions","integrations","open","api","data","scheduler",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":145,"publishedAt":27},"01M6KKM39PHYK627F19GE2B9XN","virtual-list","Implement efficient virtual scrolling for rendering large lists with DOM recycling, chunk-based rendering, and performance optimizations","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fvirtual-list\u002FSKILL.md",[],[146,147,148,149,73,150,100,151,152,153,154],"virtual list","list","virtual","chunk","dom","rendering","recycling","implement","performance",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":161,"publishedAt":27},"01M6KKKY7T2P61Y0JH54CDEJKQ","verify-directory-structure","Diagnose and resolve file access issues by first verifying the directory structure.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fverify-directory-structure\u002FSKILL.md",[],[162,163,164,165,166,167,81,168,169,170],"directory","verify","structure","verify directory structure","access","first","issues","diagnose","file access"]