CG Web Skills

Professional web design, motion, SEO, GEO, accessibility, performance, and legal-page expertise for Claude, packaged as installable Agent Skills.

Website: cg-web-skills-website.vercel.app

CG Web Skills gives Claude the working methods of a senior web studio: how to plan a website before designing it, how to make it look specific instead of generic, how to add motion that helps rather than distracts, how to make it findable in classic and AI-powered search, how to make it accessible to everyone, how to make it fast, and how to write a privacy policy and imprint that match what the site actually does. You install the skills once, and Claude uses them automatically whenever you work on a website.

npx cg-web-skills@latest install --all

That's it: this installs the complete skillset into your project. Open Claude Code in the same project and ask for what you need, for example "Plan and build a website for my physiotherapy practice."

---

Contents

• What are skills?
• The skillset
  • cg-web-designer
  • cg-web-animate
  • cg-web-seo
  • cg-web-geo
  • cg-web-accessibility
  • cg-web-deslopifier
  • cg-web-lighthouse-optimizer
  • cg-web-privacy
  • cg-web-imprint
  • How the skills work together
• Quick start
• Using the skills in Claude
• CLI reference
• Installing as a Claude Code plugin
• Updating and removing skills
• FAQ
• For contributors
• License

---

What are skills?

Agent Skills are folders of instructions that Claude loads on demand. Each skill has a SKILL.md file whose description tells Claude when the skill is relevant. When your request matches, Claude reads the skill and follows it. When it doesn't, the skill stays out of the way and costs nothing.

In practice, that means you don't have to paste long prompts about accessibility, easing curves, or content strategy into every conversation. The skills bring that knowledge with them.

The skillset

Skill	Role	Use it for
cg-web-designer	Lead web designer, UX and content strategist, frontend quality lead	Planning, designing, building, reviewing, and launching websites and landing pages
cg-web-animate	Senior design engineer and motion designer	Designing, implementing, reviewing, and optimizing animations and motion systems
cg-web-seo	SEO specialist	Technical SEO, search intent, information architecture, on-page, structured data, Core Web Vitals, audits, and relaunches
cg-web-geo	Generative Engine Optimization specialist	Making websites findable, understandable, and citable in AI search (Google AI Overviews/AI Mode, Copilot, ChatGPT Search, Perplexity)
cg-web-accessibility	Accessibility engineer	Fixing WCAG 2.2 AA barriers in the codebase and building a native, site-wide accessibility toolbar
cg-web-deslopifier	Design director for existing sites	Auditing and redesigning AI-generated, vibe-coded, or template-driven websites so they look specific and intentionally designed
cg-web-lighthouse-optimizer	Web performance engineer	Turning Lighthouse JSON reports (mobile and desktop) into real fixes in the code, without score gaming

cg-web-seo, cg-web-geo, cg-web-accessibility, cg-web-lighthouse-optimizer, cg-web-privacy, and cg-web-imprint are written in German. Claude applies them just as well to projects in any language.

cg-web-designer

The end-to-end web design skill. It treats every request like a small studio engagement instead of jumping straight to a homepage.

What Claude does with it

• Starts by reducing uncertainty. Before any code, Claude clarifies the site's purpose, audience, primary action, content, and constraints. A vague brief like "make it modern and premium" gets translated into concrete design rules, with follow-up questions where needed.

• Works through a real process:

  Intake → Discovery → Strategy → Content → Information Architecture → UX/Wireframes
  → Design Direction → Design System → Visual Design → Prototype/Test → Engineering
  → QA → Launch → Iteration
  

• Designs content first. Structure and copy come before visual composition, so the layout serves the message.

• Derives the look from your world. Instead of picking a style, Claude names the look your industry always ships and builds the visual direction from your audience's own culture, materials, and artifacts. It suggests one committed direction plus alternatives.

• Gets the details right. Concentric radii, optical alignment, themed focus rings and text selection, tabular numbers, icon stroke weights, hit areas, opens that are slower than closes, and every UI state from loading to error.

• Builds a design system. Tokens for color, type, spacing, elevation, and motion, recorded in PRODUCT.md (product facts) and DESIGN.md (the visual system), so later work starts from the truth.

• Reviews with real scores. A critique scores the 10 Nielsen heuristics and cognitive load, a technical audit scores five dimensions with P0–P3 findings, and a polish review lists before/after fixes with a verdict.

