Detalle del Skill

brand

Applies a visual identity to SlideNerds decks, not general brand creation.

CoincidenciaPosibleRevisado para branding

Fuentecoolasspuppy/slide-nerdsFuente externa

Instalaciones reportadas1Solo señal de popularidad

Revisar antes de usar

La revisión automática comprueba relevancia, no seguridad ni respaldo. Lee las instrucciones de la fuente antes de usar este Skill.

Ver en skills.sh (abre una página externa)Leer SKILL.md en GitHub (abre una página externa)

Vista previa guardada

SKILL.md

Este extracto es una copia guardada durante la revisión. La fuente externa contiene la versión completa y actual.

---
name: brand
description: How to apply brand identity to a slidenerds deck by editing brand.config.ts and globals.css
---

# Brand skill

Use this skill when creating a new deck, rebranding an existing deck, or applying a company's visual identity. This skill tells you exactly which files to edit and what values to set.

## The branding system

Every slidenerds deck has two files that control brand:

1. **`brand.config.ts`** at the project root. This is the single source of truth for colors, fonts, and spacing. The layout template reads this file and injects CSS custom properties on the `<html>` element at build time.
2. **`app/globals.css`** for structural CSS, font imports, and derived color tokens. Add custom `@import` rules for web fonts here. Do not hardcode colors in slide content. Always use `var()` references.

Changing `brand.config.ts` rebrands the entire deck. No slide files need color or font edits.

## brand.config.ts structure

```typescript
import type { BrandConfig } from '@slidenerds/runtime'

export default {
  colors: {
    primary: '#0d0d0f',
    accent: '#f59e0b',
    background: '#111114',
    surface: '#1a1a1f',
    text: '#e8e6e3',
  },
  fonts: {
    heading: 'Sora, system-ui, sans-serif',
    body: 'DM Sans, system-ui, sans-serif',
    mono: 'JetBrains Mono, ui-monospace, monospace',
  },
  spacing: {
    slide: '5rem',
    section: '2rem',
    element: '1rem',
  },
} satisfies BrandConfig
```

## How layout.tsx wires brand to CSS

The generated `app/layout.tsx` imports `brand.config.ts` and injects CSS custom properties:

```tsx
import brandConfig from '../brand.config'

const brandVars = {
  '--color-primary': brandConfig.colors.primary,
  '--color-accent': brandConfig.colors.accent,
  '--color-background': brandConfig.colors.background,
  '--color-surface': brandConfig.colors.surface,
  '--color-text': brandConfig.colors.text,
  '--slide-padding': brandConfig.spacing.slide,
  '--font-heading': brandConfig.fonts.heading,
  '--font-body': brandConfig.fonts.body,
  '--font-mono': brandConfig.fonts.mono,
} as React.CSSProperties

export default function RootLayout({ children }) {
  return (
    <html lang="en" style={brandVars}>
      <body>
        <SlideRuntime>{children}</SlideRuntime>
      </body>
    </html>
  )
}
```

This means every CSS `var()` reference resolves to the brand.config.ts values. No manual wiring needed.

## What each color controls

| Token | CSS variable | Used by |
|---|---|---|
| `primary` | `--color-primary` | Section divider backgrounds, darkest surfaces |
| `accent` | `--color-accent` | Section labels, stat numbers, shape strokes, active indicators, chart fills, timeline dots, table highlights |
| `background` | `--color-background` | Slide canvas, body background |
| `surface` | `--color-surface` | Card backgrounds for charts, tables, code blocks |
| `text` | `--color-text` | Primary body text, headings |

## Derived colors

Some slides need colors derived from the base palette. Define these in `globals.css`:

```css
:root {
  --color-accent-dim: rgba(245, 158, 11, 0.12);
  --color-text-secondary: rgba(232, 230, 227, 0.6);
  --color-text-tertiary: rgba(232, 230, 227, 0.4);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-surface-elevated: #222228;
}
```

When rebranding, extract the RGB values from the new accent and text colors and recompute these at the correct opacities.

## How to rebrand step by step

### Given a brand kit (colors + fonts)

1. **Edit `brand.config.ts`**: Set the five core colors and three font stacks.
2. **Update derived colors in `globals.css`**: Recompute accent-dim, text-secondary, text-tertiary, border, and surface-elevated using the new base values.
3. **Add font imports in `globals.css`**: Add Google Fonts `@import` rules before the Tailwind import.
4. **Done.** No slide files need editing.

### Given only a logo or single brand color

Derive the full palette from one color:

- **accent**: The brand color itself.
- **background**: Near

Leer la fuente completa en GitHub

Contexto