npm - @maccesar/aiskills - Versions diffs - 1.12.0 → 1.16.0 - Mend

@maccesar/aiskills 1.12.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/skills/stitch-showcase/references/14-troubleshooting-known-issues.md ADDED Viewed

@@ -0,0 +1,122 @@
+# Section: Troubleshooting & Known Issues
+## Purpose
+Working notes on issues that have shown up in real projects, the cause
+when it's understood, and the workaround. New issues should be added here
+before they show up a second time.
+---
+## `catalog.html` stays on "Loading…"
+**Symptom**: opening `catalog.html` shows the skeleton header but the
+component grid never appears.
+**Cause** (suspected, not yet confirmed): in projects with very dense
+HTMLs or many near-duplicate variants, `extract_catalog.py` either times
+out or returns a structure the catalog viewer chokes on.
+**Workaround**: the `index.html` template ships without the "Catalog"
+button in the header, so end users don't hit the broken page. If you
+want to inspect the catalog data, open `component_catalog.json` directly.
+**Status**: open. Restore the Catalog button in
+`references/index.html` once the root cause is fixed.
+---
+## Chrome shows "Translate this page" banner
+**Symptom**: Chrome offers to translate the showcase, sometimes to a
+language that isn't even one of the two involved (Portuguese is common).
+**Cause**: the `<html lang="…">` attribute on `index.html` or
+`viewer.html` disagrees with the actual text content. See
+[`13-language-detection.md`](13-language-detection.md) for the full
+resolution order.
+**Workaround**: add an override.
+`showcase.json`:
+```json
+{
+  "lang": "es"
+}
+```
+or, in `DESIGN.md`:
+```markdown
+## Lang
+es
+```
+Then rebuild.
+---
+## Video doesn't preview in Finder / Safari rejects it
+**Symptom**: a `.mp4` downloaded from Facebook / YouTube / TikTok plays
+fine in VLC and Chrome but shows a black square in macOS Finder and
+fails to play in Safari < 17.
+**Cause**: the source was encoded in AV1, which neither macOS Finder
+nor older Safari can decode.
+**Workaround**: re-encode to H.264 with ffmpeg. See
+[`12-video-embedding.md`](12-video-embedding.md) for the exact command.
+---
+## Skill installed both as plugin and standalone
+**Symptom**: after `aiskills install`, the skill folder exists at both
+`~/.claude/skills/<name>/` (from the standalone CLI) **and**
+`~/.claude/plugins/cache/<plugin>/<version>/skills/<name>/` (from the
+marketplace plugin), so changes to one path are invisible to the other.
+**Cause**: older versions of the `aiskills` CLI didn't detect when the
+plugin marketplace had already installed the skill and dropped a
+duplicate symlink.
+**Workaround**:
+1. Update the CLI: `npm install -g @maccesar/aiskills@latest`.
+2. Remove the standalone copy: `rm -rf ~/.claude/skills/<skill-name>`.
+3. Reinstall: `aiskills install`. The CLI now skips skills that the
+   plugin already provides.
+---
+## Showcase background and app background match (thumbnails disappear)
+**Symptom**: every card in `index.html` shows a blank rectangle because
+the screen has the same background color as the showcase canvas.
+**Cause**: someone reused the project's brand color as the showcase
+background instead of a neutral surface.
+**Workaround**: see `07-theme-system.md` and the Color Strategy section
+of `SKILL.md` — never use a brand color for large showcase surfaces.
+---
+## Stitch slugs come with `_` in place of accents
+**Symptom**: filenames like `configuraci_n_oscuro.html` and the showcase
+displays them as "Configuraci_N Oscuro".
+**Cause**: Google Stitch strips accented characters from filenames.
+**Workaround**: the build now de-mangles slugs automatically through
+`scripts/slug_demangle.py`. If a slug doesn't appear in the demangler's
+dictionary, override the title explicitly in `DESIGN.md` using the
+`Title | Description` format:
+```markdown
+### Cuenta
+- nuevo_slug_man_leado: Corrección Manual | Texto descriptivo.
+```

package/skills/stitch-showcase/references/15-build-flags.md ADDED Viewed

