Back to Details

discover-frontend

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Skills Discovery

前端技能发现

Provides automatic access to comprehensive frontend development skills.
提供对全面前端开发技能的自动访问权限。

When This Skill Activates

本技能激活场景

This skill auto-activates when you're working with:
  • React component development
  • Next.js applications and App Router
  • State management (Context, Zustand, Redux)
  • Data fetching (SWR, React Query, Server Actions)
  • Form handling and validation
  • Web accessibility (WCAG, ARIA)
  • Frontend performance optimization
  • SEO and metadata
  • UI/UX design implementation
当你处理以下工作时，本技能会自动激活：
  • React组件开发
  • Next.js应用及App Router
  • 状态管理（Context、Zustand、Redux）
  • 数据获取（SWR、React Query、Server Actions）
  • 表单处理与验证
  • Web可访问性（WCAG、ARIA）
  • 前端性能优化
  • SEO与元数据
  • UI/UX设计落地

Available Skills

可用技能

Quick Reference

快速参考

The Frontend category contains 10 core skills (+ elegant-design):
  1. react-component-patterns - Component design, composition, hooks, performance
  2. nextjs-app-router - Next.js 14+ App Router, Server Components, routing
  3. react-state-management - Context, Zustand, Redux Toolkit patterns
  4. react-data-fetching - SWR, React Query, Server Actions, data patterns
  5. react-form-handling - React Hook Form, Zod validation, form patterns
  6. web-accessibility - WCAG 2.1 AA compliance, ARIA, keyboard navigation
  7. frontend-performance - Bundle optimization, Core Web Vitals, code splitting
  8. nextjs-seo - SEO with Next.js, metadata API, structured data
  9. web-workers - Web Workers API, message passing, offloading computation
  10. browser-concurrency - Service Workers, SharedWorkers, Worklets, PWAs
  11. elegant-design/SKILL.md - World-class accessible interfaces (separate Agent Skill)
前端分类包含10项核心技能（+ elegant-design）：
  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 - 包体积优化、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）

Load Full Category Details

加载完整分类详情

For complete descriptions and workflows:
Read <cc-polymath-root>/skills/frontend/INDEX.md
This loads the full Frontend category index with:
  • Detailed skill descriptions
  • Usage triggers for each skill
  • Common workflow combinations
  • Cross-references to related skills
如需完整描述与工作流：
阅读 <cc-polymath-root>/skills/frontend/INDEX.md
加载后可查看完整前端分类索引，包含：
  • 详细技能描述
  • 各技能的触发场景
  • 常见工作流组合
  • 相关技能的交叉引用

Load Specific Skills

加载特定技能

Load individual skills as needed:
按需加载单个技能：

Core React patterns

核心React模式

Read <cc-polymath-root>/skills/frontend/react-component-patterns.md Read <cc-polymath-root>/skills/frontend/react-state-management.md Read <cc-polymath-root>/skills/frontend/react-data-fetching.md
阅读 <cc-polymath-root>/skills/frontend/react-component-patterns.md 阅读 <cc-polymath-root>/skills/frontend/react-state-management.md 阅读 <cc-polymath-root>/skills/frontend/react-data-fetching.md

Next.js specific

Next.js专属技能

Read <cc-polymath-root>/skills/frontend/nextjs-app-router.md Read <cc-polymath-root>/skills/frontend/nextjs-seo.md
阅读 <cc-polymath-root>/skills/frontend/nextjs-app-router.md 阅读 <cc-polymath-root>/skills/frontend/nextjs-seo.md

Forms and validation

表单与验证

Read <cc-polymath-root>/skills/frontend/react-form-handling.md
阅读 <cc-polymath-root>/skills/frontend/react-form-handling.md

Quality and performance

质量与性能

