From bad84ceac22dc926293cc48d02a66057d880e8c1 Mon Sep 17 00:00:00 2001 From: yusyus Date: Sat, 7 Feb 2026 21:07:11 +0300 Subject: [PATCH] feat: Add Cursor React example repo (Task 3.2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- README.md | 5 +- docs/integrations/INTEGRATIONS.md | 2 +- .../cursor-react-skill/.cursorrules.example | 171 ++++++++ examples/cursor-react-skill/README.md | 366 ++++++++++++++++++ .../example-project/README.md | 43 ++ .../example-project/package.json | 21 + .../example-project/src/App.tsx | 23 ++ .../example-project/src/index.tsx | 13 + .../example-project/tsconfig.json | 25 ++ .../generate_cursorrules.py | 143 +++++++ examples/cursor-react-skill/requirements.txt | 7 + 11 files changed, 816 insertions(+), 3 deletions(-) create mode 100644 examples/cursor-react-skill/.cursorrules.example create mode 100644 examples/cursor-react-skill/README.md create mode 100644 examples/cursor-react-skill/example-project/README.md create mode 100644 examples/cursor-react-skill/example-project/package.json create mode 100644 examples/cursor-react-skill/example-project/src/App.tsx create mode 100644 examples/cursor-react-skill/example-project/src/index.tsx create mode 100644 examples/cursor-react-skill/example-project/tsconfig.json create mode 100644 examples/cursor-react-skill/generate_cursorrules.py create mode 100644 examples/cursor-react-skill/requirements.txt diff --git a/README.md b/README.md index a6a2d07..1b7129d 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ English | [简体中文](https://github.com/yusufkaraaslan/Skill_Seekers/blob/ma [![Twitter Follow](https://img.shields.io/twitter/follow/_yUSyUS_?style=social)](https://x.com/_yUSyUS_) [![GitHub Repo stars](https://img.shields.io/github/stars/yusufkaraaslan/Skill_Seekers?style=social)](https://github.com/yusufkaraaslan/Skill_Seekers) -**The universal preprocessor for any AI system: Convert documentation, GitHub repos, and PDFs into production-ready formats for LangChain, LlamaIndex, Pinecone, Cursor, Windsurf, Cline, Continue.dev, Claude, and any RAG pipeline—in minutes, not hours.** +**The universal preprocessor for any AI system: Convert documentation, GitHub repos, and PDFs into production-ready formats for LangChain, LlamaIndex, Haystack, Pinecone, Cursor, Windsurf, Cline, Continue.dev, Claude, and any RAG pipeline—in minutes, not hours.** > 🌐 **[Visit SkillSeekersWeb.com](https://skillseekersweb.com/)** - Browse 24+ preset configs, share your configs, and access complete documentation! @@ -32,7 +32,7 @@ English | [简体中文](https://github.com/yusufkaraaslan/Skill_Seekers/blob/ma skill-seekers scrape --config configs/react.json skill-seekers package output/react --target langchain # or llama-index, pinecone, cursor -# 15 minutes → Ready for: LangChain, LlamaIndex, Pinecone, Cursor, Custom RAG +# 15 minutes → Ready for: LangChain, LlamaIndex, Haystack, Pinecone, Cursor, Custom RAG ``` ### Supported Integrations @@ -41,6 +41,7 @@ skill-seekers package output/react --target langchain # or llama-index, pinecon |------------|--------|----------|-------| | **LangChain** | `Documents` | QA chains, agents, retrievers | [Guide](docs/integrations/LANGCHAIN.md) | | **LlamaIndex** | `TextNodes` | Query engines, chat engines | [Guide](docs/integrations/LLAMA_INDEX.md) | +| **Haystack** | `Documents` | Enterprise RAG pipelines | [Guide](docs/integrations/HAYSTACK.md) | | **Pinecone** | Ready for upsert | Production vector search | [Guide](docs/integrations/PINECONE.md) | | **Cursor IDE** | `.cursorrules` | AI coding (VS Code fork) | [Guide](docs/integrations/CURSOR.md) | | **Windsurf** | `.windsurfrules` | AI coding (Codeium IDE) | [Guide](docs/integrations/WINDSURF.md) | diff --git a/docs/integrations/INTEGRATIONS.md b/docs/integrations/INTEGRATIONS.md index e195769..19d2fa1 100644 --- a/docs/integrations/INTEGRATIONS.md +++ b/docs/integrations/INTEGRATIONS.md @@ -30,7 +30,7 @@ Transform documentation into RAG-ready formats for AI-powered search and retriev |-----------|-------|--------|----------|-------| | **[LangChain](LANGCHAIN.md)** | 500K+ | Document | Python RAG, most popular | [Setup →](LANGCHAIN.md) | | **[LlamaIndex](LLAMA_INDEX.md)** | 200K+ | TextNode | Q&A focus, query engine | [Setup →](LLAMA_INDEX.md) | -| **[Haystack](HAYSTACK.md)** | 50K+ | Document | Enterprise, multi-language | *Coming in v2.11.0* | +| **[Haystack](HAYSTACK.md)** | 50K+ | Document | Enterprise, multi-language | [Setup →](HAYSTACK.md) | **Quick Example:** ```bash diff --git a/examples/cursor-react-skill/.cursorrules.example b/examples/cursor-react-skill/.cursorrules.example new file mode 100644 index 0000000..e3788d8 --- /dev/null +++ b/examples/cursor-react-skill/.cursorrules.example @@ -0,0 +1,171 @@ +# React 18 Expert - Cursor Rules + +You are an expert React 18+ developer with deep knowledge of modern patterns, TypeScript, and best practices. + +## Core Principles + +- **Functional Components Only** - Use function components, never class components +- **Hooks-First** - useState, useEffect, useContext, useMemo, useCallback +- **TypeScript Strict** - Proper typing for props, state, events, refs +- **Performance** - Memoization, code splitting, lazy loading +- **Accessibility** - ARIA attributes, semantic HTML, keyboard navigation + +## React Hooks Patterns + +### useState +```tsx +const [state, setState] = useState(initialValue); +``` + +### useEffect +```tsx +useEffect(() => { + // Effect logic + return () => { + // Cleanup + }; +}, [dependencies]); +``` + +### useContext +```tsx +const value = useContext(MyContext); +``` + +### Custom Hooks +```tsx +function useCustomHook() { + const [state, setState] = useState(); + // Logic + return { state, setState }; +} +``` + +## TypeScript Best Practices + +### Component Props +```tsx +interface Props { + title: string; + count?: number; + onUpdate: (value: number) => void; +} + +export function MyComponent({ title, count = 0, onUpdate }: Props) { + // Component logic +} +``` + +### Events +```tsx +const handleClick = (event: React.MouseEvent) => { + // Handle click +}; + +const handleChange = (event: React.ChangeEvent) => { + // Handle change +}; +``` + +### Refs +```tsx +const ref = useRef(null); +``` + +## Common Patterns + +### Data Fetching +```tsx +function DataComponent() { + const [data, setData] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetch(url) + .then(res => res.json()) + .then(data => { + setData(data); + setLoading(false); + }) + .catch(err => { + setError(err.message); + setLoading(false); + }); + }, []); + + if (loading) return ; + if (error) return ; + return ; +} +``` + +### Form Handling +```tsx +function Form() { + const [formData, setFormData] = useState({ + name: '', + email: '' + }); + + const handleChange = (e: React.ChangeEvent) => { + setFormData(prev => ({ + ...prev, + [e.target.name]: e.target.value + })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Submit logic + }; + + return ( +
+ + + +
+ ); +} +``` + +### Performance Optimization +```tsx +// useMemo for expensive calculations +const expensiveValue = useMemo(() => { + return computeExpensiveValue(data); +}, [data]); + +// useCallback for function references +const handleClick = useCallback(() => { + doSomething(value); +}, [value]); + +// React.memo for component memoization +export const MemoizedComponent = React.memo(MyComponent); +``` + +## Code Style + +- Use arrow functions for components +- Destructure props immediately +- Use early returns for loading/error states +- Keep components small and focused +- Extract complex logic into custom hooks +- Use meaningful variable names + +## Avoid + +- ❌ Class components +- ❌ Inline function definitions in JSX +- ❌ Missing dependency arrays in useEffect +- ❌ Mutating state directly +- ❌ Props drilling (use Context instead) +- ❌ Missing TypeScript types + +## Resources + +- React Documentation: https://react.dev +- TypeScript + React: https://react.dev/learn/typescript +- React Hooks: https://react.dev/reference/react/hooks diff --git a/examples/cursor-react-skill/README.md b/examples/cursor-react-skill/README.md new file mode 100644 index 0000000..1c93d0a --- /dev/null +++ b/examples/cursor-react-skill/README.md @@ -0,0 +1,366 @@ +# Cursor + React Skill Example + +Complete example showing how to use Skill Seekers to generate Cursor rules for React development. + +## What This Example Does + +- ✅ Generates React documentation skill +- ✅ Creates `.cursorrules` for Cursor IDE +- ✅ Shows AI-powered React code completion +- ✅ Includes sample React project + +## Quick Start + +### 1. Generate React Skill + +```bash +# Install Skill Seekers +pip install skill-seekers + +# Generate React documentation skill +skill-seekers scrape --config configs/react.json --max-pages 100 + +# Package for Cursor +skill-seekers package output/react --target claude +``` + +This creates `output/react-claude.zip` containing `SKILL.md` (the Cursor rules file). + +### 2. Extract and Copy Rules + +```bash +# Extract the ZIP +unzip output/react-claude.zip -d output/react-cursor + +# Copy rules to your project +cp output/react-cursor/SKILL.md example-project/.cursorrules +``` + +Or use the automation script: + +```bash +python generate_cursorrules.py +``` + +### 3. Test in Cursor + +```bash +# Open project in Cursor +cursor example-project/ + +# Try these prompts in Cursor: +# - "Create a useState hook for managing user data" +# - "Add useEffect to fetch data on mount" +# - "Implement a custom hook for form validation" +# - "Create a component with proper TypeScript types" +``` + +## Expected Results + +### Before (Without .cursorrules) + +- Generic React suggestions +- May use outdated patterns (class components, etc.) +- No TypeScript best practices +- Missing modern Hooks patterns + +### After (With .cursorrules) + +- React 18+ specific patterns +- Hooks-based architecture (useState, useEffect, custom hooks) +- TypeScript strict mode with proper types +- Modern best practices (functional components, composition) +- Context API and state management patterns +- Performance optimization (useMemo, useCallback) + +## Automation Script + +The `generate_cursorrules.py` script automates the entire workflow: + +```python +#!/usr/bin/env python3 +""" +Automate Cursor rules generation for React. +""" + +import subprocess +import sys +from pathlib import Path + + +def run_command(cmd: list, description: str) -> bool: + """Run a shell command and return success status.""" + print(f"\n{'='*60}") + print(f"STEP: {description}") + print(f"{'='*60}") + + result = subprocess.run(cmd, capture_output=True, text=True) + + if result.returncode != 0: + print(f"❌ Error: {result.stderr}") + return False + + print(f"✅ Success!") + if result.stdout: + print(result.stdout) + + return True + + +def main(): + """Run the automation workflow.""" + print("=" * 60) + print("Cursor Rules Generator - React Example") + print("=" * 60) + + # Step 1: Scrape React docs + if not run_command( + ["skill-seekers", "scrape", "--config", "configs/react.json", "--max-pages", "100"], + "Scraping React documentation" + ): + sys.exit(1) + + # Step 2: Package for Cursor + if not run_command( + ["skill-seekers", "package", "output/react", "--target", "claude"], + "Packaging for Cursor" + ): + sys.exit(1) + + # Step 3: Extract ZIP + if not run_command( + ["unzip", "-o", "output/react-claude.zip", "-d", "output/react-cursor"], + "Extracting packaged skill" + ): + sys.exit(1) + + # Step 4: Copy to example project + source = Path("output/react-cursor/SKILL.md") + target = Path("example-project/.cursorrules") + + if not source.exists(): + print(f"❌ Error: {source} not found") + sys.exit(1) + + target.parent.mkdir(parents=True, exist_ok=True) + target.write_text(source.read_text()) + + print(f"\n✅ Copied rules to {target}") + + # Success summary + print("\n" + "=" * 60) + print("✅ Cursor rules generated successfully!") + print("=" * 60) + print(f"\n📁 Rules file: {target.absolute()}") + print("\n🚀 Next steps:") + print(" 1. Open example-project/ in Cursor") + print(" 2. Try the example prompts in the README") + print(" 3. Compare AI suggestions before/after") + + +if __name__ == "__main__": + try: + main() + except KeyboardInterrupt: + print("\n\n⚠️ Interrupted by user") + sys.exit(0) +``` + +## Sample .cursorrules File + +See `.cursorrules.example` for a sample generated rules file. Key sections include: + +- **React Fundamentals** - Components, JSX, props, state +- **Hooks** - useState, useEffect, useContext, custom hooks +- **TypeScript** - Proper typing for components, props, events +- **Performance** - useMemo, useCallback, React.memo +- **Best Practices** - Component composition, error boundaries +- **Common Patterns** - Forms, data fetching, routing + +## Example Project Structure + +The `example-project/` directory contains a minimal React + TypeScript setup: + +``` +example-project/ +├── .cursorrules # Generated rules (empty initially) +├── package.json # React + TypeScript dependencies +├── tsconfig.json # TypeScript configuration +├── src/ +│ ├── App.tsx # Main component +│ └── index.tsx # Entry point +└── README.md # Project-specific instructions +``` + +### Testing the AI + +Open `example-project/` in Cursor and try these prompts: + +**1. useState Hook:** +``` +Create a counter component with increment and decrement buttons +``` + +**Expected output with .cursorrules:** +```tsx +import { useState } from 'react'; + +export function Counter() { + const [count, setCount] = useState(0); + + return ( +
+

