discover-frontend

前端技能发现

自动提供对全面前端开发技能的访问。

此技能的激活时机

在处理以下内容时，此技能会自动激活：

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

可用技能

快速参考

Frontend 类别包含 2 个子类别中的 16 项技能（另有 elegant-design）：

Frontend（11 项技能）：

1. react-component-patterns - 组件设计、组合、hooks、性能
2. nextjs-app-router - Next.js 14+ App Router、Server Components、路由
3. react-state-management - Context、Zustand、Redux Toolkit 模式
4. react-data-fetching - SWR、React Query、Server Actions、数据模式
5. react-form-handling - React Hook Form、Zod 验证、表单模式
6. web-accessibility - WCAG 2.1 AA 合规性、ARIA、键盘导航
7. frontend-performance - Bundle 优化、Core Web Vitals、代码拆分
8. nextjs-seo - 使用 Next.js 实现 SEO、元数据 API、结构化数据
9. web-workers - Web Workers API、消息传递、计算卸载
10. browser-concurrency - Service Workers、SharedWorkers、Worklets、PWA
11. elegant-design/SKILL.md - 世界级无障碍界面（独立的 Agent Skill）

**TUI（5 项技能）：**请参阅 ../tui/INDEX.md

加载完整的类别详情

读取 ../frontend/INDEX.md 读取 ../tui/INDEX.md

常见工作流

新建 Next.js 应用

顺序：App Router → Components → Data Fetching

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

优雅的 UI 设计

顺序：设计系统 → Components → 无障碍

注意：elegant-design 会作为独立的 Agent Skill 自动激活

用于以设计为重点的工作（shadcn/ui、无障碍界面等）

读取 ../frontend/react-component-patterns.md 读取 ../frontend/web-accessibility.md

表单实现

顺序：表单处理 → 状态管理

读取 ../frontend/react-form-handling.md # 构建表单 读取 ../frontend/react-state-management.md # 管理表单状态

生产环境优化

顺序：性能 → 无障碍 → SEO

读取 ../frontend/frontend-performance.md # 优化 bundle 读取 ../frontend/web-accessibility.md # 确保无障碍 读取 ../frontend/nextjs-seo.md # 优化 SEO

CPU 密集型功能和 PWA

顺序：Workers → 并发 → 性能

读取 ../frontend/web-workers.md # 卸载繁重计算 读取 ../frontend/browser-concurrency.md # Service Workers、离线支持 读取 ../frontend/frontend-performance.md # 优化整体性能

技能选择指南

React 组件模式 → react-component-patterns.md：

• 组件架构与组合
• 自定义 Hook
• 性能优化（memo、useMemo、useCallback）
• 设计模式（复合组件、渲染属性、高阶组件）

Next.js App Router → nextjs-app-router.md：

• 服务端组件与客户端组件
• 路由与布局
• 数据获取模式
• 流式传输与 Suspense
• 路由处理程序与 API 路由

状态管理 → react-state-management.md：

• 何时使用 Context，何时使用外部状态库
• 使用 Zustand 管理简单的全局状态
• 使用 Redux Toolkit 管理复杂状态
• 服务端状态与客户端状态

数据获取 → react-data-fetching.md：

• 使用 SWR 在客户端获取数据
• React Query（TanStack Query）的高级模式
• Next.js Server Actions
• 数据变更模式
• 缓存策略

表单 → react-form-handling.md：

• 使用 React Hook Form 提升性能
• 使用 Zod 进行验证
• 表单状态管理
• 错误处理
• 文件上传

无障碍访问 → web-accessibility.md：

• 符合 WCAG 2.1 AA 标准
• ARIA 属性
• 键盘导航
• 屏幕阅读器支持
• 色彩对比度与焦点管理

性能 → frontend-performance.md：

• 优化打包体积
• 代码拆分与延迟加载
• Core Web Vitals
• 图片优化
• 字体优化
• 运行时性能

SEO → nextjs-seo.md：

• Next.js Metadata API
• Open Graph 和 Twitter 卡片
• 结构化数据（JSON-LD）
• Sitemap 和 robots.txt
• 动态元数据

