Agent skill

Tightened Slide

by humantonylee in humantonylee/future-slide

Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation.

Apache-2.0Auto-check passedDocuments & Office

Install Tightened Slide

skills CLI

$ npx skills add humantonylee/future-slide --skill tightened-slide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install humantonylee/future-slide tightened-slide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/humantonylee/future-slide.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/tightened-slide .claude/skills/tightened-slide && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "tightened-slide" agent skill from https://github.com/humantonylee/future-slide/tree/main/skills/tightened-slide into .claude/skills/tightened-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tightened-slide", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/humantonylee/future-slide/tree/main/skills/tightened-slide

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add humantonylee/future-slide --skill tightened-slide -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install humantonylee/future-slide tightened-slide --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/humantonylee/future-slide.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/tightened-slide .agents/skills/tightened-slide && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "tightened-slide" agent skill from https://github.com/humantonylee/future-slide/tree/main/skills/tightened-slide into .agents/skills/tightened-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tightened-slide", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add humantonylee/future-slide --skill tightened-slide -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install humantonylee/future-slide tightened-slide --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/humantonylee/future-slide.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/tightened-slide .cursor/skills/tightened-slide && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "tightened-slide" agent skill from https://github.com/humantonylee/future-slide/tree/main/skills/tightened-slide into .cursor/skills/tightened-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tightened-slide", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/humantonylee/future-slide.git --path skills/tightened-slide

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add humantonylee/future-slide --skill tightened-slide -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install humantonylee/future-slide tightened-slide --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/humantonylee/future-slide.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/tightened-slide .gemini/skills/tightened-slide && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "tightened-slide" agent skill from https://github.com/humantonylee/future-slide/tree/main/skills/tightened-slide into .gemini/skills/tightened-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tightened-slide", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install humantonylee/future-slide tightened-slide

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add humantonylee/future-slide --skill tightened-slide -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/humantonylee/future-slide.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/tightened-slide .github/skills/tightened-slide && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "tightened-slide" agent skill from https://github.com/humantonylee/future-slide/tree/main/skills/tightened-slide into .github/skills/tightened-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tightened-slide", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add humantonylee/future-slide --skill tightened-slide -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install humantonylee/future-slide tightened-slide --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/humantonylee/future-slide.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/tightened-slide .opencode/skills/tightened-slide && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "tightened-slide" agent skill from https://github.com/humantonylee/future-slide/tree/main/skills/tightened-slide into .opencode/skills/tightened-slide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tightened-slide", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: tightened-slide
GitHub stars: 150
Token cost: ~1.3k tokens
SKILL.md length: 661 words
Files: 10 (incl. scripts, references, assets)
Skills in repo: 10
Repo updated: Jun 2, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation.

Works in 7 steps: Clarify Only What Matters → Prepare The Deck → Preflight → …
Tasks that involve Slides and decks
SKILL.md covers Operating Assumptions, Step 1: Clarify Only What…, Step 2: Prepare The Deck and Step 3: Preflight, plus 4 more sections
Runs JavaScript scripts from its folder; calls node

What it does

Tightened Slide is an agent skill from humantonylee/future-slide. Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 12 other files, including scripts, reference files and assets (for example `assets/motion.min.js`, `references/checklist.md` and `references/image-prompts.md`).

It sits in Documents & Office, covering Slides and decks. The repository describes itself as: The workflow for disciplined slide generation. Extract design, plan the deck, render with consistency. The licence is Apache-2.0.

When your agent uses it

Tasks that involve Slides and decks

Example prompts

“/tightened-slide”

Requirements

Node.js

Workflow steps

7 steps, taken from the step headings in SKILL.md.

Clarify Only What Matters
Prepare The Deck
Preflight
Pick Layouts
Apply The Visual System
Image Flow
Validate

What it can do on your machine

Read from SKILL.md and the folder at commit 26914e8. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
- node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tightened Slide loads about 1.3k tokens when it runs, and up to ~7.3k if it reads all its reference files. Until then it costs about 51 tokens; SKILL.md has 661 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~51
When it runs · the whole SKILL.md, loaded when a task matches: ~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~7.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from humantonylee/future-slide at commit 26914e8, republished under its Apache-2.0 licence (© humantonylee). 661 words, ~1,292 tokens.

Download SKILL.mdSave it as .claude/skills/tightened-slide/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.

name: tightened-slide
description: Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation.

Tightened Slide

Use this workflow when a user asks for a Tightened Slide deck, horizontal swipe presentation, HTML slide deck, launch deck, analysis deck, framework deck, product deck, or data-driven talk.

Operating Assumptions

This is a Tightened Slide only system.
The output is a static HTML deck, normally index.html, with an adjacent images/ folder.
The template is assets/template.html.
Body slides must use registered S01 to S22 layouts.
The validator is required before delivery.
Supported language modes are English and Korean.

Step 1: Clarify Only What Matters

