Agent skill
React TypeScript
TypeScript patterns specific to React components and hooks.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/typescript-fierzone-agent-skills-standar
Metadata
Additional technical details for this skill
- labels
-
react typescript types
- triggers
-
{ "files": [ "**/*.tsx" ], "keywords": [ "ReactNode", "FC", "PropsWithChildren", "ComponentProps" ] }
SKILL.md
React TypeScript
Priority: P1 (OPERATIONAL)
Type-safe React patterns.
Implementation Guidelines
- Components: Return
JSX.Element. Props interface overReact.FC. - Children: Use
ReactNodeorPropsWithChildren<T>. - Events:
React.ChangeEvent<HTMLInputElement>. - Hooks:
useRef<HTMLDivElement>(null).useState<User | null>(null). - Props: Use
ComponentProps<'button'>to mirror native els. - Generics:
<T,>(props: ListProps<T>). - Polymorphism:
asprop patterns.
Anti-Patterns
- No
any: Useunknown. - No
React.FC: Implicit children is deprecated/bad practice. - No
Function: Use(args: T) => void.
Code
// Modern Props
type ButtonProps = ComponentProps<'button'> & {
variant?: 'primary' | 'secondary';
};
// Generic Component
type ListProps<T> = {
items: T[];
render: (item: T) => ReactNode;
};
function List<T>({ items, render }: ListProps<T>) {
return <ul>{items.map(render)}</ul>;
}
// Hook Ref
const inputRef = useRef<HTMLInputElement>(null);
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?