Skill 资源库

AI Skill 资源库

把 Skill 的源码、资源快照、README、包体和安装信号放进一个可搜索、可筛选的公开目录。

personjakexiao无需 Key

frontend-core

使用TypeScript和TanStack Query构建React组件、页面、表单和状态管理。用于前端开发、组件创建、路由和数据获取。

download11deployed_codestar123
personjakexiao无需 Key

frontend-debugging

针对SvelteKit 2 + Svelte 5前端问题的系统化10阶段调试程序。当组件无法渲染、路由中断、运行时抛出错误或Encore客户端调用失败时使用。

download11deployed_codestar123
personjakexiao无需 Key

Frontend Components

根据Astro的以服务器优先架构,设计和构建可重用的UI组件,包括岛屿模式、合适的组件组合、TypeScript属性以及策略性的客户端激活。在创建或修改Astro组件、React/Vue/Svelte岛屿、布局组件或任何可重用UI元素时使用此技能。当处理.astro组件文件、框架组件文件(.jsx, .tsx, .vue, .svelte)、布局组件、页面组件、组件属性接口、插槽实现、客户端指令使…

download11deployed_codestar123
personjakexiao无需 Key

frontend-design-fix-react

通过在5个设计维度(版式、颜色、动态效果、空间构图、背景)上应用美学升级来修复通用React组件设计

download11deployed_codestar123
personjakexiao无需 Key

frontend-design-optimizer

通过深入研究找到最佳的UI/UX设计模式和架构。当用户要求“改进UI”、“优化UX”、“[功能]的最佳设计”或“现代UI模式”时使用。

download11deployed_codestar123
personjakexiao无需 Key

frontend-dev-guidelines

React/TypeScript应用程序的前端开发指南。包括Suspense、懒加载、useSuspenseQuery等现代模式,使用features目录进行文件组织,MUI v7样式,TanStack Router,性能优化,以及TypeScript最佳实践。在创建组件、页面、功能、获取数据、样式设计、路由或处理前端代码时使用。

download11deployed_codestar123
personjakexiao无需 Key

frontend-dev-guidelines

React/TypeScript应用程序的前端开发指南。包括Suspense、懒加载、useSuspenseQuery等现代模式,使用features目录进行文件组织,MUI v7样式,TanStack Router,性能优化,以及TypeScript最佳实践。在创建组件、页面、功能、获取数据、样式设计、路由或处理前端代码时使用。

download11deployed_codestar123
personjakexiao无需 Key

frontend-design-concept

创建具有高设计质量的独特生产级前端界面。当用户要求构建网页组件、页面或应用程序时使用此技能。生成的代码富有创意且精致,避免了通用的人工智能美学。

download11deployed_codestar123
personjakexiao无需 Key

frontend-debug

通过使用Chrome DevTools MCP的经验性浏览器观察来自行调试前端问题。此技能应在调试Web应用程序中的UI/UX问题、视觉错误、交互失败、控制台错误或网络问题时使用。提供与GitHub集成的系统化6阶段调试工作流程,包括自动验证和知识保留。

download11deployed_codestar123
personjakexiao无需 Key

frontend-design-standards

在生成React/TypeScript UI组件、表单、布局或页面时使用 - 防止通用的AI美学,强制执行可访问性、语义化的HTML、主题一致性、最小文本大小、正确的状态以及品牌差异化

download11deployed_codestar123
personjakexiao无需 Key

frontend-design-patterns

结合DDD和FSD模式的企业级React架构。在以下情况下使用:(1)设计或构建React应用程序时,(2)实现Index/Types/Styles组件模式时,(3)设置与React Query和Axios的Service/Hook 1:1映射时,(4)配置Zustand状态管理时,(5)应用TypeScript约定以维护可维护代码库时。触发因素包括架构决策、文件夹结构规划、数据层设计以及代码组织…

download11deployed_codestar123
personjakexiao无需 Key

frontend-dev-guidelines

React/TypeScript应用程序的前端开发指南。包括Suspense、懒加载、useSuspenseQuery等现代模式,使用features目录进行文件组织,MUI v7样式,TanStack Router,性能优化,以及TypeScript最佳实践。在创建组件、页面、功能、获取数据、样式设计、路由或处理前端代码时使用。

download11deployed_codestar123
personjakexiao无需 Key

frontend-design

创建具有高设计质量的独特生产级前端界面。当用户要求构建网页组件、页面或应用程序时,或者当他们提供截图/图片/设计以供复制或从中汲取灵感时,请使用此技能。对于截图输入,首先使用AI多模态分析提取设计指南,然后根据这些指南实现代码。生成的代码富有创意且经过精心打磨,避免了通用的AI美学。

download11deployed_codestar123
personjakexiao无需 Key

frontend-component-patterns

遵循已建立的设计模式(如复合组件、渲染属性、自定义钩子和高阶组件)构建可重用、可组合和可维护的React/Vue/Angular组件。在创建组件库、实现组件组合、构建可重用UI元素、设计prop API、管理组件状态模式、实现受控与非受控组件、创建复合组件、使用渲染属性或函数作为子元素、构建自定义钩子或建立组件架构标准时使用。

download11deployed_codestar123
personjakexiao无需 Key

frontend-design-fix-svelte

通过在5个设计维度(版式、颜色、动态效果、空间构图、背景)上应用美学升级来修复通用的Svelte组件设计

download11deployed_codestar123
personjakexiao无需 Key

Frontend CSS

根据作用域CSS模式、设计令牌、响应式断点和暗模式支持编写Tailwind CSS工具类和组件样式。在为组件设置样式、创建布局、实现设计系统或编写CSS/Tailwind类时使用此技能。当处理Astro组件样式块、Tailwind配置文件、全局CSS文件、CSS自定义属性和设计令牌、组件作用域样式、响应式断点和媒体查询、暗模式主题、CSS Grid和Flexbox布局、动画和过渡样式,或者Tail…

download11deployed_codestar123