Read <cc-polymath-root>/skills/frontend/web-accessibility.md Read <cc-polymath-root>/skills/frontend/frontend-performance.md
阅读 <cc-polymath-root>/skills/frontend/web-accessibility.md 阅读 <cc-polymath-root>/skills/frontend/frontend-performance.md

Concurrency and workers

并发与Worker

Read <cc-polymath-root>/skills/frontend/web-workers.md Read <cc-polymath-root>/skills/frontend/browser-concurrency.md
阅读 <cc-polymath-root>/skills/frontend/web-workers.md 阅读 <cc-polymath-root>/skills/frontend/browser-concurrency.md

Design system and UI (Agent Skill - auto-discovered separately)

设计系统与UI（独立Agent Skill - 自动单独发现）

elegant-design/SKILL.md activates independently for UI design work

elegant-design/SKILL.md会针对UI设计工作独立激活

Common Workflows

常见工作流

New Next.js Application

新建Next.js应用

Sequence: App Router → Components → Data Fetching
Read <cc-polymath-root>/skills/frontend/nextjs-app-router.md # Setup routing, layouts Read <cc-polymath-root>/skills/frontend/react-component-patterns.md # Build components Read <cc-polymath-root>/skills/frontend/react-data-fetching.md # Fetch data
流程：App Router → 组件 → 数据获取
阅读 <cc-polymath-root>/skills/frontend/nextjs-app-router.md # 配置路由、布局 阅读 <cc-polymath-root>/skills/frontend/react-component-patterns.md # 构建组件 阅读 <cc-polymath-root>/skills/frontend/react-data-fetching.md # 获取数据

Elegant UI Design

优雅UI设计

Sequence: Design System → Components → Accessibility
流程：设计系统 → 组件 → 可访问性

Note: elegant-design auto-activates as separate Agent Skill

注意：elegant-design是独立的Agent Skill，会针对设计类工作自动激活

for design-focused work (shadcn/ui, accessible interfaces, etc.)

（如shadcn/ui、可访问界面等）

Read <cc-polymath-root>/skills/frontend/react-component-patterns.md Read <cc-polymath-root>/skills/frontend/web-accessibility.md
阅读 <cc-polymath-root>/skills/frontend/react-component-patterns.md 阅读 <cc-polymath-root>/skills/frontend/web-accessibility.md

Form Implementation

表单实现

Sequence: Form Handling → State Management
Read <cc-polymath-root>/skills/frontend/react-form-handling.md # Build forms Read <cc-polymath-root>/skills/frontend/react-state-management.md # Manage form state
流程：表单处理 → 状态管理
阅读 <cc-polymath-root>/skills/frontend/react-form-handling.md # 构建表单 阅读 <cc-polymath-root>/skills/frontend/react-state-management.md # 管理表单状态

Production Optimization

生产环境优化

Sequence: Performance → Accessibility → SEO
Read <cc-polymath-root>/skills/frontend/frontend-performance.md # Optimize bundle Read <cc-polymath-root>/skills/frontend/web-accessibility.md # Ensure accessibility Read <cc-polymath-root>/skills/frontend/nextjs-seo.md # Optimize SEO
流程：性能 → 可访问性 → SEO
阅读 <cc-polymath-root>/skills/frontend/frontend-performance.md # 优化包体积 阅读 <cc-polymath-root>/skills/frontend/web-accessibility.md # 确保可访问性 阅读 <cc-polymath-root>/skills/frontend/nextjs-seo.md # 优化SEO

CPU-Intensive Features & PWAs

CPU密集型功能与PWA

Sequence: Workers → Concurrency → Performance
Read <cc-polymath-root>/skills/frontend/web-workers.md # Offload heavy computation Read <cc-polymath-root>/skills/frontend/browser-concurrency.md # Service Workers, offline support Read <cc-polymath-root>/skills/frontend/frontend-performance.md # Optimize overall performance
流程：Worker → 并发 → 性能
阅读 <cc-polymath-root>/skills/frontend/web-workers.md # 卸载重计算任务 阅读 <cc-polymath-root>/skills/frontend/browser-concurrency.md # Service Workers、离线支持 阅读 <cc-polymath-root>/skills/frontend/frontend-performance.md # 优化整体性能

