mcpField
R
react-component-generator

react-component-generator

github.com/onewave-ai开发393322 次安装1 周前更新
代码仓库

关于 react-component-generator

用于生成 React 组件的技能，涵盖客户端与服务端模式、表单和无障碍要求，面向需要结构化组件指导的开发者。

主要功能

  1. 01客户端与服务端组件模式
  2. 02TypeScript 属性接口
  3. 03React Hook Form 与 Zod 表单模板
  4. 04无障碍检查清单

适用场景

  1. 01搭建类型化 React 组件
  2. 02构建带验证的表单
  3. 03检查组件的键盘与屏幕阅读器无障碍性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onewave-ai/claude-skills --skill react-component-generator

安装后在 Claude Code 中输入/react-component-generator确认已加载。

详细介绍

React 组件生成器

说明

创建 React 组件时：

  1. 确定组件类型：客户端组件或服务端组件
  2. 使用 TypeScript 定义 props 接口
  3. 遵循最佳实践进行实现
  4. 添加无障碍属性

模板

客户端组件
'use client';

import { useState, useCallback } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
  children: React.ReactNode;
}

export function Button({
  variant = 'primary',
  size = 'md',
  isLoading = false,
  children,
  className,
  disabled,
  ...props
}: ButtonProps) {
  const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2';

  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    ghost: 'hover:bg-gray-100',
  };

  const sizes = {
    sm: 'h-8 px-3 text-sm',
    md: 'h-10 px-4',
    lg: 'h-12 px-6 text-lg',
  };

  return (
    <button
      className={cn(baseStyles, variants[variant], sizes[size], className)}
      disabled={disabled || isLoading}
      aria-busy={isLoading}
      {...props}
    >
      {isLoading ? <span className="animate-spin mr-2">⏳</span> : null}
      {children}
    </button>
  );
}
服务端组件
import { db } from '@/lib/db';

interface UserListProps {
  limit?: number;
}

export async function UserList({ limit = 10 }: UserListProps) {
  const users = await db.user.findMany({ take: limit });

  if (users.length === 0) {
    return <p className="text-gray-500">No users found.</p>;
  }

  return (
    <ul role="list" className="divide-y">
      {users.map((user) => (
        <li key={user.id} className="py-4">
          <span>{user.name}</span>
        </li>
      ))}
    </ul>
  );
}
使用 React Hook Form 的表单组件
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters'),
});

type FormData = z.infer<typeof schema>;

export function LoginForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? 'email-error' : undefined}
          {...register('email')}
        />
        {errors.email && (
          <p id="email-error" role="alert">{errors.email.message}</p>
        )}
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Loading...' : 'Submit'}
      </button>
    </form>
  );
}

无障碍检查清单

  • 使用语义化 HTML 元素
  • 为仅包含图标的按钮添加 aria-label
  • 在需要的地方添加 role 属性
  • 确保键盘导航正常工作
  • 为表单错误添加 aria-invalid 和 aria-describedby
  • 为加载状态添加 aria-busy

评论

支持 Markdown