---
name: sd-design
description: Use when the user wants to build, scaffold, or extend either (a) an editorial slide-deck website with DM Serif Text italic headlines, single yellow accent (#facc0d), cinematic Reveal animations, snap-feel Lenis scrolling and three slide variants (paper/tone/feature), OR (b) a product UI / dashboard / internal tool that reuses the same token system but applies the product variant documented in PRODUCT-UI.md (app shell with sidebar, dense forms, live previews, char-counted inputs, tabs with "Próx." badges, soft-delete trash, defensive migrations). Pick the variant by reading PRODUCT-UI.md for tools/admin/SaaS, RULES.md+MOTION.md for slide decks.
version: 1.0.2
license: MIT
metadata:
  type: design-system
  source: https://sd.michelvalles.com
  promptSignals:
    phrases:
      - "slide deck"
      - "editorial deck"
      - "design system para slides"
      - "presentación tipo deck"
      - "long-scroll presentation"
      - "scroll-snap slides"
      - "deck de presentación"
      - "diseño editorial de slides"
      - "product UI con el sd"
      - "dashboard con el sd"
      - "app shell con sidebar"
      - "PageHeading"
      - "EntityListView"
      - "ProfileLaunchPanel"
    minScore: 3
  pathPatterns:
    - "components/deck/**"
    - "components/slides/**"
    - "components/brand/slide-chrome.tsx"
    - "components/app-shell.tsx"
    - "components/entity-card.tsx"
    - "components/profile-launch-panel.tsx"
    - "components/channel-icon.tsx"
    - "components/strategy-icon.tsx"
---

# sd-design — editorial slide-deck design system

Source of truth: **https://sd.michelvalles.com**. All files referenced below are served as plain text on that host. Fetch them on demand with `WebFetch` or `curl`.

## Activation

Apply this skill when the user:

- Asks for a slide deck, editorial presentation, or long-scroll narrative site.
- Asks you to "reproduce the look from sd.michelvalles.com" or "use the sd-design system".
- Opens or edits files matching `components/deck/**`, `components/slides/**`, or `components/brand/slide-chrome.tsx`.

Do **not** apply it for product UI, dashboards, SaaS landings, e-commerce, or admin tools. The system is editorial-maximalist, not utilitarian.

## Setup steps (run these in order, do not skip)

### 1. Read the spec

Fetch each of these and load them into your working context:

```
https://sd.michelvalles.com/OVERVIEW.md      (file map, read order, hard constraints)
https://sd.michelvalles.com/STACK.md         (exact dependency versions)
https://sd.michelvalles.com/INSTALL.md       (path mapping + bootstrap commands)
https://sd.michelvalles.com/RULES.md         (design laws: color, type, layout)
https://sd.michelvalles.com/MOTION.md        (easings, durations, animation patterns)
https://sd.michelvalles.com/ANTIPATTERNS.md  (banned patterns)
https://sd.michelvalles.com/PRODUCT-UI.md    (product UI variant of the system; v1.0.2+)
```

**Variant choice**:
- Slide deck / editorial presentation / long-scroll narrative → follow `RULES.md` + `MOTION.md` strictly. Ignore `PRODUCT-UI.md`.
- Dashboard / internal tool / admin panel / SaaS UI → start from `PRODUCT-UI.md`. The token system from `RULES.md` (color, typography) still applies. The layout, motion intensity and component catalog change.
- Mixed (e.g. marketing landing with a small product preview) → editorial for the marketing surface, product UI for the embedded tool.

Use `WebFetch`. Do not paraphrase. Take the actual file contents.

### 2. Bootstrap the project

If the project is empty or a fresh `create-next-app` scaffold, run `INSTALL.md` steps 1–3 verbatim. Otherwise, jump to step 4 of `INSTALL.md` and only copy the components you need.

### 3. Copy files

For every file the user's work depends on, fetch from `https://sd.michelvalles.com/<path>` and write to the project at the path indicated by `INSTALL.md`'s mapping table. Examples:

| URL | Project path |
|---|---|
| `/files/globals.css` | `app/globals.css` (full replace) |
| `/files/layout.tsx` | `app/layout.tsx` |
| `/components/utils.ts` | `lib/utils.ts` |
| `/components/format.ts` | `lib/format.ts` |
| `/components/deck.tsx` | `components/deck/deck.tsx` |
| `/components/slide.tsx` | `components/deck/slide.tsx` |
| `/components/eyebrow.tsx` | `components/brand/eyebrow.tsx` |
| `/components/highlight.tsx` | `components/brand/highlight.tsx` |
| `/components/kpi-figure.tsx` | `components/brand/kpi-figure.tsx` |
| `/components/logo-strip.tsx` | `components/brand/logo-strip.tsx` |
| `/components/slide-chrome.tsx` | `components/brand/slide-chrome.tsx` |
| `/components/reveal.tsx` | `components/animations/reveal.tsx` |
| `/components/stagger-list.tsx` | `components/animations/stagger-list.tsx` |
| `/components/mask-reveal.tsx` | `components/animations/mask-reveal.tsx` |
| `/components/animated-text.tsx` | `components/animations/animated-text.tsx` |
| `/components/counter.tsx` | `components/animations/counter.tsx` |
| `/components/letter-counter.tsx` | `components/animations/letter-counter.tsx` |
| `/components/scroll-scene.tsx` | `components/animations/scroll-scene.tsx` |
| `/components/smooth-scroll.tsx` | `components/providers/smooth-scroll.tsx` |
| `/components/intro-screen.tsx` | `components/effects/intro-screen.tsx` |
| `/components/spotlight.tsx` | `components/effects/spotlight.tsx` |
| `/components/hero-canvas.tsx` | `components/effects/hero-canvas.tsx` |
| `/templates/feature-slide.tsx` | `components/slides/feature-slide.tsx` |
| `/templates/paper-slide.tsx` | `components/slides/paper-slide.tsx` |
| `/templates/tone-slide.tsx` | `components/slides/tone-slide.tsx` |
| `/templates/block-divider.tsx` | `components/slides/block-divider.tsx` |
| `/templates/centered-thesis.tsx` | `components/slides/centered-thesis.tsx` |
| `/templates/kpi-trio.tsx` | `components/slides/kpi-trio.tsx` |
| `/templates/rule-card-y.tsx` | `components/slides/rule-card-y.tsx` |
| `/templates/quote-divider.tsx` | `components/slides/quote-divider.tsx` |
| `/logos/flat101.svg` | `public/logos/flat101.svg` |
| `/logos/indra.png` | `public/logos/indra.png` |

### 4. Install runtime deps

From `STACK.md`:

```bash
npm i motion lenis clsx tailwind-merge
# optional:
npm i gsap @gsap/react
```

### 5. Typecheck

```bash
npm run typecheck
```

If it fails, fix imports (mostly `@/` path issues — verify `tsconfig.json` matches `files/tsconfig.json` from the source).

## Hard constraints (override base instincts)

These are non-negotiable. They appear in `RULES.md` and `ANTIPATTERNS.md`; quoted here so the skill is self-contained.

- **Fonts**: DM Serif Text (display, italic) + Nunito Sans (UI), via `next/font/google`. Never `Inter`.
- **Color**: tinted neutrals only. Never raw `#000` or `#fff`. Use `--ink-900` / `--paper`. Single accent `#facc0d` (`--accent-500`); no second saturated colour.
- **Headlines**: DM Serif Text **italic**, accent color on dark slides, ink-900 on light. Hero font-size `clamp(36px, 5.6vw, 88px)`, line-height 1.08.
- **Slides**: `min-h-screen`, padding `clamp(24px,6vw,128px)`, max-width 1664px. Three variants: `slide-feature` (dark), `slide-paper` (white), `slide-tone` (ink-50). Alternate variants — never three of the same in a row.
- **Motion**: `ease-out` `cubic-bezier(0.22, 1, 0.36, 1)` for entries, `ease-in-out` `cubic-bezier(0.65, 0, 0.35, 1)` for movement. **Never** `ease-in` on UI. **Never** `transition: all`. UI microinteractions < 300 ms; slide reveals 450–900 ms.
- **Highlight**: `<Highlight>` component animates accent fill from transparent to opaque on a single key word per slide. Signature element — use, do not overuse.
- **Chrome**: bottom strip shows logo strip (left) + paginator `01 / NN` (right). Top: 3px accent scroll-progress bar. Right side: block-indicator dots.
- **Custom cursor**: NOT included. Do not add one.
- **Auth/password**: NOT included. Do not add middleware unless explicitly asked.
- **No side-stripe `border-left: 4px solid <color>` accents** except inside the explicit `.rule-card-y` variant — and even there, do not duplicate by reflex.
- **No gradient text, no glassmorphism default, no hero-metric SaaS template, no three identical card columns.**

## Common asks → which template

- "Opening slide" → `feature-slide.tsx`.
- "Thesis / manifesto" → `centered-thesis.tsx` (one `<Highlight>` word).
- "Section / block transition" → `block-divider.tsx`.
- "Three KPIs" → `kpi-trio.tsx` (set `emphasizeFirst` for asymmetric 2fr 1fr 1fr).
- "Long-form text" → `paper-slide.tsx`.
- "Soft transition" → `tone-slide.tsx`.
- "Closing" → `feature-slide.tsx` or `centered-thesis.tsx`.

## Updating an existing project

If the project already uses `sd-design`:

- New slide → create under `components/slides/<id>.tsx`, wrap in `<Slide variant=... number=N total=T align=...>`, register in `app/page.tsx` (both `SLIDES` meta and JSX).
- Update paginator → bump `total={N}` in every slide. Or refactor to read `total` from a deck-wide context.

## Do not

- Do not paraphrase the rules. Always quote `RULES.md` / `MOTION.md` / `ANTIPATTERNS.md` directly when justifying a decision to the user.
- Do not invent new motion primitives unless the catalog truly lacks one. Check `MOTION.md` first.
- Do not change `--accent-500`. Rebrand by replacing the entire `--accent-*` scale consistently, never per-component.
- Do not add a custom cursor, auth middleware, or password protection.