3ff9b70e4c
- Add complete agent harness structure with 8 roles (leader, triager, architect, implementer, reviewer, security, qa, documenter) - Implement strict workflow with 9 stages and mandatory gates - Add comprehensive verification script and runtime status tracking - Create artifact-based evidence system with contracts and schemas - Add agent policy matrix with permissions and anti-cheat rules - Include test suite (44 tests passing) and CI-ready structure - Add documentation: README, HOWTO, CHECKPOINTS, templates - Configure model routing policies and token-aware task assignment - Add BDD/SDD specification guides and feature templates - Include starter pack for quick project onboarding All verification checks pass. Framework ready for production use.
108 lines
3.0 KiB
Markdown
108 lines
3.0 KiB
Markdown
# Manual de uso — Skeleton 2.0.4 (para ARNES template)
|
|
|
|
> Fuente revisada: `https://github.com/getskeleton/Skeleton` (v2.0.4, 2014).
|
|
|
|
## 1) Qué es y cuándo usarlo
|
|
Skeleton es un boilerplate CSS ligero (no framework UI completo). Ideal para:
|
|
- paneles internos
|
|
- CRUDs
|
|
- prototipos rápidos
|
|
- apps server-rendered (Flask + Jinja)
|
|
|
|
No ideal para:
|
|
- diseño de componentes complejos
|
|
- design systems avanzados
|
|
- apps con alta complejidad visual
|
|
|
|
## 2) Archivos base
|
|
En este template se incluyen en:
|
|
- `defaults/flask-skeleton/static/css/normalize.css`
|
|
- `defaults/flask-skeleton/static/css/skeleton.css`
|
|
- `defaults/flask-skeleton/static/images/favicon.png`
|
|
|
|
Uso recomendado en HTML:
|
|
```html
|
|
<link rel="stylesheet" href="/static/css/normalize.css">
|
|
<link rel="stylesheet" href="/static/css/skeleton.css">
|
|
```
|
|
|
|
## 3) Grid (12 columnas)
|
|
Estructura:
|
|
```html
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="six columns">...</div>
|
|
<div class="six columns">...</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
Clases comunes:
|
|
- `one` ... `twelve columns`
|
|
- `one-half column`
|
|
- `one-third column`
|
|
- `two-thirds column`
|
|
|
|
Offsets:
|
|
- `offset-by-one ... offset-by-eleven`
|
|
|
|
Breakpoints relevantes:
|
|
- `min-width: 400px`
|
|
- `min-width: 550px` (aquí se activa grid multi-columna)
|
|
- `750px`, `1000px`, `1200px`
|
|
|
|
## 4) Utilidades clave
|
|
- `u-full-width` → ancho 100%
|
|
- `u-max-full-width` → max-width 100%
|
|
- `u-pull-right`, `u-pull-left`
|
|
- `u-cf` (clear float)
|
|
|
|
## 5) Formularios y botones
|
|
Inputs/select/textarea ya traen estilo base.
|
|
Patrones recomendados:
|
|
- siempre usar `u-full-width` en formularios de app
|
|
- usar `.button` y `.button.button-primary`
|
|
- mantener labels visibles (`label` + `for`)
|
|
|
|
## 6) Tablas
|
|
Skeleton trae estilo mínimo. Para tablas largas:
|
|
- envolver en `.table-responsive` propia del proyecto
|
|
- controlar overflow horizontal en móviles
|
|
|
|
## 7) Limitaciones conocidas (por antigüedad)
|
|
- Sistema basado en **floats** (no flex/grid nativo)
|
|
- Tipografía por defecto antigua (Raleway de Google Fonts vía URL legacy)
|
|
- No incluye componentes modernos (modal, tabs, toast, etc.)
|
|
- No incluye tokens de diseño ni theming avanzado
|
|
|
|
## 8) Mejoras recomendadas en proyectos nuevos
|
|
Mantener Skeleton como base, pero añadir capa moderna propia:
|
|
|
|
1. **Layout helper CSS local**
|
|
- utilidades flex (`.d-flex`, `.justify-between`, etc.)
|
|
- spacing consistente (`.mb-1`, `.mb-2`, ...)
|
|
|
|
2. **Responsive wrappers**
|
|
- `.table-responsive`
|
|
- patrones mobile-first para filtros/toolbar
|
|
|
|
3. **Componentes mínimos reutilizables**
|
|
- modal base
|
|
- badges
|
|
- pagination bar
|
|
- alertas/confirmaciones
|
|
|
|
4. **Accesibilidad**
|
|
- foco visible
|
|
- contraste de colores
|
|
- labels/aria en acciones icon-only
|
|
|
|
5. **No tocar upstream directamente**
|
|
- dejar `skeleton.css` y `normalize.css` sin modificar
|
|
- personalización en `custom.css` del proyecto
|
|
|
|
## 9) Regla de mantenimiento para ARNES
|
|
- Skeleton se trata como dependencia estática base.
|
|
- Cualquier override va en CSS del proyecto.
|
|
- Si un proyecto requiere UI compleja, considerar migración progresiva a capa de componentes propia.
|