Claude Code Presentation Styling Skill for HTML Slide Components
Apply the deck's existing two-column layout, callout boxes, and code highlighting. Use the skill to build a before-and-after slide with matching card styles and readable snippets.
中文Install in Claude Code
Use Claude Code in the pinned project checkout. Preview `presentation/vibe-coding-to-agentic-engineering/index.html` in a browser to inspect its layouts and syntax colors.
- Keep `.claude/skills/presentation/presentation-styling/SKILL.md` and `presentation/vibe-coding-to-agentic-engineering/index.html` in the pinned checkout.
- Start Claude Code from the repository root and ask it to use `presentation-styling`. Supply the slide number, the comparison copy, and the short snippet to show.
Example task
Add a comparison slide with Improve search on the left and Hide results for empty queries and show a result count after three characters on the right. Ask for the existing two-column pattern and an `emptyQuery: hide` snippet in the right-hand card.What to check
The two examples should use the existing card and code styles. The snippet stays in the right-hand code block and its field and value are visually distinct.
Original SKILL.md on GitHub · Updated
Frequently asked question
How can I distinguish fields and comments in a slide snippet?
Apply the deck's `.key` class to fields and `.comment` to comments inside `.code-block`. Preview the slide to check indentation and readability.