Complete working example demonstrating Cursor + Skill Seekers workflow: **Main Example (examples/cursor-react-skill/):** - README.md (400+ lines) - Comprehensive guide with expected outputs - generate_cursorrules.py - Automation script for complete workflow - .cursorrules.example - Sample generated rules (React 18+ patterns) - requirements.txt - Python dependencies **Example Project (example-project/):** - package.json - React 18 + TypeScript + Vite - tsconfig.json - Strict TypeScript configuration - src/App.tsx - Sample counter component - src/index.tsx - React entry point - README.md - Testing instructions **Workflow Demonstrated:** 1. Scrape React docs → skill-seekers scrape 2. Package for Cursor → skill-seekers package --target claude 3. Extract and copy → unzip + cp to .cursorrules 4. Test in Cursor IDE with AI prompts **Example Prompts Included:** - useState hook patterns - Data fetching with useEffect - Custom hooks for validation - TypeScript typing examples Shows before/after comparison of AI suggestions with and without .cursorrules. Updates: README.md + INTEGRATIONS.md (added Haystack to supported list)
24 lines
490 B
TypeScript
24 lines
490 B
TypeScript
import { useState } from 'react';
|
|
|
|
function App() {
|
|
const [count, setCount] = useState(0);
|
|
|
|
return (
|
|
<div className="App">
|
|
<h1>Cursor + React Example</h1>
|
|
<p>Count: {count}</p>
|
|
<button onClick={() => setCount(count + 1)}>
|
|
Increment
|
|
</button>
|
|
<button onClick={() => setCount(count - 1)}>
|
|
Decrement
|
|
</button>
|
|
<p>
|
|
Try using Cursor AI to generate more React components!
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|