@@ -0,0 +1,71 @@
+# Build Script Reference
+Detailed reference for `scripts/build_showcase.py` — flags, output structure, source discovery, and supported input layouts.
+## Running the build
+```bash
+# Point to the project root — the script discovers the source automatically
+python <SKILL_DIR>/scripts/build_showcase.py /path/to/project
+# Or point directly to the folder with zips/screens
+python <SKILL_DIR>/scripts/build_showcase.py /path/to/project/stitch
+# Single mega-zip (zip containing all screens as subfolders)
+python <SKILL_DIR>/scripts/build_showcase.py /path/to/export.zip
+```
+## Flags
+| Flag | Description |
+|------|-------------|
+| `--type mobile\|web` | Set default view mode instead of auto-detecting |
+| `--name "Title"` | Set project name when no DESIGN.md is present |
+| `--init` | Generate a DESIGN.md skeleton from detected screen slugs |
+| `--update` | Detect new screens not yet in DESIGN.md and append under `### Por Clasificar` |
+| `--extract-text` | Extract visible text from screen HTMLs → `screen_summaries.txt` (for LLM consumption) |
+| `--context` | (Debug only) Generate showcase_context.json without building HTML — do NOT use for normal builds |
+| `--watch` | Auto-rebuild on file changes (Ctrl+C to stop) |
+Component detection and catalog generation are automatic — no `--catalog` or `--components` flags needed. Every build produces `catalog.html` alongside `index.html` and `viewer.html`.
+## Output structure
+The script creates a single `showcase/` directory next to the source folder:
+```
+showcase/                         ← single output dir (view mode toggle inside)
+├── index.html                    ← open this in browser (gallery + design system)
+├── viewer.html                   ← individual screen viewer
+├── catalog.html                  ← component catalog with comparison view
+├── component_catalog.json        ← atomic + composite + cluster data
+├── shared_components.json        ← structural component variants
+├── DESIGN.md                     ← copy from source
+└── assets/
+    ├── splash_screen.html
+    ├── splash_screen.png
+    ├── login.html
+    ├── login.png
+    └── ...
+```
+Source folder with original zips is **never touched**.
+## Source discovery
+The script accepts **any folder in the project** — it doesn't need to be the exact folder with screens. Discovery order:
+1. If the given path has screens (zips or `code.html` folders) → use it directly
+2. If `showcase.json` exists in the given path or its parent → follow its `source` field
+3. Auto-discover: scan one level of subdirectories for screens (skips `showcase`, `showcase-mobile`, `showcase-web` output dirs)
+4. Clear error with a suggestion to create `showcase.json`
+## Supported input structures
+| Structure | Example |
+|-----------|---------|
+| Project root with `showcase.json` | `project/showcase.json` → `{"source": "stitch"}` |
+| Folder of individual zips | `folder/login.zip`, `folder/home.zip` |
+| Folder of pre-extracted screen folders | `folder/login/code.html`, `folder/home/code.html` |
+| Single mega-zip (Stitch "Export all") | `export.zip → stitch/screen1/code.html, stitch/screen2/code.html` |
+| Single screen zip | `screen.zip → code.html + screen.png` |

package/skills/stitch-showcase/references/16-design-md-format.md ADDED Viewed

