SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场discover-frontend

discover-frontend

前端与建站

查看项目

更新于 10-15 15:47

技能介绍

用途

discover-frontend 是一个前端开发技能自动发现网关。当 Claude Code 检测到用户正在处理前端相关工作时，该技能会自动激活，帮助按需加载对应的细分技能文档，避免一次性载入全部内容。

激活条件

该技能在以下场景自动激活：

  • React 组件开发
  • Next.js 应用与 App Router
  • 状态管理（Context、Zustand、Redux）
  • 数据获取（SWR、React Query、Server Actions）
  • 表单处理与校验
  • Web 无障碍（WCAG、ARIA）
  • 前端性能优化
  • SEO 与元数据
  • UI/UX 设计实现
  • 终端用户界面（TUI）、Bubble Tea、Ratatui、ncurses、文本界面

可用技能

Frontend 类别包含 2 个子类共 16 个技能（另含 elegant-design）：

Frontend（11 个技能）：

  • react-component-patterns：组件设计、组合、hooks、性能
  • nextjs-app-router：Next.js 14+ App Router、Server Components、路由
  • react-state-management：Context、Zustand、Redux Toolkit 模式
  • react-data-fetching：SWR、React Query、Server Actions、数据模式
  • react-form-handling：React Hook Form、Zod 校验、表单模式
  • web-accessibility：WCAG 2.1 AA 合规、ARIA、键盘导航
  • frontend-performance：打包优化、Core Web Vitals、代码分割
  • nextjs-seo：Next.js SEO、Metadata API、结构化数据
  • web-workers：Web Workers API、消息传递、计算卸载
  • browser-concurrency：Service Workers、SharedWorkers、Worklets、PWA
  • elegant-design/SKILL.md：高质量无障碍界面（独立 Agent Skill）

TUI（5 个技能）：见 ../tui/INDEX.md

使用方式

  • 自动激活：当 Claude Code 检测到前端工作时自动加载
  • 浏览技能：运行 Read ../frontend/INDEX.md 查看完整类别概览
  • 加载具体技能：使用文档中给出的 bash 命令加载单个技能
  • 遵循工作流：按推荐顺序处理常见模式
  • elegant-design：注意它是独立的 Agent Skill，会在 UI 设计工作时自动激活

常见工作流

新建 Next.js 应用：App Router → 组件 → 数据获取

  • Read ../frontend/nextjs-app-router.md（设置路由、布局）
  • Read ../frontend/react-component-patterns.md（构建组件）
  • Read ../frontend/react-data-fetching.md（获取数据）

优雅 UI 设计：设计系统 → 组件 → 无障碍

  • Read ../frontend/react-component-patterns.md
  • Read ../frontend/web-accessibility.md

表单实现：表单处理 → 状态管理

  • Read ../frontend/react-form-handling.md
  • Read ../frontend/react-state-management.md

生产优化：性能 → 无障碍 → SEO

  • Read ../frontend/frontend-performance.md
  • Read ../frontend/web-accessibility.md
  • Read ../frontend/nextjs-seo.md

CPU 密集型功能与 PWA：Workers → 并发 → 性能

  • Read ../frontend/web-workers.md
  • Read ../frontend/browser-concurrency.md
  • Read ../frontend/frontend-performance.md

技能选择指引

  • React 组件模式：组件架构与组合、自定义 hooks、性能优化（memo、useMemo、useCallback）、设计模式（复合组件、render props、HOC）
  • Next.js App Router：Server Components 与 Client Components、路由与布局、数据获取模式、流式与 Suspense、路由处理器与 API 路由
  • 状态管理：Context 与外部状态库的取舍、Zustand 用于简单全局状态、Redux Toolkit 用于复杂状态、服务端状态与客户端状态
  • 数据获取：SWR 用于客户端获取、React Query（TanStack Query）用于高级模式、Next.js Server Actions、数据变更模式、缓存策略
  • 表单：React Hook Form 提升性能、Zod 校验、表单状态管理、错误处理、文件上传
  • 无障碍：WCAG 2.1 AA 合规、ARIA 属性、键盘导航、屏幕阅读器支持、颜色对比与焦点管理
  • 性能：打包体积优化、代码分割与懒加载、Core Web Vitals、图片优化、字体优化、运行时性能
  • SEO：Next.js Metadata API、Open Graph 与 Twitter 卡片、结构化数据（JSON-LD）、sitemap 与 robots.txt、动态元数据
  • Web Workers：卸载重计算、Web Workers API 与消息传递、Transferable objects 零拷贝、React 自定义 hooks 集成、Worker 池并行处理、TypeScript 类型安全
  • 浏览器并发：Service Workers 离线支持与 PWA、SharedWorkers 跨标签状态、Audio/Paint/Animation Worklets、后台同步与推送通知、缓存策略、BroadcastChannel 跨标签消息

