@maccesar/aiskills 1.11.0 → 1.15.0

package/skills/stitch-showcase/references/12-video-embedding.md

@@ -0,0 +1,113 @@
+# Section: Video Embedding in Slots
+
+## Purpose
+
+Sometimes a Stitch slot needs to show a video instead of a still image
+(product demo, animated logo, looping background, recorded screen). This
+document captures the exact pattern that works across browsers and avoids
+the common pitfalls — content recropping, layout shift, AV1 codec, and
+aspect-ratio mismatch with the original wrapper.
+
+## The Tag
+
+Use a plain `<video>` element with native `width` and `height` attributes
+plus inline styling for safe defaults:
+
+```html
+<video
+  autoplay
+  muted
+  loop
+  playsinline
+  width="W"
+  height="H"
+  preload="metadata"
+  style="display:block;width:100%;height:auto;background:#000">
+  <source src="../videos/<slug>.mp4" type="video/mp4">
+</video>
+```
+
+Replace `W` / `H` with the **native** video dimensions and `<slug>` with
+the screen slug (or whatever filename you used inside `videos/`).
+
+### Why each attribute
+
+| Attribute | Why |
+|-----------|-----|
+| `autoplay muted loop playsinline` | All four are required for in-app autoplay on iOS and Android. Drop any one and mobile browsers refuse to play without a tap. |
+| Native `width` / `height` | Lets the browser compute the aspect ratio from the very first paint — prevents layout shift and CLS regressions. |
+| `preload="metadata"` | Loads just enough to know the dimensions and duration; avoids hammering the user's bandwidth when the screen is offscreen. |
+| `style="display:block"` | Removes the small descender gap inline videos otherwise get. |
+| `style="width:100%;height:auto"` | Scales the video to fit the parent column while keeping its native aspect ratio. **Do NOT use `object-cover`** — it crops the video. |
+| `background:#000` | Hides letterboxing during the brief moment before the first frame paints. |
+
+## File Workflow
+
+1. **Download** the source video. For Facebook/Instagram/YouTube/TikTok we
+   recommend `yt-dlp`:
+
+   ```bash
+   yt-dlp "https://www.facebook.com/<...>/videos/<id>" -o "videos/<slug>.%(ext)s"
+   ```
+
+2. **Re-encode to H.264** if the source comes down as AV1. AV1 doesn't
+   preview in macOS Finder and is rejected by Safari < 17:
+
+   ```bash
+   ffmpeg -i in.mp4 \
+     -c:v libx264 -preset fast -crf 23 \
+     -c:a aac \
+     -movflags +faststart \
+     videos/<slug>.mp4
+   ```
+
+   - `-preset fast`: balanced speed/quality.
+   - `-crf 23`: visually-lossless default; lower number = bigger file.
+   - `-movflags +faststart`: moves the moov atom to the front so the video
+     can start playing before fully downloaded.
+
+3. **Place** the encoded `.mp4` in a `videos/` folder at the **project
+   level** (the same level as `stitch/` or `showcase/`, not inside
+   `assets/`), so the build keeps it out of the screen-extraction pipeline:
+
+   ```text
+   my-project/
+   ├── stitch/                 ← Stitch exports (zips)
+   ├── videos/                 ← your videos
+   │   └── hero.mp4
+   └── showcase/               ← generated
+       └── assets/
+           └── <slug>.html     ← references ../../videos/hero.mp4
+   ```
+
+4. **Reference from the screen HTML** with a relative path. From inside
+   `showcase/assets/<slug>.html`, `videos/` is two levels up:
+
+   ```html
+   <source src="../../videos/hero.mp4" type="video/mp4">
+   ```
+
+## Aspect-Ratio Mismatch
+
+The original Stitch wrapper for a video slot usually carries a fixed
+aspect ratio (e.g. `aspect-[4/5]`). If your video is a different shape —
+say 9/16 — keeping the wrapper's aspect locks the video into the wrong
+box, which then forces a choice:
+
+| Option | Effect |
+|--------|--------|
+| Keep wrapper's `aspect-*` + `object-cover` | Video crops; logos and edges get chopped. |
+| **Remove wrapper's `aspect-*` + `height:auto`** | Video keeps its native aspect; the slot grows or shrinks vertically to fit. ✅ |
+
+The second option is almost always what you want — better to have a
+slightly taller card than to chop the brand logo out of the frame.
+
+## Quick Sanity Checks
+
+After embedding, open the screen in a browser and confirm:
+
+- The video autoplays without a tap on Chrome, Safari, and Firefox.
+- The video loops cleanly (no flash on rewind).
+- On mobile (iOS Safari), it autoplays silently inline (not fullscreen).
+- The file size is reasonable — re-encode with a higher `-crf` if it's
+  more than ~3-5 MB per 10 seconds.

