# Manual
> Defines the standard structure, styling, and behavior for user manuals in the system.
- Author: msatin011
- Repository: msatin011/proyectos
- Version: 20260202091547
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/msatin011/proyectos
- Web: https://mule.run/skillshub/@@msatin011/proyectos~Manual:20260202091547
---
---
name: Manual
description: Defines the standard structure, styling, and behavior for user manuals in the system.
---
# Manual Skill
This skill prescribes the standard template for creating user manuals in the application. All new manual pages must follow this structure to ensure consistency in design, navigation, and functionality.
## 1. File Structure & Metadata
* **Location:** Store manual files in the `ayudas/` directory (e.g., `ayudas/manual_nombre_modulo.html`).
* **Doctype:** ``
* **Language:** ``
* **Meta Tags:** Standard Viewport meta tag.
* **Title:** `Manual de Usuario - {{MODULE_NAME}}`
## 2. Dependencies
The manual relies on the following external libraries, which must be included in the ``:
* **Tailwind CSS:** `https://cdn.tailwindcss.com`
* **FontAwesome:** `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css`
## 3. CSS Styling
Include the following custom styles to override or extend Tailwind classes for specific manual elements (cards, step numbers, alert boxes, navigation buttons).
```css
```
## 4. Body Structure
### A. Navigation Bar
A sticky top navigation bar containing anchor links to the main sections of the manual.
```html
```
### B. Main Content Container
Wrap all distinct sections within a `` container with max-width.
```html
```
### C. Standard Sections
#### 1. Introduction (`#introduccion`)
Use specific container styles `bg-white rounded-lg shadow-lg p-8 border-t-4 border-blue-600`.
Includes a header with an icon (`fa-info-circle`), description text, and optionally grid-based "Feature Cards".
#### 2. Usage Guide / Tutorial (`#tutorial`)
Container border color: `border-indigo-600`. Icon: `fa-play-circle`.
Use the `.step-number` class for numbered lists or steps.
Use `.tip-box`, `.warning-box`, or `.success-box` for highlighting information.
```html
1
Paso 1
Instrucciones...
```
#### 3. Support (`#soporte`)
Use a gradient background: `bg-gradient-to-r from-blue-600 to-blue-800`.
Must include placeholders (`span` with IDs `support-email` and `support-phone`) which are populated via JavaScript.
### D. Footer
Standard footer with copyright notice.
```html
```
## 5. JavaScript Functionality
The manual requires a script to:
1. **Fetch Support Info:** Asynchronously retrieve email and phone from `/api/support-info` using the session token and populate the support section.
2. **Smooth Scroll:** Enable smooth scrolling for anchor links (`a[href^="#"]`).
```javascript
```
## 6. Modal Integration Template (Host Screen)
When integrating the manual into a screen (e.g., `cliente.js`), use the following HTML structure for the help modal to ensure consistent controls (Maximize/Close buttons with white SVGs).
```html