Count: {count}

+ + +
+ ); +} +``` + +**2. Data Fetching:** +``` +Create a component that fetches user data from an API +``` + +**Expected output with .cursorrules:** +```tsx +import { useState, useEffect } from 'react'; + +interface User { + id: number; + name: string; + email: string; +} + +export function UserList() { + const [users, setUsers] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetch('https://api.example.com/users') + .then(res => res.json()) + .then(data => { + setUsers(data); + setLoading(false); + }) + .catch(err => { + setError(err.message); + setLoading(false); + }); + }, []); + + if (loading) return
Loading...
; + if (error) return
Error: {error}
; + + return ( +
    + {users.map(user => ( +
  • {user.name} - {user.email}
    • + ))} +
+ ); +} +``` + +**3. Custom Hook:** +``` +Create a custom hook for form validation +``` + +**Expected output with .cursorrules:** +```tsx +import { useState, useCallback } from 'react'; + +interface ValidationRules { + [field: string]: (value: string) => string | null; +} + +export function useFormValidation(rules: ValidationRules) { + const [errors, setErrors] = useState>({}); + + const validate = useCallback((field: string, value: string) => { + const error = rules[field]?.(value); + setErrors(prev => ({ + ...prev, + [field]: error || '' + })); + return !error; + }, [rules]); + + const validateAll = useCallback((values: Record) => { + const newErrors: Record = {}; + let isValid = true; + + for (const field in rules) { + const error = rules[field](values[field] || ''); + if (error) { + newErrors[field] = error; + isValid = false; + } + } + + setErrors(newErrors); + return isValid; + }, [rules]); + + return { errors, validate, validateAll }; +} +``` + +## Files in This Example + +- `README.md` - This file +- `generate_cursorrules.py` - Automation script +- `.cursorrules.example` - Sample generated rules +- `example-project/` - Minimal React + TypeScript project +- `requirements.txt` - Python dependencies (skill-seekers) + +## Troubleshooting + +### Issue: Rules not loading + +**Solution:** Restart Cursor IDE or reload window (Cmd+Shift+P → "Reload Window") + +### Issue: AI not using rules + +**Solution:** Check `.cursorrules` is at project root. Verify with AI: "Are you aware of .cursorrules?" + +### Issue: skill-seekers not found + +**Solution:** Install Skill Seekers + +```bash +pip install skill-seekers +``` + +### Issue: Scraping fails + +**Solution:** Check internet connection, or use smaller --max-pages value + +```bash +skill-seekers scrape --config configs/react.json --max-pages 50 +``` + +## Next Steps + +1. Customize rules for your project needs +2. Add project-specific patterns to `.cursorrules` +3. Include internal component library documentation +4. Share with team for consistency +5. Try other frameworks (Vue, Angular, Django, etc.) + +## Related Examples + +- [Windsurf Example](../windsurf-fastapi-context/) +- [Cline Example](../cline-django-assistant/) +- [Continue.dev Example](../continue-dev-universal/) +- [LangChain RAG Example](../langchain-rag-pipeline/) + +## Resources + +- [Cursor Documentation](https://cursor.sh/docs) +- [Cursor Rules Guide](https://cursor.sh/docs/cursorrules) +- [Skill Seekers Documentation](https://github.com/yusufkaraaslan/Skill_Seekers) +- [React Documentation](https://react.dev/) diff --git a/examples/cursor-react-skill/example-project/README.md b/examples/cursor-react-skill/example-project/README.md new file mode 100644 index 0000000..93d34f5 --- /dev/null +++ b/examples/cursor-react-skill/example-project/README.md @@ -0,0 +1,43 @@ +# Example React Project for Cursor + +Minimal React + TypeScript project to test Cursor AI with `.cursorrules`. + +## Setup + +```bash +# Install dependencies +npm install + +# Start development server +npm run dev +``` + +## Testing Cursor AI + +Once you have `.cursorrules` in this directory, try these prompts in Cursor: + +### Basic Hooks +- "Create a form component with validation" +- "Add a useEffect to fetch user data" +- "Create a custom hook for local storage" + +### TypeScript +- "Add proper TypeScript types to this component" +- "Create an interface for user data" + +### Performance +- "Optimize this component with useMemo" +- "Add React.memo to prevent re-renders" + +### Advanced +- "Create a Context provider for theme management" +- "Implement error boundary for this component" +- "Add lazy loading for this route" + +## Comparing Results + +Try the same prompt with and without `.cursorrules` to see the difference! + +**Without .cursorrules**: Generic React code, may use outdated patterns + +**With .cursorrules**: Modern React 18+, proper TypeScript, best practices diff --git a/examples/cursor-react-skill/example-project/package.json b/examples/cursor-react-skill/example-project/package.json new file mode 100644 index 0000000..2c94ac3 --- /dev/null +++ b/examples/cursor-react-skill/example-project/package.json @@ -0,0 +1,21 @@ +{ + "name": "cursor-react-example", + "version": "1.0.0", + "description": "Example React project with Cursor AI rules", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", + "@vitejs/plugin-react": "^4.0.0", + "typescript": "^5.0.0", + "vite": "^4.3.0" + } +} diff --git a/examples/cursor-react-skill/example-project/src/App.tsx b/examples/cursor-react-skill/example-project/src/App.tsx new file mode 100644 index 0000000..59c521d --- /dev/null +++ b/examples/cursor-react-skill/example-project/src/App.tsx @@ -0,0 +1,23 @@ +import { useState } from 'react'; + +function App() { + const [count, setCount] = useState(0); + + return ( +
+

