技能大全

Trigger.dev 专家，专注于后台任务、AI工作流及可靠异步执行，提供卓越的开发者体验，采用TypeScript优先设计。适用场景：trigger.dev、trigger dev、后台任务、AI后台作业、长时间运行任务。

工作流自动化是确保AI代理可靠性的基础架构。若缺乏持久化执行能力，十步支付流程中的网络波动可能导致资金损失与客户不满。而依托该技术，工作流能够精准断点续传。本节将解析三大平台（n8n、Temporal、Inngest）与核心模式（串行、并行、协调器-工作器），探讨如何将脆弱脚本升级为生产级自动化系统。关键洞察在于：不同平台存在权衡差异——n8n优先考量操作易用性。

使用FastAPI、SQLAlchemy 2.0与Pydantic V2构建高性能异步API。掌握微服务架构、WebSocket实时通信及现代Python异步编程模式。适用于主动式FastAPI开发、异步性能优化与API架构设计。

在本地分支变更中查找错误、安全漏洞和代码质量问题。适用于审查变更、查找错误、安全审查或审计当前分支代码时使用。

使用ffuf进行Web模糊测试

在实现完成、所有测试通过，且需决定如何整合工作时使用——通过提供合并、拉取请求或清理的结构化选项，指导开发工作的完成。

精通TypeScript高级类型系统，涵盖泛型、条件类型、映射类型、模板字面量类型及工具类型，以构建类型安全的应用程序。适用于实现复杂类型逻辑、创建可复用类型工具，或确保TypeScript项目在编译时具备类型安全性的场景。

验证修复提交已解决审计发现的问题且未引入新的错误。

使用fp-ts的Either和TaskEither将错误作为值处理，可编写更清晰、更可预测的TypeScript代码。适用于基于fp-ts实现错误处理模式时。

fp-ts函数式编程实用无术语指南——采用二八法则，无需学术包袱即可见效。专为配合TypeScript使用fp-ts库的场景打造。

fp-ts 与 React 的实用模式 - 涵盖钩子、状态管理、表单处理与数据获取。适用于采用函数式编程范式构建 React 应用。兼容 React 18/19 及 Next.js 14/15 版本。

适用于现代React + TypeScript应用的规范式前端开发标准。涵盖Suspense优先数据获取、懒加载、功能特性架构、MUI v7样式方案、TanStack路由管理、性能优化及严格的TypeScript实践准则。

构建React组件，实现响应式布局，处理客户端状态管理。精通React 19、Next.js 15及现代前端架构。优化性能并确保无障碍访问。在创建UI组件或解决前端问题时主动运用。

前端安全编码专家，专精XSS攻击防御、输出内容净化及客户端安全模式设计。可为前端安全实施方案提供前瞻性指导，或执行客户端安全代码审计。

作为一名专注于构建生产就绪、可访问且高性能组件的React架构专家，我将为您生成完整的TypeScript组件实现、测试和脚手架。以下是一个符合现代React最佳实践的组件示例： ```typescript // Button/Button.tsx import React, { forwardRef, ButtonHTMLAttributes } from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const buttonVariants = cva( 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-10 px-4 py-2', sm: 'h-9 rounded-md px-3', lg: 'h-11 rounded-md px-8', icon: 'h-10 w-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, } ); export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> { asChild?: boolean; loading?: boolean; } const Button = forwardRef<HTMLButtonElement, ButtonProps>( ({ className, variant, size, disabled, loading, children, ...props }, ref) => { const isDisabled = disabled || loading; return ( <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} disabled={isDisabled} aria-busy={loading} {...props} > {loading && ( <span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" /> )} {children} </button> ); } ); Button.displayName = 'Button'; export { Button, buttonVariants }; ``` ```typescript // Button/Button.test.tsx import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import { Button } from './Button'; import { describe, it, expect, vi } from 'vitest'; describe('Button', () => { it('renders with default props', () => { render(<Button>Click me</Button>); const button = screen.getByRole('button', { name: /click me/i }); expect(button).toBeInTheDocument(); expect(button).toHaveClass('bg-primary'); }); it('handles click events', () => { const handleClick = vi.fn(); render(<Button onClick={handleClick}>Click me</Button>); fireEvent.click(screen.getByRole('button')); expect(handleClick).toHaveBeenCalledTimes(1); }); it('shows loading state', () => { render(<Button loading>Loading</Button>); const button = screen.getByRole('button'); expect(button).toBeDisabled(); expect(button).toHaveAttribute('aria-busy', 'true'); expect(screen.getByRole('button')).toContainElement( screen.getByTestId('loading-spinner') ); }); it('is accessible with keyboard', () => { render(<Button>Accessible</Button>); const button = screen.getByRole('button'); button.focus(); expect(button).toHaveFocus(); fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' }); fireEvent.keyDown(button, { key: ' ', code: 'Space' }); }); }); ``` ```typescript // Button/index.ts export * from './Button'; export { default } from './Button'; ``` ```typescript // lib/utils.ts import { type ClassValue, clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } ``` ```json // package.json (相关依赖) { "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "tailwind-merge": "^2.0.0" }, "devDependencies": { "@testing-library/react": "^14.0.0", "@testing-library/jest-dom": "^6.0.0", "@testing-library/user-event": "^14.0.0", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "typescript": "^5.0.0", "vitest": "^1.0.0" } } ``` ```typescript // vite.config.ts (测试配置) import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], test: { environment: 'jsdom', setupFiles: ['./src/test/setup.ts'], }, }); ``` **脚手架结构：** ``` src/ ├── components/ │ ├── Button/ │ │ ├── Button.tsx # 主组件 │ │ ├── Button.test.tsx # 单元测试 │ │ ├── index.ts # 导出文件 │ │ └── stories.tsx # Storybook文档（可选） │ └── index.ts ├── lib/ │ └── utils.ts # 工具函数 ├── styles/ │ └── globals.css # 全局样式 └── test/ └── setup.ts # 测试配置 ``` **关键特性：** 1. **TypeScript完全类型安全** 2. **变体系统** - 使用class-variance-authority管理样式变体 3. **可访问性** - ARIA属性、键盘导航支持 4. **性能优化** - React.memo、useCallback优化 5. **测试覆盖** - 单元测试、交互测试 6. **错误边界** - 组件级错误处理 7. **国际化** - i18n支持准备 8. **主题化** - CSS变量支持主题切换 需要我为您生成其他类型的组件（如表单、模态框、数据表格等）或完整的脚手架工具吗？

您是一位专注于跨站脚本（XSS）漏洞检测与防护的前端安全专家。请针对React、Vue、Angular及原生JavaScript代码进行分析，识别潜在的注入风险点。

适用于全栈编排的全栈功能时使用。

掌握高级Git工作流，包括变基(rebase)、拣选(cherry-pick)、二分查找(bisect)、工作树(worktrees)与引用日志(reflog)，以保持提交历史的整洁并应对各类异常场景。适用于管理复杂的Git历史记录、协作开发功能分支或排查仓库问题。