[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77JGCQC2S5GD9MP650NWT7F":3,"skill-same:01M77JGCQC2S5GD9MP650NWT7F":47},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":28,"repositoryHtmlUrl":29,"repositoryHomepageUrl":30,"ownerHtmlUrl":31,"ownerBlogUrl":6,"ownerDescription":32,"updatedAt":33,"install":34,"resources":46},"01M77JGCQC2S5GD9MP650NWT7F","imagecraft-editor",null,"Build AI-powered image editing web applications with StepFun's step-image-edit-2 API. This skill should be used when the user wants to create an image editing website, photo editor, or AI image processing tool with features like old photo restoration, portrait retouching, landscape color grading, and artistic style transfer. Also use for any project involving StepFun image editing API integration with Flask backend and React frontend.","Lord1Egypt\u002Fawesome-skill-forge","Lord1Egypt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F99746359?v=4","01M7592YDNT0XK9WJ0T2MQVPDN","Mohamed Mounir Ali AL Keshita","01M75GRFNHC8VZNWEB8DKDE433",3,"MIT","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fclawhub\u002Fi\u002Fimagecraft-editor\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: imagecraft-editor\ndescription: Build AI-powered image editing web applications with StepFun's step-image-edit-2 API. This skill should be used when the user wants to create an image editing website, photo editor, or AI image processing tool with features like old photo restoration, portrait retouching, landscape color grading, and artistic style transfer. Also use for any project involving StepFun image editing API integration with Flask backend and React frontend.\nagent_created: true\n---\n\n# ImageCraft Editor Skill\n\nBuild a complete AI-powered image editing web application using StepFun's `step-image-edit-2` API with a Flask backend and React (Vite) frontend.\n\n## When to Use\n\n- User asks to build an image editor, photo editor, or image processing web app\n- User wants AI-powered photo editing features (restoration, retouching, color grading, style transfer)\n- User mentions StepFun image API integration\n- User asks for a \"图片编辑网站\" or similar\n\n## Architecture\n\n```\nFlask backend (port 5050)  →  Vite + React frontend (port 5174)\n         ↓\nStepFun step-image-edit-2 API\n```\n\nThe backend proxies image uploads, applies feature-specific prompts, calls StepFun API, and returns results. The frontend provides the UI with feature selection, drag-and-drop upload, before\u002Fafter comparison slider, and download.\n\n## How to Build\n\n### 1. Create the Project\n\nCopy the template files from the `assets\u002F` directory:\n\n```\nassets\u002Fbackend\u002F          →  \u003Cproject>\u002Fbackend\u002F\nassets\u002Ffrontend\u002F         →  \u003Cproject>\u002Ffrontend\u002F\n```\n\nCreate the upload\u002Fresults directories:\n\n```bash\nmkdir -p backend\u002Fuploads backend\u002Fresults\n```\n\n### 2. Configure API Key\n\nCopy `assets\u002Fbackend\u002F.env.example` to `backend\u002F.env` and set:\n\n```\nSTEPFUN_API_KEY=\u003Cuser's actual api key>\nSTEPFUN_BASE_URL=https:\u002F\u002Fapi.stepfun.com\u002Fv1\n```\n\nIf using Step Plan subscription, change base URL to `https:\u002F\u002Fapi.stepfun.com\u002Fstep_plan\u002Fv1` instead.\n\n### 3. Install Dependencies\n\n```bash\ncd backend && pip install -r requirements.txt\ncd frontend && npm install\n```\n\n### 4. Start the Application\n\n```bash\n# Terminal 1: Backend\ncd backend && python app.py\n\n# Terminal 2: Frontend\ncd frontend && npx vite --host 0.0.0.0\n```\n\nBackend runs on port 5050. Frontend runs on port 5174 (5173 is often occupied; if 5174 is also busy, Vite will auto-select the next available port).\n\n## Feature Modules\n\nThe app has 4 features, each with a carefully crafted English prompt for the StepFun API:\n\n### 老照片修复 (Old Photo Restoration)\n- **Trigger**: Removes scratches, tears, fading, noise, color degradation\n- **Prompt strategy**: Restoration + clarity enhancement + natural color recovery\n- **API param**: `feature=restore`\n\n### 人像精修 (Portrait Retouching)\n- **Trigger**: Natural skin smoothing, eye brightening, facial feature enhancement\n- **Prompt strategy**: Natural texture-preserving retouch + studio lighting\n- **API param**: `feature=portrait`\n\n### 风景调色 (Landscape Color Grading)\n- **Trigger**: Saturation boost, contrast enhancement, dynamic range expansion\n- **Prompt strategy**: Cinematic travel photography aesthetic\n- **API param**: `feature=landscape`\n\n### 风格调整 (Style Transfer)\n- **Trigger**: 8 artistic styles\n- **Styles**: oil painting, watercolor, sketch, anime, cyberpunk, vintage film, Chinese ink wash (水墨画), pop art\n- **API param**: `feature=style&style=\u003Cstyle_id>`\n\n## API Integration Details\n\n### Endpoint\n\n```\nPOST https:\u002F\u002Fapi.stepfun.com\u002Fv1\u002Fimages\u002Fedit\n```\n\n### Request Format\n\n```json\n{\n  \"model\": \"step-image-edit-2\",\n  \"image\": \"\u003Cbase64_encoded_image>\",\n  \"prompt\": \"\u003Cfeature-specific_english_prompt>\",\n  \"response_format\": \"b64_json\"\n}\n```\n\n### Image Preprocessing\n\n- Convert RGBA\u002FP-mode images to RGB\n- Resize to max 2048px on the longest side to reduce API payload\n- Encode to base64 before sending\n\n### Response Parsing\n\n```json\n{\n  \"data\": [{ \"b64_json\": \"\u003Cbase64_result>\" }]\n}\n```\n\n## Frontend UI Flow\n\nThree stages:\n\n1. **Feature Selection** — 4 cards in a 2×2 grid, each with icon, name, description\n2. **Upload** — Drag-and-drop zone + file input; style selector shown for \"风格调整\"\n3. **Result** — Side-by-side comparison with draggable slider; download button\n\n## Key Implementation Notes\n\n- The Vite dev server proxies `\u002Fapi`, `\u002Fuploads`, `\u002Fresults` to Flask backend at port 5050\n- If port 5173 is occupied, update `vite.config.js` to use 5174\n- Image comparison uses CSS `clipPath` with a range slider for smooth before\u002Fafter transition\n- The `.env` file in `assets\u002Fbackend\u002F` is renamed to `.env.example` to avoid leaking keys\n- All prompts must be in English for best API results, even though the UI is Chinese\n- Old photo restoration and portrait retouching prompts emphasize \"natural\" and \"preserving original\" to avoid over-processing\n","# ImageCraft Editor Skill\n\nBuild a complete AI-powered image editing web application using StepFun's `step-image-edit-2` API with a Flask backend and React (Vite) frontend.\n\n## When to Use\n\n- User asks to build an image editor, photo editor, or image processing web app\n- User wants AI-powered photo editing features (restoration, retouching, color grading, style transfer)\n- User mentions StepFun image API integration\n- User asks for a \"图片编辑网站\" or similar\n\n## Architecture\n\n```\nFlask backend (port 5050)  →  Vite + React frontend (port 5174)\n         ↓\nStepFun step-image-edit-2 API\n```\n\nThe backend proxies image uploads, applies feature-specific prompts, calls StepFun API, and returns results. The frontend provides the UI with feature selection, drag-and-drop upload, before\u002Fafter comparison slider, and download.\n\n## How to Build\n\n### 1. Create the Project\n\nCopy the template files from the `assets\u002F` directory:\n\n```\nassets\u002Fbackend\u002F          →  \u003Cproject>\u002Fbackend\u002F\nassets\u002Ffrontend\u002F         →  \u003Cproject>\u002Ffrontend\u002F\n```\n\nCreate the upload\u002Fresults directories:\n\n```bash\nmkdir -p backend\u002Fuploads backend\u002Fresults\n```\n\n### 2. Configure API Key\n\nCopy `assets\u002Fbackend\u002F.env.example` to `backend\u002F.env` and set:\n\n```\nSTEPFUN_API_KEY=\u003Cuser's actual api key>\nSTEPFUN_BASE_URL=https:\u002F\u002Fapi.stepfun.com\u002Fv1\n```\n\nIf using Step Plan subscription, change base URL to `https:\u002F\u002Fapi.stepfun.com\u002Fstep_plan\u002Fv1` instead.\n\n### 3. Install Dependencies\n\n```bash\ncd backend && pip install -r requirements.txt\ncd frontend && npm install\n```\n\n### 4. Start the Application\n\n```bash\n# Terminal 1: Backend\ncd backend && python app.py\n\n# Terminal 2: Frontend\ncd frontend && npx vite --host 0.0.0.0\n```\n\nBackend runs on port 5050. Frontend runs on port 5174 (5173 is often occupied; if 5174 is also busy, Vite will auto-select the next available port).\n\n## Feature Modules\n\nThe app has 4 features, each with a carefully crafted English prompt for the StepFun API:\n\n### 老照片修复 (Old Photo Restoration)\n- **Trigger**: Removes scratches, tears, fading, noise, color degradation\n- **Prompt strategy**: Restoration + clarity enhancement + natural color recovery\n- **API param**: `feature=restore`\n\n### 人像精修 (Portrait Retouching)\n- **Trigger**: Natural skin smoothing, eye brightening, facial feature enhancement\n- **Prompt strategy**: Natural texture-preserving retouch + studio lighting\n- **API param**: `feature=portrait`\n\n### 风景调色 (Landscape Color Grading)\n- **Trigger**: Saturation boost, contrast enhancement, dynamic range expansion\n- **Prompt strategy**: Cinematic travel photography aesthetic\n- **API param**: `feature=landscape`\n\n### 风格调整 (Style Transfer)\n- **Trigger**: 8 artistic styles\n- **Styles**: oil painting, watercolor, sketch, anime, cyberpunk, vintage film, Chinese ink wash (水墨画), pop art\n- **API param**: `feature=style&style=\u003Cstyle_id>`\n\n## API Integration Details\n\n### Endpoint\n\n```\nPOST https:\u002F\u002Fapi.stepfun.com\u002Fv1\u002Fimages\u002Fedit\n```\n\n### Request Format\n\n```json\n{\n  \"model\": \"step-image-edit-2\",\n  \"image\": \"\u003Cbase64_encoded_image>\",\n  \"prompt\": \"\u003Cfeature-specific_english_prompt>\",\n  \"response_format\": \"b64_json\"\n}\n```\n\n### Image Preprocessing\n\n- Convert RGBA\u002FP-mode images to RGB\n- Resize to max 2048px on the longest side to reduce API payload\n- Encode to base64 before sending\n\n### Response Parsing\n\n```json\n{\n  \"data\": [{ \"b64_json\": \"\u003Cbase64_result>\" }]\n}\n```\n\n## Frontend UI Flow\n\nThree stages:\n\n1. **Feature Selection** — 4 cards in a 2×2 grid, each with icon, name, description\n2. **Upload** — Drag-and-drop zone + file input; style selector shown for \"风格调整\"\n3. **Result** — Side-by-side comparison with draggable slider; download button\n\n## Key Implementation Notes\n\n- The Vite dev server proxies `\u002Fapi`, `\u002Fuploads`, `\u002Fresults` to Flask backend at port 5050\n- If port 5173 is occupied, update `vite.config.js` to use 5174\n- Image comparison uses CSS `clipPath` with a range slider for smooth before\u002Fafter transition\n- The `.env` file in `assets\u002Fbackend\u002F` is renamed to `.env.example` to avoid leaking keys\n- All prompts must be in English for best API results, even though the UI is Chinese\n- Old photo restoration and portrait retouching prompts emphasize \"natural\" and \"preserving original\" to avoid over-processing\n",{"name":5,"description":7,"agent_created":24},true,"master","4aa004da461d820f4ea5499e58eb8d196cf99016","community\u002Fclawhub\u002Fi\u002Fimagecraft-editor",0,"https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge","https:\u002F\u002Fskill-explorer-rho.vercel.app","https:\u002F\u002Fgithub.com\u002FLord1Egypt","Unbreakable. Unstoppable. Unmatched⚡.\r\n Speaker of machine tongues 🤖  | World-builder of decentralized dreams 🌐 | Defender of the digital realm🛡️.","2026-06-10 08:21:01",{"source":8,"skillName":5,"commands":35,"prompt":45,"zipAvailable":24},[36,39,42],{"tool":37,"command":38},"npx","npx skills add Lord1Egypt\u002Fawesome-skill-forge --skill imagecraft-editor",{"tool":40,"command":41},"bunx","bunx skills add Lord1Egypt\u002Fawesome-skill-forge --skill imagecraft-editor",{"tool":43,"command":44},"pnpm","pnpm dlx skills add Lord1Egypt\u002Fawesome-skill-forge --skill imagecraft-editor","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fcommunity\u002Fclawhub\u002Fi\u002Fimagecraft-editor\u002FSKILL.md",[],[48,55,62,69,76,83],{"skillNo":49,"name":50,"nameZh":6,"description":51,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":52,"categories":53,"keywords":54,"publishedAt":19},"01M785WKJB99G3STR1NF9NRTJW","youtube-content","YouTube transcripts to summaries, threads, blogs.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fyoutube-content\u002FSKILL.md",[],[],{"skillNo":56,"name":57,"nameZh":6,"description":58,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":61,"publishedAt":19},"01M785WEFHB0G2S9YA6EPR3H0E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fxurl\u002FSKILL.md",[],[],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M785W98EDN4EFJXJPMQEHCRC","touchdesigner-mcp","Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftouchdesigner-mcp\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M785W5S9FP3QBH2V191E025P","test-driven-development","TDD: enforce RED-GREEN-REFACTOR, tests before code.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[],[],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M785W2AS08NSSH9YATCV6FJB","teams-meeting-pipeline","Operate the Teams meeting summary pipeline via Hermes CLI — summarize meetings, inspect pipeline status, replay jobs, manage Microsoft Graph subscriptions.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fteams-meeting-pipeline\u002FSKILL.md",[],[],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":19},"01M785VXKW4T34BTP1SCHW1R7F","systematic-debugging","4-phase root cause debugging: understand bugs before fixing.","https:\u002F\u002Fgithub.com\u002FLord1Egypt\u002Fawesome-skill-forge\u002Fblob\u002Fmaster\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[],[]]