shanraisshan/claude-code-best-practice
presentation-styling
Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Install
npx skills add shanraisshan/claude-code-best-practice@presentation-stylingRuns in your terminal. Adds the skill globally for Claude Code, Cursor, Codex and others; add -g -y to skip prompts.
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.
View source on GitHubBefore you install
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.
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.
323 installs 66KTestingDataAI & agents - weather-fetcher
shanraisshan/claude-code-best-practice
Instructions for fetching current weather temperature data for Dubai, UAE from Open-Meteo API
321 installs 66KData - 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.
271 installs 66KProductivity - 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.
269 installs 66K - presentation-structure
shanraisshan/claude-code-best-practice
Knowledge about the presentation slide format, weight system, navigation, and section structure
171 installs 66KDesign & UIAnimationData - 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
148 installs 66KAI & agents