shanraisshan/claude-code-best-practice
presentation-styling
Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Before you install
- Last update
- Files in folder
- 1
- Scripts
- No script files found
- SKILL.md size
- 3.1 KB (about 789 tokens of context each time it loads)
- License
- MIT
- Source on GitHub
- shanraisshan/claude-code-best-practice
Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.
Install
npx skills add shanraisshan/claude-code-best-practice@presentation-stylingRuns in a terminal with Node.js 18 or newer. Add -y to skip the prompts and -g to install for every project instead of this one.
Install for your agent
npx skills add shanraisshan/claude-code-best-practice@presentation-styling --agent claude-code -y- Project install writes to
.claude/skills/presentation-styling- Global install writes to
~/.claude/skills/presentation-styling
Start a new session afterwards so the agent picks the skill up. In Claude Code you can also call it directly with /presentation-styling.
What it does
Presentation Styling Skill CSS classes and HTML patterns used in presentation/index.html. CSS Component Classes Layout - .two-col — 2-column grid layout with 24px gap - .info-grid — 2-column grid for info cards - .col-card — Card inside a column (add .good for green border, .bad for red border) - .info-card — Card in an info grid Content Blocks - .trigger-box — Gray box with dark left border (for key concepts, prerequisites) - .how-to-trigger — Green box with green border (for "Try This" actions) - .warning-box — Orange box with warning border (for important warnings) - .code-block — Dark…
Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.
Categories
Related skills
- agent-browser
shanraisshan/claude-code-best-practice
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
- weather-fetcher
shanraisshan/claude-code-best-practice
Instructions for fetching current weather temperature data for Dubai, UAE from Open-Meteo API
- weather-svg-creator
shanraisshan/claude-code-best-practice
Creates an SVG weather card showing the current temperature for Dubai. Writes the SVG to orchestration-workflow/weather.svg and updates orchestration-workflow/output.md.
- time-skill
shanraisshan/claude-code-best-practice
Display the current time in Pakistan Standard Time (PKT, UTC+5). Use when the user asks for the current time, Pakistan time, or PKT.
305 installs 68K - presentation-structure
shanraisshan/claude-code-best-practice
Knowledge about the presentation slide format, weight system, navigation, and section structure
- vibe-to-agentic-framework
shanraisshan/claude-code-best-practice
The conceptual framework behind the presentation — what "Vibe Coding to Agentic Engineering" means, why the journey is structured the way it is, and how every slide fits the narrative arc