[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FVFSE4JCT2247D8C1AJS7T":3,"skill-same:01M6FVFSE4JCT2247D8C1AJS7T":114},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":14,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":55,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6FVFSE4JCT2247D8C1AJS7T","frontend-dev-guidelines",null,"Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router...","reikiplanet\u002Fdaoskills","reikiplanet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96377599?v=4","01M6CVWCMD740YHQDK7E9QYBW4","Reiki Planet","01M6CVWCS4KXVA2CWFVJ43EAXK",0,"MIT","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"frontend dev","guidelines","dev","frontend dev guidelines","frontend","first","loading","feature","tanstack router","community","standards","frontend development","styling","router","applications","data","development","architecture","react","typescript","2026-11-10 10:12:30",false,"---\nname: frontend-dev-guidelines\ndescription: \"Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router...\"\nrisk: unknown\nsource: community\n---\n\n\n# Frontend Development Guidelines\n\n**(React · TypeScript · Suspense-First · Production-Grade)**\n\nYou are a **senior frontend engineer** operating under strict architectural and performance standards.\n\nYour goal is to build **scalable, predictable, and maintainable React applications** using:\n\n* Suspense-first data fetching\n* Feature-based code organization\n* Strict TypeScript discipline\n* Performance-safe defaults\n\nThis skill defines **how frontend code must be written**, not merely how it *can* be written.\n\n---\n\n## 1. Frontend Feasibility & Complexity Index (FFCI)\n\nBefore implementing a component, page, or feature, assess feasibility.\n\n### FFCI Dimensions (1–5)\n\n| Dimension             | Question                                                         |\n| --------------------- | ---------------------------------------------------------------- |\n| **Architectural Fit** | Does this align with feature-based structure and Suspense model? |\n| **Complexity Load**   | How complex is state, data, and interaction logic?               |\n| **Performance Risk**  | Does it introduce rendering, bundle, or CLS risk?                |\n| **Reusability**       | Can this be reused without modification?                         |\n| **Maintenance Cost**  | How hard will this be to reason about in 6 months?               |\n\n### Score Formula\n\n```\nFFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost)\n```\n\n**Range:** `-5 → +15`\n\n### Interpretation\n\n| FFCI      | Meaning    | Action            |\n| --------- | ---------- | ----------------- |\n| **10–15** | Excellent  | Proceed           |\n| **6–9**   | Acceptable | Proceed with care |\n| **3–5**   | Risky      | Simplify or split |\n| **≤ 2**   | Poor       | Redesign          |\n\n---\n\n## 2. Core Architectural Doctrine (Non-Negotiable)\n\n### 1. Suspense Is the Default\n\n* `useSuspenseQuery` is the **primary** data-fetching hook\n* No `isLoading` conditionals\n* No early-return spinners\n\n### 2. Lazy Load Anything Heavy\n\n* Routes\n* Feature entry components\n* Data grids, charts, editors\n* Large dialogs or modals\n\n### 3. Feature-Based Organization\n\n* Domain logic lives in `features\u002F`\n* Reusable primitives live in `components\u002F`\n* Cross-feature coupling is forbidden\n\n### 4. TypeScript Is Strict\n\n* No `any`\n* Explicit return types\n* `import type` always\n* Types are first-class design artifacts\n\n---\n\n## 3. When to Use This Skill\n\nUse **frontend-dev-guidelines** when:\n\n* Creating components or pages\n* Adding new features\n* Fetching or mutating data\n* Setting up routing\n* Styling with MUI\n* Addressing performance issues\n* Reviewing or refactoring frontend code\n\n---\n\n## 4. Quick Start Checklists\n\n### New Component Checklist\n\n* [ ] `React.FC\u003CProps>` with explicit props interface\n* [ ] Lazy loaded if non-trivial\n* [ ] Wrapped in `\u003CSuspenseLoader>`\n* [ ] Uses `useSuspenseQuery` for data\n* [ ] No early returns\n* [ ] Handlers wrapped in `useCallback`\n* [ ] Styles inline if \u003C100 lines\n* [ ] Default export at bottom\n* [ ] Uses `useMuiSnackbar` for feedback\n\n---\n\n### New Feature Checklist\n\n* [ ] Create `features\u002F{feature-name}\u002F`\n* [ ] Subdirs: `api\u002F`, `components\u002F`, `hooks\u002F`, `helpers\u002F`, `types\u002F`\n* [ ] API layer isolated in `api\u002F`\n* [ ] Public exports via `index.ts`\n* [ ] Feature entry lazy loaded\n* [ ] Suspense boundary at feature level\n* [ ] Route defined under `routes\u002F`\n\n---\n\n## 5. Import Aliases (Required)\n\n| Alias         | Path             |\n| ------------- | ---------------- |\n| `@\u002F`          | `src\u002F`           |\n| `~types`      | `src\u002Ftypes`      |\n| `~components` | `src\u002Fcomponents` |\n| `~features`   | `src\u002Ffeatures`   |\n\nAliases must be used consistently. Relative imports beyond one level are discouraged.\n\n---\n\n## 6. Component Standards\n\n### Required Structure Order\n\n1. Types \u002F Props\n2. Hooks\n3. Derived values (`useMemo`)\n4. Handlers (`useCallback`)\n5. Render\n6. Default export\n\n### Lazy Loading Pattern\n\n```ts\nconst HeavyComponent = React.lazy(() => import('.\u002FHeavyComponent'));\n```\n\nAlways wrapped in `\u003CSuspenseLoader>`.\n\n---\n\n## 7. Data Fetching Doctrine\n\n### Primary Pattern\n\n* `useSuspenseQuery`\n* Cache-first\n* Typed responses\n\n### Forbidden Patterns\n\n❌ `isLoading`\n❌ manual spinners\n❌ fetch logic inside components\n❌ API calls without feature API layer\n\n### API Layer Rules\n\n* One API file per feature\n* No inline axios calls\n* No `\u002Fapi\u002F` prefix in routes\n\n---\n\n## 8. Routing Standards (TanStack Router)\n\n* Folder-based routing only\n* Lazy load route components\n* Breadcrumb metadata via loaders\n\n```ts\nexport const Route = createFileRoute('\u002Fmy-route\u002F')({\n  component: MyPage,\n  loader: () => ({ crumb: 'My Route' }),\n});\n```\n\n---\n\n## 9. Styling Standards (MUI v7)\n\n### Inline vs Separate\n\n* `\u003C100 lines`: inline `sx`\n* `>100 lines`: `{Component}.styles.ts`\n\n### Grid Syntax (v7 Only)\n\n```tsx\n\u003CGrid size={{ xs: 12, md: 6 }} \u002F> \u002F\u002F ✅\n\u003CGrid xs={12} md={6} \u002F>          \u002F\u002F ❌\n```\n\nTheme access must always be type-safe.\n\n---\n\n## 10. Loading & Error Handling\n\n### Absolute Rule\n\n❌ Never return early loaders\n✅ Always rely on Suspense boundaries\n\n### User Feedback\n\n* `useMuiSnackbar` only\n* No third-party toast libraries\n\n---\n\n## 11. Performance Defaults\n\n* `useMemo` for expensive derivations\n* `useCallback` for passed handlers\n* `React.memo` for heavy pure components\n* Debounce search (300–500ms)\n* Cleanup effects to avoid leaks\n\nPerformance regressions are bugs.\n\n---\n\n## 12. TypeScript Standards\n\n* Strict mode enabled\n* No implicit `any`\n* Explicit return types\n* JSDoc on public interfaces\n* Types colocated with feature\n\n---\n\n## 13. Canonical File Structure\n\n```\nsrc\u002F\n  features\u002F\n    my-feature\u002F\n      api\u002F\n      components\u002F\n      hooks\u002F\n      helpers\u002F\n      types\u002F\n      index.ts\n\n  components\u002F\n    SuspenseLoader\u002F\n    CustomAppBar\u002F\n\n  routes\u002F\n    my-route\u002F\n      index.tsx\n```\n\n---\n\n## 14. Canonical Component Template\n\n```ts\nimport React, { useState, useCallback } from 'react';\nimport { Box, Paper } from '@mui\u002Fmaterial';\nimport { useSuspenseQuery } from '@tanstack\u002Freact-query';\nimport { featureApi } from '..\u002Fapi\u002FfeatureApi';\nimport type { FeatureData } from '~types\u002Ffeature';\n\ninterface MyComponentProps {\n  id: number;\n  onAction?: () => void;\n}\n\nexport const MyComponent: React.FC\u003CMyComponentProps> = ({ id, onAction }) => {\n  const [state, setState] = useState('');\n\n  const { data } = useSuspenseQuery\u003CFeatureData>({\n    queryKey: ['feature', id],\n    queryFn: () => featureApi.getFeature(id),\n  });\n\n  const handleAction = useCallback(() => {\n    setState('updated');\n    onAction?.();\n  }, [onAction]);\n\n  return (\n    \u003CBox sx={{ p: 2 }}>\n      \u003CPaper sx={{ p: 3 }}>\n        {\u002F* Content *\u002F}\n      \u003C\u002FPaper>\n    \u003C\u002FBox>\n  );\n};\n\nexport default MyComponent;\n```\n\n---\n\n## 15. Anti-Patterns (Immediate Rejection)\n\n❌ Early loading returns\n❌ Feature logic in `components\u002F`\n❌ Shared state via prop drilling instead of hooks\n❌ Inline API calls\n❌ Untyped responses\n❌ Multiple responsibilities in one component\n\n---\n\n## 16. Integration With Other Skills\n\n* **frontend-design** → Visual systems & aesthetics\n* **page-cro** → Layout hierarchy & conversion logic\n* **analytics-tracking** → Event instrumentation\n* **backend-dev-guidelines** → API contract alignment\n* **error-tracking** → Runtime observability\n\n---\n\n## 17. Operator Validation Checklist\n\nBefore finalizing code:\n\n* [ ] FFCI ≥ 6\n* [ ] Suspense used correctly\n* [ ] Feature boundaries respected\n* [ ] No early returns\n* [ ] Types explicit and correct\n* [ ] Lazy loading applied\n* [ ] Performance safe\n\n---\n\n## 18. Skill Status\n\n**Status:** Stable, opinionated, and enforceable\n**Intended Use:** Production React codebases with long-term maintenance horizons\n\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n","# Frontend Development Guidelines\n\n**(React · TypeScript · Suspense-First · Production-Grade)**\n\nYou are a **senior frontend engineer** operating under strict architectural and performance standards.\n\nYour goal is to build **scalable, predictable, and maintainable React applications** using:\n\n* Suspense-first data fetching\n* Feature-based code organization\n* Strict TypeScript discipline\n* Performance-safe defaults\n\nThis skill defines **how frontend code must be written**, not merely how it *can* be written.\n\n---\n\n## 1. Frontend Feasibility & Complexity Index (FFCI)\n\nBefore implementing a component, page, or feature, assess feasibility.\n\n### FFCI Dimensions (1–5)\n\n| Dimension             | Question                                                         |\n| --------------------- | ---------------------------------------------------------------- |\n| **Architectural Fit** | Does this align with feature-based structure and Suspense model? |\n| **Complexity Load**   | How complex is state, data, and interaction logic?               |\n| **Performance Risk**  | Does it introduce rendering, bundle, or CLS risk?                |\n| **Reusability**       | Can this be reused without modification?                         |\n| **Maintenance Cost**  | How hard will this be to reason about in 6 months?               |\n\n### Score Formula\n\n```\nFFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost)\n```\n\n**Range:** `-5 → +15`\n\n### Interpretation\n\n| FFCI      | Meaning    | Action            |\n| --------- | ---------- | ----------------- |\n| **10–15** | Excellent  | Proceed           |\n| **6–9**   | Acceptable | Proceed with care |\n| **3–5**   | Risky      | Simplify or split |\n| **≤ 2**   | Poor       | Redesign          |\n\n---\n\n## 2. Core Architectural Doctrine (Non-Negotiable)\n\n### 1. Suspense Is the Default\n\n* `useSuspenseQuery` is the **primary** data-fetching hook\n* No `isLoading` conditionals\n* No early-return spinners\n\n### 2. Lazy Load Anything Heavy\n\n* Routes\n* Feature entry components\n* Data grids, charts, editors\n* Large dialogs or modals\n\n### 3. Feature-Based Organization\n\n* Domain logic lives in `features\u002F`\n* Reusable primitives live in `components\u002F`\n* Cross-feature coupling is forbidden\n\n### 4. TypeScript Is Strict\n\n* No `any`\n* Explicit return types\n* `import type` always\n* Types are first-class design artifacts\n\n---\n\n## 3. When to Use This Skill\n\nUse **frontend-dev-guidelines** when:\n\n* Creating components or pages\n* Adding new features\n* Fetching or mutating data\n* Setting up routing\n* Styling with MUI\n* Addressing performance issues\n* Reviewing or refactoring frontend code\n\n---\n\n## 4. Quick Start Checklists\n\n### New Component Checklist\n\n* [ ] `React.FC\u003CProps>` with explicit props interface\n* [ ] Lazy loaded if non-trivial\n* [ ] Wrapped in `\u003CSuspenseLoader>`\n* [ ] Uses `useSuspenseQuery` for data\n* [ ] No early returns\n* [ ] Handlers wrapped in `useCallback`\n* [ ] Styles inline if \u003C100 lines\n* [ ] Default export at bottom\n* [ ] Uses `useMuiSnackbar` for feedback\n\n---\n\n### New Feature Checklist\n\n* [ ] Create `features\u002F{feature-name}\u002F`\n* [ ] Subdirs: `api\u002F`, `components\u002F`, `hooks\u002F`, `helpers\u002F`, `types\u002F`\n* [ ] API layer isolated in `api\u002F`\n* [ ] Public exports via `index.ts`\n* [ ] Feature entry lazy loaded\n* [ ] Suspense boundary at feature level\n* [ ] Route defined under `routes\u002F`\n\n---\n\n## 5. Import Aliases (Required)\n\n| Alias         | Path             |\n| ------------- | ---------------- |\n| `@\u002F`          | `src\u002F`           |\n| `~types`      | `src\u002Ftypes`      |\n| `~components` | `src\u002Fcomponents` |\n| `~features`   | `src\u002Ffeatures`   |\n\nAliases must be used consistently. Relative imports beyond one level are discouraged.\n\n---\n\n## 6. Component Standards\n\n### Required Structure Order\n\n1. Types \u002F Props\n2. Hooks\n3. Derived values (`useMemo`)\n4. Handlers (`useCallback`)\n5. Render\n6. Default export\n\n### Lazy Loading Pattern\n\n```ts\nconst HeavyComponent = React.lazy(() => import('.\u002FHeavyComponent'));\n```\n\nAlways wrapped in `\u003CSuspenseLoader>`.\n\n---\n\n## 7. Data Fetching Doctrine\n\n### Primary Pattern\n\n* `useSuspenseQuery`\n* Cache-first\n* Typed responses\n\n### Forbidden Patterns\n\n❌ `isLoading`\n❌ manual spinners\n❌ fetch logic inside components\n❌ API calls without feature API layer\n\n### API Layer Rules\n\n* One API file per feature\n* No inline axios calls\n* No `\u002Fapi\u002F` prefix in routes\n\n---\n\n## 8. Routing Standards (TanStack Router)\n\n* Folder-based routing only\n* Lazy load route components\n* Breadcrumb metadata via loaders\n\n```ts\nexport const Route = createFileRoute('\u002Fmy-route\u002F')({\n  component: MyPage,\n  loader: () => ({ crumb: 'My Route' }),\n});\n```\n\n---\n\n## 9. Styling Standards (MUI v7)\n\n### Inline vs Separate\n\n* `\u003C100 lines`: inline `sx`\n* `>100 lines`: `{Component}.styles.ts`\n\n### Grid Syntax (v7 Only)\n\n```tsx\n\u003CGrid size={{ xs: 12, md: 6 }} \u002F> \u002F\u002F ✅\n\u003CGrid xs={12} md={6} \u002F>          \u002F\u002F ❌\n```\n\nTheme access must always be type-safe.\n\n---\n\n## 10. Loading & Error Handling\n\n### Absolute Rule\n\n❌ Never return early loaders\n✅ Always rely on Suspense boundaries\n\n### User Feedback\n\n* `useMuiSnackbar` only\n* No third-party toast libraries\n\n---\n\n## 11. Performance Defaults\n\n* `useMemo` for expensive derivations\n* `useCallback` for passed handlers\n* `React.memo` for heavy pure components\n* Debounce search (300–500ms)\n* Cleanup effects to avoid leaks\n\nPerformance regressions are bugs.\n\n---\n\n## 12. TypeScript Standards\n\n* Strict mode enabled\n* No implicit `any`\n* Explicit return types\n* JSDoc on public interfaces\n* Types colocated with feature\n\n---\n\n## 13. Canonical File Structure\n\n```\nsrc\u002F\n  features\u002F\n    my-feature\u002F\n      api\u002F\n      components\u002F\n      hooks\u002F\n      helpers\u002F\n      types\u002F\n      index.ts\n\n  components\u002F\n    SuspenseLoader\u002F\n    CustomAppBar\u002F\n\n  routes\u002F\n    my-route\u002F\n      index.tsx\n```\n\n---\n\n## 14. Canonical Component Template\n\n```ts\nimport React, { useState, useCallback } from 'react';\nimport { Box, Paper } from '@mui\u002Fmaterial';\nimport { useSuspenseQuery } from '@tanstack\u002Freact-query';\nimport { featureApi } from '..\u002Fapi\u002FfeatureApi';\nimport type { FeatureData } from '~types\u002Ffeature';\n\ninterface MyComponentProps {\n  id: number;\n  onAction?: () => void;\n}\n\nexport const MyComponent: React.FC\u003CMyComponentProps> = ({ id, onAction }) => {\n  const [state, setState] = useState('');\n\n  const { data } = useSuspenseQuery\u003CFeatureData>({\n    queryKey: ['feature', id],\n    queryFn: () => featureApi.getFeature(id),\n  });\n\n  const handleAction = useCallback(() => {\n    setState('updated');\n    onAction?.();\n  }, [onAction]);\n\n  return (\n    \u003CBox sx={{ p: 2 }}>\n      \u003CPaper sx={{ p: 3 }}>\n        {\u002F* Content *\u002F}\n      \u003C\u002FPaper>\n    \u003C\u002FBox>\n  );\n};\n\nexport default MyComponent;\n```\n\n---\n\n## 15. Anti-Patterns (Immediate Rejection)\n\n❌ Early loading returns\n❌ Feature logic in `components\u002F`\n❌ Shared state via prop drilling instead of hooks\n❌ Inline API calls\n❌ Untyped responses\n❌ Multiple responsibilities in one component\n\n---\n\n## 16. Integration With Other Skills\n\n* **frontend-design** → Visual systems & aesthetics\n* **page-cro** → Layout hierarchy & conversion logic\n* **analytics-tracking** → Event instrumentation\n* **backend-dev-guidelines** → API contract alignment\n* **error-tracking** → Runtime observability\n\n---\n\n## 17. Operator Validation Checklist\n\nBefore finalizing code:\n\n* [ ] FFCI ≥ 6\n* [ ] Suspense used correctly\n* [ ] Feature boundaries respected\n* [ ] No early returns\n* [ ] Types explicit and correct\n* [ ] Lazy loading applied\n* [ ] Performance safe\n\n---\n\n## 18. Skill Status\n\n**Status:** Stable, opinionated, and enforceable\n**Intended Use:** Production React codebases with long-term maintenance horizons\n\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":5,"risk":49,"source":33,"description":7},"unknown","master","dff58085da947e81e8418c922055644bf0082b1b","development\u002Ffrontend-dev-guidelines","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills","https:\u002F\u002Fgithub.com\u002Freikiplanet","https:\u002F\u002Fwww.reiki-planet.com","Reiki Planet Game","2026-03-29 06:02:29",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add reikiplanet\u002Fdaoskills --skill frontend-dev-guidelines",{"tool":64,"command":65},"bunx","bunx skills add reikiplanet\u002Fdaoskills --skill frontend-dev-guidelines",{"tool":67,"command":68},"pnpm","pnpm dlx skills add reikiplanet\u002Fdaoskills --skill frontend-dev-guidelines","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002FSKILL.md",true,[72,78,82,86,90,94,98,102,106,110],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"resources\u002Fcommon-patterns.md","REFERENCE","参考文档",8369,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Fcommon-patterns.md",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"resources\u002Fcomplete-examples.md",24524,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Fcomplete-examples.md",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"resources\u002Fcomponent-patterns.md",10804,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Fcomponent-patterns.md",{"path":87,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":88,"sourceHtmlUrl":89},"resources\u002Fdata-fetching.md",19817,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Fdata-fetching.md",{"path":91,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":92,"sourceHtmlUrl":93},"resources\u002Ffile-organization.md",11871,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Ffile-organization.md",{"path":95,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":96,"sourceHtmlUrl":97},"resources\u002Floading-and-error-states.md",12036,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Floading-and-error-states.md",{"path":99,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":100,"sourceHtmlUrl":101},"resources\u002Fperformance.md",9639,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Fperformance.md",{"path":103,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":104,"sourceHtmlUrl":105},"resources\u002Frouting-guide.md",7193,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Frouting-guide.md",{"path":107,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":108,"sourceHtmlUrl":109},"resources\u002Fstyling-guide.md",7905,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Fstyling-guide.md",{"path":111,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":112,"sourceHtmlUrl":113},"resources\u002Ftypescript-standards.md",8439,"https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fdevelopment\u002Ffrontend-dev-guidelines\u002Fresources\u002Ftypescript-standards.md",[115,140,152,166,186,209],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":44},"01M6G614JTEQJHPT8AKK3YQ18S","web-games","Web browser game development principles. Framework selection, WebGPU, optimization, PWA.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fweb-games\u002FSKILL.md",[],[122,123,124,125,126,127,33,128,129,130,131,132,133,134,135,136,137,138,40,139],"games","web games","web","grep","principles","selection","framework selection","edit","write","read","pwa","game","web browser","game development","Optimization","framework","browser","webgpu",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":146,"publishedAt":44},"01M6G611H2YGV0GZFP90D38ZMJ","vr-ar","VR\u002FAR development principles. Comfort, interaction, performance requirements.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fvr-ar\u002FSKILL.md",[],[147,148,40,149,150,33,129,130,131,125,151,126],"ar","vr ar","interaction","requirements","performance",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":158,"publishedAt":44},"01M6G60XNMHAMV1SV0EJ1CX0AY","templates","Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Ftemplates\u002FSKILL.md",[],[154,159,160,161,162,163,33,164,131,165,38,125],"project scaffolding","From Scratch","tech","project","scaffolding","use","projects",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":172,"publishedAt":44},"01M6G60T0GATMK3Q5H8GDC1Z8S","wcag-audit-patterns","Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fwcag-audit-patterns\u002FSKILL.md",[],[173,174,175,176,177,33,178,179,180,181,164,182,183,184,185],"wcag audit patterns","wcag audit","patterns","WCAG","audit","manual","with","automated testing","guidance","remediation","verification","accessibility","testing",{"skillNo":187,"name":188,"nameZh":6,"description":189,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":190,"categories":191,"keywords":192,"publishedAt":44},"01M6G60PMCHW1FRZ63F931QK3R","vulnerability-scanner","Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fvulnerability-scanner\u002FSKILL.md",[],[193,194,195,196,197,198,199,200,33,131,125,201,126,202,203,204,205,206,207,208],"scanner","vulnerability scanner","vulnerability","prioritization","2025","mapping","chain","supply chain","Bash","analysis","risk","owasp","supply chain security","security","supply","advanced",{"skillNo":210,"name":211,"nameZh":6,"description":212,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":213,"categories":214,"keywords":215,"publishedAt":44},"01M6G60JZBB8DK0W3DSG1WNMZK","threat-modeling-expert","Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement extraction. Use for security architecture r...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fthreat-modeling-expert\u002FSKILL.md",[],[216,217,218,219,220,221,222,41,206,164,223,224,225,33,226,227,228,203,229,230],"modeling","threat modeling expert","threat modeling","expert","threat","risk assessment","architecture review","security architecture review","trees","security architecture","security requirement extraction","assessment","extraction","review","stride"]