@@ -0,0 +1,107 @@
+# DESIGN.md & showcase.json Format
+Configuration formats that drive the showcase build: project metadata, screen grouping, and description fallbacks.
+## DESIGN.md Format
+```markdown
+# Project Name
+## Type
+mobile  ← or "web"
+## Screens
+### Onboarding
+- splash_screen
+- login
+### Home
+- home_dashboard
+## Colors
+- Primary: #FDD900
+- Background: #0A0A0A
+## Typography
+- **Inter**
+```
+The parser also accepts:
+- Free-form bullets/numbered lists under `## Screens`
+- Markdown table format: `| slug | title | description |`
+- Color tokens in Stitch format: `` `primary-container` (#FDD900) `` or bare `surface (#0B1326)`
+  - Token named `primary-*` → accent color for tabs and hover
+  - Token named `surface` or `background` → used to compute smart showcase theme
+- Optional `## Lang` section to override `<html lang>` (e.g. `es`, `en`, `pt-BR`). Auto-detected from content if absent. See [`13-language-detection.md`](13-language-detection.md).
+The `--init` flag auto-generates a skeleton DESIGN.md from detected slugs.
+## Screen Grouping
+Screens are grouped into sections in this priority order:
+1. **`DESIGN.md` sections** (best result) — explicit `### Section Name` blocks under `## Screens`
+2. **Auto-grouping** (fallback) — keyword overlap between slugs; screens sharing a meaningful word are grouped together
+When auto-grouping applies, offer to improve it:
+- List the detected screen names for the user
+- Suggest logical section groupings based on the app domain
+- Write the sections to `DESIGN.md` in the source folder
+- Re-run the script to apply them
+### DESIGN.md section format for explicit grouping
+```markdown
+## Screens
+### Onboarding
+- splash_screen
+- welcome
+### Login & Registration
+- login
+- signup
+- forgot_password
+### Home
+- home
+- home_oscuro
+```
+The script merges DESIGN.md sections with slug auto-detection — slugs not listed in any section appear in an "Other screens" group at the end.
+## Description Sources (priority)
+When building cards, the script picks the description from these sources, in order:
+1. `DESIGN.md` — screen list with descriptions
+2. Individual `{num}-{name}.md` in source folder (per-screen prompt files)
+3. `<meta name="description">` or `<meta property="og:description">` inside the HTML
+4. First `<h1>` or `<h2>` visible text in the HTML body
+5. `<title>` tag (skipped if generic: "Untitled", "index", "screen", etc.)
+6. First meaningful visible text phrase found in the HTML body (strips scripts/styles/SVGs)
+7. Formatted slug fallback ("splash_screen" → "Splash Screen")
+Stitch-exported HTML rarely has `<title>` or meta descriptions — steps 4 and 6 are the most useful for those files.
+## showcase.json
+Optional config file in the project root. Tells the script where to find screens, the project type, and name — so you can point the script at any folder in the project.
+```json
+{
+  "source": "stitch",
+  "type": "mobile",
+  "name": "SNAP Gym"
+}
+```
+| Field | Required | Description |
+|-------|----------|-------------|
+| `source` | yes | Relative path from the JSON file to the folder with screens |
+| `type` | no | `"mobile"` or `"web"` (overridden by `--type` CLI flag) |
+| `name` | no | Project name (overridden by `--name` CLI flag or DESIGN.md) |
+| `lang` | no | BCP-47 code for `<html lang>` (e.g. `"es"`, `"pt-BR"`). Overrides DESIGN.md auto-detect. See [`13-language-detection.md`](13-language-detection.md). |
+The `--init` flag generates this file automatically alongside DESIGN.md.

package/skills/stitch-showcase/references/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{HTML_LANG}}">
 <head>
   <meta charset="UTF-8">
@@ -37,13 +37,23 @@
     /* List mode overrides — thumbnail always horizontal rectangle, regardless of view mode */
     .screens-grid.list-mode { display: flex; flex-direction: column; gap: 8px; }
-    .screens-grid.list-mode .screen-card { display: flex; flex-direction: row; gap: 16px; }
-    .screens-grid.list-mode .screen-card .card-thumb { width: 240px; flex-shrink: 0; aspect-ratio: 16/10 !important; border-radius: 12px; }
+    .screens-grid.list-mode .screen-card { display: flex; flex-direction: row; gap: 12px; }
+    .screens-grid.list-mode .screen-card .card-thumb { width: 140px; flex-shrink: 0; aspect-ratio: 16/10 !important; border-radius: 12px; }
     .screens-grid.list-mode .screen-card .card-info { flex: 1; min-width: 0; padding-top: 4px; }
     .screens-grid.list-mode .screen-card .card-desc { -webkit-line-clamp: unset; overflow: visible; white-space: normal; }
+    @media (min-width: 640px) {
+      .screens-grid.list-mode .screen-card { gap: 16px; }
+      .screens-grid.list-mode .screen-card .card-thumb { width: 240px; }
+    }
-    /* Grid columns per view mode */
-    .view-mobile .screens-grid:not(.list-mode) { grid-template-columns: repeat(4, 1fr) !important; }
+    /* Grid columns per view mode — responsive, mobile-first */
+    .view-mobile .screens-grid:not(.list-mode) { grid-template-columns: repeat(2, 1fr) !important; }
+    @media (min-width: 640px) {
+      .view-mobile .screens-grid:not(.list-mode) { grid-template-columns: repeat(3, 1fr) !important; }
+    }
+    @media (min-width: 768px) {
+      .view-mobile .screens-grid:not(.list-mode) { grid-template-columns: repeat(4, 1fr) !important; }
+    }
     .view-web .screens-grid:not(.list-mode) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
     /* Hide scrollbar on tabs */
