[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6E0BZ366EVWM6Q2DH1FTMPW":3,"skill-same:01M6E0BZ366EVWM6Q2DH1FTMPW":100},{"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":33,"publishedAt":47,"linkOnly":48,"markdownContent":49,"markdownBody":50,"frontMatter":51,"refName":73,"commitSha":74,"skillDirectory":75,"forksCount":13,"repositoryHtmlUrl":76,"repositoryHomepageUrl":77,"ownerHtmlUrl":78,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":79,"install":80,"resources":93},"01M6E0BZ366EVWM6Q2DH1FTMPW","frontend-design",null,"creates a frontend design for a website","7dvq6yrkgs-stack\u002Fplaywright","7dvq6yrkgs-stack","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F251638143?v=4","01M6E061J2AMGWYZ6TK7Y8NM74","01M6E061PQCQJGQMPBERMCFN5G",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fanthropics\u002Fautocode-intellisense\u002Ffrontend-design\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46],"frontend","design","frontend design","website","ui","prompt","use","color palette","ui design","layout","elements","type","STRING","2026-11-10 10:12:30",false,"---\nname: frontend-design\ndescription: creates a frontend design for a website\ninput_schema: {\n  \"type\": \"object\",\n  \"properties\": {\n    \"website_type\": {\n      \"type\": \"string\",\n      \"description\": \"The type of website to design\"\n    },\n    \"color_palette\": {\n      \"type\": \"array\",\n      \"items\": {\n        \"type\": \"string\"\n      },\n      \"description\": \"The color palette to use\"\n    },\n    \"layout\": {\n      \"type\": \"string\",\n      \"description\": \"The layout to use\"\n    },\n    \"ui_elements\": {\n      \"type\": \"array\",\n      \"items\": {\n        \"type\": \"string\"\n      },\n      \"description\": \"The UI elements to include\"\n    },\n    \"atmosphere\": {\n      \"type\": \"string\",\n      \"description\": \"The atmosphere of the website\"\n    }\n  }\n}\noutput_schema: {\n    \"type\": \"object\",\n    \"properties\": {\n      \"ui_design_prompt\": {\n        \"type\": \"string\",\n        \"description\": \"A detailed prompt for generating the UI design\"\n      }\n    }\n  }\n---\n\nI will generate all UI screens as detailed prompts, ready to be pasted directly into an image generation tool.\n\n**Plan:**\n1. Create a separate, high-quality prompt for each required screen:\n    - Login \u002F Authentication Page\n    - Dashboard Overview Screen\n    - Settings \u002F Profile Page\n    - Chat \u002F Messaging Interface\n    - Home Screen \u002F Landing Page\n2. Ensure each prompt includes:\n    - **Visual Style:** Modern, premium, tech-focused, as defined in the prompt.\n    - **Color Palette:** Use the defined blue and dark grey tones.\n    - **Layout:** Clean, organized structure for each specific screen type.\n    - **UI Elements:** Include necessary components like buttons, input fields, sidebars, cards, charts, etc., where appropriate.\n    - **Atmosphere:** Professional yet inviting and user-friendly.\n3. Design a modern dashboard interface:\n    - Dashboard Overview Screen: A central hub displaying key metrics, recent activities, and navigation.\n    - Profile \u002F Account Settings: Comprehensive settings management for user profiles, security, and preferences.\n    - Settings Page: Detailed configuration for application settings, notifications, and system preferences.\n    - User Profile Page: Individual user profile view with personal information, stats, and activity history.\n    - Project \u002F Task Management: Tools for managing projects, tasks, progress tracking, and collaboration.\n    - Analytics \u002F Reports: Data visualization with charts, graphs, and insights.\n","I will generate all UI screens as detailed prompts, ready to be pasted directly into an image generation tool.\n\n**Plan:**\n1. Create a separate, high-quality prompt for each required screen:\n    - Login \u002F Authentication Page\n    - Dashboard Overview Screen\n    - Settings \u002F Profile Page\n    - Chat \u002F Messaging Interface\n    - Home Screen \u002F Landing Page\n2. Ensure each prompt includes:\n    - **Visual Style:** Modern, premium, tech-focused, as defined in the prompt.\n    - **Color Palette:** Use the defined blue and dark grey tones.\n    - **Layout:** Clean, organized structure for each specific screen type.\n    - **UI Elements:** Include necessary components like buttons, input fields, sidebars, cards, charts, etc., where appropriate.\n    - **Atmosphere:** Professional yet inviting and user-friendly.\n3. Design a modern dashboard interface:\n    - Dashboard Overview Screen: A central hub displaying key metrics, recent activities, and navigation.\n    - Profile \u002F Account Settings: Comprehensive settings management for user profiles, security, and preferences.\n    - Settings Page: Detailed configuration for application settings, notifications, and system preferences.\n    - User Profile Page: Individual user profile view with personal information, stats, and activity history.\n    - Project \u002F Task Management: Tools for managing projects, tasks, progress tracking, and collaboration.\n    - Analytics \u002F Reports: Data visualization with charts, graphs, and insights.\n",{"name":5,"description":7,"input_schema":52,"output_schema":69},{"type":53,"properties":54},"object",{"layout":55,"atmosphere":58,"ui_elements":60,"website_type":64,"color_palette":66},{"type":56,"description":57},"string","The layout to use",{"type":56,"description":59},"The atmosphere of the website",{"type":61,"items":62,"description":63},"array",{"type":56},"The UI elements to include",{"type":56,"description":65},"The type of website to design",{"type":61,"items":67,"description":68},{"type":56},"The color palette to use",{"type":53,"properties":70},{"ui_design_prompt":71},{"type":56,"description":72},"A detailed prompt for generating the UI design","main","a2e3284ed4488780397ee2f78217366e11470dfb","skills\u002Fanthropics\u002Fautocode-intellisense\u002Ffrontend-design","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright","https:\u002F\u002Fplaywright.dev","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack","2026-04-25 06:04:45",{"source":8,"skillName":5,"commands":81,"prompt":91,"zipAvailable":92},[82,85,88],{"tool":83,"command":84},"npx","npx skills add 7dvq6yrkgs-stack\u002Fplaywright --skill frontend-design",{"tool":86,"command":87},"bunx","bunx skills add 7dvq6yrkgs-stack\u002Fplaywright --skill frontend-design",{"tool":89,"command":90},"pnpm","pnpm dlx skills add 7dvq6yrkgs-stack\u002Fplaywright --skill frontend-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fanthropics\u002Fautocode-intellisense\u002Ffrontend-design\u002FSKILL.md",true,[94],{"path":95,"resourceType":96,"resourceTypeDesc":97,"sizeBytes":98,"sourceHtmlUrl":99},"references\u002Fsecurity-rules.md","REFERENCE","参考文档",49931,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__agentnode-dev--skills-security-audit\u002Freferences\u002Fsecurity-rules.md",[101,129,139,149,164,179],{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":117,"publishedAt":47},"01M6E3XK4PRPMQHM7Y98FQPTY1","zyte-api-automation","Automate Zyte API tasks via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fzyte-api-automation\u002FSKILL.md",[107,108,111,114],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":109,"categoryName":110,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":115,"categoryName":116,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000030","开发工程师",[118,119,120,121,122,123,124,125,126,127,128],"zyte api automation","api","automation","MCP","tasks","search","Tools","first","automate","composio","via",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":137,"publishedAt":47},"01M6E3XFX6QSTR1QR59NFXJTMA","zylvie-automation","Automate Zylvie tasks via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fzylvie-automation\u002FSKILL.md",[135,136],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},[138,120,126,121,122,123,124,125,127,128],"zylvie automation",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":147,"publishedAt":47},"01M6E3XCX2GDYYCHN58ZJHT37M","zoominfo-automation","Automate Zoominfo tasks via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fzoominfo-automation\u002FSKILL.md",[145,146],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},[148,120,123,124,125,126,127,128,122,121],"zoominfo automation",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":157,"publishedAt":47},"01M6E3X9WJ2T73216WQHHTB9BD","zoho_mail-automation","Automate Zoho Mail tasks via Rube MCP (Composio): email sending, folders, labels, and mailbox management. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fzoho_mail-automation\u002FSKILL.md",[155,156],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},[158,159,160,120,121,122,123,161,124,125,126,162,127,163,128],"mail","zoho mail automation","zoho","email","management","mailbox",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":175,"publishedAt":47},"01M6E3X719W648XZBW1EC6JQ64","zoho_invoice-automation","Automate Zoho Invoice tasks via Rube MCP (Composio): invoices, estimates, expenses, clients, and payment tracking. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fzoho_invoice-automation\u002FSKILL.md",[170,171,172],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":173,"categoryName":174,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000040","财务",[176,160,120,122,123,124,125,126,177,178,127,128,121],"zoho invoice automation","tracking","payment",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":187,"publishedAt":47},"01M6E3X28JYTC3QTK32AQF7BYB","zoho_inventory-automation","Automate Zoho Inventory tasks via Rube MCP (Composio): items, orders, warehouses, shipments, and stock management. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002F7dvq6yrkgs-stack\u002Fplaywright\u002Fblob\u002Fmain\u002Fskills\u002Fzoho_inventory-automation\u002FSKILL.md",[185,186],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},[120,188,160,189,125,126,124,123,122,121,127,128,190,191,162],"inventory","zoho inventory automation","stock","orders"]