Web Workers → web-workers.md：

• 将繁重计算移出主线程
• Web Workers API 与消息传递
• 使用可转移对象实现零拷贝
• 通过自定义 Hook 集成 React
• 用于并行处理的 Worker 池
• TypeScript 类型安全

浏览器并发 → browser-concurrency.md：

• 使用 Service Worker 支持离线功能和 PWA
• 使用 SharedWorker 实现跨标签页状态共享
• Audio/Paint/Animation Worklet
• 后台同步与推送通知
• 缓存策略
• 使用 BroadcastChannel 进行跨标签页消息传递

与其他技能集成

前端技能通常会与以下技能结合使用：

API 技能（discover-api）：

• 调用 REST API
• GraphQL 客户端集成
• UI 中的 API 错误处理
• 身份验证流程

测试技能（discover-testing）：

• 组件测试
• 使用 Playwright 进行端到端测试
• 视觉回归测试
• 无障碍测试

设计（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+ tokens。

快速入门示例

“构建一个使用 App Router 的 Next.js 应用”： 阅读 ../frontend/nextjs-app-router.md

“创建可复用的 React 组件”： 阅读 ../frontend/react-component-patterns.md

“实现全局状态管理”： 阅读 ../frontend/react-state-management.md

“构建带验证的表单”： 阅读 ../frontend/react-form-handling.md

“优化我的应用性能”： 阅读 ../frontend/frontend-performance.md

“让我的应用具备无障碍访问能力”： 阅读 ../frontend/web-accessibility.md

“改善 SEO”： 阅读 ../frontend/nextjs-seo.md

“将繁重计算移出主线程”： 阅读 ../frontend/web-workers.md

“构建支持离线功能的 PWA”： 阅读 ../frontend/browser-concurrency.md

React 与 Next.js 的选择

在以下情况下使用 React（Vite）：

• 构建 SPA 或以客户端为主的应用
• 不需要 SSR 或 SSG
• 希望完全掌控路由
• 构建组件库

在以下情况下使用 Next.js：

• 需要 SEO（服务器端渲染）
• 希望使用基于文件的路由
• 需要 API 路由
• 构建全栈应用
• 希望开箱即获得最佳性能

状态管理的选择

在以下情况下使用组件状态（useState）：

• 状态仅在组件内部使用
• 状态简单，无需共享

在以下情况下使用 Context：

• 在少数几个组件间共享状态
• 主题、身份验证或用户偏好设置
• 更新不频繁

在以下情况下使用 Zustand：

• 需要全局状态
• 希望使用简单的 API
• 状态更新适中

在以下情况下使用 Redux Toolkit：

• 状态逻辑复杂
• 需要中间件（sagas、thunks）
• 团队规模较大，且已有成熟模式
• 需要时间旅行调试

如需详细指南： 阅读 ../frontend/react-state-management.md

数据获取的选择

服务器组件（Next.js App Router）：

• Next.js 14+ 的默认选择
• 在服务器上获取数据，客户端 JS 为零
• 直接访问数据库

服务器操作（Next.js）：

• 用于变更和表单处理
• 渐进式增强
• 使用 TypeScript 实现类型安全

SWR：

• 客户端数据获取
• 内置缓存
• 乐观更新
• 注重用户体验

React Query：

• 高级缓存策略
• 复杂的数据依赖关系
• 离线支持
• 用于调试的 DevTools

如需了解详细模式： 阅读 ../frontend/react-data-fetching.md

使用说明

1. 自动激活：Claude Code 检测到前端工作时，此技能会自动加载
2. 浏览技能：运行 Read ../frontend/INDEX.md 查看完整的分类概览
3. 加载特定技能：使用上方的 bash 命令加载单个技能
4. 遵循工作流：针对常见模式使用推荐的步骤顺序
5. elegant-design：请注意，elegant-design 是一个独立的 Agent Skill，会在 UI 设计工作中自动激活

后续步骤：运行 Read ../frontend/INDEX.md 查看完整的分类详情，或使用上方的 bash 命令加载特定技能。