32 lines
2.7 KiB
Plaintext
32 lines
2.7 KiB
Plaintext
---
|
|
description: Workflow for adding a new org landing-page template (editorial, vibrant, terminal, etc.) to the ClassroomIO monorepo. Activate when the user asks to add/create/build a new landing template or theme, or hands over a design reference for a new landing visual style.
|
|
globs:
|
|
- prototypes/org-landing-page/**
|
|
- packages/ui/src/custom/org-landing-page/**
|
|
- packages/storybook/src/templates/org-landing-page/**
|
|
- apps/dashboard/src/lib/features/org/utils/landing-page*.ts
|
|
- apps/dashboard/src/lib/features/settings/pages/landingpage.svelte
|
|
- apps/dashboard/src/lib/utils/types/org.ts
|
|
- apps/dashboard/static/templates/**
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Add a new landing template
|
|
|
|
This is a three-phase workflow with **explicit approval gates between phases**. The canonical instructions live in [`skills/add-landing-template/SKILL.md`](mdc:skills/add-landing-template/SKILL.md) — read that file in full before starting, then follow it step-by-step.
|
|
|
|
## Phase order — never skip ahead
|
|
|
|
1. **Prototype** — single HTML file at `prototypes/org-landing-page/<theme>.html` using `--primary` as the only color token. **Ask the user for approval before moving on.**
|
|
2. **packages/ui + Storybook** — define `LANDING_THEME_VARS` entry, build nav/hero/course-card subcomponents and the page composer, wire variant branches into shared sections (callout, links, footer-tokens, secondary-action-button), export from `index.ts`, add a Storybook story. **Ask the user for approval before moving on.**
|
|
3. **Dashboard integration** — add to all four registries (three lazy switches + one eager map), settings theme-card picker, translations, preview image (< 500KB). Run `pnpm --filter @cio/ui build` and `svelte-check` once each, grep the captured output. **Ask the user for final approval.**
|
|
|
|
## Critical correctness rules (full list in the canonical SKILL.md)
|
|
|
|
- Components read colors **only** from `var(--landing-*)`. No `bg-background`, no inline hex (except decorative gradients).
|
|
- Heroes that consume `courses` / `orgName` must declare defensive defaults (`courses = []`, `orgName = ''`) — they're mounted from course pages without the full prop set.
|
|
- Use `<LandingButton variant="primary|secondary|tertiary">` for non-template-signature CTAs. The button's colors come from per-theme `--landing-button-*` variables.
|
|
- Hardcoded user-facing strings route through `labels?.foo ?? 'default'`.
|
|
- The dashboard has **three lazy switches** (`importThemeComponent`, `importThemeNavHero`, `importThemeCourseCard` in `landing-page.ts`) and **one eager map** (`landing-page-components.ts`) — all four must be updated, or the live org-site routes silently fall back to `minimal`.
|
|
- Run `svelte-check` once, capture to `/tmp/check.log`, grep many times. Do not re-run for each grep.
|