Skill Introduction

Overview

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

Core value

Turns reusable Development know-how into an installable skill, helping users complete github, community work faster.

Target users

Developers, testers, and maintainers who handle Development tasks in Focus Code.
Teams that already trust workflows or content from shanraisshan.
Users who want standardized prompts, steps, or conventions instead of repeating setup work.

Best practices

Read the skill content first to confirm required inputs, expected outputs, and dependencies.
Try it on a small task before relying on it for critical work.
Add project-specific constraints such as coding style, target platform, test expectations, and delivery format.
For external sources, verify the source link, version, and recent maintenance activity.

Best use cases

Tasks related to github, community that need a reusable execution flow.
Converting a community repo, team convention, or personal workflow into day-to-day assistance.
Starting from a proven skill instead of writing prompts or procedures from scratch.

Limits and boundaries

Results depend on the quality of the original skill content and may need human correction.
It does not replace code review, tests, security review, or professional judgment.
External tools, APIs, account permissions, and local dependencies still need separate setup.

Differentiation

Structured around Development, making it easier to discover and reuse than loose prompt snippets.
Marked as GitHub, which helps users judge trust and maintenance expectations.
Keeps the original source link available for repository, documentation, or discussion follow-up.
Tagged with github, community, so it can be filtered by concrete task intent.

Install and use

Install

Copy Install Command

focus install presentation-structure-e3a1bb

View source

Detail Preview

SKILL.md

Primary filemarkdown4 KB

name: presentation-structure description: Knowledge about the presentation slide format, weight system, navigation, and section structure

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

Section	Slide Range	data-level	Bar Height
Part 0: Introduction	Slides 1-4	(none)	hidden / empty
Part 1: Prerequisites	Slides 5-9	(none)	empty
Part 2: Better Prompting	Slides 10-17	`low`	25%
Part 3: Project Memory	Slides 18-24	`medium`	50%
Part 4: Structured Workflows	Slides 25-28	(inherits medium)	50%
Part 5: Domain Knowledge	Slides 29-33	`high`	75%
Part 6: Agentic Engineering	Slides 34-46	`high`	75%
Appendix	Slides 47+	(inherits high)	75%

Navigation System

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:

Renumber ALL data-slide attributes sequentially starting from 1
Update all goToSlide() calls in the TOC/Journey Map slide
The JS totalSlides auto-computes — no manual update needed
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.

presentation structure