diff --git a/.agents/skills/react-generic-components/SKILL.md b/.agents/skills/react-generic-components/SKILL.md
new file mode 100644
index 000000000..866c0c046
--- /dev/null
+++ b/.agents/skills/react-generic-components/SKILL.md
@@ -0,0 +1,278 @@
+---
+name: react-generic-components
+description: Guidelines for building truly generic and reusable React components without business logic or specific use-case code in React/TypeScript codebases
+license: MIT
+allowed-tools:
+ - read
+ - write
+ - edit
+ - grep
+metadata:
+ version: "1.0"
+ author: "KernelCI Dashboard Team"
+ tags: ["react", "components", "architecture", "reusability"]
+---
+
+# React Generic Components Skill
+
+This skill ensures React components remain truly generic and reusable by avoiding hardcoded business logic or use-case-specific code.
+
+## Core Principle
+
+**Generic components should not contain specific logic for any particular use case.**
+
+Components should accept configuration through:
+- Props
+- Configuration objects
+- Context (when appropriate)
+- Composition patterns
+
+## Anti-Patterns to Avoid
+
+### ❌ Hardcoded Business Logic
+
+```typescript
+// ❌ BAD - Checking for specific values in generic component
+const TableCell = ({ cell }) => {
+ const dataTestId = cell.column.id === 'details'
+ ? 'details-button'
+ : undefined;
+
+ return
...
;
+};
+```
+
+**Problem**: This component knows about a specific column ID ("details"). It's no longer generic.
+
+### ❌ Conditional Rendering Based on Specific Values
+
+```typescript
+// ❌ BAD - Special cases for specific data
+const StatusBadge = ({ status }) => {
+ if (status === 'COMPLETED') {
+ return Done!;
+ }
+ if (status === 'FAILED') {
+ return Error!;
+ }
+ return {status};
+};
+```
+
+**Problem**: Every new status requires modifying the component. Not scalable.
+
+### ❌ Mixed Concerns
+
+```typescript
+// ❌ BAD - Component handles both rendering and business logic
+const ChartLegend = ({ data }) => {
+ // Business logic mixed in
+ if (data.value === 0 && data.label !== 'important') {
+ return null;
+ }
+
+ return
...
;
+};
+```
+
+**Problem**: Generic chart component shouldn't decide what to hide based on business rules.
+
+## Correct Patterns
+
+### ✅ Configuration Through Props
+
+```typescript
+// ✅ GOOD - Generic, accepts configuration
+interface TableCellProps {
+ children: React.ReactNode;
+ dataTestId?: string;
+ linkProps?: LinkProps;
+}
+
+const TableCell = ({ children, dataTestId, linkProps }: TableCellProps) => {
+ return (
+