• Speaks a shared vocabulary. Ask it to make a section bolder, quieter, or simpler, to polish a page, or to harden a form, and it knows what to change and what to leave alone.

• Covers the quality basics: responsive design, accessibility (WCAG 2.2), performance (Core Web Vitals), SEO, QA, launch checklist, and handoff.

• Audits against "AI slop". Claude checks the result against the generic defaults of AI-generated websites (eyebrow labels on every heading, gradient text, interchangeable hero sections, filler cards, and so on) and removes them.

• Never invents facts. Prices, testimonials, statistics, certifications, team members, and legal text are never made up. Unknowns are marked and asked for.

It also handles redesigns of existing sites and has a defined fallback when you say "just build it". The skill is split into a short SKILL.md and focused reference files that Claude reads only when a task needs them.

Example prompts

• "I need a website for my architecture firm. Where do we start?"
• "Redesign this landing page. It feels generic."
• "Review my homepage for accessibility, performance, and SEO before launch."
• "Create a design system for this project."
• "Critique the pricing page and score it."
• "The services section feels flat. Make it bolder without touching the rest."

cg-web-animate

The motion skill. Its core rule: every animation must have a reason to exist. Claude uses motion to communicate hierarchy, spatial continuity, feedback, and brand, not as decoration added at the end.

What Claude does with it

• Decides whether to animate at all, then picks the simplest technology that does the job: CSS, Web Animations API, View Transitions, native scroll-driven animations, GSAP, Motion (Framer Motion), Lottie, Rive, SVG, Canvas, or WebGL.
• Uses a consistent motion system: easing rules, a timing scale, stagger, and motion tokens instead of one-off values.
• Knows the common patterns: hero entrances, text reveals and masks, scroll reveals and choreography, parallax, hover and micro-interactions, page transitions, loading states, skeletons, marquees, cursor effects, and SVG animation.
• Keeps it accessible: respects prefers-reduced-motion (in CSS and JavaScript), keyboard focus, and flashing-content limits.
• Keeps it fast: animates compositor-friendly properties, avoids unnecessary layout animation, uses will-change sparingly, and prevents flashes of unstyled content.
• Follows framework rules for React/Next.js and GSAP, including cleanup and responsive motion.
• Reviews its own work with a motion review process and checklist, and avoids "AI animation slop" such as fading everything in on scroll.

Example prompts

• "Add a premium hero entrance to this page."
• "Our scroll animations feel cheap. Review and fix them."
• "Build a page transition between the project list and project detail in Next.js."
• "Make these buttons feel more responsive."

cg-web-seo

The search skill. It treats SEO as a system instead of a layer of keywords: Discovery → Crawl → Render → Index → Relevance → Quality/Trust → Search Appearance → Click → UX/Conversion → Measurement → Iteration.

What Claude does with it

• Starts with the business and search intent. Claude builds a topic map before a keyword map, gives every primary intent one clear target page, and avoids keyword cannibalization and thin "SEO pages".
• Covers technical SEO end to end: status codes, redirects, robots.txt vs. noindex, sitemaps, canonicals, hreflang, JavaScript rendering, mobile, and security.
• Handles on-page and content quality: titles, meta descriptions, headings, internal linking and anchor text, images, E-E-A-T as real trust signals, and a process against AI slop.
• Uses structured data correctly: JSON-LD as a connected @graph that matches the visible content, never as a ranking hack.
• Knows Core Web Vitals (LCP, INP, CLS), local and international SEO, migrations and relaunches, faceted navigation, pagination, and a Next.js SEO baseline.
• Audits with priorities (P0 to P3), acceptance criteria, and Search Console as a diagnostic tool.
• Rejects SEO myths. No keyword density, no word-count rules, no guaranteed rankings. Claims are labeled as documented guideline, best practice, heuristic, or hypothesis.

Example prompts

• "Run an SEO audit of this Next.js site and prioritize the fixes."
• "We're relaunching. Plan the redirects and make sure we don't lose rankings."
• "Add structured data for our organization and services."
• "Build a topic map and page structure for our service pages."

cg-web-geo

The Generative Engine Optimization skill. Its core rule: GEO is not a replacement for SEO. Claude optimizes the whole web presence so that search and answer systems can find, understand, verify, and cite it, without chasing hacks.

What Claude does with it

