skills.rest
Patrick-zhuyanxun
Patrick-zhuyanxunCOMMUNITY
Explore all skills by this author →
GitHub

slide-authoring

Provide technical guidance for crafting open-slide pages with React components.

Updated May 25, 2026
Search Tags:#best practices#design system#technical reference#theme customization#open-slide#image placeholders#slide authoring#stepped reveal
One-click install
npx skills add https://github.com/Patrick-zhuyanxun/Hierachical_fast_reactive --skill slide-authoring-patrick-zhuyanxun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slide-authoring
Source: https://github.com/Patrick-zhuyanxun/Hierachical_fast_reactive/tree/main/docs/presentations/hfrvla-training-open-slide/.agents/skills/slide-authoring
Command: npx skills add https://github.com/Patrick-zhuyanxun/Hierachical_fast_reactive --skill slide-authoring-patrick-zhuyanxun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to write and edit open-slide pages, ensuring best practices are followed, and technical considerations are addressed.

Core Features & Use Cases

  • Technical Reference: Delivers detailed instructions on file structure, file contracts, canvas sizes, type scales, spacing, and visual direction.
  • Hard Rules: Defines specific rules for slide organization, React component usage, and file creation.
  • Editing Guidelines: Offers tips for editing existing slides, including finding page locations and handling large files.
  • Visual Direction: Outlines color palettes, typography, layout grids, and aesthetic commitments.
  • Themes & Design System: Instructs on customizing themes and designing slides with an optional design system.
  • Assets: Describes how to handle local and global assets within a slide.
  • Image Placeholders: Shows how to use image placeholders for specific images required by the slide's topic.
  • Page Numbers: Guides on how to include page numbers dynamically using the provided hook.
  • Stepped Reveal: Explains how to use stepped reveals for revealing content over time.
  • Page Transitions: Details how to implement custom transitions between slides.
  • Repeated Elements: Offers guidance on defining components for repeating elements instead of using map.
  • Quick Start: To create a new slide, run the command create-slide <slide_id>.

Quick Start

To create a new slide with the specified ID, use the command: create-slide my-slide-id

Frequently Asked Questions about slide-authoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new open-slide page using React components?▼

To create a new open-slide page, use the command `create-slide <slide_id>` with your specified ID. This initializes the slide structure, allowing you to build pages using React components and defined design principles.

How do I implement stepped reveals and dynamic page numbers in open-slide?▼

Implement stepped reveals to show content over time and use a provided hook to include dynamic page numbers. The open-slide framework provides specific technical guidance for integrating these interactive features into your slides.

What are the hard rules for slide organization and file structure in open-slide?▼

Hard rules for slide organization dictate specific guidelines for file creation, canvas sizes, and React component usage. Adhering to these file contracts ensures your open-slide pages function correctly and maintain visual consistency.

How do I handle image placeholders and local assets when authoring slides?▼

Handle local and global assets by using image placeholders for specific images required by your slide's topic. This technique allows you to design the layout before finalizing visual assets within the open-slide framework.

Can I customize themes and define my own design system for slide pages?▼

You can customize themes and design slides using an optional design system. The framework provides instructions on adjusting color palettes, typography, layout grids, and visual direction to match your aesthetic commitments.

What is the best way to manage repeated elements across an open-slide presentation?▼

For repeated elements in open-slide, define specific React components instead of using `map` functions. This approach ensures better maintainability and adheres to the technical reference guidelines for slide organization.

Related Skills

Explore More Design & Creative Skills→
STAR03-byteSTAR03-byte
1

ckm:design-system

Generate CSS variables from tokens.json using a three-layer design token architecture.

Community
Advanced
4tie4tie

slides

Build and manage React-based slide decks with PPTX import and PDF or PPTX export.

Community
Advanced
adolfosalasgomez3011adolfosalasgomez3011

pptx

Create, edit, and verify PowerPoint presentations using Python and LibreOffice scripts.

Community
Intermediate
hachejhachej
45

deck-authoring

Create and edit markdown-based slide decks with custom widgets.

Community
Intermediate