skills.guanliai
How-tosAll SkillsCombos
中EN
How-tosAll SkillsCombos

skills.guanliai.com

An AI how-to library organised by scene: which skills to use, how to install, how to prompt, and what traps to avoid.

How-tosAll SkillsCombos

Supported clients

  • Claude Code
  • Cline / Roo Code
  • CodeBuddy
  • CodeGeeX (Zhipu)
  • Comate (Baidu)
  • Cursor
  • Fitten Code
  • Gemini CLI
  • GitHub Copilot
  • Kiro
  • Lingma (Alibaba)
  • MarsCode
  • OpenAI Codex
  • OpenClaw
  • OpenCode
  • Qoder
  • Tencent CloudBase AI
  • Trae
  • VS Code
  • Windsurf
skills.guanliai.com · Agent Skill DirectoryData from GitHub · Next.js + MySQL
HomeAll Skills

All Skills

Total 12 skills · from GitHub & curated sets, updated daily

Category

Featured

China

Global

Tags

Language

Total 12 skills

architecture-diagram

NousResearch/hermes-agent/skills/creative/architecture-diagram

Automation

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

JetBrains
242.8kPythonDetails
infrastructurecloudvisualization

hyperframes

NousResearch/hermes-agent/optional-skills/creative/hyperframes

Automation

Render MP4/WebM videos from HTML compositions.

Universal
242.8kPythonDetails
htmlvideocreative

sketch

NousResearch/hermes-agent/optional-skills/creative/sketch

Design

Throwaway HTML mockups: 2-3 design variants to compare.

Claude Code
242.8kPythonDetails
htmluimockup

popular-web-designs

NousResearch/hermes-agent/skills/creative/popular-web-designs

Design

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

CursorClaude CodeOpenCode
242.8kPythonDetails
htmluidesign

claude-design

NousResearch/hermes-agent/skills/creative/claude-design

Design

Design one-off HTML artifacts (landing, deck, prototype).

Claude Code
242.8kPythonDetails
htmluidesign-system

md-document

alirezarezvani/claude-skills/markdown-html/skills/md-document

Writing

Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, search filter, code-copy buttons, and design-system-driven brand tokens. Triggers when the markdown-html-orchestrator classifies an input as DOCUMENT, or when invoked directly via /cs:md-document. Reads the design-system config via config_loader.py and inlines the user's 12 derived CSS custom properties; refuses to render if onboarding hasn't run. Single-file output — Google Fonts + Prism.js CDN are the only externals; no framework runtime, no build step. Use after orchestrator routing or after design-system onboarding is confirmed.

CursorClaude CodeGemini CLI
25.1kPythonDetails
htmldesign-systemmarkdown

md-review

alirezarezvani/claude-skills/markdown-html/skills/md-review

Design

Converts a markdown PR writeup or code review (one with ```diff fenced blocks and severity-tagged > [!BLOCKER]/[!MAJOR]/[!MINOR]/[!NIT] callouts) into a single-file 2-column HTML review — unified-diff on the left, severity-tagged annotation cards on the right, top jump-nav listing every finding, mandatory named reviewer footer. Triggers when the markdown-html-orchestrator classifies an input as REVIEW, or when invoked directly via /cs:md-review. Refuses without explicit --reviewer (a code review must name a human), refuses if no diff hunks present (route to md-document instead), and refuses to encode severity in color only (every badge ships color + icon + aria-label per WCAG 1.4.1). Use after orchestrator routing.

CursorClaude CodeGemini CLI
25.1kPythonDetails
htmldesign-systemmarkdown

md-slides

alirezarezvani/claude-skills/markdown-html/skills/md-slides

Design

Converts a markdown deck (slides separated by `---` HR boundaries or by `# ` H1 headings, with optional `<!-- notes: ... -->` presenter notes blocks) into a single-file HTML presentation with arrow-key / space / PgDn / PgUp / Home / End / P / Esc keyboard navigation, presenter mode (split view with current slide + speaker notes + clock + next-slide preview), URL-hash deep linking, and `@media print` page-per-slide for PDF export. Triggers when the markdown-html-orchestrator classifies an input as SLIDES, or when invoked directly via /cs:md-slides. Reuses md-document's markdown parser for slide-body rendering and reads design-system tokens via config_loader.py. Refuses if input has no clear slide boundaries, produces a 1-slide deck, or `--strict-notes` is on with < 50% notes coverage. Use after orchestrator routing.

CursorClaude CodeGemini CLI
25.1kPythonDetails
slideshtmldesign-system

sankhya-dashboard-html-jsp-custom-best-pratices

sickn33/agentic-awesome-skills/skills/sankhya-dashboard-html-jsp-custom-best-pratices

Data Analysis

This skill should be used when the user asks for patterns, best practices, creation, or fixing of Sankhya dashboards using HTML, JSP, Java, and SQL.

Claude CodeOpenAI Codex
45.6kPythonDetails
best-practiceshtmldashboard

markdown-html-orchestrator

alirezarezvani/claude-skills/markdown-html/skills/markdown-html-orchestrator

Design

Use when a user wants to convert any markdown file in their Claude project into a single-file, lightly-interactive HTML — long-form documents (specs, plans, RFCs, reports, explainers), code reviews with diffs and severity-tagged annotations, or slide decks. Triggers on "convert this markdown to HTML", "make this an HTML file", "turn this into an interactive document", "render this report as HTML", "PR writeup as HTML", "slides from this markdown". Forks context to route to one of three converter sub-skills (md-document, md-review, md-slides) based on a deterministic doctype classifier, after the user has run the design-system onboarding once. Refuses if input is under 100 lines (per Shihipar — markdown still wins below the threshold) or design-system isn't onboarded. Distinct from Anthropic's official Playground plugin (which is interactive prompt-tuning controls with sliders/knobs/prompt-copy-back) and from marketing/landing/ (which is a landing-page generator).

CursorClaude CodeGemini CLI
25.1kPythonDetails
slideshtmldesign-system

timeline-builder

zebbern/claude-code-guide/skills/timeline-builder

Design

Generate beautiful interactive timeline HTML pages from JSON data, with vertical, horizontal, or dual-side layouts, collapsible details, and custom colors. Ideal for project milestones, company histories, or resumes. Triggered when a user mentions 'timeline', 'history of events', 'project milestones', 'release log', or asks to visualize a chronological sequence of data.

Claude Code
4.6kPythonDetails
visualizationhtmlinteractive

data-viz-renderer

zebbern/claude-code-guide/skills/data-viz-renderer

Design

Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users request data visualization, infographics, charts, or dashboards.

Claude Code
4.6kPythonDetails
visualizationhtmlinfographic