Skill 详情

brand

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

匹配类型可能匹配已针对品牌打造审核

来源coolasspuppy/slide-nerds外部来源

报告安装量1仅表示受欢迎程度

使用前先检查

自动化审核只检查相关性，不代表安全审查或推荐。使用前请阅读来源中的说明。

在 skills.sh 查看（打开外部页面）在 GitHub 阅读 SKILL.md （打开外部页面）

已保存的来源预览

SKILL.md

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
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

在 GitHub 阅读完整来源