AgentToolHub
SkillClaude CodeCursorClineOpenClawWindsurfVS CodeChatGPT

web-design-engineer

ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.

Features

  • ✓Curated collection of AI coding skills
  • ✓Web design and frontend tools
  • ✓Image generation and prompting capabilities
  • ✓Knowledge retrieval and beautiful article creation
  • ✓Explore and integrate skills for Claude Code and more

Installation Guide

There are five supported install paths. Pick the one that fits your stack:

| # | Method | Best for | Pinned version? |
|---|---|---|---|
| A | [skills CLI (npx skills add)](#option-a--skills-cli-npx) | Any agent, one-line install, pick & choose skills | ✅ via tag URL |
| B | [Claude Code plugin marketplace](#option-b--claude-code-plugin-marketplace) | Claude Code users who want to subscribe to plugin packs | ✅ via marketplace version |
| C | [Pinned .zip from GitHub Releases](#option-c--pinned-zip-from-releases) | CI / air-gapped envs / reproducible installs | ✅ ✅ (immutable) |
| D | [Manual copy after git clone](#option-d--manual-copy-into-your-project) | Local hacking on the skill itself | ❌ (tracks main) |
| E | [Git submodule](#option-e--git-submodule) | Vendored into a larger project, want upstream updates | ✅ via submodule SHA |

Each skill section above also has a Download v<version> .zip link in

its "Links:" row that points at the current pinned release artifact. Those

URLs are auto-rewritten by [scripts/release/update-readme.mjs](./scripts/release/update-readme.mjs)

on every release, so they always advertise the latest immutable version.

Option A · skills CLI (npx)

The fastest agent-agnostic path. Uses the standard npx skills CLI,
which auto-detects your agent (Claude Code, Cursor, Codex, etc.) and drops the
skill into the right directory.

bash
# Install all four skills (latest)
npx skills add ConardLi/garden-skills

# Install just one skill (latest)
npx skills add ConardLi/garden-skills -s web-design-engineer

# Install globally (~/.skills) instead of per-project (./.skills)
npx skills add ConardLi/garden-skills -s gpt-image-2 --global

# Target a specific agent
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code

Defaults to the latest commit on main. That's what you want 95% of the

time — the CLI tracks each skill's most recent published SKILL.md straight

from the source tree.

Want a pinned version? (CI / production) Use a tag-scoped tree/ URL —
this points at the exact commit a release was cut from:

bash
# Pin one skill to a specific release
npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer

For each skill, the current pinned .zip URL is also shown inline in its
"Links:" row above (the Download v<version> .zip link).

Useful sub-commands:

bash
npx skills list                 # what's installed
npx skills find web-design      # search registries
npx skills update               # bump everything
npx skills remove kb-retriever  # uninstall

Option B · Claude Code plugin marketplace

If you use Claude Code, you
can subscribe to the marketplace and install plugin packs that bundle one or
more skills together:

bash
/plugin marketplace add ConardLi/garden-skills
/plugin install presentation-skills@garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills

Plugin packs are declared in [.claude-plugin/marketplace.json](./.claude-plugin/marketplace.json):

| Plugin pack | Skills included |
|---|---|
| presentation-skills | web-video-presentation |
| web-design-skills | web-design-engineer |
| knowledge-base-skills | kb-retriever |
| image-generation-skills | gpt-image-2 |

Option C · Pinned .zip from Releases

Every formal release publishes an immutable .zip (with a SHA-256 checksum) to
GitHub Releases. Pin to
this from CI, Dockerfiles, or air-gapped installers when you need the exact
bytes to never move under you.

bash
# Replace <skill> and <version> with the version you want.
SKILL=web-design-engineer
VERSION=1.0.0

curl -fsSL -o "${SKILL}.zip" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip"

# Verify the checksum (highly recommended for unattended installs)
curl -fsSL -o "${SKILL}.zip.sha256" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256"
shasum -a 256 -c "${SKILL}.zip.sha256"

# Drop the folder into the agent's skills directory
unzip -q "${SKILL}.zip" -d .claude/skills/   # or .agents/skills/, .codex/skills/, ...

A floating "always-latest" URL is also available — useful for one-off installs:

bash
https://github.com/ConardLi/garden-skills/releases/latest/download/<skill>-<version>.zip

Pinned URLs for every skill are listed inline in this README — see the

"Download" line under each skill's "Links" entry above. They are kept in sync

automatically by the release pipeline.

Option D · Manual copy into your project

Clone the repo and copy the skill folder you want — handy if you want to fork
or hack on the skill itself.

bash
git clone https://github.com/ConardLi/garden-skills.git
cp -r garden-skills/skills/web-design-engineer  your-project/.claude/skills/
# Cursor / generic agent:
cp -r garden-skills/skills/web-design-engineer  your-project/.agents/skills/

The agent discovers the skill the next time it scans the workspace.

Option E · Git submodule

For vendoring into a larger project where you want to track upstream updates:

bash
git submodule add https://github.com/ConardLi/garden-skills.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer

Pin to a release tag for reproducibility:

bash
cd vendor/garden-skills
git checkout web-design-engineer-v1.0.0

---

Reviews