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.
Scanned 8/30/2026
Install to Claude Code
Skills Directorynpx -y skills add v0id-byte/peg-design-system --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of peg-design?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/v0id-byte-peg-design)More formats (shields.io, HTML) on the badges page.
---
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:**
1. 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.
2. One accent colour: Jade (`#00A878`). Use it once per slide maximum.
3. Alert (`#E5484D`) only for genuine bad news — losses, collapses, risks.
4. 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.
5. Tabular numerals on all figures.
6. Tight negative tracking on all display text (-0.04em to -0.01em).
7. All animations gated on visibility state and prefers-reduced-motion. DOM always shows the final end-state.
8. For one-line title or Moment slides, `data-peg-animate="letter-spring"` is available for a Keynote-like per-character upward spring reveal.
9. 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.
10. 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.
11. 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.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
