> ## Documentation Index
> Fetch the complete documentation index at: https://widgets.isselcode.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Instalación y compatibilidad

> Agrega el paquete, elige los imports y prepara la skill.

## Preparar el entorno

Necesitas Flutter y una copia del paquete. Si lo obtienes desde el repositorio GitHub oficial, también necesitas Git y acceso a ese repositorio. Antes de comenzar, comprueba tu instalación:

```bash theme={null}
flutter --version
flutter doctor
git --version
```

Usa un SDK moderno y valida tu combinación de Flutter, Dart y el paquete. El código utiliza APIs como `ColorScheme.surfaceContainer`, `CardThemeData`, `Row.spacing`, `Column.spacing` y `Color.withValues`. Esta documentación no establece un mínimo efectivo que no se haya probado.

## Agregar el paquete a una app

Si empiezas desde cero:

```bash theme={null}
flutter create mi_app
cd mi_app
```

La skill actual permite usar una copia local del paquete o el repositorio GitHub. Añade una de las siguientes opciones al bloque `dependencies` existente, sin duplicar la clave.

Si tu app y el paquete están en carpetas hermanas, puedes usar una ruta local:

```yaml theme={null}
dependencies:
  flutter:
    sdk: flutter
  issel_code_widgets:
    path: ../issel_code_widgets
```

La ruta se resuelve desde el `pubspec.yaml` de tu app. Debe apuntar a la raíz real del paquete, que contiene su propio `pubspec.yaml` y `lib/`; una carpeta con sólo documentación no sirve como dependencia. Comprueba sus exports y constructores antes de usar los ejemplos.

Para obtener el paquete desde GitHub:

```yaml theme={null}
dependencies:
  flutter:
    sdk: flutter
  issel_code_widgets:
    git: https://github.com/IsselCode/issel_code_widgets.git
```

La dependencia Git obtiene el contenido de la rama predeterminada del repositorio. Consulta la sintaxis en la [documentación oficial de dependencias Git de Dart](https://dart.dev/tools/pub/dependencies#git-packages).

Resuelve las dependencias:

```bash theme={null}
flutter pub get
flutter pub deps
```

Comprueba que `issel_code_widgets` aparece en las dependencias resueltas. Para Git, revisa la URL de `pubspec.lock`; para una dependencia local, revisa la ruta resuelta. Si tu aplicación ya tiene el paquete y quieres obtener los cambios más recientes del repositorio, ejecuta `flutter pub upgrade issel_code_widgets`; consulta la [guía oficial de actualización de dependencias](https://dart.dev/tools/pub/cmd/pub-upgrade). La carpeta `example/` del paquete tiene una configuración interna de desarrollo distinta; no copies su dependencia sin comprobar que se ajusta a tu app.

## Elegir el import

| Import | Uso |
| - | - |
| `package:issel_code_widgets/issel_code_widgets.dart` | Widgets, tema, app, navegación y escritorio desde presentación/composición. |
| `package:issel_code_widgets/issel_app.dart` | Configuración, controladores de app/presentación y tema. |
| `package:issel_code_widgets/issel_navigation.dart` | Sólo servicio de navegación. |
| `package:issel_code_widgets/issel_desktop.dart` | Piezas y configuración de escritorio. |
| `package:issel_code_widgets/issel_core.dart` | Excepciones, fallos y resultados de datos/dominio. |

Los tipos core se exportan únicamente desde `issel_core.dart`. La biblioteca core utiliza Dart sin imports Flutter; la dependencia que la contiene sigue siendo un paquete Flutter. No importes `lib/src/...` desde una app consumidora.

Para construir UI necesitas también Flutter; el barrel Issel no reexporta `material.dart`:

```dart theme={null}
import 'package:flutter/material.dart';
import 'package:issel_code_widgets/issel_code_widgets.dart';
```

## Preparar la skill

Obtén la carpeta completa de la skill de su distribuidor y conserva esta estructura:

```text theme={null}
issel-code-widgets/
  SKILL.md
  agents/openai.yaml
  references/
    arquitectura.md
    componentes.md
    configuracion-issel.md
    escritorio.md
    patron-visual.md
```

Necesitas la distribución completa de la skill o la URL de su repositorio; no se puede deducir esa URL a partir de la del paquete.

En Codex, la documentación oficial consultada permite skills locales por proyecto en `.agents/skills/` y personales en `~/.agents/skills/`. Coloca allí la carpeta completa. Invócala con `$issel-code-widgets` o selecciónala mediante `/skills`; si no aparece tras un cambio, reinicia Codex. Otros hosts pueden usar su propio mecanismo de descubrimiento. [Guía oficial de skills](https://learn.chatgpt.com/docs/build-skills).

Dos copias de la skill con el mismo nombre pueden tener instrucciones diferentes: comprueba el origen de la seleccionada.

## Primera verificación

Ejecuta la [primera app](/ejemplos/primera-app) y confirma lo siguiente:

1. El código importa el barrel público y renderiza controles Issel.
2. El modo cambia entre sistema, claro y oscuro.
3. La raíz utiliza la clave de navegación del mismo controlador de app.
4. Los recursos externos que tu pantalla use están configurados.

El paquete utiliza `auto_size_text`, `file_picker` y `shimmer`. Sus widgets de imágenes locales requieren assets declarados por la app; las fuentes y los plugins nativos de ventana también pertenecen a la app. Consulta las [recetas de integración](/ejemplos/recetas).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.