tools

Slackdevs tools for Anthropic Claude and Claude Code.

Claude Toolbox: herramientas en el navegador, al estilo de it-tools, para profesionales que trabajan con Claude, la Claude API y Claude Code. Están organizadas según lo que evalúan las credenciales de Anthropic:

Código	Credencial
CCAO-F	Claude Certified Associate – Foundations
CCDV-F	Claude Certified Developer – Foundations
CCAR-F	Claude Certified Architect – Foundations
CCAR-P	Claude Certified Architect – Professional
Badge CC	Claude Partner Badge – Claude Code

Todo corre del lado del cliente: no se envía ningún dato a servidores. La única excepción prevista es la capa comunitaria (propuestas, votos y donaciones), que va a tener una API propia; hoy funciona en modo demo, con un backend simulado dentro del navegador.

Áreas del sitio

Área	Rutas	Qué es
Herramientas	/, /<herramienta>/	Las utilidades de siempre, con buscador, filtros por credencial y favoritos
Cheatsheets	/cheatsheets/, /cheatsheets/<credencial>/	Un cheatsheet por credencial, imprimible, con las herramientas relacionadas
Propuestas	/propuestas/, /propuestas/nueva/, /propuestas/<id>/	Proponer herramientas, mejoras o contenido; votar a favor o en contra; donar por consumos
Roadmap	/roadmap/	Lo planificado, en desarrollo y publicado, según el ranking de propuestas
Revisión	/admin/	Cola de revisión simulada (sin enlace en el menú, noindex)

Identidad visual

Hereda el sistema de slackdevs.com (“Literary Cyber-Minimalism”):

• Colores: ámbar #e5a93c (primario), violeta #8b5cf6, cian #00e5ff, fondo #090a0f con grilla sutil. Variables en :root de src/styles/main.css, con los mismos nombres que website/css/style.css: si cambia la marca, actualizá ambos.
• Tipografías: Playfair Display (títulos), Inter (texto), JetBrains Mono (etiquetas, código, botones).
• Marca: hexágono “SL”, favicon en public/favicon.svg, imagen social en public/og-tools.jpg.
• Insignias de certificación en src/assets/badges/ (copiadas de website/assets/badges/); color por credencial en src/lib/certs.ts.
• Enlaces a slackdevs.com, artículos y páginas legales en src/lib/brand.ts.

Stack

• Vue 3 + <script setup> + TypeScript
• Vite
• Vue Router (history real: /costos/; cada ruta tiene su HTML estático para SEO)
• Sin librería de UI: estilos propios en src/styles/main.css (solo tema oscuro, como el sitio principal)

Desarrollo

Requiere Node.js 20 o superior.

npm install
npm run dev        # servidor de desarrollo
npm run build      # typecheck + build de producción en dist/
npm run preview    # sirve el build

Estructura

src/
├── App.vue                 # layout: header, sidebar, cabecera de herramienta
├── router.ts               # una ruta por herramienta, generada desde el registro
├── pages/                  # Home (buscador + filtros por certificación), 404
├── components/             # CodeOutput, TabbedCode, LintList, ToolCard, ...
├── composables/            # estado global, localStorage, toast/copiar
├── lib/                    # utilidades compartidas: formato, modelos y precios, certificaciones
├── i18n/                   # idioma actual (es/en), helpers tr() y useMessages(), textos comunes (ui.ts)
├── cheatsheets/            # registro, rutas y páginas de cheatsheets (el contenido está en docs/Cheatsheets/)
├── community/              # propuestas, votos, donaciones, roadmap y admin (ver "Comunidad")
└── tools/
    ├── tool.ts             # tipo Tool + defineTool()
    ├── index.ts            # registro automático + categorías
    └── <herramienta>/
        ├── index.ts        # metadatos (nombre, ruta, categoría, certificaciones)
        ├── <herramienta>.vue
        └── *.service.ts / *.data.ts   # lógica pura y datos (opcional)

Crear una herramienta nueva

npm run script:create:tool -- mi-herramienta

Genera src/tools/mi-herramienta/ con index.ts y el componente. El registro es automático (import.meta.glob), así que no hay que editar ningún índice. Completá en index.ts la categoría (api, prompt, tools, code, arch) y las certificaciones (A, D, AF, AP, B).

Convenciones:

• Todo texto visible va en español e inglés (ver Idiomas).
• La lógica pura va en <herramienta>.service.ts para poder testearla sin el componente.
• Los mensajes de LintList admiten HTML propio: escapá siempre el input del usuario con esc() de @/lib/format.
• Los precios de modelos viven en src/lib/models.ts: actualizalos ahí y se reflejan en todas las herramientas.

Comunidad: propuestas, votos, donaciones y roadmap

Todo vive en src/community/, aislado del resto y cargado de forma diferida: si esta capa falla, las herramientas siguen funcionando.

src/community/
├── types.ts        # tipos del dominio (se van a compartir con la API)
├── config.ts       # precios, equivalencias y pesos del puntaje: PROVISORIOS, marcados TODO
├── score.ts        # funciones puras: puntaje, desglose, orden del ranking
├── api.ts          # interfaz CommunityApi: única puerta de entrada a los datos
├── mock/           # backend simulado: localStorage, semillas, latencia y errores aleatorios
├── http/           # stub de la API real (todavía sin implementar)
├── composables/    # useProposals, useProposal, useVoter, useVote, useDonate, useAdmin
├── components/     # VoteControl, ScoreBreakdown, DonateButtons, StatusBadge, ProposalCard, ...
└── pages/          # listado, detalle, nueva propuesta, roadmap, admin

Reglas que implementa:

This is the beginning of the README. Read the rest at the original. Read the full README ↗