与其他技能的集成

前端技能常与以下技能组合：

  • API 技能（discover-api）：消费 REST API、GraphQL 客户端集成、UI 中的 API 错误处理、认证流程
  • 测试技能（discover-testing）：组件测试、Playwright E2E 测试、视觉回归测试、无障碍测试
  • 设计（elegant-design Agent Skill）：shadcn/ui 组件、无障碍设计模式、聊天/终端/代码 UI、流式界面、设计系统
  • 数据库技能（discover-database）：Server Actions 与数据库查询、Server Components 中的 ORM 集成、实时数据更新
  • 部署技能（discover-deployment）：Vercel 部署、Netlify 部署、性能监控、CDN 配置

渐进式加载

该网关技能支持渐进式加载：

  • 第 1 层：网关自动加载
  • 第 2 层：加载类别 INDEX.md（约 4K tokens）获取完整概览
  • 第 3 层：按需加载具体技能（每个约 3-4K tokens）

总上下文：2K + 4K + 技能 = 6-12K tokens，而加载整个索引需 25K+。

快速开始示例

  • “用 App Router 构建 Next.js 应用”：Read ../frontend/nextjs-app-router.md
  • “创建可复用 React 组件”：Read ../frontend/react-component-patterns.md
  • “实现全局状态管理”：Read ../frontend/react-state-management.md
  • “构建带校验的表单”：Read ../frontend/react-form-handling.md
  • “优化应用性能”：Read ../frontend/frontend-performance.md
  • “让应用可访问”：Read ../frontend/web-accessibility.md
  • “改进 SEO”：Read ../frontend/nextjs-seo.md
  • “卸载重计算”：Read ../frontend/web-workers.md
  • “构建支持离线的 PWA”：Read ../frontend/browser-concurrency.md

选型决策

React（Vite）适用：构建 SPA 或客户端为主的应用、不需要 SSR 或 SSG、希望完全控制路由、构建组件库。

Next.js 适用：需要 SEO（服务端渲染）、希望基于文件的路由、需要 API 路由、构建全栈应用、希望开箱即用的最佳性能。

状态管理决策：

  • 组件状态（useState）：状态局限于组件、无需共享的简单状态
  • Context：在少量组件间共享状态、主题/认证/用户偏好、不频繁更新
  • Zustand：需要全局状态、希望简单 API、状态更新适中
  • Redux Toolkit：复杂状态逻辑、需要中间件（sagas、thunks）、大型团队已有既定模式、需要时间旅行调试

数据获取决策：

  • Server Components（Next.js App Router）：Next.js 14+ 默认选择、服务端获取零客户端 JS、直接访问数据库
  • Server Actions（Next.js）：用于变更与表单处理、渐进增强、TypeScript 类型安全
  • SWR：客户端数据获取、内置缓存、乐观更新、关注用户体验
  • React Query：高级缓存策略、复杂数据依赖、离线支持、调试 DevTools

使用说明

  • 自动激活：当 Claude Code 检测到前端工作时自动加载
  • 浏览技能：运行 Read ../frontend/INDEX.md 查看完整类别概览
  • 加载具体技能：使用上述 bash 命令加载单个技能
  • 遵循工作流：按推荐顺序处理常见模式
  • elegant-design：它是独立的 Agent Skill，会在 UI 设计工作时自动激活

下一步：运行 Read ../frontend/INDEX.md 查看完整类别详情，或使用上述 bash 命令加载具体技能。