[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KWCH6880WEWZW64WRYQ4CB":3,"skill-same:01M6KWCH6880WEWZW64WRYQ4CB":81},{"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":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":60,"commitSha":61,"skillDirectory":62,"forksCount":14,"repositoryHtmlUrl":63,"repositoryHomepageUrl":6,"ownerHtmlUrl":64,"ownerBlogUrl":6,"ownerDescription":65,"updatedAt":66,"install":67,"resources":80},"01M6KWCH6880WEWZW64WRYQ4CB","playwright-mcp-ui-testing",null,"AI-driven browser UI testing using the Playwright MCP server. Guides the sqa-engineer to perform autonomous browser interactions, assertions, and evidence capture through the Playwright MCP tools. Use ONLY when the change involves UI or frontend components.","rafsanulhasan\u002FHypermediaEngine","rafsanulhasan","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F2341142?v=4","01M6KW2HWPTZWK051N7B0HTBVG","Rafsanul Hasan","01M6KW2J0N3613382MF5DRN79H",0,"GPL-3.0","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fplaywright-mcp-ui-testing\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"playwright mcp ui testing","MCP","playwright","playwright mcp","ui","mcp ui","testing","ui testing","only","assertions","frontend components","guides","engineer","evidence","use","autonomous","browser","components","mcp server","frontend","2026-11-10 10:12:30",false,"---\nname: playwright-mcp-ui-testing\ndescription: AI-driven browser UI testing using the Playwright MCP server. Guides the sqa-engineer to perform autonomous browser interactions, assertions, and evidence capture through the Playwright MCP tools. Use ONLY when the change involves UI or frontend components.\n---\n\n# playwright-mcp-ui-testing\n\nThis skill guides the `sqa-engineer` agent to perform AI-driven UI tests using the Playwright MCP server (`@playwright\u002Fmcp`). The agent uses MCP browser tools to navigate, interact, observe, and assert UI behavior autonomously — without writing coded test files. This skill is ONLY invoked when the software change involves UI or frontend components.\n\n---\n\n## Prerequisites\n\nBefore invoking this skill:\n1. Confirm the change is UI\u002Ffrontend-related. If not, skip this skill entirely.\n2. The Playwright MCP server is already available via the **docker MCP gateway** (configured in `.mcp.json`). No additional setup is required — all browser tools are available with the `mcp__docker-mcp-gateway__` prefix.\n3. Ensure the application is running (start via `dotnet run` or via the Aspire AppHost in `samples\u002FAppHost`).\n4. Discover the service URL (check Aspire dashboard at `http:\u002F\u002Flocalhost:15888` or use the configured `launchUrl`).\n\n---\n\n## Phase 0 — Context Load (silent)\n\n1. Read `CLAUDE.md` to understand the component under test.\n2. Read the spec file at `docs\u002Fspecs\u002F\u003Cfeature-slug>.spec.md` if it exists.\n3. Load persistent memory: `Skill(\"manage-memory\", args: \"sqa-engineer\")`.\n4. Identify which UI routes\u002Fcomponents were changed by the software-engineer.\n\n---\n\n## Phase 1 — Test Case Design\n\nDesign UI test cases based on user flows and acceptance criteria before interacting with the browser. For each test case specify:\n- **Scenario name** (maps to an AC ID if available, e.g., `[AC-2] Submit form with valid data`)\n- **Starting URL**\n- **Steps** (navigation, interactions, form inputs)\n- **Expected outcome** (element visible, text present, URL changed, etc.)\n- **Evidence** (screenshot filename)\n\n---\n\n## Phase 2 — AI-Driven Browser Execution\n\nExecute each test case using the Playwright MCP tools. Follow the **SAA pattern** (Snapshot → Act → Snapshot) for every interaction:\n\n### Core Tool Reference\n\nAll browser tools are invoked via the docker MCP gateway. Use the exact tool names below:\n\n| Tool | Purpose |\n|------|---------|\n| `mcp__docker-mcp-gateway__browser_navigate` | Navigate to a URL |\n| `mcp__docker-mcp-gateway__browser_snapshot` | Capture accessibility tree — use this for all assertions |\n| `mcp__docker-mcp-gateway__browser_take_screenshot` | Capture screenshot as evidence |\n| `mcp__docker-mcp-gateway__browser_click` | Click an element by ARIA ref |\n| `mcp__docker-mcp-gateway__browser_type` | Type into a focused element |\n| `mcp__docker-mcp-gateway__browser_fill_form` | Fill a form field |\n| `mcp__docker-mcp-gateway__browser_press_key` | Press keyboard key (Enter, Tab, Escape, etc.) |\n| `mcp__docker-mcp-gateway__browser_select_option` | Select a dropdown option |\n| `mcp__docker-mcp-gateway__browser_wait_for` | Wait for element\u002Fcondition |\n| `mcp__docker-mcp-gateway__browser_console_messages` | Retrieve browser console log |\n| `mcp__docker-mcp-gateway__browser_network_requests` | List intercepted network requests |\n| `mcp__docker-mcp-gateway__browser_hover` | Hover over an element |\n| `mcp__docker-mcp-gateway__browser_drag` \u002F `mcp__docker-mcp-gateway__browser_drop` | Drag and drop |\n| `mcp__docker-mcp-gateway__browser_handle_dialog` | Handle JS alert\u002Fconfirm\u002Fprompt dialogs |\n| `mcp__docker-mcp-gateway__browser_eval` | Execute JavaScript (escape hatch — requires justification) |\n| `mcp__docker-mcp-gateway__browser_tabs` | List open browser tabs |\n| `mcp__docker-mcp-gateway__browser_resize` | Resize the browser window |\n| `mcp__docker-mcp-gateway__browser_navigate_back` | Navigate back |\n| `mcp__docker-mcp-gateway__browser_network_request` | Inspect a specific network request |\n\n### SAA Pattern (Mandatory for every interaction)\n\n```\nStep 1: mcp__docker-mcp-gateway__browser_snapshot          → read current state, identify ARIA refs\nStep 2: mcp__docker-mcp-gateway__browser_click \u002F browser_type \u002F browser_fill_form   → perform the interaction\nStep 3: mcp__docker-mcp-gateway__browser_snapshot          → verify state changed as expected\n```\n\nNever skip the post-action snapshot — it is the assertion.\n\n### Evidence Capture\n\nAfter each test case (pass or fail), capture a screenshot:\n```\nTool: mcp__docker-mcp-gateway__browser_take_screenshot\n```\n\nAlso capture console errors:\n```\nTool: mcp__docker-mcp-gateway__browser_console_messages\n```\nTreat any `[error]` level entries as implicit test failures.\n\n---\n\n## Phase 3 — Test Report\n\nProduce a structured test report:\n\n```\n## AI-Driven UI Test Report\n\n### Application: \u003Capp name and URL>\n### Date: \u003CISO date>\n\n| Scenario | AC ID | Steps | Result | Evidence |\n|----------|-------|-------|--------|----------|\n| Submit valid form | AC-2 | 3 | ✅ PASS | screenshots\u002Fsubmit-valid-pass.png |\n| Submit empty form | AC-3 | 2 | ❌ FAIL | screenshots\u002Fsubmit-empty-fail.png |\n\n### Console Errors Found\n- [None] \u002F [list any errors]\n\n### Network Errors Found\n- [None] \u002F [list any 4xx\u002F5xx responses]\n\n### Summary: N passed, M failed\n```\n\n---\n\n## Rules and Constraints\n\n- **Snapshot mode is preferred** over vision mode — cheaper, faster, no vision model required.\n- **Never use `mcp__docker-mcp-gateway__browser_eval` as a shortcut** to set state directly. Use actual UI flows. Document any unavoidable use in the test report.\n- **Flaky timing**: always use `browser_wait_for` after navigation\u002Fform submission — never assume instant rendering.\n- **ARIA anchoring**: if UI elements lack proper ARIA labels\u002Froles, surface it as a bug to the software-engineer and request semantic markup fixes before retesting.\n- **Screenshots are mandatory evidence** — never submit a test report without screenshot files.\n- **This skill produces a report, not test code.** The `write-tests` skill produces `.cs` test files. This skill produces browser interaction results and a markdown report.\n\n---\n\n## Escape Hatches (Require Justification in Report)\n\n- `mcp__docker-mcp-gateway__browser_eval` \u002F `mcp__docker-mcp-gateway__browser_run_code_unsafe`: only when no combination of interaction tools can achieve the required state.\n- If visual\u002FCSS rendering testing is needed, capture multiple screenshots with `mcp__docker-mcp-gateway__browser_take_screenshot` at different viewports using `mcp__docker-mcp-gateway__browser_resize`.\n","# playwright-mcp-ui-testing\n\nThis skill guides the `sqa-engineer` agent to perform AI-driven UI tests using the Playwright MCP server (`@playwright\u002Fmcp`). The agent uses MCP browser tools to navigate, interact, observe, and assert UI behavior autonomously — without writing coded test files. This skill is ONLY invoked when the software change involves UI or frontend components.\n\n---\n\n## Prerequisites\n\nBefore invoking this skill:\n1. Confirm the change is UI\u002Ffrontend-related. If not, skip this skill entirely.\n2. The Playwright MCP server is already available via the **docker MCP gateway** (configured in `.mcp.json`). No additional setup is required — all browser tools are available with the `mcp__docker-mcp-gateway__` prefix.\n3. Ensure the application is running (start via `dotnet run` or via the Aspire AppHost in `samples\u002FAppHost`).\n4. Discover the service URL (check Aspire dashboard at `http:\u002F\u002Flocalhost:15888` or use the configured `launchUrl`).\n\n---\n\n## Phase 0 — Context Load (silent)\n\n1. Read `CLAUDE.md` to understand the component under test.\n2. Read the spec file at `docs\u002Fspecs\u002F\u003Cfeature-slug>.spec.md` if it exists.\n3. Load persistent memory: `Skill(\"manage-memory\", args: \"sqa-engineer\")`.\n4. Identify which UI routes\u002Fcomponents were changed by the software-engineer.\n\n---\n\n## Phase 1 — Test Case Design\n\nDesign UI test cases based on user flows and acceptance criteria before interacting with the browser. For each test case specify:\n- **Scenario name** (maps to an AC ID if available, e.g., `[AC-2] Submit form with valid data`)\n- **Starting URL**\n- **Steps** (navigation, interactions, form inputs)\n- **Expected outcome** (element visible, text present, URL changed, etc.)\n- **Evidence** (screenshot filename)\n\n---\n\n## Phase 2 — AI-Driven Browser Execution\n\nExecute each test case using the Playwright MCP tools. Follow the **SAA pattern** (Snapshot → Act → Snapshot) for every interaction:\n\n### Core Tool Reference\n\nAll browser tools are invoked via the docker MCP gateway. Use the exact tool names below:\n\n| Tool | Purpose |\n|------|---------|\n| `mcp__docker-mcp-gateway__browser_navigate` | Navigate to a URL |\n| `mcp__docker-mcp-gateway__browser_snapshot` | Capture accessibility tree — use this for all assertions |\n| `mcp__docker-mcp-gateway__browser_take_screenshot` | Capture screenshot as evidence |\n| `mcp__docker-mcp-gateway__browser_click` | Click an element by ARIA ref |\n| `mcp__docker-mcp-gateway__browser_type` | Type into a focused element |\n| `mcp__docker-mcp-gateway__browser_fill_form` | Fill a form field |\n| `mcp__docker-mcp-gateway__browser_press_key` | Press keyboard key (Enter, Tab, Escape, etc.) |\n| `mcp__docker-mcp-gateway__browser_select_option` | Select a dropdown option |\n| `mcp__docker-mcp-gateway__browser_wait_for` | Wait for element\u002Fcondition |\n| `mcp__docker-mcp-gateway__browser_console_messages` | Retrieve browser console log |\n| `mcp__docker-mcp-gateway__browser_network_requests` | List intercepted network requests |\n| `mcp__docker-mcp-gateway__browser_hover` | Hover over an element |\n| `mcp__docker-mcp-gateway__browser_drag` \u002F `mcp__docker-mcp-gateway__browser_drop` | Drag and drop |\n| `mcp__docker-mcp-gateway__browser_handle_dialog` | Handle JS alert\u002Fconfirm\u002Fprompt dialogs |\n| `mcp__docker-mcp-gateway__browser_eval` | Execute JavaScript (escape hatch — requires justification) |\n| `mcp__docker-mcp-gateway__browser_tabs` | List open browser tabs |\n| `mcp__docker-mcp-gateway__browser_resize` | Resize the browser window |\n| `mcp__docker-mcp-gateway__browser_navigate_back` | Navigate back |\n| `mcp__docker-mcp-gateway__browser_network_request` | Inspect a specific network request |\n\n### SAA Pattern (Mandatory for every interaction)\n\n```\nStep 1: mcp__docker-mcp-gateway__browser_snapshot          → read current state, identify ARIA refs\nStep 2: mcp__docker-mcp-gateway__browser_click \u002F browser_type \u002F browser_fill_form   → perform the interaction\nStep 3: mcp__docker-mcp-gateway__browser_snapshot          → verify state changed as expected\n```\n\nNever skip the post-action snapshot — it is the assertion.\n\n### Evidence Capture\n\nAfter each test case (pass or fail), capture a screenshot:\n```\nTool: mcp__docker-mcp-gateway__browser_take_screenshot\n```\n\nAlso capture console errors:\n```\nTool: mcp__docker-mcp-gateway__browser_console_messages\n```\nTreat any `[error]` level entries as implicit test failures.\n\n---\n\n## Phase 3 — Test Report\n\nProduce a structured test report:\n\n```\n## AI-Driven UI Test Report\n\n### Application: \u003Capp name and URL>\n### Date: \u003CISO date>\n\n| Scenario | AC ID | Steps | Result | Evidence |\n|----------|-------|-------|--------|----------|\n| Submit valid form | AC-2 | 3 | ✅ PASS | screenshots\u002Fsubmit-valid-pass.png |\n| Submit empty form | AC-3 | 2 | ❌ FAIL | screenshots\u002Fsubmit-empty-fail.png |\n\n### Console Errors Found\n- [None] \u002F [list any errors]\n\n### Network Errors Found\n- [None] \u002F [list any 4xx\u002F5xx responses]\n\n### Summary: N passed, M failed\n```\n\n---\n\n## Rules and Constraints\n\n- **Snapshot mode is preferred** over vision mode — cheaper, faster, no vision model required.\n- **Never use `mcp__docker-mcp-gateway__browser_eval` as a shortcut** to set state directly. Use actual UI flows. Document any unavoidable use in the test report.\n- **Flaky timing**: always use `browser_wait_for` after navigation\u002Fform submission — never assume instant rendering.\n- **ARIA anchoring**: if UI elements lack proper ARIA labels\u002Froles, surface it as a bug to the software-engineer and request semantic markup fixes before retesting.\n- **Screenshots are mandatory evidence** — never submit a test report without screenshot files.\n- **This skill produces a report, not test code.** The `write-tests` skill produces `.cs` test files. This skill produces browser interaction results and a markdown report.\n\n---\n\n## Escape Hatches (Require Justification in Report)\n\n- `mcp__docker-mcp-gateway__browser_eval` \u002F `mcp__docker-mcp-gateway__browser_run_code_unsafe`: only when no combination of interaction tools can achieve the required state.\n- If visual\u002FCSS rendering testing is needed, capture multiple screenshots with `mcp__docker-mcp-gateway__browser_take_screenshot` at different viewports using `mcp__docker-mcp-gateway__browser_resize`.\n",{"name":5,"description":7},"main","00b2c68281930728ee390bb16cec32b88d2caac7",".github\u002Fskills\u002Fplaywright-mcp-ui-testing","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine","https:\u002F\u002Fgithub.com\u002Frafsanulhasan","\r\n    MCSD || A-CSD || Software Architect\r\n\r\n","2026-06-06 07:47:06",{"source":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add rafsanulhasan\u002FHypermediaEngine --skill playwright-mcp-ui-testing",{"tool":73,"command":74},"bunx","bunx skills add rafsanulhasan\u002FHypermediaEngine --skill playwright-mcp-ui-testing",{"tool":76,"command":77},"pnpm","pnpm dlx skills add rafsanulhasan\u002FHypermediaEngine --skill playwright-mcp-ui-testing","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fplaywright-mcp-ui-testing\u002FSKILL.md",true,[],[82,108,128,147,169,190],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":89,"publishedAt":55},"01M6KWEJD606FG3DBBRM0W4DKW","write-tests","Test implementation skill for HypermediaEngine. Takes a confirmed test plan from design-test-cases and produces compilable, runnable xUnit tests following project conventions. Validates coverage quality through mutation testing. Invoked by the sqa-engineer agent after the test plan is approved.","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fwrite-tests\u002FSKILL.md",[88],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[90,91,92,41,93,94,95,96,97,98,99,100,101,102,103,47,104,105,106,107],"write tests","write","tests","design","test","project conventions","test plan","Bash","plan","quality","xunit","read","edit","coverage","mutation testing","project","mutation","for",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":55},"01M6KWEF2XQ00C1Y6QCK7YHZ1H","write-documentation","Structured documentation writing workflow for HypermediaEngine. Writes or updates README.md files at the repo root and in each project directory (src\u002F, tests\u002F, samples\u002F, etc.) based on current implementation, ADRs, and architecture decisions.","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fwrite-documentation\u002FSKILL.md",[],[115,91,116,117,118,119,120,97,121,122,123,124,101,102,125,105,92,126,127,107],"documentation","write documentation","writing","directory","workflow","architecture","src","repo","decisions","README","files","updates","at",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":55},"01M6KWEBDXTXAVPQ3BHS3YYYNT","write-adr","Writes a numbered Architecture Decision Record (ADR) for a significant architectural choice in the HypermediaEngine project. Invoked by the software-architect agent whenever a consequential design decision is made or ratified. Saves the ADR to docs\u002Farchitecture\u002Fdecisions\u002F.","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fwrite-adr\u002FSKILL.md",[],[135,91,136,93,137,120,138,139,140,141,123,101,142,143,105,144,145,107,146],"adr","write adr","docs","architect","decision","choice","grep","architecture decision record","record","software","opus","architecture decision",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":155,"publishedAt":55},"01M6KWE76TM3QHGQ08PEB3KY6D","tunit-playwright-ui-testing","Comprehensive guidance for writing coded end-to-end UI tests in C# using TUnit.Playwright. Tests inherit from PageTest — the base class manages all browser lifecycle. Covers NuGet setup, PageTest inheritance, Page Object Model, browser configuration, parallelism limiting, and CI integration. Based on the official TUnit docs at https:\u002F\u002Ftunit.dev\u002Fdocs\u002Fexamples\u002Fplaywright.","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Ftunit-playwright-ui-testing\u002FSKILL.md",[153,154],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[41,37,39,156,42,157,158,117,159,160,161,162,163,164,165,166,92,167,168,107],"playwright ui testing","tunit","tunit playwright ui testing","official","dev","examples","ci","lifecycle","model","page","inheritance","end","object",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":176,"publishedAt":55},"01M6KWE44A738GDK65QS02XJBG","triage","Task classification, decomposition, dependency mapping, and routing skill. Invoked by the triage-agent to break any user request into discrete, independently-routable work items with assigned priorities and agent chains.","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Ftriage\u002FSKILL.md",[175],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[171,177,178,179,180,181,182,183,184,185,186,187,188,189],"routing","classification","work","user","dependency","task","priorities","decomposition","user request","mapping","with","break","request",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":200,"publishedAt":55},"01M6KWDZ3W9ZKPR7FTTTSX8H2K","system-design","Expert system design skill. Use PROACTIVELY to design systems, review architectures, and assist software engineers in learning design principles and implementing them in the code with design patterns.","https:\u002F\u002Fgithub.com\u002Frafsanulhasan\u002FHypermediaEngine\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fsystem-design\u002FSKILL.md",[196,199],{"categoryNo":197,"categoryName":198,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[93,201,202,203,204,205,206,141,101,49,207,208,209,210,211,144,212,213,187,214],"system","system design","web","design systems","learning","haiku","design patterns","design principles","expert","patterns","systems","architectures","principles","implementing"]