• Evaluates the full chain: discoverability, indexability, retrievability, extractability, and evidence, then fixes the foundation before producing content (Access → Index → Understand → Retrieve → Cite → Convert).
• Builds entity clarity: who the organization is, what it offers, for whom, where, and since when, kept consistent on the website and external profiles.
• Writes citation-ready content: concrete, self-contained claims with numbers, dates, and sources, and a real reason to cite (original data, experience, local expertise).
• Configures AI crawler access deliberately, for example OAI-SearchBot vs. GPTBot, instead of blocking or allowing every AI bot.
• Treats llms.txt, schema, and "chunking" soberly. None of them is a magic GEO switch, and Claude says so.
• Measures instead of guessing: Search Console, Bing AI Performance, repeated multi-platform AI query tests, and an experiment protocol, because AI answers are stochastic.
• Avoids manipulation: no hidden prompt injection, fake freshness, artificial mentions, or programmatic city spam.

Example prompts

• "Why doesn't ChatGPT mention our company? Run a GEO audit."
• "Make our service pages easier for AI search to cite."
• "Check our robots.txt for AI crawlers. We want to appear in ChatGPT Search."
• "Set up a test plan to track our visibility in AI Overviews, Copilot, and Perplexity."

cg-web-accessibility

The accessibility skill. It works on two levels that always belong together: accessibility by source, plus accessibility preferences on top.

What Claude does with it

• Fixes real barriers in the code: semantic HTML, landmarks, headings, alt text, forms and error messages, keyboard operation, focus management, contrast, reflow, media, and status messages, audited against the WCAG 2.2 A/AA success criteria.
• Builds a native accessibility toolbar: a site-wide button with an accessible dialog for larger text, text spacing, line height, contrast modes, link highlighting, reduced motion, hidden images, a reading-friendly font, a larger cursor, focus highlighting, a page structure navigator, optional read-aloud, and a reset. Everything is stored locally, without external services or tracking.
• Follows your architecture: a central provider near the app shell, SSR-safe browser APIs, and the project's own styling system (React/Next.js, Vue/Nuxt, SvelteKit, or plain HTML/JS).
• Verifies its work: lint, typecheck, build, automated scans such as axe, keyboard and screen reader passes, mobile, and 200 % text size.
• Stays honest about compliance. The toolbar never replaces accessible source code, and Claude never claims that a widget makes a site WCAG, EN 301 549, or BFSG compliant.

Example prompts

• "Make our website accessible and add an accessibility button."
• "Check this site against WCAG 2.2 AA and fix what you find."
• "Our online shop falls under the BFSG. What do we need to fix?"
• "The mobile menu isn't usable with a keyboard. Fix it."

cg-web-deslopifier

The anti-slop skill for websites that already exist. Its core rule: replace defaults with decisions. Claude treats "AI slop" as a design-convergence problem, not as proof that AI was involved, and makes the site look like the result of clear human decisions instead of swapping one template for another.

What Claude does with it

• Inspects before editing. Claude reads the project, its brand assets, tokens, components, and content first, and preserves the logo, approved colors, proprietary imagery, information architecture, and working integrations.
• Runs an anti-slop audit on the rendered site, at 1440, 1024, 768, and 390 px: generic gradients and glows, the "cardocalypse", the default centered hero recipe, repetitive grids, one-font typography, stock imagery, interchangeable copy ("elevate your business"), and motion without a job.
• Sets a design direction with 3–5 concrete brand traits, 1–3 visual signatures grounded in the brand, a small token system, and a clear job for every section.
• Fixes the highest-leverage problems first: information architecture, hero, typography, content specificity, and imagery before shadows and radii.
• Cleans up the code as well: duplicated markup, dead components, placeholder content, unnecessary client components, and dependencies used for trivial effects.
• Validates with a squint test, a cross-site test, and a specificity test, and keeps accessibility and performance from regressing.
• Never fabricates realism. No invented testimonials, customer logos, numbers, or case studies, and no claim that a site is "definitively AI-generated".

Example prompts

• "This site was vibe-coded and looks like every other AI landing page. Deslopify it."
• "Remove the AI look from our homepage without changing the brand."
• "Audit our landing page for generic AI design patterns and fix the worst ones."
• "Make this Claude Code website look custom."

cg-web-lighthouse-optimizer

The performance skill. You give Claude Lighthouse results as JSON, and it fixes the causes in the code. Its core rule: Lighthouse is a diagnostic loop, not a score to game: measure → identify → hypothesize → change → validate → measure again.

What Claude does with it