@@ -56,22 +66,18 @@
   <!-- ── Header ─────────────────────────────────────────── -->
   <header class="sticky top-0 z-50 border-b border-gray-200/60 backdrop-blur-xl bg-white/80 dark:border-white/10 dark:bg-[#0d0d0d]/80">
-    <div class="mx-auto flex h-14 max-w-[1280px] items-center justify-between gap-4 px-6">
+    <div class="mx-auto flex h-14 max-w-[1280px] items-center justify-between gap-2 px-3 sm:gap-4 sm:px-6">
-      <div class="flex min-w-0 items-center gap-3">
+      <div class="flex min-w-0 items-center gap-2 sm:gap-3">
         <span class="truncate text-sm font-semibold">{{PROJECT_NAME}}</span>
-        <span id="view-badge" class="shrink-0 inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2.5 py-0.5 text-[11px] font-medium text-gray-500 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
+        <span id="view-badge" class="hidden sm:inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2.5 py-0.5 text-[11px] font-medium text-gray-500 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
         </span>
-        <span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">{{SCREEN_COUNT}} screens</span>
-        <a href="catalog.html" class="shrink-0 inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-[11px] font-medium text-gray-500 transition-colors hover:border-accent hover:text-accent dark:border-white/10 dark:bg-white/5 dark:text-gray-400 dark:hover:border-accent dark:hover:text-accent">
-          <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
-          Catalog
-        </a>
+        <span class="hidden sm:inline shrink-0 text-xs text-gray-400 dark:text-gray-500">{{SCREEN_COUNT}} pantallas</span>
       </div>
       <div class="flex shrink-0 items-center gap-2">
         <!-- View mode toggle (mobile/web) -->
-        <button id="view-mode-toggle" title="Toggle mobile/web view" class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+        <button id="view-mode-toggle" title="Cambiar vista móvil/web" class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
           <svg id="icon-phone" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>
           </svg>
@@ -89,7 +95,7 @@
           </svg>
         </button>
         <!-- Theme toggle -->
-        <button id="theme-toggle" title="Toggle light/dark" class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+        <button id="theme-toggle" title="Cambiar claro/oscuro" class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
           <svg class="block h-4 w-4 dark:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
           </svg>
@@ -117,7 +123,7 @@
     <div class="mt-8 flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
       <div class="flex items-center gap-2">
         <span class="font-semibold text-gray-900 dark:text-white">{{SCREEN_COUNT}}</span>
-        <span>Screens</span>
+        <span>Pantallas</span>
       </div>
       <div class="h-4 w-px bg-gray-200 dark:bg-white/10"></div>
       <div class="flex items-center gap-2">
@@ -150,7 +156,7 @@
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.35-4.35" />
         </svg>
-        <input id="search-input" type="text" placeholder="Search screens..." autocomplete="off" class="h-8 w-48 rounded-lg border border-gray-200 bg-gray-50 pl-8 pr-3 text-xs text-gray-900 placeholder-gray-400 transition-all focus:w-64 focus:outline-none focus:ring-2 focus:ring-accent/40 dark:border-white/10 dark:bg-white/5 dark:text-gray-100">
+        <input id="search-input" type="text" placeholder="Buscar pantallas..." autocomplete="off" class="h-8 w-48 rounded-lg border border-gray-200 bg-gray-50 pl-8 pr-3 text-xs text-gray-900 placeholder-gray-400 transition-all focus:w-64 focus:outline-none focus:ring-2 focus:ring-accent/40 dark:border-white/10 dark:bg-white/5 dark:text-gray-100">
       </div>
     </div>
@@ -163,7 +169,7 @@
         <circle cx="11" cy="11" r="8" />
         <path d="m21 21-4.35-4.35" />
       </svg>
-      <p class="text-sm">No screens match your search.</p>
+      <p class="text-sm">Ninguna pantalla coincide con tu búsqueda.</p>
     </div>
   </section>
@@ -184,7 +190,7 @@
       root.classList.add('view-' + currentView);
       // Update badge text
-      viewBadge.textContent = currentView === 'mobile' ? 'Mobile' : 'WEB';
+      viewBadge.textContent = currentView === 'mobile' ? 'Móvil' : 'Web';
       // Update toggle icon: show the icon of the CURRENT mode (matches the badge)
       if (currentView === 'mobile') {

package/skills/stitch-showcase/references/viewer.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{HTML_LANG}}">
 <head>
   <meta charset="UTF-8">