package/skills/stitch-showcase/references/13-language-detection.md

@@ -0,0 +1,82 @@
+# Section: Language Detection
+
+## Purpose
+
+The `<html lang="…">` attribute on the generated `index.html` and
+`viewer.html` tells the browser which natural language the content uses.
+If the value disagrees with the actual content, Chrome shows a "Translate
+this page" banner and assistive technologies pronounce words with the
+wrong phoneme set. This document explains how the build picks the value
+and how to override it.
+
+## Resolution Order
+
+The `lang` attribute is chosen by the first rule that fires:
+
+1. **CLI flag** (future — not implemented yet): `--lang es` on
+   `build_showcase.py`.
+2. **`showcase.json` field**:
+
+   ```json
+   {
+     "source": "stitch",
+     "type": "mobile",
+     "name": "My App",
+     "lang": "es"
+   }
+   ```
+
+3. **`## Lang` section in `DESIGN.md`** (same shape as `## Type`):
+
+   ```markdown
+   ## Lang
+   es
+   ```
+
+4. **Auto-detection** from the text content of `DESIGN.md` (project name,
+   section names, descriptions). The detector counts Spanish signals:
+
+   - Accented characters (`á é í ó ú ñ`).
+   - Common Spanish stop words (`de`, `el`, `la`, `los`, `las`, `para`,
+     `con`, `pantalla`, `aplicación`, `usuario`, etc.).
+
+   If the Spanish score crosses a small threshold, the lang resolves to
+   `"es"`; otherwise it falls through.
+
+5. **Default**: `"en"`.
+
+## When to Override
+
+The auto-detector handles obvious cases (a project whose DESIGN.md is
+entirely Spanish or entirely English), but it can be fooled by very
+short DESIGN.md files or by projects where the UI language differs from
+the documentation language. Use an explicit override when:
+
+- The DESIGN.md is in English but the actual screen content is Spanish
+  (you'd be documenting an es-MX app in English for a client).
+- The DESIGN.md is sparse and the heuristic has nothing to score on.
+- You want a non-Spanish, non-English language (`pt`, `fr`, `de` …) —
+  the auto-detector only distinguishes Spanish vs everything else.
+
+## Why It Matters
+
+- **Chrome's translate prompt**: with `lang="en"` and Spanish content,
+  Chrome offers to translate the page to the user's locale. Users
+  perceive this as a bug.
+- **Screen readers**: VoiceOver and TalkBack switch pronunciation
+  engines per `lang`. A wrong value makes Spanish text sound like a
+  speech synthesizer trying to pronounce "configuración" as English.
+- **Search engines**: the `lang` attribute is a soft signal but it's
+  read by indexers when ranking pages by locale.
+
+## Common Mistake: Mismatched Lang and Content
+
+The previous template hard-coded `lang="en"` even for Spanish-only
+projects. The fix wasn't to flip the default to `"es"` (that just moves
+the bug to English projects) — it was to detect or accept an override.
+The same logic now lives in `parse_design_md.py` (`_detect_lang`) and
+`build_showcase.py` (the `{{HTML_LANG}}` placeholder substitution).
+
+If you ever see Chrome offering to translate one of your showcases:
+that's the signal that the resolved `lang` is wrong. Add an override to
+`showcase.json` or `DESIGN.md` and rebuild.

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

@@ -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

@@ -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

@@ -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

@@ -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') {