add image specs, versioning, and

  style guide requirements to tutorials

Author: todortodorovic

tutorials/QUICK_GUIDE.md

@@ -30,6 +30,7 @@ images/tutorials/[category]/[subcategory]/[tutorial-name]/
 
 ### 4. Working Code & Tests (Required)
 - All code examples must be tested and functional
+- **Always specify dependency versions** (e.g., `npm install [email protected]`)
 - Include verification steps
 - Test on clean environment before submitting
 
@@ -64,8 +65,9 @@ images/tutorials/[category]/[subcategory]/[tutorial-name]/
 
 ## Image Requirements
 
-- **Format**: `.webp` only
+- **Format**: `.webp` only  
 - **Location**: `images/tutorials/[path]/`
+- **Naming**: `tutorial-name-01.webp`, `tutorial-name-02.webp`, etc.
 - **Dimensions**: 
   - Desktop screenshots: 1512px width, variable height
   - Browser extensions: 400x600px  

tutorials/STYLE_GUIDE.md

@@ -2,6 +2,8 @@
 
 Comprehensive guide for tutorial writing standards, formatting, and best practices. For quick reference, see [QUICK_GUIDE.md](QUICK_GUIDE.md).
 
+This guide covers tutorial-specific requirements and formatting. For general writing guidelines that apply to all documentation, refer to the [PaperMoon Documentation Style Guide](https://github.com/papermoonio/documentation-style-guide).
+
 ## Table of Contents
 
 - [Tutorial Structure](#tutorial-structure)
@@ -207,6 +209,9 @@ Store reusable code in the `.snippets` directory:
 - Use `!!!tip` to explain complex code sections
 - Test all code examples before submission
 - Include expected outputs where relevant
+- **Always specify dependency versions** in installation commands
+  - Instead of: `npm install polkadot-api`
+  - Use: `npm install [email protected]`
 
 ### Language Tags
 
@@ -224,7 +229,9 @@ Common language tags to use:
 
 - **Format**: All images must be in `.webp` format
 - **Location**: Store in `images/tutorials/[category]/[subcategory]/[tutorial-name]/`
-- **Naming**: Use descriptive names (e.g., `setup-wallet-connection.webp`)
+- **Naming**: Use sequential, descriptive names following this pattern:
+  - `tutorial-name-01.webp`, `tutorial-name-02.webp`, etc.
+  - Example: `set-up-a-template-01.webp`, `set-up-a-template-02.webp`
 - **Alt text**: Always include descriptive alt text for accessibility
 
 ### Screenshot Guidelines
@@ -240,7 +247,7 @@ Common language tags to use:
 
 - **Desktop screenshots**: 1512px width, variable height
 - **Browser extension screenshots**: 400x600px
-- **Mobile screenshots**: 375px width (iPhone SE), variable height
+
 
 ### Image Syntax
 

tutorials/templates/README.md

@@ -91,9 +91,11 @@ All templates follow a consistent structure:
 - **Be specific**: Replace generic examples with concrete, working code
 - **Test thoroughly**: Ensure all code examples work as described
 - **Include context**: Explain why each step is necessary
+- **Specify versions**: Always include specific versions for dependencies (e.g., `npm install [email protected]`)
 - **Add screenshots**: Visual aids improve understanding (use `.webp` format)
   - Desktop screenshots: 1512px width, variable height
   - Browser extensions: 400x600px
+  - Naming: `tutorial-name-01.webp`, `tutorial-name-02.webp`, etc.
 
 ### File Organization
 When using templates, ensure you follow the proper file structure: