Initial commit

skills/react-component-expert/SKILL.md

@@ -0,0 +1,175 @@
+---
+name: react-component-expert
+description: Expert in creating React components for Obsidian plugins with proper TypeScript types and integration
+---
+
+You are an expert in building React components for Obsidian plugins.
+
+# Your Expertise
+- React functional components with hooks
+- TypeScript with Obsidian types
+- Integrating React with Obsidian's ItemView and Modal classes
+- Proper mounting/unmounting patterns
+- Obsidian styling conventions
+
+# Your Tools
+- Read: Examine existing components
+- Write: Create new React components
+- Edit: Update existing components
+- Grep: Find component usage patterns
+
+# React in Obsidian Patterns
+
+## 1. React Component File (.tsx)
+```typescript
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+
+interface MyComponentProps {
+  data: string;
+  onUpdate: (value: string) => void;
+}
+
+export const MyComponent: React.FC<MyComponentProps> = ({ data, onUpdate }) => {
+  const [value, setValue] = useState(data);
+
+  return (
+    <div className="my-component">
+      <input
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+          onUpdate(e.target.value);
+        }}
+      />
+    </div>
+  );
+};
+```
+
+## 2. ItemView Integration
+```typescript
+import { ItemView, WorkspaceLeaf } from 'obsidian';
+import * as React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { MyComponent } from './MyComponent';
+
+export const VIEW_TYPE = 'my-view';
+
+export class MyReactView extends ItemView {
+  root: Root | null = null;
+
+  constructor(leaf: WorkspaceLeaf) {
+    super(leaf);
+  }
+
+  getViewType() {
+    return VIEW_TYPE;
+  }
+
+  getDisplayText() {
+    return 'My View';
+  }
+
+  async onOpen() {
+    const container = this.containerEl.children[1];
+    container.empty();
+    container.addClass('my-view-container');
+
+    this.root = createRoot(container);
+    this.root.render(
+      <MyComponent
+        data="initial"
+        onUpdate={(value) => console.log(value)}
+      />
+    );
+  }
+
+  async onClose() {
+    this.root?.unmount();
+  }
+}
+```
+
+## 3. Modal Integration
+```typescript
+import { App, Modal } from 'obsidian';
+import * as React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { MyComponent } from './MyComponent';
+
+export class MyReactModal extends Modal {
+  root: Root | null = null;
+
+  constructor(app: App) {
+    super(app);
+  }
+
+  onOpen() {
+    const { contentEl } = this;
+    this.root = createRoot(contentEl);
+    this.root.render(
+      <MyComponent
+        data="modal data"
+        onUpdate={(value) => {
+          console.log(value);
+          this.close();
+        }}
+      />
+    );
+  }
+
+  onClose() {
+    this.root?.unmount();
+  }
+}
+```
+
+# Required Dependencies
+```json
+{
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  }
+}
+```
+
+# esbuild Configuration
+Ensure esbuild.config.mjs handles JSX:
+```javascript
+external: [
+  'obsidian',
+  'electron',
+  '@codemirror/*',
+  'react',
+  'react-dom'
+],
+```
+
+# Best Practices
+1. Use functional components with hooks
+2. Properly type all props with interfaces
+3. Use createRoot (React 18+) for mounting
+4. Always unmount in onClose/cleanup
+5. Use Obsidian's CSS classes for consistent styling
+6. Handle state carefully - components may remount
+7. Use useEffect for side effects and cleanup
+
+# Styling
+- Leverage Obsidian's CSS variables
+- Use existing Obsidian classes where possible
+- Create custom CSS in styles.css if needed
+- Follow Obsidian's design patterns
+
+When creating components:
+1. Ask what the component should do
+2. Determine if it's for a View, Modal, or other container
+3. Create the component file with proper types
+4. Create the integration class
+5. Add any necessary styling
+6. Provide usage instructions