[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6HSBGGMFE63VP783VKAHR73":3,"skill-same:01M6HSBGGMFE63VP783VKAHR73":62},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":41,"commitSha":42,"skillDirectory":43,"forksCount":44,"repositoryHtmlUrl":45,"repositoryHomepageUrl":6,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":47,"install":48,"resources":61},"01M6HSBGGMFE63VP783VKAHR73","cloud-storage-web",null,"Complete guide for CloudBase cloud storage using Web SDK (@cloudbase\u002Fjs-sdk) - upload, download, temporary URLs, file management, and best practices.","welflau\u002Fai-dev-system","welflau","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7010385?v=4","01M6HPTDGF18RFY07M229P8CTM","01M6HPTDMRMZCJPYBFEA9XVVYT",3,"MIT","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fcloudbase\u002Fskills\u002Fcloudbase\u002Freferences\u002Fcloud-storage-web\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],"storage","cloud storage web","Cloud Storage","cloud","web","file","best practices","js","download","management","guide","upload","false","complete","file management","for","cloudbase","sdk","2026-11-10 10:12:30",false,"---\nname: cloud-storage-web\ndescription: Complete guide for CloudBase cloud storage using Web SDK (@cloudbase\u002Fjs-sdk) - upload, download, temporary URLs, file management, and best practices.\nalwaysApply: false\n---\n\n# Cloud Storage Web SDK\n\nUse this skill when building web applications that need to upload, download, or manage files using CloudBase cloud storage via the `@cloudbase\u002Fjs-sdk` (Web SDK).\n\n## When to use this skill\n\nUse this skill for **file storage operations** in web applications when you need to:\n\n- Upload files from web browsers to CloudBase cloud storage\n- Generate temporary download URLs for stored files\n- Delete files from cloud storage\n- Download files from cloud storage to local browser\n\n**Do NOT use for:**\n- Mini-program file operations (use mini-program specific skills)\n- Backend file operations (use Node SDK skills)\n- Database operations (use database skills)\n\n## How to use this skill (for a coding agent)\n\n1. **Initialize CloudBase SDK**\n   - Ask the user for their CloudBase environment ID\n   - Always use the standard initialization pattern shown below\n\n2. **Choose the right storage method**\n   - `uploadFile` - For uploading files from browser to cloud storage\n   - `getTempFileURL` - For generating temporary download links\n   - `deleteFile` - For deleting files from storage\n   - `downloadFile` - For downloading files to browser\n\n3. **Handle CORS requirements**\n   - Remind users to add their domain to CloudBase console security domains\n   - This prevents CORS errors during file operations\n\n4. **Follow file path rules**\n   - Use valid characters: `[0-9a-zA-Z]`, `\u002F`, `!`, `-`, `_`, `.`, ` `, `*`, Chinese characters\n   - Use `\u002F` for folder structure (e.g., `folder\u002Ffile.jpg`)\n\n---\n\n## SDK Initialization\n\n```javascript\nimport cloudbase from \"@cloudbase\u002Fjs-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-env-id\", \u002F\u002F Replace with your CloudBase environment ID\n});\n```\n\n**Initialization rules:**\n- Always use synchronous initialization with the pattern above\n- Do not lazy-load the SDK with dynamic imports\n- Keep a single shared `app` instance across your application\n\n## File Upload (uploadFile)\n\n### Basic Usage\n\n```javascript\nconst result = await app.uploadFile({\n  cloudPath: \"folder\u002Ffilename.jpg\", \u002F\u002F File path in cloud storage\n  filePath: fileInput.files[0],     \u002F\u002F HTML file input element\n});\n\n\u002F\u002F Result contains:\n{\n  fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\", \u002F\u002F Unique file identifier\n  \u002F\u002F ... other metadata\n}\n```\n\n### Advanced Upload with Progress\n\n```javascript\nconst result = await app.uploadFile({\n  cloudPath: \"uploads\u002Favatar.jpg\",\n  filePath: selectedFile,\n  method: \"put\", \u002F\u002F \"post\" or \"put\" (default: \"put\")\n  onUploadProgress: (progressEvent) => {\n    const percent = Math.round(\n      (progressEvent.loaded * 100) \u002F progressEvent.total\n    );\n    console.log(`Upload progress: ${percent}%`);\n    \u002F\u002F Update UI progress bar here\n  }\n});\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `cloudPath` | string | Yes | Absolute path with filename (e.g., \"folder\u002Ffile.jpg\") |\n| `filePath` | File | Yes | HTML file input object |\n| `method` | \"post\" \\| \"put\" | No | Upload method (default: \"put\") |\n| `onUploadProgress` | function | No | Progress callback function |\n\n### Cloud Path Rules\n\n- **Valid characters**: `[0-9a-zA-Z]`, `\u002F`, `!`, `-`, `_`, `.`, ` `, `*`, Chinese characters\n- **Invalid characters**: Other special characters\n- **Structure**: Use `\u002F` to create folder hierarchy\n- **Examples**:\n  - `\"avatar.jpg\"`\n  - `\"uploads\u002Favatar.jpg\"`\n  - `\"user\u002F123\u002Favatar.jpg\"`\n\n### CORS Configuration\n\n**⚠️ IMPORTANT:** To prevent CORS errors, add your domain to CloudBase console:\n\n1. Go to CloudBase Console → Environment → Security Sources → Security Domains\n2. Add your frontend domain (e.g., `https:\u002F\u002Fyour-app.com`, `http:\u002F\u002Flocalhost:3000`)\n3. If CORS errors occur, remove and re-add the domain\n\n## Temporary Download URLs (getTempFileURL)\n\n### Basic Usage\n\n```javascript\nconst result = await app.getTempFileURL({\n  fileList: [\n    {\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\",\n      maxAge: 3600 \u002F\u002F URL valid for 1 hour (seconds)\n    }\n  ]\n});\n\n\u002F\u002F Access the download URL\nresult.fileList.forEach(file => {\n  if (file.code === \"SUCCESS\") {\n    console.log(\"Download URL:\", file.tempFileURL);\n    \u002F\u002F Use this URL to download or display the file\n  }\n});\n```\n\n### Multiple Files\n\n```javascript\nconst result = await app.getTempFileURL({\n  fileList: [\n    {\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Fimage1.jpg\",\n      maxAge: 7200 \u002F\u002F 2 hours\n    },\n    {\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Fdocument.pdf\",\n      maxAge: 86400 \u002F\u002F 24 hours\n    }\n  ]\n});\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileList` | Array | Yes | Array of file objects |\n\n#### fileList Item Structure\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileID` | string | Yes | Cloud storage file ID |\n| `maxAge` | number | Yes | URL validity period in seconds |\n\n### Response Structure\n\n```javascript\n{\n  code: \"SUCCESS\",\n  fileList: [\n    {\n      code: \"SUCCESS\",\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\",\n      tempFileURL: \"https:\u002F\u002Ftemporary-download-url\"\n    }\n  ]\n}\n```\n\n### Best Practices\n\n- Set appropriate `maxAge` based on use case (1 hour to 24 hours)\n- Handle `SUCCESS`\u002F`ERROR` codes in response\n- Use temporary URLs for private file access\n- Cache URLs if needed, but respect expiration time\n\n## File Deletion (deleteFile)\n\n### Basic Usage\n\n```javascript\nconst result = await app.deleteFile({\n  fileList: [\n    \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\"\n  ]\n});\n\n\u002F\u002F Check deletion results\nresult.fileList.forEach(file => {\n  if (file.code === \"SUCCESS\") {\n    console.log(\"File deleted:\", file.fileID);\n  } else {\n    console.error(\"Failed to delete:\", file.fileID);\n  }\n});\n```\n\n### Multiple Files\n\n```javascript\nconst result = await app.deleteFile({\n  fileList: [\n    \"cloud:\u002F\u002Fenv-id\u002Fold-avatar.jpg\",\n    \"cloud:\u002F\u002Fenv-id\u002Ftemp-upload.jpg\",\n    \"cloud:\u002F\u002Fenv-id\u002Fcache-file.dat\"\n  ]\n});\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileList` | Array\u003Cstring> | Yes | Array of file IDs to delete |\n\n### Response Structure\n\n```javascript\n{\n  fileList: [\n    {\n      code: \"SUCCESS\",\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\"\n    }\n  ]\n}\n```\n\n### Best Practices\n\n- Always check response codes before assuming deletion success\n- Use this for cleanup operations (old avatars, temp files, etc.)\n- Consider batching multiple deletions for efficiency\n\n## File Download (downloadFile)\n\n### Basic Usage\n\n```javascript\nconst result = await app.downloadFile({\n  fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\"\n});\n\n\u002F\u002F File is downloaded to browser default download location\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileID` | string | Yes | Cloud storage file ID |\n\n### Response Structure\n\n```javascript\n{\n  \u002F\u002F Success response (no specific data returned)\n  \u002F\u002F File is downloaded to browser\n}\n```\n\n### Best Practices\n\n- Use for user-initiated downloads (save file dialogs)\n- For programmatic file access, use `getTempFileURL` instead\n- Handle download errors appropriately\n\n## Error Handling\n\nAll storage operations should include proper error handling:\n\n```javascript\ntry {\n  const result = await app.uploadFile({\n    cloudPath: \"uploads\u002Ffile.jpg\",\n    filePath: selectedFile\n  });\n\n  if (result.code) {\n    \u002F\u002F Handle error\n    console.error(\"Upload failed:\", result.message);\n  } else {\n    \u002F\u002F Success\n    console.log(\"File uploaded:\", result.fileID);\n  }\n} catch (error) {\n  console.error(\"Storage operation failed:\", error);\n}\n```\n\n### Common Error Codes\n\n- `INVALID_PARAM` - Invalid parameters\n- `PERMISSION_DENIED` - Insufficient permissions\n- `RESOURCE_NOT_FOUND` - File not found\n- `SYS_ERR` - System error\n\n\n## Best Practices\n\n1. **File Organization**: Use consistent folder structures (`uploads\u002F`, `avatars\u002F`, `documents\u002F`)\n2. **Naming Conventions**: Use descriptive filenames with timestamps if needed\n3. **Progress Feedback**: Show upload progress for better UX\n4. **Cleanup**: Delete temporary\u002Funused files to save storage costs\n5. **Security**: Validate file types and sizes before upload\n6. **Caching**: Cache download URLs appropriately but respect expiration\n7. **Batch Operations**: Use arrays for multiple file operations when possible\n\n## Performance Considerations\n\n1. **File Size Limits**: Be aware of CloudBase file size limits\n2. **Concurrent Uploads**: Limit concurrent uploads to prevent browser overload\n3. **Progress Monitoring**: Use progress callbacks for large file uploads\n4. **Temporary URLs**: Generate URLs only when needed, with appropriate expiration\n\n## Security Considerations\n\n1. **Domain Whitelisting**: Always configure security domains to prevent CORS issues\n2. **Access Control**: Use appropriate file permissions (public vs private)\n3. **URL Expiration**: Set reasonable expiration times for temporary URLs\n4. **User Permissions**: Ensure users can only access their own files when appropriate\n\n","# Cloud Storage Web SDK\n\nUse this skill when building web applications that need to upload, download, or manage files using CloudBase cloud storage via the `@cloudbase\u002Fjs-sdk` (Web SDK).\n\n## When to use this skill\n\nUse this skill for **file storage operations** in web applications when you need to:\n\n- Upload files from web browsers to CloudBase cloud storage\n- Generate temporary download URLs for stored files\n- Delete files from cloud storage\n- Download files from cloud storage to local browser\n\n**Do NOT use for:**\n- Mini-program file operations (use mini-program specific skills)\n- Backend file operations (use Node SDK skills)\n- Database operations (use database skills)\n\n## How to use this skill (for a coding agent)\n\n1. **Initialize CloudBase SDK**\n   - Ask the user for their CloudBase environment ID\n   - Always use the standard initialization pattern shown below\n\n2. **Choose the right storage method**\n   - `uploadFile` - For uploading files from browser to cloud storage\n   - `getTempFileURL` - For generating temporary download links\n   - `deleteFile` - For deleting files from storage\n   - `downloadFile` - For downloading files to browser\n\n3. **Handle CORS requirements**\n   - Remind users to add their domain to CloudBase console security domains\n   - This prevents CORS errors during file operations\n\n4. **Follow file path rules**\n   - Use valid characters: `[0-9a-zA-Z]`, `\u002F`, `!`, `-`, `_`, `.`, ` `, `*`, Chinese characters\n   - Use `\u002F` for folder structure (e.g., `folder\u002Ffile.jpg`)\n\n---\n\n## SDK Initialization\n\n```javascript\nimport cloudbase from \"@cloudbase\u002Fjs-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-env-id\", \u002F\u002F Replace with your CloudBase environment ID\n});\n```\n\n**Initialization rules:**\n- Always use synchronous initialization with the pattern above\n- Do not lazy-load the SDK with dynamic imports\n- Keep a single shared `app` instance across your application\n\n## File Upload (uploadFile)\n\n### Basic Usage\n\n```javascript\nconst result = await app.uploadFile({\n  cloudPath: \"folder\u002Ffilename.jpg\", \u002F\u002F File path in cloud storage\n  filePath: fileInput.files[0],     \u002F\u002F HTML file input element\n});\n\n\u002F\u002F Result contains:\n{\n  fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\", \u002F\u002F Unique file identifier\n  \u002F\u002F ... other metadata\n}\n```\n\n### Advanced Upload with Progress\n\n```javascript\nconst result = await app.uploadFile({\n  cloudPath: \"uploads\u002Favatar.jpg\",\n  filePath: selectedFile,\n  method: \"put\", \u002F\u002F \"post\" or \"put\" (default: \"put\")\n  onUploadProgress: (progressEvent) => {\n    const percent = Math.round(\n      (progressEvent.loaded * 100) \u002F progressEvent.total\n    );\n    console.log(`Upload progress: ${percent}%`);\n    \u002F\u002F Update UI progress bar here\n  }\n});\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `cloudPath` | string | Yes | Absolute path with filename (e.g., \"folder\u002Ffile.jpg\") |\n| `filePath` | File | Yes | HTML file input object |\n| `method` | \"post\" \\| \"put\" | No | Upload method (default: \"put\") |\n| `onUploadProgress` | function | No | Progress callback function |\n\n### Cloud Path Rules\n\n- **Valid characters**: `[0-9a-zA-Z]`, `\u002F`, `!`, `-`, `_`, `.`, ` `, `*`, Chinese characters\n- **Invalid characters**: Other special characters\n- **Structure**: Use `\u002F` to create folder hierarchy\n- **Examples**:\n  - `\"avatar.jpg\"`\n  - `\"uploads\u002Favatar.jpg\"`\n  - `\"user\u002F123\u002Favatar.jpg\"`\n\n### CORS Configuration\n\n**⚠️ IMPORTANT:** To prevent CORS errors, add your domain to CloudBase console:\n\n1. Go to CloudBase Console → Environment → Security Sources → Security Domains\n2. Add your frontend domain (e.g., `https:\u002F\u002Fyour-app.com`, `http:\u002F\u002Flocalhost:3000`)\n3. If CORS errors occur, remove and re-add the domain\n\n## Temporary Download URLs (getTempFileURL)\n\n### Basic Usage\n\n```javascript\nconst result = await app.getTempFileURL({\n  fileList: [\n    {\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\",\n      maxAge: 3600 \u002F\u002F URL valid for 1 hour (seconds)\n    }\n  ]\n});\n\n\u002F\u002F Access the download URL\nresult.fileList.forEach(file => {\n  if (file.code === \"SUCCESS\") {\n    console.log(\"Download URL:\", file.tempFileURL);\n    \u002F\u002F Use this URL to download or display the file\n  }\n});\n```\n\n### Multiple Files\n\n```javascript\nconst result = await app.getTempFileURL({\n  fileList: [\n    {\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Fimage1.jpg\",\n      maxAge: 7200 \u002F\u002F 2 hours\n    },\n    {\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Fdocument.pdf\",\n      maxAge: 86400 \u002F\u002F 24 hours\n    }\n  ]\n});\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileList` | Array | Yes | Array of file objects |\n\n#### fileList Item Structure\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileID` | string | Yes | Cloud storage file ID |\n| `maxAge` | number | Yes | URL validity period in seconds |\n\n### Response Structure\n\n```javascript\n{\n  code: \"SUCCESS\",\n  fileList: [\n    {\n      code: \"SUCCESS\",\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\",\n      tempFileURL: \"https:\u002F\u002Ftemporary-download-url\"\n    }\n  ]\n}\n```\n\n### Best Practices\n\n- Set appropriate `maxAge` based on use case (1 hour to 24 hours)\n- Handle `SUCCESS`\u002F`ERROR` codes in response\n- Use temporary URLs for private file access\n- Cache URLs if needed, but respect expiration time\n\n## File Deletion (deleteFile)\n\n### Basic Usage\n\n```javascript\nconst result = await app.deleteFile({\n  fileList: [\n    \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\"\n  ]\n});\n\n\u002F\u002F Check deletion results\nresult.fileList.forEach(file => {\n  if (file.code === \"SUCCESS\") {\n    console.log(\"File deleted:\", file.fileID);\n  } else {\n    console.error(\"Failed to delete:\", file.fileID);\n  }\n});\n```\n\n### Multiple Files\n\n```javascript\nconst result = await app.deleteFile({\n  fileList: [\n    \"cloud:\u002F\u002Fenv-id\u002Fold-avatar.jpg\",\n    \"cloud:\u002F\u002Fenv-id\u002Ftemp-upload.jpg\",\n    \"cloud:\u002F\u002Fenv-id\u002Fcache-file.dat\"\n  ]\n});\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileList` | Array\u003Cstring> | Yes | Array of file IDs to delete |\n\n### Response Structure\n\n```javascript\n{\n  fileList: [\n    {\n      code: \"SUCCESS\",\n      fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\"\n    }\n  ]\n}\n```\n\n### Best Practices\n\n- Always check response codes before assuming deletion success\n- Use this for cleanup operations (old avatars, temp files, etc.)\n- Consider batching multiple deletions for efficiency\n\n## File Download (downloadFile)\n\n### Basic Usage\n\n```javascript\nconst result = await app.downloadFile({\n  fileID: \"cloud:\u002F\u002Fenv-id\u002Ffolder\u002Ffilename.jpg\"\n});\n\n\u002F\u002F File is downloaded to browser default download location\n```\n\n### Parameters\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `fileID` | string | Yes | Cloud storage file ID |\n\n### Response Structure\n\n```javascript\n{\n  \u002F\u002F Success response (no specific data returned)\n  \u002F\u002F File is downloaded to browser\n}\n```\n\n### Best Practices\n\n- Use for user-initiated downloads (save file dialogs)\n- For programmatic file access, use `getTempFileURL` instead\n- Handle download errors appropriately\n\n## Error Handling\n\nAll storage operations should include proper error handling:\n\n```javascript\ntry {\n  const result = await app.uploadFile({\n    cloudPath: \"uploads\u002Ffile.jpg\",\n    filePath: selectedFile\n  });\n\n  if (result.code) {\n    \u002F\u002F Handle error\n    console.error(\"Upload failed:\", result.message);\n  } else {\n    \u002F\u002F Success\n    console.log(\"File uploaded:\", result.fileID);\n  }\n} catch (error) {\n  console.error(\"Storage operation failed:\", error);\n}\n```\n\n### Common Error Codes\n\n- `INVALID_PARAM` - Invalid parameters\n- `PERMISSION_DENIED` - Insufficient permissions\n- `RESOURCE_NOT_FOUND` - File not found\n- `SYS_ERR` - System error\n\n\n## Best Practices\n\n1. **File Organization**: Use consistent folder structures (`uploads\u002F`, `avatars\u002F`, `documents\u002F`)\n2. **Naming Conventions**: Use descriptive filenames with timestamps if needed\n3. **Progress Feedback**: Show upload progress for better UX\n4. **Cleanup**: Delete temporary\u002Funused files to save storage costs\n5. **Security**: Validate file types and sizes before upload\n6. **Caching**: Cache download URLs appropriately but respect expiration\n7. **Batch Operations**: Use arrays for multiple file operations when possible\n\n## Performance Considerations\n\n1. **File Size Limits**: Be aware of CloudBase file size limits\n2. **Concurrent Uploads**: Limit concurrent uploads to prevent browser overload\n3. **Progress Monitoring**: Use progress callbacks for large file uploads\n4. **Temporary URLs**: Generate URLs only when needed, with appropriate expiration\n\n## Security Considerations\n\n1. **Domain Whitelisting**: Always configure security domains to prevent CORS issues\n2. **Access Control**: Use appropriate file permissions (public vs private)\n3. **URL Expiration**: Set reasonable expiration times for temporary URLs\n4. **User Permissions**: Ensure users can only access their own files when appropriate\n\n",{"name":5,"alwaysApply":37,"description":7},"main","18d0e63d1313ca87098f614aa7c1e2dcf6de79c7","backend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fcloudbase\u002Fskills\u002Fcloudbase\u002Freferences\u002Fcloud-storage-web",1,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system","https:\u002F\u002Fgithub.com\u002Fwelflau","2026-11-10 11:14:25",{"source":8,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add welflau\u002Fai-dev-system --skill cloud-storage-web",{"tool":54,"command":55},"bunx","bunx skills add welflau\u002Fai-dev-system --skill cloud-storage-web",{"tool":57,"command":58},"pnpm","pnpm dlx skills add welflau\u002Fai-dev-system --skill cloud-storage-web","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fcloudbase\u002Fskills\u002Fcloudbase\u002Freferences\u002Fcloud-storage-web\u002FSKILL.md",true,[],[63,95,127,151,177,201],{"skillNo":64,"name":65,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":67,"licenseFileUrl":68,"sourceHtmlUrl":69,"categories":70,"keywords":76,"publishedAt":36},"01M6HSTDP4M3JFXEBK91VFB4PA","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FSKILL.md",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[77,22,78,79,80,81,82,83,84,85,86,87,23,88,89,90,91,92,93,33,94],"web artifacts builder","artifacts","artifacts builder","builder","frontend","css","components","react","routing","state management","state","Tailwind","use","single-file","simple","ui components","multi","single",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":67,"licenseFileUrl":99,"sourceHtmlUrl":100,"categories":101,"keywords":111,"publishedAt":36},"01M6HSDXH0JSP8R3QTNY9XZ8HN","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FSKILL.md",[102,103,106],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},{"categoryNo":104,"categoryName":105,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":107,"categoryName":108,"taxonomyType":109,"taxonomyTypeDesc":110},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[81,112,113,82,22,83,84,114,115,116,78,117,118,119,89,120,121,122,123,124,125,126],"design","frontend design","react components","create","code","examples","applications","landing","ui design","pages","aesthetics","web ui","with","generic","when",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":67,"licenseFileUrl":131,"sourceHtmlUrl":132,"categories":133,"keywords":135,"publishedAt":36},"01M6HSA77QYVP7A72HREGTDN2C","algorithmic-art","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FSKILL.md",[134],{"categoryNo":104,"categoryName":105,"taxonomyType":74,"taxonomyTypeDesc":75},[136,137,138,115,116,139,25,140,141,89,142,143,144,145,124,146,147,148,149,150,126],"algorithmic art","Art","algorithmic","flow","work","interactive","generative art","exploration","systems","users","Existing","request","generative","copyright","fields",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":67,"licenseFileUrl":155,"sourceHtmlUrl":156,"categories":157,"keywords":159,"publishedAt":36},"01M6HS9HE0X390Y6RQKTY1YNGJ","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FSKILL.md",[158],{"categoryNo":104,"categoryName":105,"taxonomyType":74,"taxonomyTypeDesc":75},[160,161,162,163,164,165,78,166,167,168,119,169,170,121,171,124,172,173,174,33,175,176],"theme factory","factory","theme","docs","toolkit","generate","SET","fly","slides","styling","artifact","themes","you","fonts","can","apply","new",{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":186,"publishedAt":36},"01M6HS74GASM6FJ77F83EY679E","browsing","Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FSKILL.md",[183],{"categoryNo":184,"categoryName":185,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000023","Skill与智能体开发",[179,187,188,189,190,191,192,193,194,195,196,89,197,198,199,200,93,172,33,146],"MCP","automation","chrome","sessions","protocol","browser","devtools","chrome devtools","tool","direct","browser control","control","via","form",{"skillNo":202,"name":203,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":67,"licenseFileUrl":205,"sourceHtmlUrl":206,"categories":207,"keywords":214,"publishedAt":36},"01M6HS6BZT2CKDNQ6YF20DXN4T","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FSKILL.md",[208,211],{"categoryNo":209,"categoryName":210,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":212,"categoryName":213,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000016","图像与多媒体",[215,216,217,218,219,220,221,222,223,89,224,145,225,226,227,33,147,126],"slack gif creator","slack","gif","creator","validation","Tools","constraints","Animation","knowledge","me","make","Utilities","concepts"]