• Reads any Lighthouse JSON: a single report, a mobile/desktop pair, an array, a PageSpeed Insights wrapper, or JSON pasted as text. It normalizes them and checks for runtime errors, warnings, and mismatched versions or URLs.
• Keeps mobile and desktop apart. Each is analyzed on its own, with a side-by-side matrix of metrics and categories.
• Is version-aware. It reads the Lighthouse version and the report's own audit weights, and maps older audit IDs to the Performance Insights introduced with Lighthouse 13.
• Prioritizes by real impact: LCP, TBT, and CLS before low-impact tweaks, weighted by savings, affected devices, root-cause reach, and implementation risk.
• Traces each finding to the code: the actual LCP element, the bundle behind the long tasks, the unsized image behind the layout shift, the font, the third-party script, the cache header. Then it applies the smallest robust fix, with framework-native tools such as next/image, next/font, and next/script.
• Covers all categories: Performance, Accessibility, Best Practices, SEO, and, where the report includes it, Agentic Browsing.
• Refuses score gaming. No hidden content, no lazy-loaded LCP images, no blanket preloads, no removed features, and no claimed improvement without a new Lighthouse run.

Example prompts

• "Here are the Lighthouse reports for mobile and desktop. Fix what's slowing the site down."
• "Our mobile LCP is 4.8 s. Find out why and fix it."
• "Analyze this PageSpeed Insights JSON and improve the site in the repo."
• "The new Lighthouse run is worse than last week. Compare the reports and fix the regression."

cg-web-privacy

The privacy policy skill for websites in Germany and the EU. Its core rule: analyze the website first, then write the privacy policy. Claude doesn't produce a generic template. It writes the policy from the services, cookies, scripts, and data flows the site really uses, and keeps the policy, the consent banner, and the code consistent with each other.

What Claude does with it

• Researches the current law first. Before any legal statement, Claude checks primary sources (EUR-Lex, gesetze-im-internet.de), the German data protection authorities (DSK), the EDPB, relevant case law, and the providers' own documentation, and dates its sources.
• Inventories the site technically: pages, forms, cookies, local and session storage, fonts, embeds, maps, videos, analytics, pixels, captchas, consent management, hosting, CDN, email, server-side API routes, and AI services. In a Next.js project it also checks whether a third party receives data only on the server.
• Builds a data inventory with purpose, legal basis, recipients, third-country transfers, retention, and a status for each processing (verified, from the user, likely, unclear). Only verified or confirmed facts go into the final text.
• Assigns legal bases one by one (Art. 6 GDPR) and names the concrete legitimate interest instead of a blanket phrase. It checks Art. 9, 13, 14, and 22 GDPR where they apply.
• Keeps § 25 TDDDG and the GDPR apart: access to the device and the processing that follows are separate questions. No cookie banner just because "cookies exist", and nothing that needs consent loads before consent.
• Checks consent banner, code, and policy against each other in all four directions, and verifies each provider's current transfer basis, for example the EU-US Data Privacy Framework.
• Asks instead of guessing. Missing facts such as the controller, a data protection officer, the hosting provider, or retention periods are asked for in a compact table. It never invents providers, legal bases, or retention periods, and never calls anything "GDPR-compliant" across the board.

Example prompts

• "Write the privacy policy for this website."
• "Check our privacy policy against what the site actually loads."
• "Does our cookie banner match the privacy policy? Are scripts blocked before consent?"
• "We added Google Maps and a newsletter. Update the privacy policy."

cg-web-imprint

The imprint skill for websites and digital services in Germany. Its core rule: analyze the website, identify the operator, then write the imprint. Claude determines the legal form, business model, industry, and any special rules before it writes a line, instead of filling in a template.

What Claude does with it

• Starts from the site and the code: existing legal pages, footer, company data in components and the CMS, shop and blog areas, social profiles, and any hints of registers, chambers, licenses, or supervisory authorities.
• Covers the general duties of § 5 DDG: name and address for service of process, legal form and representatives, direct electronic contact, register details, supervisory authority, VAT ID or business ID (never the personal tax ID), and liquidation status.
• Detects regulated professions and special regimes automatically: doctors and other health professions, lawyers, notaries, tax advisors, auditors, architects and engineers, brokers and intermediaries under the GewO, experts, and associations or companies. For each it checks the professional title, chamber, professional rules, and professional liability insurance.
• Checks editorial content (§ 18 (2) MStV), the DL-InfoV, consumer dispute resolution under the VSBG, and, for marketplaces, the Digital Services Act.
• Removes outdated content: references to the TMG or RStV, and links to the EU online dispute resolution platform, which was shut down on 20 July 2025.
• Implements it cleanly: a dedicated /impressum route, a permanent footer link, reachable without JavaScript, login, or consent, and consistent across language versions.
• Never invents a fact. No made-up register numbers, VAT IDs, managing directors, chambers, or insurers, no disclaimer boilerplate, and no promise of being "safe from cease-and-desist letters". What's missing is asked for.