@@ -82,6 +82,18 @@
       background: #fff;
     }
     html.dark #viewer-frame { background: #111; }
+    /* ── Real mobile: hide simulator chrome on small viewports ── */
+    @media (max-width: 639px) {
+      .view-mobile #mobile-frame { padding-top: 0 !important; align-items: stretch !important; }
+      .view-mobile #phone-container { transform: none !important; width: 100% !important; height: 100% !important; }
+      .view-mobile #phone-wrap {
+        width: 100% !important; height: 100% !important;
+        border: none !important; border-radius: 0 !important; box-shadow: none !important;
+      }
+      .view-web #browser-chrome { display: none !important; }
+      .view-web #iframe-wrap-web { border: none !important; border-radius: 0 !important; }
+    }
   </style>
 </head>
@@ -93,20 +105,20 @@
   <!-- ── Header ──────────────────────────────────────────── -->
   <header id="main-header" class="flex-shrink-0 border-b border-gray-200/60 backdrop-blur-xl bg-white/80 dark:border-white/10 dark:bg-[#0a0a0a]/80" style="height:56px">
-    <div class="mx-auto flex h-full max-w-[1440px] items-center gap-3 px-5">
+    <div class="mx-auto flex h-full max-w-[1440px] items-center gap-2 px-3 sm:gap-3 sm:px-5">
       <!-- Back button -->
-      <a id="btn-back" href="index.html" title="Back to gallery (Esc)" class="flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-gray-500 no-underline transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100">
+      <a id="btn-back" href="index.html" title="Volver a la galería (Esc)" aria-label="Volver" class="flex shrink-0 items-center gap-1.5 rounded-lg px-2 py-1.5 text-[13px] text-gray-500 no-underline transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100 sm:px-2.5">
         <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M10 13L5 8l5-5" />
         </svg>
-        Back
+        <span class="hidden sm:inline">Volver</span>
       </a>
-      <div class="h-4 w-px shrink-0 bg-gray-200 dark:bg-white/10"></div>
+      <div class="hidden sm:block h-4 w-px shrink-0 bg-gray-200 dark:bg-white/10"></div>
       <!-- Screen title -->
-      <span id="screen-title" class="shrink-0 text-[13px] font-semibold leading-none">--</span>
+      <span id="screen-title" class="min-w-0 truncate text-[13px] font-semibold leading-none">--</span>
       <!-- Screen description (inline after title) -->
       <span id="screen-desc" class="hidden text-[11px] text-gray-400 dark:text-gray-500 truncate sm:inline"></span>
@@ -115,20 +127,20 @@
       <div class="flex-1"></div>
       <!-- Position counter -->
-      <span id="nav-pos" class="shrink-0 tabular-nums text-[11px] text-gray-400 dark:text-gray-500">-- / --</span>
+      <span id="nav-pos" class="hidden sm:inline shrink-0 tabular-nums text-[11px] text-gray-400 dark:text-gray-500">-- / --</span>
       <!-- Prev button -->
-      <button id="btn-prev" title="Previous screen (ArrowLeft)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-30" disabled>
+      <button id="btn-prev" title="Pantalla anterior (←)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-30" disabled>
         <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 13L5 8l5-5"/></svg>
       </button>
       <!-- Next button -->
-      <button id="btn-next" title="Next screen (ArrowRight)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-30" disabled>
+      <button id="btn-next" title="Pantalla siguiente (→)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-30" disabled>
         <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 3l5 5-5 5"/></svg>
       </button>
       <!-- Theme toggle -->
-      <button id="theme-toggle" title="Toggle light/dark" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+      <button id="theme-toggle" title="Cambiar claro/oscuro" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
         <svg class="block h-3.5 w-3.5 dark:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
         </svg>
@@ -146,7 +158,7 @@
       </button>
       <!-- View mode toggle -->
-      <button id="view-mode-toggle" title="Toggle mobile/web view" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+      <button id="view-mode-toggle" title="Cambiar vista móvil/web" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
         <svg id="icon-phone" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>
         </svg>
@@ -156,7 +168,7 @@
       </button>
       <!-- Fullscreen button -->
-      <button id="btn-fullscreen" title="Fullscreen (F)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+      <button id="btn-fullscreen" title="Pantalla completa (F)" class="hidden sm:flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
         <svg id="icon-expand" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
         </svg>