@maccesar/aiskills 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +531 -0
  2. package/bin/aiskills.js +76 -0
  3. package/lib/cache.js +49 -0
  4. package/lib/cleanup.js +77 -0
  5. package/lib/commands/auto-update.js +131 -0
  6. package/lib/commands/doctor.js +139 -0
  7. package/lib/commands/list.js +77 -0
  8. package/lib/commands/skills.js +263 -0
  9. package/lib/commands/status.js +94 -0
  10. package/lib/commands/uninstall.js +182 -0
  11. package/lib/commands/update.js +149 -0
  12. package/lib/config.js +90 -0
  13. package/lib/downloader.js +110 -0
  14. package/lib/hooks.js +74 -0
  15. package/lib/installer.js +114 -0
  16. package/lib/platform.js +112 -0
  17. package/lib/prompts/checkboxCancel.js +264 -0
  18. package/lib/prompts/selectCancel.js +204 -0
  19. package/lib/symlink.js +154 -0
  20. package/lib/utils.js +49 -0
  21. package/package.json +61 -0
  22. package/skills/humaniza/SKILL.md +51 -0
  23. package/skills/humaniza/agents/openai.yaml +4 -0
  24. package/skills/humaniza/references/ai-patterns-es.md +51 -0
  25. package/skills/humaniza/references/checklist.md +9 -0
  26. package/skills/humaniza/references/examples.md +17 -0
  27. package/skills/humaniza/references/lexicon-es-mx.md +36 -0
  28. package/skills/humaniza/references/modes-es-mx.md +41 -0
  29. package/skills/humaniza/references/voice-es-mx.md +24 -0
  30. package/skills/refactoring-ui/SKILL.md +59 -0
  31. package/skills/refactoring-ui/references/01-design-process.md +72 -0
  32. package/skills/refactoring-ui/references/02-visual-hierarchy.md +84 -0
  33. package/skills/refactoring-ui/references/03-layout-spacing.md +69 -0
  34. package/skills/refactoring-ui/references/04-typography.md +70 -0
  35. package/skills/refactoring-ui/references/05-color.md +96 -0
  36. package/skills/refactoring-ui/references/06-depth-shadows.md +74 -0
  37. package/skills/refactoring-ui/references/07-images.md +75 -0
  38. package/skills/refactoring-ui/references/08-finishing-touches.md +91 -0
  39. package/skills/stitch-showcase/SKILL.md +411 -0
  40. package/skills/stitch-showcase/references/01-navbar.md +52 -0
  41. package/skills/stitch-showcase/references/02-hero.md +56 -0
  42. package/skills/stitch-showcase/references/03-design-system.md +102 -0
  43. package/skills/stitch-showcase/references/04-screen-gallery.md +102 -0
  44. package/skills/stitch-showcase/references/05-viewer-web.md +105 -0
  45. package/skills/stitch-showcase/references/06-viewer-mobile.md +104 -0
  46. package/skills/stitch-showcase/references/07-theme-system.md +77 -0
  47. package/skills/stitch-showcase/references/08-type-detection.md +81 -0
  48. package/skills/stitch-showcase/references/09-quality-standards.md +126 -0
  49. package/skills/stitch-showcase/references/10-component-standardization.md +40 -0
  50. package/skills/stitch-showcase/references/11-component-catalog.md +70 -0
  51. package/skills/stitch-showcase/references/catalog-template.html +841 -0
  52. package/skills/stitch-showcase/references/index.html +299 -0
  53. package/skills/stitch-showcase/references/viewer.html +412 -0
  54. package/skills/stitch-showcase/scripts/__pycache__/build_showcase.cpython-314.pyc +0 -0
  55. package/skills/stitch-showcase/scripts/__pycache__/component_utils.cpython-313.pyc +0 -0
  56. package/skills/stitch-showcase/scripts/__pycache__/detect_components.cpython-313.pyc +0 -0
  57. package/skills/stitch-showcase/scripts/__pycache__/extract_catalog.cpython-313.pyc +0 -0
  58. package/skills/stitch-showcase/scripts/__pycache__/extract_text.cpython-313.pyc +0 -0
  59. package/skills/stitch-showcase/scripts/__pycache__/extract_zips.cpython-313.pyc +0 -0
  60. package/skills/stitch-showcase/scripts/__pycache__/parse_design_md.cpython-313.pyc +0 -0
  61. package/skills/stitch-showcase/scripts/apply_canonical.py +238 -0
  62. package/skills/stitch-showcase/scripts/build_showcase.py +2103 -0
  63. package/skills/stitch-showcase/scripts/component_utils.py +398 -0
  64. package/skills/stitch-showcase/scripts/detect_components.py +284 -0
  65. package/skills/stitch-showcase/scripts/extract_catalog.py +913 -0
  66. package/skills/stitch-showcase/scripts/extract_text.py +268 -0
  67. package/skills/stitch-showcase/scripts/extract_zips.py +178 -0
  68. package/skills/stitch-showcase/scripts/parse_design_md.py +397 -0
  69. package/skills/vscode-extension-dev/SKILL.md +114 -0
  70. package/skills/vscode-extension-dev/references/api-patterns.md +625 -0
  71. package/skills/vscode-extension-dev/references/architecture.md +287 -0
  72. package/skills/vscode-extension-dev/references/package-json-schema.md +345 -0
  73. package/skills/vscode-extension-dev/references/publishing.md +251 -0