Cursor + React Example

+

Count: {count}

+ + +

+ Try using Cursor AI to generate more React components! +

+
+ ); +} + +export default App; diff --git a/examples/cursor-react-skill/example-project/src/index.tsx b/examples/cursor-react-skill/example-project/src/index.tsx new file mode 100644 index 0000000..a9b5e35 --- /dev/null +++ b/examples/cursor-react-skill/example-project/src/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); + +root.render( + + + +); diff --git a/examples/cursor-react-skill/example-project/tsconfig.json b/examples/cursor-react-skill/example-project/tsconfig.json new file mode 100644 index 0000000..a7fc6fb --- /dev/null +++ b/examples/cursor-react-skill/example-project/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/cursor-react-skill/generate_cursorrules.py b/examples/cursor-react-skill/generate_cursorrules.py new file mode 100644 index 0000000..81439a0 --- /dev/null +++ b/examples/cursor-react-skill/generate_cursorrules.py @@ -0,0 +1,143 @@ +#!/usr/bin/env python3 +""" +Automate Cursor rules generation for React. + +This script demonstrates the complete workflow: +1. Scrape React documentation +2. Package for Cursor +3. Extract and copy rules to project +""" + +import subprocess +import sys +from pathlib import Path + + +def run_command(cmd: list, description: str) -> bool: + """Run a shell command and return success status.""" + print(f"\n{'='*60}") + print(f"STEP: {description}") + print(f"{'='*60}") + print(f"Command: {' '.join(cmd)}\n") + + result = subprocess.run(cmd, capture_output=True, text=True) + + if result.returncode != 0: + print(f"❌ Error: {result.stderr}") + return False + + print(f"✅ Success!") + if result.stdout: + # Print first 500 chars to avoid clutter + output = result.stdout[:500] + if len(result.stdout) > 500: + output += "... (truncated)" + print(output) + + return True + + +def main(): + """Run the automation workflow.""" + print("=" * 60) + print("Cursor Rules Generator - React Example") + print("=" * 60) + print("\nThis script will:") + print(" 1. Scrape React documentation (100 pages)") + print(" 2. Package for Cursor IDE") + print(" 3. Extract and copy to example-project/") + print("\n⏱️ Estimated time: 2-3 minutes\n") + + # Step 1: Scrape React docs + print("Starting workflow...") + if not run_command( + [ + "skill-seekers", + "scrape", + "--config", + "../../configs/react.json", + "--max-pages", + "100", + ], + "Scraping React documentation", + ): + print("\n❌ Failed to scrape React documentation") + print(" Make sure skill-seekers is installed: pip install skill-seekers") + sys.exit(1) + + # Step 2: Package for Cursor + if not run_command( + ["skill-seekers", "package", "../../output/react", "--target", "claude"], + "Packaging for Cursor", + ): + print("\n❌ Failed to package for Cursor") + sys.exit(1) + + # Step 3: Extract ZIP + if not run_command( + [ + "unzip", + "-o", + "../../output/react-claude.zip", + "-d", + "../../output/react-cursor", + ], + "Extracting packaged skill", + ): + print("\n❌ Failed to extract package") + print(" Make sure unzip is installed") + sys.exit(1) + + # Step 4: Copy to example project + source = Path("../../output/react-cursor/SKILL.md") + target = Path("example-project/.cursorrules") + + if not source.exists(): + print(f"\n❌ Error: {source} not found") + sys.exit(1) + + target.parent.mkdir(parents=True, exist_ok=True) + target.write_text(source.read_text()) + + print(f"\n{'='*60}") + print(f"STEP: Copying rules to project") + print(f"{'='*60}") + print(f"✅ Copied {source} → {target}") + + # Success summary + print("\n" + "=" * 60) + print("✅ Cursor rules generated successfully!") + print("=" * 60) + print(f"\n📁 Rules file: {target.absolute()}") + print(f"📏 Size: {len(target.read_text())} characters") + + # Preview first 300 characters + content = target.read_text() + preview = content[:300] + if len(content) > 300: + preview += "..." + + print(f"\n📖 Preview:\n{preview}") + + print("\n🚀 Next steps:") + print(" 1. Open example-project/ in Cursor:") + print(" cursor example-project/") + print("\n 2. Try these prompts:") + print(" - 'Create a useState hook for managing user data'") + print(" - 'Add useEffect to fetch data on mount'") + print(" - 'Implement a custom hook for form validation'") + print("\n 3. Compare AI suggestions with and without .cursorrules") + + +if __name__ == "__main__": + try: + main() + except KeyboardInterrupt: + print("\n\n⚠️ Interrupted by user") + sys.exit(0) + except Exception as e: + print(f"\n❌ Unexpected error: {e}") + import traceback + + traceback.print_exc() + sys.exit(1) diff --git a/examples/cursor-react-skill/requirements.txt b/examples/cursor-react-skill/requirements.txt new file mode 100644 index 0000000..9817d02 --- /dev/null +++ b/examples/cursor-react-skill/requirements.txt @@ -0,0 +1,7 @@ +# Cursor React Skill Example Requirements + +# Skill Seekers - documentation to AI skills converter +skill-seekers>=2.10.0 + +# No additional Python dependencies needed +# The example project uses Node.js/npm for React