Example prompts

• "Create the imprint for this website."
• "Audit our imprint. Is anything missing or outdated?"
• "I'm a tax advisor. What has to go in my imprint?"
• "We have a blog with editorial content. Do we need a responsible person under the MStV?"

Both skills are working aids, not legal advice. They document open questions and point out where a case needs an individual legal review.

How the skills work together

The skills are independent. Install only the ones you need, or all of them.

When several are installed, cg-web-designer leads the project and hands the specialist work to the others: cg-web-animate supplies the motion craft, cg-web-seo the search foundation, cg-web-geo the AI search perspective on top of it, and cg-web-accessibility the WCAG remediation and the accessibility toolbar. For sites that already exist, cg-web-deslopifier takes generic, AI-looking design back to specific, intentional design, and cg-web-lighthouse-optimizer turns Lighthouse reports into performance fixes. cg-web-privacy and cg-web-imprint write the legal pages from what the site actually does and who actually runs it. You don't need to call them explicitly; Claude picks whichever fits the task.

---

Quick start

Requirements: Node.js 20 or later, and Claude Code (or another environment that supports Agent Skills).

1. Go to your project.

   cd my-website
   

2. See which skills are available.

   npx cg-web-skills@latest list
   

3. Install the skills. Install the complete skillset:

   npx cg-web-skills@latest install --all
   

   Or pick individual skills:

   npx cg-web-skills@latest install cg-web-designer
   npx cg-web-skills@latest install cg-web-designer cg-web-animate
   npx cg-web-skills@latest install cg-web-seo cg-web-geo cg-web-accessibility
   npx cg-web-skills@latest install cg-web-deslopifier cg-web-lighthouse-optimizer
   npx cg-web-skills@latest install cg-web-privacy cg-web-imprint
   

   The skills are copied to .claude/skills/ in your project. Commit that folder to share the skills with your team.

4. Start Claude Code in the project and describe what you want.

Prefer to have the skills in every project? Install them globally instead:

npx cg-web-skills@latest install --all --global

Using the skills in Claude

Automatically. Just describe your task. Claude matches it against each skill's description and loads the skill when it fits. Asking for a website, a redesign, a landing page review, a hover effect, a scroll animation, an SEO audit, AI search visibility, an accessibility fix, removing the "AI look" from a site, a Lighthouse report to fix, a privacy policy, or an imprint is enough.

Explicitly. In Claude Code, skills are also available as slash commands. Type /cg-web-designer, /cg-web-animate, /cg-web-seo, /cg-web-geo, /cg-web-accessibility, /cg-web-deslopifier, /cg-web-lighthouse-optimizer, /cg-web-privacy, or /cg-web-imprint to invoke one directly, or simply mention the skill by name in your prompt.

Checking that it works. Ask Claude "Which skills do you have available?" in the project. The installed CG Web Skills should be listed.

---

CLI reference

The CLI is a small, dependency-free Node.js tool. Its job is to copy skill folders into the right place, so Claude can find them, and to keep them up to date.

You can run it without installing anything:

npx cg-web-skills@latest <command>

Or install it globally and call it directly:

npm install --global cg-web-skills
cg-web-skills <command>

Commands

Command / option	Description
list	Lists every skill shipped in the package, with a short description.
install <skill...>	Copies each named skill from skills/<skill>/ into .claude/skills/<skill>/ in the current project. Creates .claude/skills/ if needed. If any name is unknown, nothing is installed.
install --all	Installs every skill in the skillset. Skills that are already installed are skipped, so you can re-run it after an update to add new skills.
update <skill...>	Replaces the named installed skills with the version in this package. Skills with local changes are left alone unless you add --force.
update --all	Updates every installed CG Web Skill. Skills that are not installed are left alone, but listed, so you can add them with install --all.
init	Creates .claude/skills/ in the current project without installing anything. Optional, and safe to re-run.
help	Shows help.
-a, --all	For install and update: every skill.
-f, --force	For update: also update skills with local changes. The current version is backed up first.
-g, --global	For install, update, and init: use your personal Claude directory instead of the project.
-v, --version	Shows the version.
-h, --help	Shows help.