Skill Selection Guide

技能选择指南

React Component Patterns → 
react-component-patterns.md
:
  • Component architecture and composition
  • Custom hooks
  • Performance optimization (memo, useMemo, useCallback)
  • Design patterns (compound components, render props, HOCs)
Next.js App Router → 
nextjs-app-router.md
:
  • Server Components vs Client Components
  • Routing and layouts
  • Data fetching patterns
  • Streaming and Suspense
  • Route handlers and API routes
State Management → 
react-state-management.md
:
  • When to use Context vs external state libraries
  • Zustand for simple global state
  • Redux Toolkit for complex state
  • Server state vs client state
Data Fetching → 
react-data-fetching.md
:
  • SWR for client-side fetching
  • React Query (TanStack Query) for advanced patterns
  • Next.js Server Actions
  • Data mutation patterns
  • Caching strategies
Forms → 
react-form-handling.md
:
  • React Hook Form for performance
  • Zod for validation
  • Form state management
  • Error handling
  • File uploads
Accessibility → 
web-accessibility.md
:
  • WCAG 2.1 AA compliance
  • ARIA attributes
  • Keyboard navigation
  • Screen reader support
  • Color contrast and focus management
Performance → 
frontend-performance.md
:
  • Bundle size optimization
  • Code splitting and lazy loading
  • Core Web Vitals
  • Image optimization
  • Font optimization
  • Runtime performance
SEO → 
nextjs-seo.md
:
  • Next.js Metadata API
  • Open Graph and Twitter cards
  • Structured data (JSON-LD)
  • Sitemap and robots.txt
  • Dynamic metadata
Web Workers → 
web-workers.md
:
  • Offloading heavy computation
  • Web Workers API and message passing
  • Transferable objects for zero-copy
  • React integration with custom hooks
  • Worker pools for parallel processing
  • TypeScript type safety
Browser Concurrency → 
browser-concurrency.md
:
  • Service Workers for offline support and PWAs
  • SharedWorkers for cross-tab state
  • Audio/Paint/Animation Worklets
  • Background sync and push notifications
  • Caching strategies
  • BroadcastChannel for cross-tab messaging
React组件模式 → 
react-component-patterns.md
:
  • 组件架构与组合
  • 自定义Hooks
  • 性能优化（memo、useMemo、useCallback）
  • 设计模式（复合组件、渲染属性、高阶组件）
Next.js App Router → 
nextjs-app-router.md
:
  • Server Components vs Client Components
  • 路由与布局
  • 数据获取模式
  • 流式渲染与Suspense
  • 路由处理器与API路由
状态管理 → 
react-state-management.md
:
  • 何时使用Context vs 外部状态库
  • Zustand用于简单全局状态
  • Redux Toolkit用于复杂状态
  • 服务端状态 vs 客户端状态
数据获取 → 
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元数据API
  • Open Graph与Twitter卡片
  • 结构化数据（JSON-LD）
  • 站点地图与robots.txt
  • 动态元数据
Web Workers → 
web-workers.md
:
  • 卸载重计算任务
  • Web Workers API与消息传递
  • 可转移对象实现零拷贝
  • 结合自定义Hooks与React集成
  • Worker池用于并行处理
  • TypeScript类型安全
浏览器并发 → 
browser-concurrency.md
:
  • Service Workers用于离线支持与PWA
  • SharedWorkers用于跨标签页状态
  • Audio/Paint/Animation Worklets
  • 后台同步与推送通知
  • 缓存策略
  • BroadcastChannel用于跨标签页消息传递

Integration with Other Skills

与其他技能的集成

Frontend skills commonly combine with:
API skills (
discover-api
):
  • Consuming REST APIs
  • GraphQL client integration
  • API error handling in UI
  • Authentication flows
