A comprehensive skill for creating interactive web tutorials that help programming beginners learn codebases from scratch.
This skill provides a proven 11-stage methodology for transforming complex codebases into beginner-friendly interactive tutorials. Based on real-world experience creating the Nanobot Tutorial, this skill guides you through every step of creating an effective learning experience.
- Analyzes codebases to identify key concepts and learning paths
- Creates interactive web tutorials with navigation, search, and progress tracking
- Implements Socratic teaching methods to encourage critical thinking
- Visualizes code relationships through diagrams and knowledge graphs
- Demonstrates real execution flows with step-by-step scenarios
- Deploys tutorials online for easy access
- Basic knowledge of HTML, CSS, and JavaScript
- A codebase you want to create a tutorial for
- Git installed on your system
- GitHub account (for deployment)
- Clone this repository:
git clone https://github.com/shuolsure/code-learning-tutorial-skill.git- Copy the
SKILL.mdfile to your Trae skills directory:
mkdir -p .trae/skills/code-learning-tutorial
cp code-learning-tutorial-skill/SKILL.md .trae/skills/code-learning-tutorial/- Restart Trae or reload skills
Simply tell Trae:
"我想为这个项目创建一个初学者教程"
"Create a beginner tutorial for this codebase"
"帮我创建一个代码学习教程"
The skill will guide you through all 11 stages automatically!
Analyze the project and create a high-level overview explaining what it does and why.
Add detailed comments to all core files, explaining every line in simple terms.
Explain architectural choices and design rationale behind decisions.
Build the HTML structure with navigation, search, and progress tracking.
Implement modal dialogs for viewing code with syntax highlighting.
Create visual folder trees with click-to-view functionality.
Use thought-provoking questions to guide learning and critical thinking.
Create method hierarchies and knowledge graphs showing relationships.
Show how code actually runs with step-by-step execution diagrams.
Ensure the tutorial is visually appealing and works on all devices.
Deploy the tutorial to GitHub Pages for online access.
- ✅ Beginner-Friendly: Assumes no prior knowledge
- ✅ Interactive: Click, explore, and discover
- ✅ Visual: Diagrams, flowcharts, and visualizations
- ✅ Socratic: Questions guide learning
- ✅ Comprehensive: Covers all aspects of the codebase
- ✅ Deployable: Easy online access via GitHub Pages
- ✅ Mobile-Responsive: Works on all devices
A typical tutorial created with this skill includes:
tutorial/
├── index.html # Main page
├── css/
│ ├── style.css # Main styles
│ ├── components.css # Component styles
│ └── responsive.css # Mobile styles
├── js/
│ ├── tutorial.js # Core functionality
│ ├── code-data.js # Code explanations
│ ├── methods-data.js # Method documentation
│ ├── demo-data.js # Demo scenarios
│ ├── demo-flow.js # Flow diagram renderer
│ └── demo-controller.js # Demo interactions
└── assets/
├── images/ # Diagrams
└── icons/ # Icons
URL: https://shuolsure.github.io/nanobot-weblearn/
Features:
- 4 core feature modules with detailed explanations
- Method pyramid structure and knowledge graph
- 4 interactive demo scenarios
- Complete code explanations with Socratic method
- Mobile-responsive design
Screenshots:
- Project Overview
- Core Features
- System Architecture
- Method Relationships
- Run Demo
- Prism.js - Lightweight and extensible
- Highlight.js - Auto language detection
- Mermaid.js - Flowcharts and sequence diagrams
- D3.js - Custom interactive visualizations
- SVG - For simple diagrams
- GitHub Pages - Free hosting
- Vercel - Automatic deployments
- Netlify - Continuous deployment
- Start simple - don't overwhelm with details
- Use analogies to explain complex concepts
- Make it visual with diagrams and charts
- Keep it interactive - let learners explore
- Show basics first, details on demand
- Explain every line, even imports
- Focus on "why" not just "what"
- Provide concrete usage examples
- Highlight common patterns
- Ask before telling
- Provide hints before answers
- Link to related concepts
- Use practical examples
- Too Technical Too Soon: Start with basics, add complexity gradually
- No Code Examples: Always show actual code when explaining concepts
- Passive Learning: Make it interactive, not just reading
- Poor UI/UX: Test on different devices and screen sizes
- Missing Deployment: Make sure it's accessible online
- No Progress Tracking: Let learners know how far they've come
- Broken Links: Verify all code links and references work
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
shuolsure
- GitHub: @shuolsure
- Inspired by the need to make code learning accessible to everyone
- Based on real-world experience creating the Nanobot Tutorial
- Thanks to all contributors and users who provide feedback
A successful tutorial created with this skill should:
- ✅ Be understandable by complete beginners
- ✅ Explain all core concepts with code examples
- ✅ Use Socratic method to encourage thinking
- ✅ Provide interactive exploration
- ✅ Show real execution scenarios
- ✅ Be accessible online
- ✅ Work on mobile devices
- ✅ Have clear navigation and search
- Documentation: SKILL.md
- Example Tutorial: Nanobot Tutorial
- Report Bug: Issues
- Request Feature: Issues
Transform complex code into an enjoyable learning journey! 🚀