Running cg-web-skills without a command (or with --help) shows the help. In a terminal at least 94 columns wide it opens with the CG Web Skills banner; in narrower terminals and when the output is piped, it prints a plain title instead.

Where skills are installed

Scope	Directory	Available in
Project (default)	<project>/.claude/skills/<skill>/	This project only. Can be committed and shared with your team.
Personal (--global)	~/.claude/skills/<skill>/	All your projects.

With --global, the personal Claude directory is $CLAUDE_CONFIG_DIR when that variable is set, otherwise ~/.claude.

What a session looks like

$ npx cg-web-skills@latest list
Available skills:

  cg-web-accessibility         Implementiert und remediatiert Website-Barrierefreiheit direkt im bestehenden Codebase. Erstellt ei…
  cg-web-animate               Expert skill for designing, implementing, reviewing, and optimizing premium web animations and moti…
  cg-web-designer              Lead web designer, UX strategist, content strategist, and frontend quality lead for professional we…
  cg-web-deslopifier           This skill should be used when the user asks to "remove AI slop", "deslopify a website", "make an A…
  cg-web-geo                   Vollumfänglicher Claude Skill für Generative Engine Optimization (GEO) von Websites. Analysiert und…
  cg-web-imprint               Prüft, erstellt und aktualisiert Impressum bzw. Anbieterkennzeichnung für deutschsprachige Websites…
  cg-web-lighthouse-optimizer  Analysiert Lighthouse-JSON-Ergebnisse für Mobile und Desktop, normalisiert versionsabhängige Audit-…
  cg-web-privacy               Prüft, erstellt und aktualisiert Datenschutzerklärungen und datenschutzrelevante Website-Implementi…
  cg-web-seo                   Vollumfänglicher SEO-Skill für professionelle Websites. Verwende ihn bei Website-Planung, Relaunche…

Install a skill with `cg-web-skills install <skill>`, or all of them with `--all`.

$ npx cg-web-skills@latest install --all
✔ Installed cg-web-accessibility to .claude/skills/cg-web-accessibility
✔ Installed cg-web-animate to .claude/skills/cg-web-animate
✔ Installed cg-web-designer to .claude/skills/cg-web-designer
✔ Installed cg-web-deslopifier to .claude/skills/cg-web-deslopifier
✔ Installed cg-web-geo to .claude/skills/cg-web-geo
✔ Installed cg-web-imprint to .claude/skills/cg-web-imprint
✔ Installed cg-web-lighthouse-optimizer to .claude/skills/cg-web-lighthouse-optimizer
✔ Installed cg-web-privacy to .claude/skills/cg-web-privacy
✔ Installed cg-web-seo to .claude/skills/cg-web-seo

$ npx cg-web-skills@latest install --all
- Skipped cg-web-accessibility: already installed at .claude/skills/cg-web-accessibility
- Skipped cg-web-animate: already installed at .claude/skills/cg-web-animate
- Skipped cg-web-designer: already installed at .claude/skills/cg-web-designer
- Skipped cg-web-deslopifier: already installed at .claude/skills/cg-web-deslopifier
- Skipped cg-web-geo: already installed at .claude/skills/cg-web-geo
- Skipped cg-web-imprint: already installed at .claude/skills/cg-web-imprint
- Skipped cg-web-lighthouse-optimizer: already installed at .claude/skills/cg-web-lighthouse-optimizer
- Skipped cg-web-privacy: already installed at .claude/skills/cg-web-privacy
- Skipped cg-web-seo: already installed at .claude/skills/cg-web-seo

$ npx cg-web-skills@latest update --all
✔ Updated cg-web-animate (1.1.0 → 1.2.0)
- cg-web-designer is already up to date

$ npx cg-web-skills@latest install cg-web-designer
✖ Skill "cg-web-designer" is already installed at .claude/skills/cg-web-designer

Remove the existing directory first if you want to reinstall it.

Safety

