How do I install the Kuenta Design skill?

Run npx skillmds@latest add aibot88/kuenta-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Kuenta Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Kuenta Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Kuenta Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Kuenta Design?

aibot88 (@aibot88) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Kuenta Design by aibot88 — Agent Skill

Name: Kuenta Design
Rating: 4.2 (5 reviews)
Author: aibot88

Kuenta Design

Design system y guía visual completa para el proyecto KUENTA (PWA de pagos P2P Chile). Usar SIEMPRE que se cree o modifique cualquier componente visual, pantalla, estilo, layout o elemento de interfaz en el proyecto KUENTA. Incluye tipografía (Syne + DM Sans), paleta de colores con tokens CSS, glassmorphism, wordmark, modos claro/oscuro, iconografía SVG, animaciones, componentes y checklist de implementación. También usar cuando se mencione: wordmark, splash screen, login, header, tab bar, cards, botones, inputs, avatares, colores, fuentes o cualquier elemento visual de KUENTA.

aibot88 Updated Sep 9, 2026 3 repo stars

File contents

KUENTA Design System Skill

Instrucción de uso

Cuando trabajas en el proyecto KUENTA, lee el archivo DESIGN_SYSTEM.md antes de escribir cualquier código de componente o pantalla:

# El archivo está en la raíz del proyecto KUENTA
cat DESIGN_SYSTEM.md

Si estás en un contexto donde el archivo no está disponible localmente, está disponible en: /mnt/user-data/outputs/DESIGN_SYSTEM.md

Resumen rápido (leer DESIGN_SYSTEM.md para detalles completos)

Tipografía

Wordmark únicamente: Syne 800, letter-spacing 8-12px, gradient morado
Todo lo demás: DM Sans 300-700
Importar ambas desde Google Fonts en index.html

Componente Wordmark obligatorio

// SIEMPRE usar este componente, nunca escribir "KUENTA" como texto plano
import { Wordmark } from '@/components/ui/Wordmark'
// <Wordmark size="lg" />  → splash (42px)
// <Wordmark size="md" />  → login header (28px)
// <Wordmark size="sm" />  → inline (22px)

Reglas absolutas

Cero emojis — solo íconos SVG o Lucide React
Cero hardcoded hex — usar CSS vars (var(--text), var(--surface), etc.)
Cero ShadCN — design system propio
Wordmark siempre con <Wordmark />, nunca texto plano
Dos temas — [data-theme="dark"] y [data-theme="light"] en <html>
Touch targets ≥ 44×44px siempre

Paleta core (ambos modos)

Morado primario:  #4C44AA / #6860C8 / #8880DE
Verde success:    var(--green)   → #0A5C45 light / #3DC99A dark
Rojo error:       var(--red)     → #8B2020 light / #F07070 dark
Header gradient:  siempre morado (no cambia con el tema)

Pantallas de auth — estructura

/splash  → SplashPage    : blobs + Wordmark lg + tagline + dots → 2.5s → /login
/login   → LoginPage     : header gradient + Wordmark md + phone input + social btns
/otp     → OTPPage       : 6 dígitos + resend
/setup   → ProfileSetup  : nombre + foto

Importar Google Fonts (index.html)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet">

tailwind.config.ts — extensiones requeridas

fontFamily: {
  brand: ['Syne', 'sans-serif'],
  ui: ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'],
},
borderRadius: {
  card: '20px', modal: '28px', input: '14px',
  btn: '16px', tab: '28px', pill: '100px', icon: '14px',
},

Lee DESIGN_SYSTEM.md para:

Tokens CSS completos de color (claro y oscuro)
Código completo de SplashPage.tsx y LoginPage.tsx
Componente Wordmark.tsx completo
Componente ThemeToggle.tsx con Zustand persist
AmbientBlobs.tsx
Escala tipográfica completa (9 niveles)
Todos los keyframes de animación
Checklist de implementación
Reglas de iconografía y tamaños

