react-component-architecture by aj-geddes/useful-ai-prompts
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill react-component-architecture使用现代模式构建可扩展、可维护的 React 组件,包括函数式组件、Hooks、组合以及用于类型安全的 TypeScript。
最小工作示例:
// Button.tsx
import React, { useState, useCallback } from 'react';
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'danger';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
onClick?: () => void;
children: React.ReactNode;
}
export const Button: React.FC<ButtonProps> = ({
variant = 'primary',
size = 'md',
disabled = false,
onClick,
children
}) => {
const variantStyles = {
primary: 'bg-blue-500 hover:bg-blue-600',
secondary: 'bg-gray-500 hover:bg-gray-600',
danger: 'bg-red-500 hover:bg-red-600'
};
const sizeStyles = {
// ... (完整实现请参阅参考指南)
references/ 目录下的详细实现:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 指南 | 内容 |
|---|---|
| 带 Hooks 的函数式组件 | 带 Hooks 的函数式组件 |
| 自定义 Hooks 模式 | 自定义 Hooks 模式 |
| 组合模式 | 组合模式 |
| 高阶组件 (HOC) | 高阶组件 (HOC) |
| Render Props 模式 | Render Props 模式 |
每周安装量
165
仓库
GitHub 星标数
116
首次出现
2026年1月21日
安全审计
已安装于
opencode141
gemini-cli140
codex133
claude-code126
cursor120
github-copilot117
Build scalable, maintainable React components using modern patterns including functional components, hooks, composition, and TypeScript for type safety.
Minimal working example:
// Button.tsx
import React, { useState, useCallback } from 'react';
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'danger';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
onClick?: () => void;
children: React.ReactNode;
}
export const Button: React.FC<ButtonProps> = ({
variant = 'primary',
size = 'md',
disabled = false,
onClick,
children
}) => {
const variantStyles = {
primary: 'bg-blue-500 hover:bg-blue-600',
secondary: 'bg-gray-500 hover:bg-gray-600',
danger: 'bg-red-500 hover:bg-red-600'
};
const sizeStyles = {
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Functional Component with Hooks | Functional Component with Hooks |
| Custom Hooks Pattern | Custom Hooks Pattern |
| Composition Pattern | Composition Pattern |
| Higher-Order Component (HOC) | Higher-Order Component (HOC) |
| Render Props Pattern | Render Props Pattern |
Weekly Installs
165
Repository
GitHub Stars
116
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode141
gemini-cli140
codex133
claude-code126
cursor120
github-copilot117
Node.js 环境配置指南:多环境管理、类型安全与最佳实践
10,500 周安装