# Shiki Code Blocks

> Resalta la sintaxis de bloques de código con Shiki. Soporta renderizado en el servidor en RSC y cambio automático entre tema claro y oscuro.

Fuente: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/shiki-code-blocks
Markdown: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/shiki-code-blocks.md

Repositorio: https://github.com/andrelandgraf/fullstackrecipes
Autor: andrelandgraf
Licencia: no declarada
Actualizado: hace 3 meses
Coste de contexto: 30 tok instalada, 96 tok al activarse, 96 tok con todos los archivos del bundle
Bundle: 1 archivo, 385 B
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add andrelandgraf/fullstackrecipes --skill shiki-code-blocks --agent claude-code
# Cursor
npx -y skills add andrelandgraf/fullstackrecipes --skill shiki-code-blocks --agent cursor
# Codex
npx -y skills add andrelandgraf/fullstackrecipes --skill shiki-code-blocks --agent codex
# Gemini CLI
npx -y skills add andrelandgraf/fullstackrecipes --skill shiki-code-blocks --agent gemini
# Windsurf
npx -y skills add andrelandgraf/fullstackrecipes --skill shiki-code-blocks --agent windsurf
# Cline
npx -y skills add andrelandgraf/fullstackrecipes --skill shiki-code-blocks --agent cline
```

## Qué hace

- Añade resaltado de sintaxis a bloques de código usando Shiki
- Permite renderizado en el servidor dentro de React Server Components (RSC)
- Cambia automáticamente entre tema claro y oscuro

## Cuándo usarla

- Se necesita resaltar sintaxis en bloques de código de una app
- Se requiere que el resaltado funcione en RSC con SSR
- Se quiere que el bloque de código cambie de tema según el modo claro/oscuro

## Qué la activa

- "Añade resaltado de sintaxis con Shiki a mis bloques de código"
- "Necesito que el código se renderice en el servidor con soporte de tema oscuro"

## Antes de instalar

- Necesita en el PATH: curl
- makes network requests

## Archivos

- SKILL.md — 385 B

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/shiki-code-blocks/SKILL.md

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [andrelandgraf](https://skillsagentes.com/creators/andrelandgraf.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Authoring Recipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authoring-recipes.md): Guías para escribir contenido de fullstackrecipes: setup recipes, skills expuestas, cookbooks, templates y utilidades instalables del registro, pensadas para mantenedores del proyecto, no para consumidores del stack.
- [Use Fullstackrecipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/use-fullstackrecipes.md): Descubre y sigue las recetas de fullstackrecipes (guías de setup, skills, cookbooks) obteniendo su Markdown; la meta-skill para encontrar y aplicar recetas correctamente.
- [Authentication Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authentication-best-practices.md): Lee sesiones en cliente y servidor, protege rutas y ejecuta sign in/up/out con Better Auth. Úsalo al restringir páginas/APIs por autenticación o al conectar flujos de auth.
- [Better Auth Components](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/better-auth-components.md): Añade componentes de UI y páginas para flujos de autenticación: inicio de sesión, registro, recuperación de contraseña, restablecimiento de contraseña y verificación de email.
- [Analytics Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/analytics-best-practices.md): Rastrea eventos personalizados y conversiones con Vercel Web Analytics mediante track(). Úsalo al instrumentar acciones de usuario, conversiones o envíos de formularios.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)