skills.rest
Peleke
PelekeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-pass

Apply tiered CSS and SVG styling to Slidev decks and landing pages.

Updated Mar 7, 2026
Search Tags:#design#landing page#css#svg#slidev#visual polish
One-click install
npx skills add https://github.com/Peleke/hunter --skill design-pass
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-pass
Source: https://github.com/Peleke/hunter/tree/main/skills/support/design-pass
Command: npx skills add https://github.com/Peleke/hunter --skill design-pass

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enhances the visual appeal of your digital assets (decks, landing pages, one-pagers) by applying carefully curated CSS and SVG upgrades without altering the core content.

Core Features & Use Cases

  • Tiered Styling: Apply aesthetic polish ranging from subtle text enhancements to full animations and background effects.
  • Non-Destructive: Adds styles additively, ensuring existing content and structure remain untouched.
  • Asset Types: Supports Slidev decks, HTML landing pages, and one-pagers for PDF export.
  • Use Case: You have a Slidev presentation that looks functional but a bit plain. Use this Skill to apply a 'high' tier of design polish, adding gradient text and animated underlines to headings, making the presentation more engaging.

Quick Start

Apply high-tier design polish to the Slidev deck located in the 'launchpad/deck/' directory.

Frequently Asked Questions about design-pass

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add CSS animations and visual polish to a Slidev presentation?▼

Add visual polish to a Slidev presentation by applying tiered aesthetic CSS and SVG upgrades, which additively enhance styling with gradient text and animated underlines without altering core content.

Can I apply glassmorphism and gradient text to an HTML landing page without breaking existing styles?▼

Yes, you can apply glassmorphism and gradient text to an HTML landing page using non-destructive styling techniques that add aesthetic upgrades additively, ensuring existing content and structure remain untouched.

What is the best way to enhance a one-pager for PDF export with SVG animations?▼

Enhance a one-pager for PDF export by applying targeted SVG animations and tiered aesthetic CSS upgrades, which visually polish the asset while strictly adhering to non-destructive styling rules.

Does this visual polish approach support custom technique selections or only predefined tiers?▼

The visual polish approach supports both user-defined aesthetic tiers and custom technique selections, allowing you to target specific asset paths with specific CSS and SVG enhancements.

Will applying aesthetic upgrades to my deck overwrite my brand tokens?▼

Applying aesthetic upgrades will not overwrite brand tokens because the process includes strict adherence to brand token resolution and non-destructive styling, ensuring existing definitions remain intact.

Related Skills

Explore More Design & Creative Skills→
humanerd-drewhumanerd-drew
2

claude-design

Design custom HTML artifacts using brand tokens and system files.

Official
Advanced
gooseworks-aigooseworks-ai
1.1k

content-asset-creator

Generate branded HTML content assets from structured data.

Official
Advanced
lshtramlshtram

accordo-presentations

Generate Slidev presentations from topics or documents with Mermaid diagrams.

Community
Advanced
yahav123147yahav123147

tailwind-gradient-builder

Generates Tailwind CSS gradient code patterns for backgrounds, text, borders, overlays, and animations.

Community
Intermediate