[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JKYKVXAACSVC45JD5DXRRK":3,"skill-same:01M6JKYKVXAACSVC45JD5DXRRK":79},{"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":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":13,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":57,"updatedAt":58,"install":59,"resources":72},"01M6JKYKVXAACSVC45JD5DXRRK","accessibility-wcag",null,"Enforce WCAG 2.2 accessibility standards. Use when creating UI components, reviewing frontend code, or when accessibility issues are detected. Covers semantic HTML, ARIA, keyboard navigation, and color contrast.","superhealth\u002Fskills-hub","superhealth","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6292112?v=4","01M6JA6E7F21BYK5W3E4P270TT","01M6JA6EC0W8MPHKDJVBZDSEZ0",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fdoyajin174\u002Faccessibility-wcag\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"accessibility wcag","accessibility","WCAG","write","color","ui components","keyboard","enforce","aria","standards","use","edit","frontend","read","Bash","team","issues","code","components","antigravity","2026-11-10 10:12:30",false,"---\nname: accessibility-wcag\ndescription: Enforce WCAG 2.2 accessibility standards. Use when creating UI components, reviewing frontend code, or when accessibility issues are detected. Covers semantic HTML, ARIA, keyboard navigation, and color contrast.\nallowed-tools: Read, Glob, Grep, Edit, Write, Bash\nlicense: MIT\nmetadata:\n  author: antigravity-team\n  version: \"1.0\"\n---\n\n# Accessibility (WCAG 2.2)\n\n웹 접근성 표준 WCAG 2.2를 준수하도록 강제하는 스킬입니다.\n\n## 2025 Context\n\n> **WCAG 2.2는 2023년 10월 ISO 표준(ISO\u002FIEC 40500)으로 채택되었습니다.**\n> **유럽 접근성법(EAA)은 2025년 6월부터 시행됩니다.**\n\n## Core Principles (POUR)\n\n| 원칙 | 설명 | 예시 |\n|------|------|------|\n| **P**erceivable | 인지 가능 | 대체 텍스트, 자막, 색상 대비 |\n| **O**perable | 조작 가능 | 키보드 접근, 충분한 시간 |\n| **U**nderstandable | 이해 가능 | 명확한 언어, 예측 가능한 동작 |\n| **R**obust | 견고함 | 보조 기술 호환성 |\n\n## Rules\n\n### 1. Semantic HTML (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: div 남용\n\u003Cdiv onClick={handleClick}>버튼\u003C\u002Fdiv>\n\u003Cdiv class=\"header\">제목\u003C\u002Fdiv>\n\n\u002F\u002F ✅ GOOD: 시맨틱 태그 사용\n\u003Cbutton onClick={handleClick}>버튼\u003C\u002Fbutton>\n\u003Ch1>제목\u003C\u002Fh1>\n```\n\n### 2. 이미지 대체 텍스트 (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: alt 누락 또는 의미 없음\n\u003Cimg src=\"logo.png\" \u002F>\n\u003Cimg src=\"chart.png\" alt=\"이미지\" \u002F>\n\n\u002F\u002F ✅ GOOD: 의미 있는 alt\n\u003Cimg src=\"logo.png\" alt=\"회사명 로고\" \u002F>\n\u003Cimg src=\"chart.png\" alt=\"2024년 매출 증가 추이 그래프\" \u002F>\n\n\u002F\u002F ✅ 장식용 이미지는 빈 alt\n\u003Cimg src=\"decoration.png\" alt=\"\" role=\"presentation\" \u002F>\n```\n\n### 3. 키보드 접근성 (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: 키보드 접근 불가\n\u003Cdiv onClick={handleClick} style={{ cursor: 'pointer' }}>\n  클릭\n\u003C\u002Fdiv>\n\n\u002F\u002F ✅ GOOD: 키보드 접근 가능\n\u003Cbutton onClick={handleClick}>클릭\u003C\u002Fbutton>\n\n\u002F\u002F 또는 커스텀 요소 사용 시\n\u003Cdiv\n  role=\"button\"\n  tabIndex={0}\n  onClick={handleClick}\n  onKeyDown={(e) => e.key === 'Enter' && handleClick()}\n>\n  클릭\n\u003C\u002Fdiv>\n```\n\n### 4. 포커스 관리\n\n```tsx\n\u002F\u002F ❌ BAD: 포커스 스타일 제거\nbutton:focus {\n  outline: none;\n}\n\n\u002F\u002F ✅ GOOD: 명확한 포커스 표시\nbutton:focus {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\nbutton:focus-visible {\n  outline: 2px solid #005fcc;\n}\n```\n\n### 5. 색상 대비 (WCAG AA 기준)\n\n| 텍스트 크기 | 최소 대비율 |\n|------------|------------|\n| 일반 텍스트 | 4.5:1 |\n| 큰 텍스트 (18pt+, 14pt bold+) | 3:1 |\n| UI 컴포넌트\u002F그래픽 | 3:1 |\n\n```css\n\u002F* ❌ BAD: 낮은 대비 *\u002F\n.text {\n  color: #999;  \u002F* 회색 on 흰색 = 2.85:1 *\u002F\n  background: #fff;\n}\n\n\u002F* ✅ GOOD: 충분한 대비 *\u002F\n.text {\n  color: #595959;  \u002F* 4.54:1 *\u002F\n  background: #fff;\n}\n```\n\n### 6. 폼 레이블 (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: 레이블 없음\n\u003Cinput type=\"email\" placeholder=\"이메일\" \u002F>\n\n\u002F\u002F ✅ GOOD: 명시적 레이블\n\u003Clabel htmlFor=\"email\">이메일\u003C\u002Flabel>\n\u003Cinput id=\"email\" type=\"email\" \u002F>\n\n\u002F\u002F 또는 aria-label 사용\n\u003Cinput type=\"email\" aria-label=\"이메일 주소\" placeholder=\"이메일\" \u002F>\n```\n\n### 7. ARIA 역할 및 속성\n\n```tsx\n\u002F\u002F 모달 다이얼로그\n\u003Cdiv\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"modal-title\"\n>\n  \u003Ch2 id=\"modal-title\">확인\u003C\u002Fh2>\n  ...\n\u003C\u002Fdiv>\n\n\u002F\u002F 알림 메시지\n\u003Cdiv role=\"alert\" aria-live=\"polite\">\n  저장되었습니다.\n\u003C\u002Fdiv>\n\n\u002F\u002F 로딩 상태\n\u003Cbutton aria-busy={isLoading} disabled={isLoading}>\n  {isLoading ? '처리 중...' : '제출'}\n\u003C\u002Fbutton>\n```\n\n### 8. 건너뛰기 링크\n\n```tsx\n\u002F\u002F 페이지 상단에 추가\n\u003Ca href=\"#main-content\" className=\"skip-link\">\n  본문으로 건너뛰기\n\u003C\u002Fa>\n\n\u002F\u002F CSS\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n## WCAG 2.2 신규 기준\n\n### 2.4.11 Focus Not Obscured (AA)\n\n```tsx\n\u002F\u002F ❌ BAD: 고정 헤더가 포커스 요소를 가림\n.header { position: fixed; top: 0; }\n\n\u002F\u002F ✅ GOOD: scroll-margin으로 여유 공간 확보\n:target {\n  scroll-margin-top: 80px;\n}\n\n*:focus {\n  scroll-margin-top: 80px;\n}\n```\n\n### 2.5.7 Dragging Movements (AA)\n\n```tsx\n\u002F\u002F ❌ BAD: 드래그만 지원\n\u003CDraggableList onDrag={handleReorder} \u002F>\n\n\u002F\u002F ✅ GOOD: 드래그 + 버튼 대안 제공\n\u003CDraggableList onDrag={handleReorder}>\n  \u003Cbutton onClick={moveUp}>위로 이동\u003C\u002Fbutton>\n  \u003Cbutton onClick={moveDown}>아래로 이동\u003C\u002Fbutton>\n\u003C\u002FDraggableList>\n```\n\n### 2.5.8 Target Size (AA)\n\n```css\n\u002F* 최소 터치 타겟: 24x24px (AA), 44x44px 권장 *\u002F\nbutton, a, input[type=\"checkbox\"] {\n  min-width: 44px;\n  min-height: 44px;\n}\n```\n\n## 테스트 도구\n\n### 자동화 도구\n\n```bash\n# axe-core (React)\nnpm install @axe-core\u002Freact\n\n# eslint-plugin-jsx-a11y\nnpm install eslint-plugin-jsx-a11y --save-dev\n\n# Lighthouse CI\nnpm install -g @lhci\u002Fcli\nlhci autorun\n```\n\n### eslint 설정\n\n```json\n{\n  \"extends\": [\"plugin:jsx-a11y\u002Frecommended\"],\n  \"rules\": {\n    \"jsx-a11y\u002Falt-text\": \"error\",\n    \"jsx-a11y\u002Fanchor-is-valid\": \"error\",\n    \"jsx-a11y\u002Fclick-events-have-key-events\": \"error\",\n    \"jsx-a11y\u002Fno-static-element-interactions\": \"error\"\n  }\n}\n```\n\n### 수동 테스트 체크리스트\n\n- [ ] 키보드만으로 모든 기능 사용 가능\n- [ ] Tab 순서가 논리적\n- [ ] 포커스 표시가 명확함\n- [ ] 스크린 리더로 내용 이해 가능\n- [ ] 200% 확대해도 콘텐츠 손실 없음\n- [ ] 색상만으로 정보 전달하지 않음\n\n## Workflow\n\n### 1. 컴포넌트 작성 시\n\n```\n체크포인트:\n1. 시맨틱 HTML 사용했는가?\n2. 키보드 접근 가능한가?\n3. 적절한 ARIA 속성이 있는가?\n4. 포커스 스타일이 있는가?\n```\n\n### 2. 코드 리뷰 시\n\n```\n접근성 체크:\n1. img에 alt 있는가?\n2. form에 label 있는가?\n3. 색상 대비 충분한가?\n4. 터치 타겟 크기 충분한가?\n```\n\n## Checklist\n\n- [ ] 시맨틱 HTML 태그 사용\n- [ ] 모든 이미지에 의미 있는 alt\n- [ ] 폼 요소에 label 연결\n- [ ] 키보드만으로 조작 가능\n- [ ] 포커스 표시 명확\n- [ ] 색상 대비 4.5:1 이상\n- [ ] 터치 타겟 44x44px 이상\n- [ ] 건너뛰기 링크 제공\n- [ ] axe\u002FLighthouse 테스트 통과\n\n## References\n\n- [WCAG 2.2](https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F)\n- [WAI-ARIA 1.2](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F)\n- [eslint-plugin-jsx-a11y](https:\u002F\u002Fgithub.com\u002Fjsx-eslint\u002Feslint-plugin-jsx-a11y)\n","# Accessibility (WCAG 2.2)\n\n웹 접근성 표준 WCAG 2.2를 준수하도록 강제하는 스킬입니다.\n\n## 2025 Context\n\n> **WCAG 2.2는 2023년 10월 ISO 표준(ISO\u002FIEC 40500)으로 채택되었습니다.**\n> **유럽 접근성법(EAA)은 2025년 6월부터 시행됩니다.**\n\n## Core Principles (POUR)\n\n| 원칙 | 설명 | 예시 |\n|------|------|------|\n| **P**erceivable | 인지 가능 | 대체 텍스트, 자막, 색상 대비 |\n| **O**perable | 조작 가능 | 키보드 접근, 충분한 시간 |\n| **U**nderstandable | 이해 가능 | 명확한 언어, 예측 가능한 동작 |\n| **R**obust | 견고함 | 보조 기술 호환성 |\n\n## Rules\n\n### 1. Semantic HTML (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: div 남용\n\u003Cdiv onClick={handleClick}>버튼\u003C\u002Fdiv>\n\u003Cdiv class=\"header\">제목\u003C\u002Fdiv>\n\n\u002F\u002F ✅ GOOD: 시맨틱 태그 사용\n\u003Cbutton onClick={handleClick}>버튼\u003C\u002Fbutton>\n\u003Ch1>제목\u003C\u002Fh1>\n```\n\n### 2. 이미지 대체 텍스트 (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: alt 누락 또는 의미 없음\n\u003Cimg src=\"logo.png\" \u002F>\n\u003Cimg src=\"chart.png\" alt=\"이미지\" \u002F>\n\n\u002F\u002F ✅ GOOD: 의미 있는 alt\n\u003Cimg src=\"logo.png\" alt=\"회사명 로고\" \u002F>\n\u003Cimg src=\"chart.png\" alt=\"2024년 매출 증가 추이 그래프\" \u002F>\n\n\u002F\u002F ✅ 장식용 이미지는 빈 alt\n\u003Cimg src=\"decoration.png\" alt=\"\" role=\"presentation\" \u002F>\n```\n\n### 3. 키보드 접근성 (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: 키보드 접근 불가\n\u003Cdiv onClick={handleClick} style={{ cursor: 'pointer' }}>\n  클릭\n\u003C\u002Fdiv>\n\n\u002F\u002F ✅ GOOD: 키보드 접근 가능\n\u003Cbutton onClick={handleClick}>클릭\u003C\u002Fbutton>\n\n\u002F\u002F 또는 커스텀 요소 사용 시\n\u003Cdiv\n  role=\"button\"\n  tabIndex={0}\n  onClick={handleClick}\n  onKeyDown={(e) => e.key === 'Enter' && handleClick()}\n>\n  클릭\n\u003C\u002Fdiv>\n```\n\n### 4. 포커스 관리\n\n```tsx\n\u002F\u002F ❌ BAD: 포커스 스타일 제거\nbutton:focus {\n  outline: none;\n}\n\n\u002F\u002F ✅ GOOD: 명확한 포커스 표시\nbutton:focus {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\nbutton:focus-visible {\n  outline: 2px solid #005fcc;\n}\n```\n\n### 5. 색상 대비 (WCAG AA 기준)\n\n| 텍스트 크기 | 최소 대비율 |\n|------------|------------|\n| 일반 텍스트 | 4.5:1 |\n| 큰 텍스트 (18pt+, 14pt bold+) | 3:1 |\n| UI 컴포넌트\u002F그래픽 | 3:1 |\n\n```css\n\u002F* ❌ BAD: 낮은 대비 *\u002F\n.text {\n  color: #999;  \u002F* 회색 on 흰색 = 2.85:1 *\u002F\n  background: #fff;\n}\n\n\u002F* ✅ GOOD: 충분한 대비 *\u002F\n.text {\n  color: #595959;  \u002F* 4.54:1 *\u002F\n  background: #fff;\n}\n```\n\n### 6. 폼 레이블 (필수)\n\n```tsx\n\u002F\u002F ❌ BAD: 레이블 없음\n\u003Cinput type=\"email\" placeholder=\"이메일\" \u002F>\n\n\u002F\u002F ✅ GOOD: 명시적 레이블\n\u003Clabel htmlFor=\"email\">이메일\u003C\u002Flabel>\n\u003Cinput id=\"email\" type=\"email\" \u002F>\n\n\u002F\u002F 또는 aria-label 사용\n\u003Cinput type=\"email\" aria-label=\"이메일 주소\" placeholder=\"이메일\" \u002F>\n```\n\n### 7. ARIA 역할 및 속성\n\n```tsx\n\u002F\u002F 모달 다이얼로그\n\u003Cdiv\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"modal-title\"\n>\n  \u003Ch2 id=\"modal-title\">확인\u003C\u002Fh2>\n  ...\n\u003C\u002Fdiv>\n\n\u002F\u002F 알림 메시지\n\u003Cdiv role=\"alert\" aria-live=\"polite\">\n  저장되었습니다.\n\u003C\u002Fdiv>\n\n\u002F\u002F 로딩 상태\n\u003Cbutton aria-busy={isLoading} disabled={isLoading}>\n  {isLoading ? '처리 중...' : '제출'}\n\u003C\u002Fbutton>\n```\n\n### 8. 건너뛰기 링크\n\n```tsx\n\u002F\u002F 페이지 상단에 추가\n\u003Ca href=\"#main-content\" className=\"skip-link\">\n  본문으로 건너뛰기\n\u003C\u002Fa>\n\n\u002F\u002F CSS\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n## WCAG 2.2 신규 기준\n\n### 2.4.11 Focus Not Obscured (AA)\n\n```tsx\n\u002F\u002F ❌ BAD: 고정 헤더가 포커스 요소를 가림\n.header { position: fixed; top: 0; }\n\n\u002F\u002F ✅ GOOD: scroll-margin으로 여유 공간 확보\n:target {\n  scroll-margin-top: 80px;\n}\n\n*:focus {\n  scroll-margin-top: 80px;\n}\n```\n\n### 2.5.7 Dragging Movements (AA)\n\n```tsx\n\u002F\u002F ❌ BAD: 드래그만 지원\n\u003CDraggableList onDrag={handleReorder} \u002F>\n\n\u002F\u002F ✅ GOOD: 드래그 + 버튼 대안 제공\n\u003CDraggableList onDrag={handleReorder}>\n  \u003Cbutton onClick={moveUp}>위로 이동\u003C\u002Fbutton>\n  \u003Cbutton onClick={moveDown}>아래로 이동\u003C\u002Fbutton>\n\u003C\u002FDraggableList>\n```\n\n### 2.5.8 Target Size (AA)\n\n```css\n\u002F* 최소 터치 타겟: 24x24px (AA), 44x44px 권장 *\u002F\nbutton, a, input[type=\"checkbox\"] {\n  min-width: 44px;\n  min-height: 44px;\n}\n```\n\n## 테스트 도구\n\n### 자동화 도구\n\n```bash\n# axe-core (React)\nnpm install @axe-core\u002Freact\n\n# eslint-plugin-jsx-a11y\nnpm install eslint-plugin-jsx-a11y --save-dev\n\n# Lighthouse CI\nnpm install -g @lhci\u002Fcli\nlhci autorun\n```\n\n### eslint 설정\n\n```json\n{\n  \"extends\": [\"plugin:jsx-a11y\u002Frecommended\"],\n  \"rules\": {\n    \"jsx-a11y\u002Falt-text\": \"error\",\n    \"jsx-a11y\u002Fanchor-is-valid\": \"error\",\n    \"jsx-a11y\u002Fclick-events-have-key-events\": \"error\",\n    \"jsx-a11y\u002Fno-static-element-interactions\": \"error\"\n  }\n}\n```\n\n### 수동 테스트 체크리스트\n\n- [ ] 키보드만으로 모든 기능 사용 가능\n- [ ] Tab 순서가 논리적\n- [ ] 포커스 표시가 명확함\n- [ ] 스크린 리더로 내용 이해 가능\n- [ ] 200% 확대해도 콘텐츠 손실 없음\n- [ ] 색상만으로 정보 전달하지 않음\n\n## Workflow\n\n### 1. 컴포넌트 작성 시\n\n```\n체크포인트:\n1. 시맨틱 HTML 사용했는가?\n2. 키보드 접근 가능한가?\n3. 적절한 ARIA 속성이 있는가?\n4. 포커스 스타일이 있는가?\n```\n\n### 2. 코드 리뷰 시\n\n```\n접근성 체크:\n1. img에 alt 있는가?\n2. form에 label 있는가?\n3. 색상 대비 충분한가?\n4. 터치 타겟 크기 충분한가?\n```\n\n## Checklist\n\n- [ ] 시맨틱 HTML 태그 사용\n- [ ] 모든 이미지에 의미 있는 alt\n- [ ] 폼 요소에 label 연결\n- [ ] 키보드만으로 조작 가능\n- [ ] 포커스 표시 명확\n- [ ] 색상 대비 4.5:1 이상\n- [ ] 터치 타겟 44x44px 이상\n- [ ] 건너뛰기 링크 제공\n- [ ] axe\u002FLighthouse 테스트 통과\n\n## References\n\n- [WCAG 2.2](https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F)\n- [WAI-ARIA 1.2](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F)\n- [eslint-plugin-jsx-a11y](https:\u002F\u002Fgithub.com\u002Fjsx-eslint\u002Feslint-plugin-jsx-a11y)\n",{"name":5,"license":14,"metadata":48,"description":7,"allowed-tools":51},{"author":49,"version":50},"antigravity-team","1.0","Read, Glob, Grep, Edit, Write, Bash","master","08cc2532077058aa50e6e18f54695bc256c88152","skills\u002Fdoyajin174\u002Faccessibility-wcag","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub","https:\u002F\u002Fgithub.com\u002Fsuperhealth","java engineer","2026-04-06 22:07:23",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add superhealth\u002Fskills-hub --skill accessibility-wcag",{"tool":65,"command":66},"bunx","bunx skills add superhealth\u002Fskills-hub --skill accessibility-wcag",{"tool":68,"command":69},"pnpm","pnpm dlx skills add superhealth\u002Fskills-hub --skill accessibility-wcag","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fdoyajin174\u002Faccessibility-wcag\u002FSKILL.md",true,[73],{"path":74,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":77,"sourceHtmlUrl":78},"skill-report.json","REFERENCE","参考文档",12693,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fdoyajin174\u002Faccessibility-wcag\u002Fskill-report.json",[80,106,133,146,162,186],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":87,"publishedAt":43},"01M6MC9F3WHV8S8FZ2W4TRB0FE","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fzhanlincui\u002Fvercel-react-best-practices\u002FSKILL.md",[86],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[88,89,90,91,92,93,40,94,95,96,97,98,99,100,101,102,103,41,104,105],"react","vercel react best practices","best practices","vercel","react best practices","data fetching","triggers","pages","next","patterns","refactoring","data","Optimization","tasks","guidelines","react components","performance","writing",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":116,"publishedAt":43},"01M6MB8KWE1Q5A5KERR7RFTQWP","vue-testing-best-practices","Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-testing-best-practices\u002FSKILL.md",[112,115],{"categoryNo":113,"categoryName":114,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[117,118,119,90,120,121,122,123,124,33,125,97,126,127,128,129,130,131,132],"vue testing best practices","testing best practices","vue","testing","testing patterns","js","e2e","vitest","component","test","mocking","for","utils","e2e testing","github","playwright",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":140,"publishedAt":43},"01M6MB8GK06M6GA4KVYNDV1BZP","vue-router-best-practices","Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002FSKILL.md",[139],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[90,119,141,142,143,97,144,145,125,131],"router","vue router best practices","route","navigation","lifecycle",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":43},"01M6MB8DQF21TZMQ9XC3745ERW","vue-pinia-best-practices","Pinia stores, state management patterns, store setup, and reactivity with stores.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-pinia-best-practices\u002FSKILL.md",[152],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[154,155,119,90,156,157,97,158,159,160,161,131],"vue pinia best practices","pinia","with","store","management","state","state management","setup",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":177,"publishedAt":43},"01M6MB8A7MC08747J9TV4GWQ9A","vue-options-api-best-practices","Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-options-api-best-practices\u002FSKILL.md",[168,169,172],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":170,"categoryName":171,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":173,"categoryName":174,"taxonomyType":175,"taxonomyTypeDesc":176},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[119,178,179,180,90,181,182,183,184,99,131,185],"options","vue options api best practices","api","methods","reference","only","context","style",{"skillNo":187,"name":188,"nameZh":6,"description":189,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":190,"categories":191,"keywords":193,"publishedAt":43},"01M6MB85ZTQC24Q04X49MM4YXN","vue-development-guides","A collection of best practices and tips for developing applications using Vue.js. This skill MUST be apply when developing, refactoring or reviewing Vue.js or Nuxt projects.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-development-guides\u002FSKILL.md",[192],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[194,119,195,196,131,197,198,128,199,200,201,122,98,202,203,90],"development","guides","vue development guides","tips","apply","project","nuxt","projects","collection","applications"]