跳到正文
FunCoding

搜索

搜索文档、Skill 和 MCP

presentation-structure

Knowledge about the presentation slide format, weight system, navigation, and section structure

AI 与智能体67k.claude/skills/presentation/presentation-structure/SKILL.md

安装

把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。

读取 https://funcoding.ai/skills/shanraisshan/claude-code-best-practice/presentation-structure/install.md ,按里面的步骤帮我安装这个 Skill。

SKILL.md

Presentation Structure Skill

Knowledge about how the presentation at presentation/index.html is structured.

File Location

presentation/index.html — a single-file HTML presentation with inline CSS and JS.

Slide Format

Each slide is a div with data-slide (sequential number) and optional data-level (journey level at transition points):

<!-- Regular slide — inherits level from previous data-level slide -->
<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    <!-- content -->
</div>

<!-- Level transition slide — sets new level for this slide and all following -->
<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>Section Name</h1>
    <p class="section-desc">Level: Low — description of this section</p>
</div>

<!-- Title slide (centered) -->
<div class="slide title-slide" data-slide="1">
    <h1>Presentation Title</h1>
    <p class="subtitle">Subtitle text</p>
</div>

Journey Bar Level System

The presentation uses a 4-level system instead of cumulative percentages:

  • Levels are set via data-level attribute on key transition slides (section dividers)
  • All slides after a data-level slide inherit that level until the next transition
  • The journey bar fills to 25% / 50% / 75% / 100% for Low / Medium / High / Pro respectively
  • The bar is hidden on slide 1 (title slide); from slide 2 onward the bar is shown
  • Slides before the first data-level (slides 2–9) show an empty bar (no level yet set)
  • A .level-badge is JS-injected on the <h1> of slides that carry data-level — do NOT hardcode in HTML

Level Transitions by Section

SectionSlide Rangedata-levelBar Height
Part 0: IntroductionSlides 1-4(none)hidden / empty
Part 1: PrerequisitesSlides 5-9(none)empty
Part 2: Better PromptingSlides 10-17low25%
Part 3: Project MemorySlides 18-24medium50%
Part 4: Structured WorkflowsSlides 25-28(inherits medium)50%
Part 5: Domain KnowledgeSlides 29-33high75%
Part 6: Agentic EngineeringSlides 34-46high75%
AppendixSlides 47+(inherits high)75%
  • goToSlide(n) — used in TOC links, must match actual data-slide numbers
  • totalSlides is auto-computed from DOM (document.querySelectorAll('[data-slide]').length)
  • Arrow keys, Space, and touch swipe for navigation
  • Slide counter shows current / total at bottom-left

Renumbering Rules

After adding, removing, or reordering slides:

  1. Renumber ALL data-slide attributes sequentially starting from 1
  2. Update all goToSlide() calls in the TOC/Journey Map slide
  3. The JS totalSlides auto-computes — no manual update needed
  4. Verify no gaps or duplicates exist

Section Divider Format

Section dividers use the section-slide class. Level-transition section dividers carry data-level and show the level name in the description:

<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">Part 2</p>
    <h1>Better Prompting</h1>
    <p class="section-desc">Level: Low — effective prompting for real results.</p>
</div>

The JS will inject a .level-badge (e.g., "→ Low") into the <h1> at runtime when the level transitions — do not add these manually in HTML.

相似的 Skill

brand-guidelines
anthropics/skills180k

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

AI 与智能体

internal-comms
anthropics/skills180k

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

AI 与智能体

template-skill
anthropics/skills180k

template-skill

Replace with description of the skill and when Claude should use it.

AI 与智能体

mcp-builder
anthropics/skills180k

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

AI 与智能体

algorithmic-art
anthropics/skills180k

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

AI 与智能体

academy-guide
anthropics/skills180k

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

AI 与智能体