ReddRadar
Agent skill
react-component-architecture
Modern React component patterns with hooks, composition, and TypeScript
Install this agent skill to your Project
npx add-skill https://github.com/autohandai/community-skills/tree/main/react-component-architecture
SKILL.md
React Component Architecture
Component Design Principles
- Single Responsibility - Each component does one thing well
- Composition Over Configuration - Use children and render props over prop drilling
- Colocation - Keep related code together (styles, tests, types)
- Controlled vs Uncontrolled - Be explicit about state ownership
Component Patterns
Compound Components
For complex UI with shared state:
const Tabs = ({ children, defaultValue }: TabsProps) => {
const [active, setActive] = useState(defaultValue);
return (
<TabsContext.Provider value={{ active, setActive }}>
{children}
</TabsContext.Provider>
);
};
Tabs.List = TabsList;
Tabs.Trigger = TabsTrigger;
Tabs.Content = TabsContent;
Render Props for Flexibility
When consumers need control over rendering:
interface ListProps<T> {
items: T[];
renderItem: (item: T, index: number) => ReactNode;
keyExtractor: (item: T) => string;
}
function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
return items.map((item, i) => (
<Fragment key={keyExtractor(item)}>{renderItem(item, i)}</Fragment>
));
}
Custom Hooks for Logic Extraction
Extract reusable stateful logic:
function useToggle(initial = false) {
const [state, setState] = useState(initial);
const toggle = useCallback(() => setState(s => !s), []);
const setTrue = useCallback(() => setState(true), []);
const setFalse = useCallback(() => setState(false), []);
return { state, toggle, setTrue, setFalse } as const;
}
Polymorphic Components
Components that render as different elements:
type PolymorphicProps<E extends ElementType> = {
as?: E;
} & ComponentPropsWithoutRef<E>;
function Box<E extends ElementType = 'div'>({
as,
...props
}: PolymorphicProps<E>) {
const Component = as || 'div';
return <Component {...props} />;
}
Props Patterns
Discriminated Union Props
For mutually exclusive prop combinations:
type ButtonProps =
| { variant: 'link'; href: string; onClick?: never }
| { variant: 'button'; onClick: () => void; href?: never };
Default Props with Destructuring
function Button({
variant = 'primary',
size = 'md',
...props
}: ButtonProps) {
// ...
}
Performance Patterns
- Memoize expensive computations with
useMemo - Memoize callbacks passed to children with
useCallback - Split contexts by update frequency
- Use
React.memofor pure presentational components - Virtualize long lists with react-virtual or similar
File Structure
components/
Button/
Button.tsx # Component
Button.test.tsx # Tests
Button.types.ts # Types (if complex)
index.ts # Re-export
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
autohandai/community-skills
mapping-mitre-attack-techniques
Maps observed adversary behaviors, security alerts, and detection rules to MITRE ATT&CK techniques and sub-techniques to quantify detection coverage and guide control prioritization. Use when building an ATT&CK-based coverage heatmap, tagging SIEM alerts with technique IDs, aligning security controls to adversary playbooks, or reporting threat exposure to executives. Activates for requests involving ATT&CK Navigator, Sigma rules, MITRE D3FEND, or coverage gap analysis.
autohandai/community-skills
hunting-for-spearphishing-indicators
Hunt for spearphishing campaign indicators across email logs, endpoint telemetry, and network data to detect targeted email attacks.
autohandai/community-skills
analyzing-malicious-url-with-urlscan
URLScan.io is a free service for scanning and analyzing suspicious URLs. It captures screenshots, DOM content, HTTP transactions, JavaScript behavior, and network connections of web pages in an isolat
autohandai/community-skills
implementing-zero-standing-privilege-with-cyberark
Deploy CyberArk Secure Cloud Access to eliminate standing privileges in hybrid and multi-cloud environments using just-in-time access with time, entitlement, and approval controls.
autohandai/community-skills
implementing-pam-for-database-access
Deploy privileged access management for database systems including Oracle, SQL Server, PostgreSQL, and MySQL. Covers session proxy configuration, credential vaulting, query auditing, dynamic credentia
autohandai/community-skills
detecting-t1003-credential-dumping-with-edr
Detect OS credential dumping techniques targeting LSASS memory, SAM database, NTDS.dit, and cached credentials using EDR telemetry, Sysmon process access monitoring, and Windows security event correlation.
Didn't find tool you were looking for?