---

name: NBReact description: AI-Powered Notebook for Frontend Developers - practice coding, get answers, track progress.

NBReact Skill

AI-Powered Notebook for Frontend Developers. Practice React, JavaScript, and frontend development with interactive challenges and intelligent feedback.

---

Quick Start

---

Capabilities

1. Question Generation

• AI-generated questions by topic and difficulty
• Web search for real-world questions
• Multiple formats: coding, MCQ, React components

2. Code Evaluation

• Static analysis (AI review)
• Dynamic testing (run test cases)
• Detailed scoring with breakdown

3. Interactive Notebook

• Split-panel coding environment
• Monaco Editor with syntax highlighting
• Live JavaScript execution
• Test case runner

4. Session Management

• Save/resume sessions
• Track question progress
• Maintain score history

5. Progress Analytics

• Topic performance breakdown
• Difficulty progression
• Improvement trends
• Smart recommendations

---

Workflows

---

Rules

---

Resources

Templates

• templates/notebook.html - Basic interactive editor
• templates/notebook-interactive.html - Enhanced notebook with chat panel
• templates/question-templates.md - Question formats

Scripts

• scripts/test-runner.js - Execute test cases
• scripts/progress-tracker.js - Analytics
• scripts/notebook-generator.js - Generate HTML
• scripts/bridge-server.js - HTTP bridge for notebook ↔ AI communication

Documentation

• session-manager.md - Session handling
• evaluation-engine.md - Scoring logic
• verification-tests.md - Test suite
• token-optimization.md - Efficiency

---

Interactive Notebook Mode

For real-time AI interaction from the notebook:

1. Start bridge server: node .agent/skills/nbreact/scripts/bridge-server.js
2. Open notebook: http://localhost:3456/notebook
3. Start watching: Run /notebook-watch in Antigravity

The notebook communicates via request.json and response.json files.

---

Data Locations

CopyNBReact/
├── config.json           # Settings
├── practice/sessions/    # Saved sessions
├── archive/{topic}/      # Q&A archives
├── progress/             # Analytics data
└── notebook/             # Generated notebooks

---

Configuration

Edit config.json for defaults. Override per session with command arguments.