| name | peg-design |
| description | Use this skill to generate well-branded slides, presentations, and data-driven design artifacts in the Peg visual language. Minimal, type-led, Apple-keynote-inspired. Contains design guidelines, color/type/spacing tokens, React components, and 7 production-ready slide templates. |
| user-invocable | true |
Read the readme.md file within this skill and explore the other available files.
If creating slides or presentations, use the templates in slides/ as your starting point. Link styles.css and slides/slide-base.css in your deck. The eight template types are: Title, Headline, Stats, Flow, Chips, Attr List, Moment, and Media/Proof (image-led: full-bleed, split text+figure, or a 2–4 figure proof wall — for real renders, CAD, PCB, photos, and screenshots).
If creating UI components or interactive prototypes, copy the React components from components/core/ and reference the CSS custom properties defined in tokens/.
If working on production code, read the token files and the component .d.ts / .prompt.md files to understand the props contracts and usage rules.
Core design rules to follow:
- Only one background: Paper (
#FAFAF8). Never switch slide backgrounds. Exception: media-full slides may be full-bleed image on Night (#0B0B0C) letterbox — the image itself is the content. Keep these deliberate and sparse.
- One accent colour: Jade (
#00A878). Use it once per slide maximum.
- Alert (
#E5484D) only for genuine bad news — losses, collapses, risks.
- No shadows. No corner radii except on pills. No gradient backgrounds. Exception: a single bottom/top scrim gradient is allowed on
media-full slides, only to keep overlaid caption text legible — never decorative.
- Tabular numerals on all figures.
- Tight negative tracking on all display text (-0.04em to -0.01em).
- All animations gated on visibility state and prefers-reduced-motion. DOM always shows the final end-state.
- For one-line title or Moment slides,
data-peg-animate="letter-spring" is available for a Keynote-like per-character upward spring reveal.
- Image/proof slides carry an evidence tag (
.evi — RENDER / CAD / PCB / PROTOTYPE / APP) and a one-line caption, so the audience always knows what they're seeing and that it's real.
- Bilingual: set
lang="zh-CN" on <html> for Chinese decks — tokens/cjk.css auto-relaxes tracking/leading and Noto Sans SC renders 汉字 (Inter keeps Latin). Bundle/subset the font with the deck for offline + PDF; never rely on system CJK fonts. Fonts are SIL OFL 1.1 (see readme “Fonts & Licenses”), not MIT — keep the assets/*-OFL.txt files with them.
- Mixed audience (experts + non-experts, e.g. execs/officials): add a
.plain one-sentence plain-language explainer under the headline (accent left-rule, see template 11). Keep the technical content as smaller support; the plain line carries everyone else. Frame achievements as problem → solution / before → after / iteration, not raw mechanism — show it's impressive and that you built it (real renders, CAD, PCB), without requiring the audience to follow the math. The .compare table (template 12) is the go-to for an at-a-glance "what we couldn't do before → can now" summary; flag true firsts with .badge-first (sparingly, and only when you can back the claim). Put one such summary early, then expand each row in later slides; attach a real proof (render/CAD/PCB/screenshot/data) to each claim so "we did this" is shown, not just said.
If the user invokes this skill without other guidance, ask them what they want to build — slides, a prototype, or production components — then act as an expert designer who outputs HTML artifacts or annotated code as appropriate.
Remember to set the File type to Design System in the Share menu so that others in your org can discover and use this system.