If the user provides a complete outline and assets, proceed. If key inputs are missing, ask at most three questions:

Audience and presentation setting.
Target duration or page count.
Source material, language mode, required images/data, and hard constraints.

If the theme is unspecified, default to International Klein Blue from references/themes.md. If the language mode is unspecified, default to English.

Step 2: Prepare The Deck

Create the target folder and image folder:

bash

mkdir -p path/to/deck/images
cp assets/template.html path/to/deck/index.html

Immediately replace the <title> placeholder in index.html.

Set the language mode on the root element:

html

<html lang="en" data-language="en">

or:

html

<html lang="ko" data-language="ko">

Korean mode uses the template font stack SUIT, Pretendard, Noto Sans KR, and Noto Sans before falling back to Inter and system sans fonts.

If the deck must work offline with local animation fallback, keep assets/motion.min.js reachable from the copied HTML path or accept the CDN fallback built into the template.

Step 3: Preflight

Before writing slide markup:

Read the template <style> block.
Read references/layout-lock.md.
Read the relevant skeletons in references/layouts.md.
Confirm every class you plan to use exists in the template.
Do not invent global classes. Use inline styles only for page-specific tuning.

Create a planning table before coding:

text

page -> data-layout -> reason -> image slot

For 7-8 page decks, use at least six different Sxx layouts. For 10+ page decks, use at least eight.

Step 4: Pick Layouts

Use the registered layout set:

S01 Index Cover
S02 Vertical Timeline + KPI
S03 Split Statement
S04 Six Cells
S05 Three Layers
S06 KPI Tower
S07 Horizontal Bar
S08 Duo Compare
S09 Dot Matrix Statement
S10 Split Closing
S11 Horizontal Timeline
S12 Manifesto + Ink Banner
S13 Three Forces
S14 Loop Form
S15 Matrix + Hero Stat
S16 Multi-card Brief
S17 System Diagram
S18 Why Now
S19 Four Cards
S20 Stacked KPI Ledger
S21 Tech Spec Sheet
S22 Image Hero

Use S08 + Tightened Map Component for maps, routes, city relationships, location networks, or historical movement pages.

Use S22 for one large image. Use S15 or S16 adaptations for multiple images. Do not create unregistered image split or evidence wall layouts.

Show full SKILL.md (245 more words)Show less

Step 5: Apply The Visual System

Hard rules:

One accent color per deck.
No gradients, shadows, rounded cards, glass, neon, 3D, or decorative borders.
Large type uses light weights: 200 or 300.
Body text uses restrained weights and clear hierarchy.
Large sizes use font-size:min(Xvw,Yvh) with Y >= X * 1.6.
Headings sit on the left/top content axis unless using registered statement/split layouts.
Kicker text sits above the title, not beside it.
.canvas-card already has horizontal padding; do not add another 5vw padding layer inside it.
Keep all captions, labels, and footnotes above the bottom navigation safe area.
SVG may draw geometry only; visible labels must be HTML.

Language rules:

English mode uses concise sentence case titles and direct body copy.
Korean mode uses short Korean titles, compact body lines, and consistent product terms.
Diagram labels and generated-image text must match the chosen language mode.

Step 6: Image Flow

If images are needed:

Ask before generating new images.
Choose the layout slot before writing the prompt.
Use references/image-prompts.md.
Save generated or provided images in images/.
Name images {page}-{semantic-name}.{ext}.
Add data-image-slot to every local image.

Slot defaults:

S22: s22-hero-21x9
S15: s15-grid-21x9 or s15-grid-16x10
S16: s16-brief-21x9 or s16-brief-16x10

Step 7: Validate

Run:

bash

node scripts/validate-deck.mjs path/to/index.html

Fix every error. Warnings require visual review.

Then open the deck in a browser and inspect:

title alignment
type weight
spacing between title and body
image crop and image slot fit
captions and footnotes above navigation
ESC index visibility
B static mode

Use references/checklist.md as the delivery checklist.

Files

SKILL.md and 9 other files (scripts, references, assets) in skills/tightened-slide of humantonylee/future-slide.

SKILL.md
assets/motion.min.js
assets/template.html
references/checklist.md
references/image-prompts.md
references/layout-lock.md
references/layouts.md
references/map-component.md
references/themes.md
scripts/validate-deck.mjs

Open the folder on GitHubat commit 26914e8

Compare with similar skills

Tightened Slide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tightened Slide compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Tightened Slide this skillhumantonylee/future-slide	150	—	~1.3k	Automated safety check: Pass	Apache-2.0	4 mo ago
Image To Editable Pptningzimu/image-to-editable-ppt-skill	2.9k	—	~4.3k	Automated safety check: Pass	MIT	25 days ago
Slidesfcakyon/claude-codex-settings	1.2k	1 repos	~1.1k	Automated safety check: Pass	MIT	2 days ago
Ppt Image FirstNyxTides/ppt-image-first	1.2k	—	~1.6k	Automated safety check: Pass	Apache-2.0	5 mo ago
Vibe to Agentic Engineering Frameworkshanraisshan/claude-code-best-practice	67k	—	~3.3k	Automated safety check: Pass	MIT	today
Gpt Image2 PptJuneYaooo/gpt-image2-ppt-skills	1.3k	—	~8.9k	Automated safety check: Notes	Apache-2.0	1 mo ago

