Agent skill
react-component-generator
Generates React components with TypeScript, hooks, and best practices. Use when user asks to "create React component", "generate component", or "scaffold component".
Install this agent skill to your Project
npx add-skill https://github.com/Dexploarer/claudius-skills/tree/main/examples/intermediate/framework-skills/react-component-generator
SKILL.md
React Component Generator
Generates modern React components following best practices with TypeScript support.
When to Use
- "Create a Button component"
- "Generate a UserProfile component"
- "Scaffold a DataTable component"
Instructions
1. Gather Requirements
- Component name (PascalCase)
- Component type (functional, with state, with effects)
- Props needed
- TypeScript types
- Styling approach
2. Generate Component Structure
Functional Component:
import React from 'react';
import styles from './ComponentName.module.css';
interface ComponentNameProps {
// Props here
}
export const ComponentName: React.FC<ComponentNameProps> = ({
// Destructure props
}) => {
return (
<div className={styles.container}>
{/* Component JSX */}
</div>
);
};
With State:
import React, { useState } from 'react';
export const ComponentName: React.FC<Props> = () => {
const [state, setState] = useState<Type>(initialValue);
return <div>{/* ... */}</div>;
};
With Effects:
import React, { useEffect } from 'react';
export const ComponentName: React.FC<Props> = () => {
useEffect(() => {
// Effect logic
return () => {
// Cleanup
};
}, [dependencies]);
return <div>{/* ... */}</div>;
};
3. Add PropTypes/TypeScript Interfaces
interface ComponentNameProps {
title: string;
onAction?: () => void;
children?: React.ReactNode;
className?: string;
}
4. Create Associated Files
ComponentName.tsx- Component fileComponentName.module.css- StylesComponentName.test.tsx- Testsindex.ts- Barrel export
5. Add Documentation
/**
* ComponentName - Brief description
*
* @example
* <ComponentName title="Hello" onAction={handleClick} />
*/
Best Practices
- Use functional components
- TypeScript for type safety
- CSS Modules for styling
- Proper prop destructuring
- Meaningful names
- Add tests
- Export from index.ts
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
Dexploarer/claudius-skills
smart-contract-generator
Generates Solidity smart contracts with security best practices (ERC-20, ERC-721, ERC-1155, custom). Use when user asks to "create smart contract", "solidity contract", "erc20 token", "nft contract", or "web3 contract".
Dexploarer/claudius-skills
threejs-scene-builder
Comprehensive Three.js and React Three Fiber skill for creating 3D scenes, characters, NPCs, procedural generation, animation retargeting, and interactive experiences. Use when user asks to "create Three.js scene", "setup React Three Fiber", "add 3D character", "create NPC AI", "procedural 3D generation", "retarget animation", "setup avatar system", or "create 3D game".
Dexploarer/claudius-skills
wcag-compliance-checker
Checks websites for WCAG 2.1 Level AA compliance, identifies accessibility violations, and provides remediation guidance. Use when user asks to "check accessibility", "wcag compliance", "a11y audit", "accessibility violations", or "screen reader testing".
Dexploarer/claudius-skills
kubernetes-manifest-generator
Generates Kubernetes manifests (Deployments, Services, Ingress, ConfigMaps, Secrets) with best practices for production workloads. Use when user asks to "create k8s manifest", "generate Kubernetes deployment", "setup k8s service", or "create Kubernetes resources".
Dexploarer/claudius-skills
terraform-module-builder
Generates reusable Terraform modules with best practices for AWS, Azure, GCP infrastructure as code. Use when user asks to "create Terraform module", "generate IaC module", "setup Terraform", or "create infrastructure module".
Dexploarer/claudius-skills
translation-key-extractor
Extracts hardcoded strings from code and converts them to translation keys for i18n. Use when user asks to "extract translations", "find hardcoded strings", "internationalize code", "setup i18n", or "create translation files".
Didn't find tool you were looking for?