Testing skills (
discover-testing
):
  • Component testing
  • E2E testing with Playwright
  • Visual regression testing
  • Accessibility testing
Design (
elegant-design
Agent Skill):
  • shadcn/ui components
  • Accessible design patterns
  • Chat/terminal/code UIs
  • Streaming interfaces
  • Design systems
Database skills (
discover-database
):
  • Server Actions with database queries
  • ORM integration in Server Components
  • Real-time data updates
Deployment skills (
discover-deployment
):
  • Vercel deployment
  • Netlify deployment
  • Performance monitoring
  • CDN configuration
前端技能通常与以下技能结合使用：
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配置

Progressive Loading

渐进式加载

This gateway skill enables progressive loading:
  • Level 1: Gateway loads automatically (you're here now)
  • Level 2: Load category INDEX.md (~4K tokens) for full overview
  • Level 3: Load specific skills (~3-4K tokens each) as needed
Total context: 2K + 4K + skill(s) = 6-12K tokens vs 25K+ for entire index.
本网关技能支持渐进式加载：
  • Level 1：网关自动加载（当前状态）
  • Level 2：加载分类INDEX.md（约4K tokens）查看完整概览
  • Level 3：按需加载特定技能（每个约3-4K tokens）
总上下文：2K + 4K + 技能 = 6-12K tokens，相比完整索引的25K+更轻量化。

Quick Start Examples

快速开始示例

"Build a Next.js app with App Router": Read <cc-polymath-root>/skills/frontend/nextjs-app-router.md
"Create reusable React components": Read <cc-polymath-root>/skills/frontend/react-component-patterns.md
"Implement global state management": Read <cc-polymath-root>/skills/frontend/react-state-management.md
"Build a form with validation": Read <cc-polymath-root>/skills/frontend/react-form-handling.md
"Optimize my app performance": Read <cc-polymath-root>/skills/frontend/frontend-performance.md
"Make my app accessible": Read <cc-polymath-root>/skills/frontend/web-accessibility.md
"Improve SEO": Read <cc-polymath-root>/skills/frontend/nextjs-seo.md
"Offload heavy computation": Read <cc-polymath-root>/skills/frontend/web-workers.md
"Build a PWA with offline support": Read <cc-polymath-root>/skills/frontend/browser-concurrency.md
"使用App Router构建Next.js应用": 阅读 <cc-polymath-root>/skills/frontend/nextjs-app-router.md
"创建可复用React组件": 阅读 <cc-polymath-root>/skills/frontend/react-component-patterns.md
"实现全局状态管理": 阅读 <cc-polymath-root>/skills/frontend/react-state-management.md
"构建带验证的表单": 阅读 <cc-polymath-root>/skills/frontend/react-form-handling.md
"优化我的应用性能": 阅读 <cc-polymath-root>/skills/frontend/frontend-performance.md
"让我的应用具备可访问性": 阅读 <cc-polymath-root>/skills/frontend/web-accessibility.md
"提升SEO效果": 阅读 <cc-polymath-root>/skills/frontend/nextjs-seo.md
"卸载重计算任务": 阅读 <cc-polymath-root>/skills/frontend/web-workers.md
"构建支持离线的PWA": 阅读 <cc-polymath-root>/skills/frontend/browser-concurrency.md

React vs Next.js Decision

React vs Next.js选择指南

Use React (Vite) when:
  • Building SPAs or client-heavy apps
  • Don't need SSR or SSG
  • Want full control over routing
  • Building component libraries
Use Next.js when:
  • Need SEO (Server-Side Rendering)
  • Want file-based routing
  • Need API routes
  • Building full-stack apps
  • Want optimal performance out of the box
选择React（Vite）的场景:
  • 构建SPA或客户端重应用
  • 不需要SSR或SSG
  • 希望完全控制路由
  • 构建组件库
选择Next.js的场景:
  • 需要SEO（服务端渲染）
  • 希望使用基于文件的路由
  • 需要API路由
  • 构建全栈应用
  • 希望开箱即用地获得最优性能

State Management Decision

状态管理选择指南

Use Component State (useState) when:
  • State is local to a component
  • Simple state that doesn't need sharing
Use Context when:
  • Sharing state across a few components
  • Theme, auth, or user preferences
  • Not frequently updated
Use Zustand when:
  • Need global state
  • Want simple API
  • State updates are moderate
Use Redux Toolkit when:
  • Complex state logic
  • Need middleware (sagas, thunks)
  • Large team with established patterns
  • Time-travel debugging needed
For detailed guidance: Read <cc-polymath-root>/skills/frontend/react-state-management.md
使用组件状态（useState）的场景:
  • 状态仅属于单个组件
  • 简单状态，无需共享
使用Context的场景:
  • 在少数组件间共享状态
  • 主题、认证或用户偏好设置
  • 不频繁更新的状态
使用Zustand的场景:
  • 需要全局状态
  • 希望使用简洁的API
  • 状态更新频率中等
使用Redux Toolkit的场景:
  • 复杂状态逻辑
  • 需要中间件（sagas、thunks）
  • 团队规模大且有既定模式
  • 需要时间旅行调试
如需详细指导： 阅读 <cc-polymath-root>/skills/frontend/react-state-management.md

Data Fetching Decision

数据获取选择指南

Server Components (Next.js App Router):
  • Default choice for Next.js 14+
  • Fetch on server, zero client JS
  • Direct database access
Server Actions (Next.js):
  • For mutations and form handling
  • Progressive enhancement
  • Type-safe with TypeScript
SWR:
  • Client-side data fetching
  • Built-in caching
  • Optimistic updates
  • Focus on user experience
React Query:
  • Advanced caching strategies
  • Complex data dependencies
  • Offline support
  • DevTools for debugging
For detailed patterns: Read <cc-polymath-root>/skills/frontend/react-data-fetching.md
Server Components（Next.js App Router）:
  • Next.js 14+的默认选择
  • 在服务端获取数据，客户端零JS
  • 直接访问数据库
Server Actions（Next.js）:
  • 用于数据突变与表单处理
  • 渐进式增强
  • 结合TypeScript实现类型安全
SWR:
  • 客户端数据获取
  • 内置缓存
  • 乐观更新
  • 聚焦用户体验
React Query:
  • 高级缓存策略
  • 复杂数据依赖
  • 离线支持
  • 用于调试的DevTools
如需详细模式： 阅读 <cc-polymath-root>/skills/frontend/react-data-fetching.md

Usage Instructions

使用说明

  1. Auto-activation: This skill loads automatically when Claude Code detects frontend work
  2. Browse skills: Run 
    Read <cc-polymath-root>/skills/frontend/INDEX.md
    for full category overview
  3. Load specific skills: Use bash commands above to load individual skills
  4. Follow workflows: Use recommended sequences for common patterns
  5. elegant-design: Note that elegant-design is a separate Agent Skill that auto-activates for UI design work
Next Steps: Run 
Read <cc-polymath-root>/skills/frontend/INDEX.md
to see full category details, or load specific skills using the bash commands above.
  1. 自动激活：当Claude Code检测到前端工作时，本技能会自动加载
  2. 浏览技能：执行
    Read <cc-polymath-root>/skills/frontend/INDEX.md
    查看完整分类概览
  3. 加载特定技能：使用上述bash命令加载单个技能
  4. 遵循工作流：针对常见模式使用推荐的流程
  5. elegant-design：注意elegant-design是独立的Agent Skill，会针对UI设计工作自动激活
下一步：执行
Read <cc-polymath-root>/skills/frontend/INDEX.md
查看完整分类详情，或使用上述bash命令加载特定技能。