Similar skills

Image To Editable Ppt
ningzimu/image-to-editable-ppt-skill
Rebuild slide images, scanned or image-based PPT/PPTX files, and PDF decks into object-level editable PowerPoint (.pptx), preserving speaker notes when supplied.
2.9k GitHub stars~4.3k tokensUpdated 25 days ago
Documents & OfficeAuto-check passed
Slides
fcakyon/claude-codex-settings
Create and edit presentation slide decks (.pptx) with PptxGenJS, bundled layout helpers, and render/validation utilities.
1.2k GitHub starsUsed in 1 repo~1.1k tokens
Documents & OfficeAuto-check passed
Ppt Image First
NyxTides/ppt-image-first
Build presentation plans for PPT / slides / decks through a conversation-first workflow, then propose multiple visual directions with preview images before writing deck specs.
1.2k GitHub stars~1.6k tokensUpdated 5 mo ago
Documents & OfficeAuto-check passed
Vibe to Agentic Engineering Framework
shanraisshan/claude-code-best-practice
Explains the conceptual model behind a presentation on moving from unstructured vibe coding to fully configured agentic engineering, including its 4-level scoring system and slide conventions.
67k GitHub stars~3.3k tokensUpdated today
Documents & OfficeAuto-check passed
Gpt Image2 Ppt
JuneYaooo/gpt-image2-ppt-skills
Generate visually striking PPT slides via OpenAI's gpt-image-2 -- use any style in styles/<collection/STYLEID.md or mimic a user-supplied .pptx template; outputs high-res slide PNGs and a 16:9 .pptx.
1.3k GitHub stars~8.9k tokensUpdated 1 mo ago
Documents & OfficeAuto-check: notes
Compiledeck
scunning1975/MixtapeTools
Create and compile beautiful Beamer presentations following the Rhetoric of Decks philosophy.
474 GitHub starsUsed in 2 repos~3.1k tokens
Documents & OfficeAuto-check passed

Questions about Tightened Slide

What does Tightened Slide do?

Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation. Tightened Slide is an agent skill from humantonylee/future-slide. Build single-file HTML horizontal-swipe presentation decks using the Tightened Slide process with locked layouts, strict grid rules, theme presets, image slot discipline, and validation.

When should I use Tightened Slide?

Tightened Slide fits situations like: tasks that involve Slides and decks.

How do I install Tightened Slide in Claude Code?

Run `npx skills add humantonylee/future-slide --skill tightened-slide -a claude-code`. Or copy the skill folder (skills/tightened-slide in humantonylee/future-slide) into .claude/skills/tightened-slide in your project. Claude Code loads it when a task matches its description.

How do I install Tightened Slide in Codex?

Run `npx skills add humantonylee/future-slide --skill tightened-slide -a codex`. Or copy the skill folder (skills/tightened-slide in humantonylee/future-slide) into .agents/skills/tightened-slide in your project. Codex loads it when a task matches its description.

Can I use Tightened Slide in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add humantonylee/future-slide --skill tightened-slide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tightened-slide, .gemini/skills/tightened-slide, .github/skills/tightened-slide and .opencode/skills/tightened-slide in your project.

What does Tightened Slide need to run?

Going by SKILL.md and its folder, Tightened Slide needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.

Does Tightened Slide access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Tightened Slide safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Tightened Slide use?

Tightened Slide is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tightened Slide use?

About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6k tokens, read only when the agent opens those files.

What are the alternatives to Tightened Slide?

Skills that share tags, products or a category with Tightened Slide: Image To Editable Ppt (ningzimu/image-to-editable-ppt-skill, 2.9k stars), Slides (fcakyon/claude-codex-settings, 1.2k stars), Ppt Image First (NyxTides/ppt-image-first, 1.2k stars) and Vibe to Agentic Engineering Framework (shanraisshan/claude-code-best-practice, 67k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tightened Slide?

humantonylee (a GitHub user) maintains it in humantonylee/future-slide, which has 150 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on June 2, 2026.

Source: humantonylee/future-slide on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Tightened Slide

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Tightened Slide

Operating Assumptions

Step 1: Clarify Only What Matters

Step 2: Prepare The Deck

Step 3: Preflight

Step 4: Pick Layouts

Step 5: Apply The Visual System

Step 6: Image Flow

Step 7: Validate

Files

Compare with similar skills

Similar skills

More from humantonylee/future-slide

Related

Questions about Tightened Slide