package/lib/symlink.js ADDED
@@ -0,0 +1,154 @@
1
+ /**
2
+ * Cross-platform symlink utilities
3
+ * Creates symlinks with fallback to copy on Windows
4
+ */
5
+
6
+ import { mkdirSync, existsSync } from 'fs';
7
+ import { symlink, readlink, unlink, lstat } from 'fs/promises';
8
+ import { join, dirname, relative } from 'path';
9
+ import { copy, remove } from 'fs-extra';
10
+ import { isWindows } from './platform.js';
11
+
12
+ /**
13
+ * Create a symlink or copy as fallback
14
+ * @param {string} target - Target path (what the symlink points to)
15
+ * @param {string} path - Symlink path (where to create it)
16
+ * @param {boolean} useRelative - Whether to use a relative path for the symlink
17
+ * @returns {Promise<boolean>} True if successful
18
+ */
19
+ export async function createSymlinkOrCopy(target, path, useRelative = false) {
20
+ // Ensure parent directory exists
21
+ const dir = dirname(path);
22
+ if (!existsSync(dir)) {
23
+ mkdirSync(dir, { recursive: true });
24
+ }
25
+
26
+ // Remove existing file/directory/symlink
27
+ if (existsSync(path)) {
28
+ await removePath(path);
29
+ }
30
+
31
+ // Determine final target path
32
+ let finalTarget = target;
33
+ if (useRelative) {
34
+ finalTarget = relative(dirname(path), target);
35
+ }
36
+
37
+ // Try creating symlink first
38
+ try {
39
+ // Windows requires 'junction' or 'dir' for directory symlinks
40
+ await symlink(finalTarget, path, 'dir');
41
+ return true;
42
+ } catch (error) {
43
+ // On Windows or if symlink fails, copy the directory
44
+ if (isWindows() || error.code === 'EPERM' || error.code === 'EXDEV') {
45
+ try {
46
+ await copy(target, path, { overwrite: true });
47
+ return true;
48
+ } catch (copyError) {
49
+ console.error(`Failed to copy: ${copyError.message}`);
50
+ return false;
51
+ }
52
+ }
53
+ console.error(`Failed to create symlink: ${error.message}`);
54
+ return false;
55
+ }
56
+ }
57
+
58
+ /**
59
+ * Remove a file, directory, or symlink
60
+ * @param {string} path - Path to remove
61
+ * @returns {Promise<void>}
62
+ */
63
+ async function removePath(path) {
64
+ try {
65
+ await remove(path);
66
+ } catch {
67
+ // Ignore errors
68
+ }
69
+ }
70
+
71
+ /**
72
+ * Create symlinks for all skills to a platform directory
73
+ * @param {string} platformSkillsDir - Platform skills directory
74
+ * @param {Array} skills - List of skill names
75
+ * @param {string} baseDir - Optional base directory for target resolution
76
+ * @returns {Promise<Object>} Results object with success/failure counts
77
+ */
78
+ export async function createSkillSymlinks(platformSkillsDir, skills, baseDir) {
79
+ const { getAgentsSkillsDir } = await import('./config.js');
80
+ const agentsSkillsDir = getAgentsSkillsDir(baseDir);
81
+
82
+ const results = {
83
+ linked: [],
84
+ failed: [],
85
+ };
86
+
87
+ // Ensure platform directory exists
88
+ if (!existsSync(platformSkillsDir)) {
89
+ mkdirSync(platformSkillsDir, { recursive: true });
90
+ }
91
+
92
+ // Use relative symlinks if we are in a local installation
93
+ const useRelative = !!baseDir;
94
+
95
+ for (const skill of skills) {
96
+ const target = join(agentsSkillsDir, skill);
97
+ const linkPath = join(platformSkillsDir, skill);
98
+
99
+ if (await createSymlinkOrCopy(target, linkPath, useRelative)) {
100
+ results.linked.push(skill);
101
+ } else {
102
+ results.failed.push(skill);
103
+ }
104
+ }
105
+
106
+ return results;
107
+ }
108
+
109
+ /**
110
+ * Check if a path is a symlink
111
+ * @param {string} path - Path to check
112
+ * @returns {Promise<boolean>} True if symlink
113
+ */
114
+ export async function isSymlink(path) {
115
+ try {
116
+ const { lstat } = await import('fs/promises');
117
+ const stats = await lstat(path);
118
+ return stats.isSymbolicLink();
119
+ } catch {
120
+ return false;
121
+ }
122
+ }
123
+
124
+ /**
125
+ * Resolve symlink target
126
+ * @param {string} path - Symlink path
127
+ * @returns {Promise<string|null>} Target path or null
128
+ */
129
+ export async function resolveSymlink(path) {
130
+ try {
131
+ return await readlink(path);
132
+ } catch {
133
+ return null;
134
+ }
135
+ }
136
+
137
+ /**
138
+ * Remove a symlink and recreate it (update)
139
+ * @param {string} target - New target path
140
+ * @param {string} path - Symlink path
141
+ * @returns {Promise<boolean>} True if successful
142
+ */
143
+ export async function updateSymlink(target, path) {
144
+ await removePath(path);
145
+ return createSymlinkOrCopy(target, path);
146
+ }
147
+
148
+ export default {
149
+ createSymlinkOrCopy,
150
+ createSkillSymlinks,
151
+ isSymlink,
152
+ resolveSymlink,
153
+ updateSymlink,
154
+ };
package/lib/utils.js ADDED
@@ -0,0 +1,49 @@
1
+ /**
2
+ * Utility functions
3
+ */
4
+
5
+ /**
6
+ * Format a list of items for display
7
+ * @param {Array} items - Array of strings
8
+ * @returns {string} Comma-separated list
9
+ */
10
+ export function formatList(items) {
11
+ return items.join(', ');
12
+ }
13
+
14
+ /**
15
+ * Parse version string to compare
16
+ * @param {string} version - Version string (e.g., "1.0.0")
17
+ * @returns {Array} Array of version parts
18
+ */
19
+ export function parseVersion(version) {
20
+ const matches = version.match(/\d+/g) || [];
21
+ return matches.map((v) => parseInt(v, 10));
22
+ }
23
+
24
+ /**
25
+ * Compare two version strings
26
+ * @param {string} v1 - First version
27
+ * @param {string} v2 - Second version
28
+ * @returns {number} -1 if v1 < v2, 0 if equal, 1 if v1 > v2
29
+ */
30
+ export function compareVersions(v1, v2) {
31
+ const parts1 = parseVersion(v1);
32
+ const parts2 = parseVersion(v2);
33
+
34
+ for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
35
+ const p1 = parts1[i] || 0;
36
+ const p2 = parts2[i] || 0;
37
+
38
+ if (p1 < p2) return -1;
39
+ if (p1 > p2) return 1;
40
+ }
41
+
42
+ return 0;
43
+ }
44
+
45
+ export default {
46
+ formatList,
47
+ parseVersion,
48
+ compareVersions,
49
+ };
package/package.json ADDED
@@ -0,0 +1,61 @@
1
+ {
2
+ "name": "@maccesar/aiskills",
3
+ "version": "1.7.0",
4
+ "description": "AI coding assistant skills for Claude Code, Gemini CLI, and Codex CLI",
5
+ "type": "module",
6
+ "bin": {
7
+ "aiskills": "./bin/aiskills.js"
8
+ },
9
+ "scripts": {
10
+ "test": "node --test test/**/*.test.js",
11
+ "lint": "eslint lib/**/*.js",
12
+ "format": "prettier --write lib/**/*.js"
13
+ },
14
+ "keywords": [
15
+ "ai",
16
+ "skills",
17
+ "claude",
18
+ "claude-code",
19
+ "gemini",
20
+ "codex",
21
+ "llm",
22
+ "agents",
23
+ "refactoring-ui",
24
+ "design",
25
+ "ui",
26
+ "ux"
27
+ ],
28
+ "author": "César Estrada <maccesar@gmail.com> (https://github.com/macCesar)",
29
+ "license": "MIT",
30
+ "repository": {
31
+ "type": "git",
32
+ "url": "git+https://github.com/macCesar/aiskills.git"
33
+ },
34
+ "bugs": {
35
+ "url": "https://github.com/macCesar/aiskills/issues"
36
+ },
37
+ "homepage": "https://github.com/macCesar/aiskills#readme",
38
+ "engines": {
39
+ "node": ">=18.0.0"
40
+ },
41
+ "dependencies": {
42
+ "@inquirer/prompts": "^8.2.0",
43
+ "chalk": "^5.6.2",
44
+ "commander": "^14.0.3",
45
+ "fs-extra": "^11.3.3",
46
+ "ora": "^9.1.0",
47
+ "tar": "^7.5.7"
48
+ },
49
+ "devDependencies": {
50
+ "eslint": "^9.39.2",
51
+ "prettier": "^3.8.1"
52
+ },
53
+ "files": [
54
+ "bin/",
55
+ "lib/",
56
+ "skills/"
57
+ ],
58
+ "publishConfig": {
59
+ "access": "public"
60
+ }
61
+ }
@@ -0,0 +1,51 @@
1
+ ---
2
+ name: humaniza
3
+ description: Humaniza textos en español (especialmente es-MX) eliminando patrones típicos de IA y devolviendo una versión natural y clara. Úsalo al editar emails, documentación, marketing, soporte o textos técnicos en español cuando el usuario pida "humanizar", "hacerlo más natural", "quitar tono IA" o "hacerlo sonar humano".
4
+ allowed-tools: Read, Write, Edit, Grep, Glob, AskUserQuestion
5
+ ---
6
+
7
+ # Humaniza
8
+
9
+ Editor de estilo para español de México. El objetivo es quitar tics de IA sin cambiar el contenido.
10
+
11
+ ## Alcance
12
+
13
+ - Mantener significado, datos y estructura general.
14
+ - Respetar puntuación y signos de apertura/cierre.
15
+ - Conservar registro (tú/usted) salvo solicitud explícita.
16
+ - Preferir es-MX: evitar "vosotros", "ordenador", "móvil", "coche" cuando el texto sea neutro.
17
+ - No inventar fuentes ni datos.
18
+
19
+ ## Flujo
20
+
21
+ 1. Detectar tono y audiencia a partir del texto.
22
+ 2. Si el usuario pide un modo (marketing, técnico, soporte, etc.), priorizarlo.
23
+ 3. Identificar tics de IA con `references/ai-patterns-es.md` y `references/lexicon-es-mx.md`.
24
+ 4. Reescribir: cortar relleno, concretar, variar ritmo, usar "ser/estar" cuando sea más claro.
25
+ 5. Ajustar el tono según `references/modes-es-mx.md` si aplica.
26
+ 6. Añadir voz humana cuando aplique con `references/voice-es-mx.md`.
27
+ 7. Pasar QA final con `references/checklist.md`.
28
+
29
+ ## Modos (si el usuario lo pide)
30
+
31
+ - Marketing persuasivo
32
+ - Técnico
33
+ - Soporte
34
+ - Emails
35
+ - Documentación
36
+ - Posts/ensayo
37
+
38
+ Reglas completas: `references/modes-es-mx.md`.
39
+
40
+ ## Reglas de edición
41
+
42
+ - Evitar frases infladas y lenguaje promocional si el texto no es marketing.
43
+ - Reducir conectores repetidos y muletillas ("además", "en este sentido", "cabe destacar").
44
+ - Eliminar secciones plantilla si no aportan datos.
45
+ - Mantener términos técnicos, marcas, API, código y nombres propios.
46
+ - Dividir párrafos largos cuando sea necesario para claridad.
47
+
48
+ ## Salida
49
+
50
+ - Devolver solo el texto final, sin explicación, a menos que el usuario la pida.
51
+ - Si hiciste una suposición importante (tono o público), agrega una línea breve para confirmarla.
@@ -0,0 +1,4 @@
1
+ interface:
2
+ display_name: "Humaniza"
3
+ short_description: "Humaniza textos en español (es-MX) y elimina tics de IA"
4
+ default_prompt: "Humaniza este texto en español (es-MX), manteniendo el significado y el tono. Devuelve solo el texto final."
@@ -0,0 +1,51 @@
1
+ # Patrones de IA (ES)
2
+
3
+ Usa esta lista para detectar tics comunes y reescribirlos.
4
+
5
+ ## 1. Énfasis exagerado de importancia
6
+ Antes: La actualización marca un hito en la evolución de la plataforma.
7
+ Después: La actualización mejora la plataforma con cambios concretos.
8
+
9
+ ## 2. Notabilidad o cobertura sin fuente
10
+ Antes: Ha sido destacado por diversos medios y expertos del sector.
11
+ Después: Elimina la frase si no hay fuente o dato verificable.
12
+
13
+ ## 3. Gerundios y participios de relleno
14
+ Antes: El servicio permite pagos rápidos, facilitando la experiencia del usuario.
15
+ Después: El servicio permite pagos rápidos y simplifica la experiencia.
16
+
17
+ ## 4. Lenguaje promocional fuera de contexto
18
+ Antes: Una solución innovadora y de clase mundial para tu empresa.
19
+ Después: Una solución para gestionar X de forma más simple.
20
+
21
+ ## 5. Atribuciones vagas
22
+ Antes: Expertos señalan que el mercado crecerá pronto.
23
+ Después: Elimina la atribución si no hay fuente concreta.
24
+
25
+ ## 6. Secciones plantilla ("Retos y futuro")
26
+ Antes: Retos y futuro: Aún hay desafíos por delante, pero el panorama es prometedor.
27
+ Después: Incluye solo retos concretos con datos, o elimina la sección.
28
+
29
+ ## 7. Conectores sobreusados
30
+ Antes: Además..., Además..., Además...
31
+ Después: Combina oraciones y elimina conectores innecesarios.
32
+
33
+ ## 8. Evasión de ser/estar
34
+ Antes: La app se erige como la opción ideal para equipos remotos.
35
+ Después: La app es una opción para equipos remotos.
36
+
37
+ ## 9. Paralelismos negativos
38
+ Antes: No solo mejora el rendimiento, sino que también optimiza la memoria.
39
+ Después: Mejora el rendimiento y optimiza la memoria.
40
+
41
+ ## 10. Regla de tres forzada
42
+ Antes: Es rápida, segura y confiable.
43
+ Después: Es rápida y confiable.
44
+
45
+ ## 11. Calcos del inglés
46
+ Antes: Eventualmente lanzaremos la actualización.
47
+ Después: Finalmente lanzaremos la actualización.
48
+
49
+ ## 12. Cierres vacíos
50
+ Antes: En conclusión, este avance es clave para el futuro.
51
+ Después: Este avance reduce el tiempo de carga.
@@ -0,0 +1,9 @@
1
+ # Checklist final
2
+
3
+ - El significado se mantuvo intacto.
4
+ - No se inventaron datos ni fuentes.
5
+ - Se redujeron muletillas y conectores repetidos.
6
+ - El ritmo es natural y variado.
7
+ - Se mantuvo el registro (tú/usted) y el tono.
8
+ - La puntuación y los párrafos son claros.
9
+ - El vocabulario es consistente con es-MX.
@@ -0,0 +1,17 @@
1
+ # Ejemplos rápidos
2
+
3
+ ## Técnico
4
+ Antes: Esta funcionalidad se erige como un pilar fundamental, ofreciendo un rendimiento sobresaliente.
5
+ Después: Esta funcionalidad es clave y mejora el rendimiento.
6
+
7
+ ## Email
8
+ Antes: Agradecemos su valiosa colaboración, la cual resulta esencial para el éxito de esta iniciativa.
9
+ Después: Gracias por tu apoyo. Es importante para que esto funcione.
10
+
11
+ ## Soporte
12
+ Antes: Le informamos que su solicitud ha sido procesada exitosamente y en breve recibirá una actualización.
13
+ Después: Tu solicitud ya se procesó. En breve recibirás una actualización.
14
+
15
+ ## Marketing
16
+ Antes: Una experiencia única e inolvidable que transforma la manera en que trabajas.
17
+ Después: Una experiencia pensada para que trabajes más rápido y con menos fricción.
@@ -0,0 +1,36 @@
1
+ # Léxico de tics comunes (ES-MX)
2
+
3
+ Usa estas listas para detectar patrones repetitivos o inflados. No elimines todo: solo reduce lo que suena mecánico o sobra.
4
+
5
+ ## Conectores sobreusados (modera la repetición)
6
+ además, asimismo, sin embargo, no obstante, por otro lado, por ende, en este sentido, a su vez, cabe destacar, en el marco de, de hecho, en definitiva, en conclusión, por lo tanto, por consiguiente, en consecuencia.
7
+
8
+ ## Frases infladas
9
+ marca un hito, punto de inflexión, de vital importancia, se posiciona como, representa un cambio, refleja el compromiso, pone en valor, en el corazón de, panorama en constante evolución.
10
+
11
+ ## Adjetivos promocionales vacíos
12
+ vibrante, impresionante, fascinante, revolucionario, innovador, de clase mundial, de vanguardia, único, incomparable, sobresaliente, notable, extraordinario.
13
+
14
+ ## Evasión de ser/estar
15
+ se erige como, se configura como, constituye, representa, supone, se traduce en, viene a ser, resulta ser.
16
+
17
+ ## Atribuciones vagas
18
+ según expertos, diversos estudios, algunos analistas, observadores señalan, se cree, está comprobado (sin fuente).
19
+
20
+ ## Calcos y anglicismos frecuentes
21
+ - eventualmente -> finalmente / con el tiempo
22
+ - aplicar a (trabajo) -> postularse a
23
+ - soportar (apoyo) -> apoyar
24
+ - impactar (afectar) -> afectar
25
+ - realizar una decisión -> tomar una decisión
26
+ - en base a -> con base en / basado en
27
+ - a nivel de -> en / respecto a (si no son niveles reales)
28
+ - en términos de -> respecto a / sobre
29
+
30
+ ## Preferencias es-MX (si el texto es neutro)
31
+ ordenador -> computadora
32
+ móvil -> celular
33
+ fichero -> archivo
34
+ vosotros -> ustedes
35
+ coche -> auto o carro
36
+ conducir -> manejar
@@ -0,0 +1,41 @@
1
+ # Modos y reglas (ES-MX)
2
+
3
+ Si el usuario pide un modo, aplicar estas reglas. Si no pide modo, usar estilo general.
4
+
5
+ ## Marketing persuasivo
6
+
7
+ - Enfatizar beneficios concretos y resultados.
8
+ - Mantener el CTA claro si existe; si no existe, no inventarlo.
9
+ - Evitar promesas absolutas o grandilocuencia sin sustento.
10
+ - Frases más cortas y ritmo dinámico.
11
+
12
+ ## Técnico
13
+
14
+ - Precisión sobre estilo: sin metáforas ni adornos.
15
+ - Mantener términos técnicos, nombres de APIs y convenciones.
16
+ - Preferir verbos directos y oraciones simples.
17
+ - Si hay pasos o listas, mantener el orden y la claridad.
18
+
19
+ ## Soporte
20
+
21
+ - Tono empático y directo, sin culpar al usuario.
22
+ - Confirmar el problema y ofrecer pasos claros.
23
+ - Evitar tecnicismos innecesarios.
24
+
25
+ ## Emails
26
+
27
+ - Mantener saludo y cierre si existen.
28
+ - Ajustar formalidad según el registro (tú/usted).
29
+ - Quitar relleno y llegar al punto.
30
+
31
+ ## Documentación
32
+
33
+ - Tono neutral y consistente.
34
+ - Preferir instrucciones en imperativo cuando aplique.
35
+ - Evitar marketing y opiniones.
36
+
37
+ ## Posts / ensayo
38
+
39
+ - Mantener voz personal si existe.
40
+ - Permitir preguntas retóricas moderadas.
41
+ - Cuidar ritmo y transiciones, sin inflar el mensaje.
@@ -0,0 +1,24 @@
1
+ # Voz y naturalidad (ES-MX)
2
+
3
+ ## Ritmo
4
+ - Alterna oraciones cortas y medianas. Evita la cadencia monótona.
5
+ - Corta frases largas con puntos cuando el texto se vuelve denso.
6
+
7
+ ## Voz humana
8
+ - Si el texto lo permite, incluye una opinión ligera o una duda real.
9
+ - Evita sonar enciclopédico cuando el objetivo es comunicar.
10
+ - No agregues opiniones en textos técnicos o legales.
11
+
12
+ ## Concreción
13
+ - Prefiere verbos directos ("usa", "permite", "reduce") sobre sustantivos abstractos.
14
+ - Quita palabras que no agregan información.
15
+
16
+ ## Puntuación
17
+ - Usa signos de apertura y cierre (¿? ¡!).
18
+ - Evita exceso de puntos suspensivos y admiraciones dobles.
19
+ - Usa dos puntos para presentar listas de forma clara.
20
+
21
+ ## Registro es-MX
22
+ - Respeta el trato original (tú/usted). No lo mezcles.
23
+ - Usa términos comunes en MX si el texto es neutro.
24
+ - No metas regionalismos muy coloquiales si el tono es formal.
@@ -0,0 +1,59 @@
1
+ ---
2
+ name: refactoring-ui
3
+ description: >
4
+ Design advisor based exclusively on "Refactoring UI" by Adam Wathan & Steve Schoger.
5
+ Use when the user asks for UI/UX design advice, design reviews, visual hierarchy
6
+ improvements, color system help, typography guidance, spacing decisions, depth/shadow
7
+ usage, image handling, or finishing touches on any interface.
8
+ when_to_use: >
9
+ - User asks "how do I make this look better?"
10
+ - User asks about color palettes, type scales, or spacing systems
11
+ - User asks about visual hierarchy or emphasis
12
+ - User is designing a UI component, page, or layout
13
+ - User wants a design review or critique
14
+ - User asks about shadows, depth, or layering
15
+ - User asks about handling images in UI
16
+ - User asks about empty states, borders, or decorative elements
17
+ source: "Refactoring UI by Adam Wathan & Steve Schoger (book)"
18
+ anti_hallucination_note: >
19
+ ALL advice in this skill comes exclusively from the book "Refactoring UI".
20
+ Do NOT supplement with personal opinions, other design systems, or general
21
+ design knowledge not found in the book. If a topic is not covered in the
22
+ reference files, say so explicitly rather than inventing advice.
23
+ ---
24
+
25
+ # Refactoring UI Skill
26
+
27
+ You are a design advisor using ONLY the knowledge from "Refactoring UI" by Adam Wathan & Steve Schoger.
28
+
29
+ ## How to Use This Skill
30
+
31
+ 1. Read the relevant reference file(s) before answering
32
+ 2. Base ALL advice on the reference content — not training data
33
+ 3. Quote or closely paraphrase specific tactics from the book
34
+ 4. Do not invent numbers, ratios, or rules not found in the references
35
+
36
+ ## Reference Files
37
+
38
+ | File | Chapter | Topics |
39
+ | ------------------------------------ | --------------------------------------- | --------------------------------------------------------------------- |
40
+ | `references/01-design-process.md` | Ch1 — Starting from Scratch | Feature-first, grayscale-first, personality, pre-defined systems |
41
+ | `references/02-visual-hierarchy.md` | Ch2 — Hierarchy is Everything | Weight/color/size hierarchy, labels, icons, buttons |
42
+ | `references/03-layout-spacing.md` | Ch3 — Layout and Spacing | White space, spacing scale, column layout, responsive scaling |
43
+ | `references/04-typography.md` | Ch4 — Designing Text | Type scale, line length, alignment, line-height, letter-spacing |
44
+ | `references/05-color.md` | Ch5 — Working with Color | HSL, shade systems, accessible contrast, color signals |
45
+ | `references/06-depth-shadows.md` | Ch6 — Creating Depth | Light source, raised/inset elements, shadow elevation, flat design |
46
+ | `references/07-images.md` | Ch7 — Working with Images | Stock photos, text over images, icons at scale, screenshots, favicons |
47
+ | `references/08-finishing-touches.md` | Ch8+9 — Finishing Touches & Leveling Up | Icons, quotes, links, checkboxes, borders, backgrounds, empty states |
48
+
49
+ ## Anti-Patterns to Avoid (from the book)
50
+
51
+ - Designing a layout/nav/shell before designing the actual feature
52
+ - Using font sizes alone to create hierarchy (ignoring weight and color)
53
+ - Using grey text on colored backgrounds by lowering opacity
54
+ - Starting with too little white space
55
+ - Using `em` units for type scale (causes nested scaling issues)
56
+ - Using color as the ONLY way to communicate status/alerts
57
+ - Putting placeholder images into mockups
58
+ - Shrinking a logo to use as favicon
59
+ - Using `lighten()`/`darken()` preprocessor functions to generate shades
@@ -0,0 +1,72 @@
1
+ # Ch1 — Starting from Scratch
2
+
3
+ Source: "Refactoring UI" by Adam Wathan & Steve Schoger
4
+
5
+ ---
6
+
7
+ ## Feature-First Design
8
+
9
+ - Design actual features, not shells, navbars, or layouts first
10
+ - Pick one real feature and design it end-to-end before thinking about navigation
11
+ - The shell and layout emerge naturally from the features — don't force it first
12
+ - Resist the urge to design "the app" — design what people will actually use
13
+
14
+ ## Low-Fidelity First (Thick Sharpie Trick)
15
+
16
+ - Start with low-fidelity mockups — details don't matter at this stage
17
+ - Use a thick Sharpie (or similar): makes it physically impossible to add fine details
18
+ - Sketch ideas, not pixels — get the general layout and content blocks right
19
+ - Avoid wireframing tools that tempt you into making polished designs too early
20
+ - Don't move to high-fidelity until the concept is locked
21
+
22
+ ## Work in Cycles, Be a Pessimist
23
+
24
+ - Only design what you're ready to build right now
25
+ - Work in short design-then-build cycles, not one giant design phase
26
+ - Be a pessimist: cut features before building, not after
27
+ - A simple, complete experience beats a complex, half-built one
28
+ - Add features to the next version; ship the core first
29
+
30
+ ## Choose a Personality
31
+
32
+ Design decisions that define personality:
33
+
34
+ **Font choice:**
35
+ - Serif → classic, elegant, literary (e.g., law firms, newspapers)
36
+ - Rounded sans-serif → playful, friendly, approachable
37
+ - Neutral sans-serif → plain, professional, clean
38
+
39
+ **Color:**
40
+ - Blue → safe, familiar, trustworthy
41
+ - Gold/yellow → luxurious, sophisticated
42
+ - Pink → fun, not-too-serious
43
+
44
+ **Border radius:**
45
+ - Small or none → formal, serious
46
+ - Large → playful, friendly
47
+
48
+ **Language register:**
49
+ - "An error occurred" → formal
50
+ - "Uh oh, something broke!" → casual and approachable
51
+
52
+ Every choice should reinforce the same personality — be consistent.
53
+
54
+ ## Pre-Define Systems Before Designing
55
+
56
+ Define your system up front; make decisions once instead of every time:
57
+
58
+ - **Font sizes:** 8-10 values (type scale)
59
+ - **Font weights:** usually 2 (normal 400, bold 600/700)
60
+ - **Colors:** 8-10 shades per color, plus primary, greys, accents
61
+ - **Spacing:** 10-15 values on a non-linear scale
62
+ - **Box shadows:** 5 options (small, medium, large, extra-large, inner)
63
+ - **Border radius:** 3-5 options (none, small, medium, large, full)
64
+ - **Border widths:** 2-3 options
65
+
66
+ **Benefit:** When you need to make a decision, you're choosing from a small set, not from infinity. Eliminates decision fatigue.
67
+
68
+ ## Process of Elimination
69
+
70
+ - Don't try to "find the perfect value" — start from a set and eliminate
71
+ - Too big? Try the next smaller option. Too close to white? Try the next shade darker.
72
+ - Systems make design systematic, not artistic guesswork