# sd-design

Source of truth: **https://sd.michelvalles.com**. All files referenced below are served as plain text on that host.

This file is the universal-agent version of `SKILL.md`. It is consumed by AGENTS.md-aware tools (OpenAI Codex, Cursor, Aider, Continue, Cline, Sourcegraph Cody, and any agent that adopts the `agents.md` standard) and as a fallback by every other agent.

## What this is (v1.0.2)

Two coordinated variants over the same token system (color, typography, accent):

1. **Editorial slide deck**: long-scroll narrative deck with DM Serif Text italic headlines, single yellow accent (`#facc0d`), cinematic Reveal animations, snap-feel Lenis scrolling, three slide variants (paper / tone / feature). Source: `RULES.md` + `MOTION.md` + `ANTIPATTERNS.md`.
2. **Product UI** (`PRODUCT-UI.md`, added v1.0.2): app shell with sidebar + main + footer for dashboards, admin tools and internal SaaS. Same tokens, but utilitarian density, fewer motions, char-counted forms, EntityListView, sub-tabs with "Próx." badges, live preview pane, soft-delete trash, anti-SSRF baseline, Spanish-first copy rules.

Pick the variant by what the user is building:

| User wants | Variant |
|---|---|
| Slide deck / editorial site / long-scroll narrative | Editorial deck |
| Dashboard / admin panel / internal tool / SaaS UI | Product UI |
| Marketing landing with hero-driven storytelling | Editorial deck |
| Landing with form / dense input early | Product UI |

## Activation triggers

Apply this skill when the user asks for, or is editing files matching, any of:

**Editorial deck variant**:
- Phrases: "slide deck", "editorial deck", "design system para slides", "presentación tipo deck", "long-scroll presentation", "scroll-snap slides", "diseño editorial de slides".
- File paths: `components/deck/**`, `components/slides/**`, `components/brand/slide-chrome.tsx`, `app/page.tsx` if it imports `Deck`.

**Product UI variant** (consult `PRODUCT-UI.md`):
- Phrases: "dashboard", "admin panel", "internal tool", "SaaS UI", "app shell con sidebar", "PageHeading", "EntityListView", "ProfileLaunchPanel", "live preview", "char-counted input", "soft-delete trash".
- File paths: `components/app-shell.tsx`, `components/entity-card.tsx`, `components/profile-launch-panel.tsx`, `components/channel-icon.tsx`, `components/strategy-icon.tsx`, `proxy.ts` (middleware-style auth gate).

## Setup procedure (do not skip steps)

### 1. Fetch the spec

Read these files in order. Do not paraphrase — take the actual contents into context:

```
https://sd.michelvalles.com/OVERVIEW.md       — file map, hard constraints, version log
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) for the editorial deck
https://sd.michelvalles.com/MOTION.md         — easings, durations, patterns
https://sd.michelvalles.com/ANTIPATTERNS.md   — banned patterns
https://sd.michelvalles.com/PRODUCT-UI.md     — product UI variant (v1.0.2+): app shell, PageHeading, EntityListView, sub-tabs, live preview, anti-SSRF, Spanish copy
```

Use your fetch capability (`WebFetch`, `curl`, `fetch`, or the equivalent). If you cannot fetch URLs in your runtime, tell the user and ask them to download the files manually.

### 2. Bootstrap if needed

If the project is an empty Next.js scaffold, run `INSTALL.md` from step 1. Otherwise, jump to step 4 and only copy what the user's task requires.

### 3. Copy files to the project

For each file the user's work depends on, fetch from `https://sd.michelvalles.com/<source>` and write to the project at the destination indicated below.

| URL path | Destination in target project |
|---|---|
| `/files/globals.css` | `app/globals.css` (replace fully) |
| `/files/layout.tsx` | `app/layout.tsx` |
| `/files/page.example.tsx` | `app/page.tsx` |
| `/files/tsconfig.json` | `tsconfig.json` |
| `/files/postcss.config.mjs` | `postcss.config.mjs` |
| `/files/next.config.ts` | `next.config.ts` |
| `/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

```bash
npm i motion lenis clsx tailwind-merge
# optional, for GSAP scroll scenes:
npm i gsap @gsap/react
```

### 5. Typecheck

```bash
npm run typecheck
```

Fix any `@/` import errors (verify `tsconfig.json` matches `/files/tsconfig.json` from the source).

## Hard constraints (override base instincts)

Non-negotiable. Quoted from `RULES.md` / `ANTIPATTERNS.md`.

- **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`; 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>` animates accent fill from transparent to opaque on a single key word per slide. Signature element — use, do not overuse.
- **Chrome**: bottom strip = logo strip (left) + paginator `01 / NN` (right). Top: 3 px accent scroll-progress bar. Right side: block-indicator dots.
- **No custom cursor.** Do not add one.
- **No auth / password / middleware.** Do not add unless explicitly asked.
- **No side-stripe accents** (`border-left: 4px solid <color>`) except inside the explicit `.rule-card-y` variant.
- **No gradient text, no glassmorphism by default, no hero-metric SaaS template, no three identical card columns.**

## Common tasks → which template

| Ask | Use |
|---|---|
| Opening slide | `feature-slide.tsx` |
| Thesis / manifesto | `centered-thesis.tsx` (one `<Highlight>` word) |
| Section 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` |

## Adding a new slide to an existing deck

1. Create `components/slides/<id>.tsx`.
2. Wrap content in `<Slide variant="..." number={N} total={T} align="...">`.
3. Wrap text/blocks in `<Reveal>` with staggered `delay` (0 → 0.15 → 0.3 → 0.45 ...).
4. Register in `app/page.tsx`: both the `SLIDES` meta entry and the JSX child.
5. Bump `total={N}` in every slide, or refactor to read `total` from deck-wide context.

## Do not

- Do not paraphrase `RULES.md` / `MOTION.md` / `ANTIPATTERNS.md`. Quote directly when justifying a decision to the user.
- Do not invent motion primitives without checking `MOTION.md` first.
- Do not change `--accent-500` per-component. Rebrand by replacing the whole `--accent-*` scale consistently.
- Do not add a custom cursor, auth middleware, or password protection.