• The CLI only copies files. Skill contents are treated as data and are never executed or modified.
• install never overwrites an existing installation. update replaces a skill only when it has no local changes, or with --force after moving the current version to a backup. The new version is copied first and swapped in afterwards, so a failed update never leaves a half-copied skill.
• Skill names must be lowercase kebab-case. Anything else, including .., path separators, and absolute paths, is rejected, so a name can never write outside the skills directory.
• Skills containing symlinks or other special files are refused.

Exit codes

Code	Meaning
0	Success
1	General error (for example: skill not found, already installed)
2	Invalid usage (for example: unknown command or option, missing or invalid skill name)

---

Installing as a Claude Code plugin

The repository is also a Claude Code plugin (see .claude-plugin/plugin.json). Instead of copying individual skills, you can load all of them at once:

git clone https://github.com/CGWebDev2003/cg-web-skills.git
claude --plugin-dir ./cg-web-skills

Claude Code discovers every skill in the plugin's skills/ directory. New skills appear automatically after you pull the latest version.

Updating and removing skills

Update

Update every installed skill to the latest version:

npx cg-web-skills@latest update --all

Or update individual skills with npx cg-web-skills@latest update cg-web-designer. Use @latest, otherwise npx may run an older cached version of the CLI.

update protects your own edits:

• When you install a skill, the CLI records a fingerprint of it in .claude/cg-web-skills.json.
• On update, a skill that still matches its fingerprint is replaced with the new version.
• A skill you edited is not changed. The CLI tells you which skills have local changes and stops. Run the command again with --force to update them anyway; the edited version is moved to .claude/cg-web-skills-backups/ first, so you can copy your changes over.
• Skills installed before version 1.1.0, or copied by hand, have no fingerprint. If they differ from the new version, they need --force once, since the CLI cannot tell your edits from an older version.

You can commit .claude/cg-web-skills.json together with .claude/skills/. You probably want to add .claude/cg-web-skills-backups/ to your .gitignore.

Add new skills

npx cg-web-skills@latest install --all

Skills you already have are skipped; new ones are installed. update --all does not install new skills, but it lists the ones you don't have yet.

Remove

Delete .claude/skills/<skill>/ (or ~/.claude/skills/<skill>/ for a global install).

FAQ

Do I need the CLI? No. The CLI is a convenience. You can copy any folder from skills/ into .claude/skills/ yourself, or load the repository as a plugin.

Does installing a skill change my project? Only by adding a folder under .claude/skills/ and recording it in .claude/cg-web-skills.json. Nothing else is touched, and nothing is executed.

Can I customize a skill? Yes. After installing, the skill is a normal Markdown file in your project. Edit SKILL.md to match your team's conventions. update won't overwrite your edits without --force, and keeps a backup when you use it.

install says "Skill not found" for a skill that is listed here, or install --all skips the new skills. Why? npx is running an older, cached version of the CLI that predates those skills. npx cg-web-skills reuses whatever version it downloaded first, while npx cg-web-skills@latest always checks for the newest release. Run the command with @latest:

npx cg-web-skills@latest install --all

If you installed the CLI globally, update it with npm install --global cg-web-skills@latest. cg-web-skills --version shows which version you are running.

Will more skills be added? Yes. The skillset grows over time. New skills show up in cg-web-skills list and in the plugin automatically, and install --all picks them up.

---

For contributors

cg-web-skills/
├── .claude-plugin/plugin.json   Plugin manifest
├── skills/                      Skills registry (one folder per skill)
├── src/
│   ├── cli.js                   Entry point and argument parsing
│   ├── commands/                init, install, list, update
│   └── utils/                   logger, paths, skill files, lockfile, banner
└── tests/                       Node.js built-in test runner

• skills/ is the single registry, shared by the plugin, the CLI, and the npm package.
• The CLI discovers skills by scanning skills/, so adding a skill needs no code changes.
• Skill conventions (naming, SKILL.md format, optional references/, examples/, assets/) are documented in skills/README.md.

npm install
npm test
node src/cli.js --help
npm pack --dry-run   # Inspect the package as it would be published

Releasing

1. Bump the version in package.json, package-lock.json, and .claude-plugin/plugin.json (a test checks that they match).
2. Merge the change into main.
3. Publish a GitHub release whose tag is the version prefixed with v, for example v1.1.0.

The publish workflow then runs the tests and publishes the package to npm using trusted publishing, so no npm token is stored in the repository. npm publish also runs the tests locally before uploading.

CG Web Skills is an independent open-source project. It is not affiliated with Anthropic and is not listed in any official Claude marketplace.

License

MIT © Colin Grahm