A curated collection of production-ready Agent Skills for Claude Code, Cursor, Codex, and other AI coding agents.
motion-showreel Code-rendered short video |
web-video-presentation Web video / presentation |
web-design-engineer Design / frontend |
gpt-image-2 Image generation / prompting |
beautiful-article Any source → beautiful article |
kb-retriever Local knowledge retrieval |
🌸 Model API service: Token Secret Garden
API access to GPT, Claude, Gemini, and other leading models at discounted rates, with direct access from mainland China, Alipay top-ups, and invoicing.
| Install | Use | Contribute |
|---|---|---|
Installskills CLI (npx)Claude Code plugin marketplace Pinned .zip from ReleasesManual copy Git submodule |
Compatibility What is a Skill? |
Contributing Acknowledgments License |
Category: Motion Graphics / Code Video
Best for: showreels, product films, UI motion, kinetic typography, logo/title sequences, generative loops, retrospectives and narrated explainers. Short pieces typically run 5–60 s; chapter-based films support up to 20 minutes.
motion-showreel delivers MP4 plus editable source. It confirms the topic, duration, orientation, independent music/SFX sources and narration mode, then writes a brief and confirms style frames. Deterministic render(t) pages are captured frame by frame on a shared audio/picture timeline. Narration follows a user-supplied script or recording; pictures follow actual speech timings. Long films use persistent chapter caches and technical acceptance.
Highlights:
- Deterministic
render(t)pipeline: stills, contact sheets, three-direction boards, proxies and masters all come from the same page. Motion blur, supersampling and film grain are render flags. - One timeline for picture and sound: cuts, hits and SFX share the same numbers. Music can be synthesized (a zero-dependency built-in synth, or Tone.js with a sampled piano), or cut to the user's own track with beat and drop detection.
- A 43-style library as a starting point: swiss-editorial, ink-wash, risograph, synthwave, soft 3D, cinematic title, pixel game, comic panels, guochao patterns, painterly strokes, whiteboard explainers, concept morphs, illuminated manuscripts and more. Each style defines its look, motion, camera grammar and sound palette, and can be adapted, mixed or replaced with your own.
- A sound direction, not a default song: the brief sets a sound benchmark, groove, harmony, palette and dramatic arc, plus a list of audio defaults to avoid.
- Two checkpoints: confirm requirements, then style frames (three distinct directions when unspecified), followed by autonomous production. Creative freedom remains available.
- Narration and long films: Gemini/MiniMax TTS reads only user-supplied scripts; recordings use real timestamps. Music and SFX have independent sources, yield to speech, and chapter builds support up to 20 minutes.
- Technical acceptance kept separate from taste: size, fps, duration, frame count, black frames, loudness, true peak, loop seam and determinism must all PASS. Review notes go to the user, who makes the final call.
![]() synthwave-neonalbum title |
![]() soft-3d-toychain reaction |
![]() stick inkgame trailer |
![]() cinematic-titlefilm opening |
↑ 4-second excerpts of pieces made with the skill. Open the showcase for the full set, including the skill's own 80-second trailer and the style gallery.
Links: README · SKILL.md · Download v0.2.0 .zip
Category: Web Video / Presentation Engineering
Best for: turning scripts, articles, lessons, product demos, and talks into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos.
web-video-presentation builds record-ready Vite + React + TypeScript presentations that behave like video production surfaces. The workflow turns raw articles into narration scripts, maps script beats to full-screen scenes, pauses at required checkpoints, and can optionally synthesize narration audio after the visual outline is approved.
Highlights:
- Fixed 1920×1080 stage that scales to the viewport for stable screen recording
- Click / keyboard driven
(chapter, step)cursor, with one narration beat per visual step - Hard collaboration checkpoints for script, theme, outline, implementation mode, and optional audio
- Hidden hover-only progress controls so the stage stays clean while recording
- Theme-token architecture with 23 built-in themes, each with its own design signature — editorial, terminal, engineering, Swiss International, and more
- Pluggable TTS — provider-agnostic audio runner; ships two built-in providers (MiniMax
mmx-cli+ OpenAI TTS via curl) plus a contract + ready-to-paste snippets for ElevenLabs / edge-tts / Azure / Google Cloud / macOSsay - Scaffolded Vite + React + TypeScript project with reusable stage primitives and recording guidance
![]() creative-voltagecreative talks |
![]() blueprinttech architecture |
![]() swiss-ikbdata reports |
![]() chalk-gardenpopular science |
↑ All 23 themes at a glance — open the full gallery for live 16:9 previews, design signatures, and best-for tags.
Links: README · SKILL.md · Download v1.2.2 .zip
Category: Design / Frontend
Best for: web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animations, UI mockups, data visualizations, and design-system explorations.
web-design-engineer turns AI-generated web artifacts from merely functional into polished, deliberate, and visually memorable front-end work. It treats the agent as a design engineer: first understanding product context, then declaring a design system, showing an early v0, building the full experience, and verifying the result.
Highlights:
- Converts the brief into a five-dial Design Read covering variance, motion, density, asset dependence, and brand fidelity
- Distinguishes extension, preserve, and overhaul redesign modes before changing an existing product
- Runs executable browser acceptance only when the user explicitly requests acceptance, QA, or browser testing
- Pushes beyond generic AI UI patterns with an anti-cliché blocklist and stronger visual judgment
- Ships a Design Direction Advisor (six differentiated schools) + 25 anchored style recipes (Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century, etc.) — each recipe carries concrete palette, typography, signature moves, and anti-patterns ready to paste into the design-system declaration
- Covers HTML / CSS / JavaScript / React prototypes, with guidance for responsive layout, motion, and interaction polish
- Includes practical implementation rules for inline React + Babel, CSS tokens,
oklch()color work, container queries, and reduced-motion handling - Ships an advanced patterns reference for device frames, slide engines, animation timelines, dashboards, and other reusable web artifacts
↑ 12 of 25 anchored recipes — open the full gallery for all 25 working artefacts (apothecary pages, trading workstations, magazine covers, Y2K portals, mid-century posters …) with signature moves and best-for tags.
Links: README · SKILL.md · Website · Demo · Download v1.3.0 .zip
Category: Image Generation / Prompt Engineering
Best for: posters, UI mockups, product visuals, infographics, academic figures, technical diagrams, comics, avatars, storyboards, branding boards, and image-editing workflows.
gpt-image-2 is a focused image-generation skill for GPT Image 2 and OpenAI-compatible image APIs. It is designed to work across different agent environments: fully local Garden generation, host-native image-tool delegation, or prompt-only advisor mode when no image tool is available.
Highlights:
- Supports three runtime modes: Mode A Garden local, Mode B host-native delegation, and Mode C advisor-only prompt writing
- Starts every task with mode detection so the skill does not silently choose the wrong execution path
- Provides 18 visual categories and 79 structured prompt templates under
references/ - Covers both image generation and image editing through dedicated workflows and scripts
- Saves prompts and generated images under
garden-gpt-image-2/in Garden mode for reuse, review, and versioning
↑ 12 selected cases from the 160+ public case library — open the skill gallery for more templates, or browse the live website.
Links: README · SKILL.md · Website · Download v1.0.4 .zip
Category: Editorial · Any source → beautiful article
Best for: turning URLs, PDFs, DOCX, Markdown, plain text, screenshots, and pasted notes into a polished, share-ready article — long-form, briefings, explainers, tutorials, post-mortems, visual essays, dialogue transcripts.
beautiful-article is an editorial harness skill: it does not just "make a webpage", it edits and designs the source material into a polished article that is easier to read, share, and archive than the original. The skill flows through a small source → plan → double-confirmation → build → final review → repair loop and pauses at three hard checkpoints so the user keeps editorial control over article type, theme, layout, image strategy, cover, and delivery format.
Highlights:
- Article first — the focus is the article: better reading, better pacing, better aesthetics. Delivery is a self-contained file (HTML, optional PDF), but that's a delivery detail, not the goal
- Reacticle component protocol — prose-first semantic components (Hero / Lead / Section / Quote / Callout / Image / Formula / CodeBlock / Table…) plus a theme-token-only
Rawfree layer; the underlying React library lives atConardLi/reacticle - 10 article types with bundled retention ratios —
longform · ~100%/tutorial · ~90%/full-report · ~80%/explainer · ~80%/dialogue · ~80%/review · ~70%/essay · ~70%/briefing · ~50%/visual-essay · ~40%/interactive-explainer · ~25% excerpt + 75% AI-rebuild - 11 authoring theme profiles (
tufte,press,bayer,bodoni,vignelli,sottsass,freddie,andy,fuller,knuth,shannon) — each is a Markdown contract for the agent rather than a CSS file - Hard collaboration checkpoints with item-by-item decision capture (no silent defaults), plus a 3:4 book-style cover, default-on TOC, and language-aware translation step
- Per-node quality protocol — main-agent inline checks for plan, sub-agent reviewers for first spread / sections / final review, repair as minimal slices
![]() tufte |
![]() press |
![]() bayer |
![]() bodoni |
![]() vignelli |
![]() sottsass |
![]() freddie |
![]() andy |
Links: README · SKILL.md · Download v0.1.0 .zip
Category: Retrieval / Local Knowledge Base
Best for: answering questions from a local knowledge/ directory, searching structured documentation, and extracting evidence from Markdown, text, PDF, and Excel files without flooding the agent context.
kb-retriever is a local knowledge-base retriever built around careful, progressive search. Instead of loading whole files, it navigates hierarchical index files, narrows the candidate set, processes complex file types correctly, and answers with sources.
Highlights:
- Uses layered
data_structure.mdfiles to navigate the knowledge base before searching content - Enforces a learn-before-process rule for PDF and Excel files, using the included reference docs before extraction or analysis
- Combines precise keyword search, local windowed reads, synonyms, and iterative refinement
- Bounds retrieval to at most 5 search rounds so exploration stays controlled
- Includes workflows for
grep,pdftotext,pdfplumber, andpandas, with source-aware answer formatting
Links: README · SKILL.md · Download v1.0.1 .zip
There are five s







