Skill generado para el proyecto KUENTA — actualizar este archivo si cambia el design system.

---name: kuenta-designdescription: Design system y guía visual completa para el proyecto KUENTA (PWA de pagos P2P Chile). Usar SIEMPRE que se cree o modifique cualquier componente visual, pantalla, estilo, layout o elemento de interfaz en el proyecto KUENTA. Incluye tipografía (Syne + DM Sans), paleta de colores con tokens CSS, glassmorphism, wordmark, modos claro/oscuro, iconografía SVG, animaciones, componentes y checklist de implementación. También usar cuando se mencione: wordmark, splash screen, login, header, tab bar, cards, botones, inputs, avatares, colores, fuentes o cualquier elemento visual de KUENTA.--- # KUENTA Design System Skill ## Instrucción de uso Cuando trabajas en el proyecto KUENTA, **lee el archivo `DESIGN_SYSTEM.md`** antes de escribir cualquier código de componente o pantalla: ```bash # El archivo está en la raíz del proyecto KUENTA cat DESIGN_SYSTEM.md ``` Si estás en un contexto donde el archivo no está disponible localmente, está disponible en: `/mnt/user-data/outputs/DESIGN_SYSTEM.md` ## Resumen rápido (leer DESIGN_SYSTEM.md para detalles completos) ### Tipografía - **Wordmark únicamente:** `Syne` 800, letter-spacing 8-12px, gradient morado - **Todo lo demás:** `DM Sans` 300-700 - Importar ambas desde Google Fonts en `index.html` ### Componente Wordmark obligatorio ```tsx // SIEMPRE usar este componente, nunca escribir "KUENTA" como texto plano import { Wordmark } from '@/components/ui/Wordmark' // <Wordmark size="lg" /> → splash (42px) // <Wordmark size="md" /> → login header (28px) // <Wordmark size="sm" /> → inline (22px) ``` ### Reglas absolutas 1. **Cero emojis** — solo íconos SVG o Lucide React 2. **Cero hardcoded hex** — usar CSS vars (`var(--text)`, `var(--surface)`, etc.) 3. **Cero ShadCN** — design system propio 4. **Wordmark siempre** con `<Wordmark />`, nunca texto plano 5. **Dos temas** — `[data-theme="dark"]` y `[data-theme="light"]` en `<html>` 6. **Touch targets** ≥ 44×44px siempre ### Paleta core (ambos modos) ``` Morado primario: #4C44AA / #6860C8 / #8880DE Verde success: var(--green) → #0A5C45 light / #3DC99A dark Rojo error: var(--red) → #8B2020 light / #F07070 dark Header gradient: siempre morado (no cambia con el tema) ``` ### Pantallas de auth — estructura ``` /splash → SplashPage : blobs + Wordmark lg + tagline + dots → 2.5s → /login /login → LoginPage : header gradient + Wordmark md + phone input + social btns /otp → OTPPage : 6 dígitos + resend /setup → ProfileSetup : nombre + foto ``` ### Importar Google Fonts (index.html) ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet"> ``` ### tailwind.config.ts — extensiones requeridas ```ts fontFamily: { brand: ['Syne', 'sans-serif'], ui: ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'], }, borderRadius: { card: '20px', modal: '28px', input: '14px', btn: '16px', tab: '28px', pill: '100px', icon: '14px', }, ``` ## Lee DESIGN_SYSTEM.md para: - Tokens CSS completos de color (claro y oscuro) - Código completo de `SplashPage.tsx` y `LoginPage.tsx` - Componente `Wordmark.tsx` completo - Componente `ThemeToggle.tsx` con Zustand persist - `AmbientBlobs.tsx` - Escala tipográfica completa (9 niveles) - Todos los keyframes de animación - Checklist de implementación - Reglas de iconografía y tamaños --- *Skill generado para el proyecto KUENTA — actualizar este archivo si cambia el design system.*

Frequently asked questions