elayadesign/ai-design-skills installation guide

Install `ai-design-skills` for Claude Code on macOS Tahoe (Apple silicon)

What this repository is

`elayadesign/ai-design-skills` is a public MIT-licensed collection of Markdown-based design skills for AI coding tools. At the supplied revision, it contains one listed skill: `landing-page-design`.

For Claude Code, the repository’s documented installation method copies a skill folder into the current project’s `.claude/skills` directory. Claude Code can then consult the skill’s `SKILL.md` instructions while helping with landing pages, marketing sites, web interfaces, sections, components, prototypes, copy, and design reviews.

Classification

• **Mechanism:** context injection
• **Install mode:** Claude extension
• **Setup effort:** low
• **Confidence:** high

This classification is supported by the repository structure and README: the extension is a self-contained folder containing a Markdown rules file, installed under `.claude/skills`. It does not document an MCP server, hook, proxy, background service, package, compiled binary, or standalone application.

What will be installed

The documented process does two things:

1. Clones the complete public repository into `/tmp/ai-design-skills`.
2. Copies the `landing-page-design` folder into `.claude/skills/` inside your current project.

The resulting project-local skill is expected at:

`.claude/skills/landing-page-design/SKILL.md`

Because this is a Markdown skill rather than native executable software, the supplied files specify no separate Apple silicon build, Rosetta requirement, package manager, runtime, or macOS Tahoe-specific dependency. The same repository instructions therefore apply on an Apple silicon Mac. This does not install the skill globally for every project; it installs it in the project from which you run the commands.

Before you begin

You need:

• A project in which you want Claude Code to use the skill.
• Claude Code available for that project.
• Terminal access.
• `git`, because the repository’s documented installation command uses `git clone`.
• Internet access to clone the public GitHub repository.

The supplied repository files do not document how to install Claude Code or Git, do not state minimum versions, and do not provide commands for checking them. To keep this guide source-grounded, those installation and diagnostic commands are not added here.

You do not need to choose among several bundled skills for this walkthrough. The only skill listed in the supplied README is `landing-page-design`, so that is the documented `<skill-name>` used below.

Step 1: Open your project

In Finder, locate the project where you want the skill installed. Open Terminal and make that project’s top-level folder your current working location using your normal method.

This location matters. The first installation command creates `.claude/skills` relative to the current directory. If Terminal is in the wrong folder, the skill will be copied into the wrong project.

A project’s top-level folder is usually the folder containing its main source files and project configuration. The repository does not provide a command for navigating to your project, because every user’s path is different. For that reason, no invented `cd` command is supplied here.

Step 2: Create the Claude Code skills directory

Once Terminal is positioned at the top level of the intended project, copy and paste:

mkdir -p .claude/skills

This creates the project-local directory used by the repository’s Claude Code installation method. The `-p` option allows the nested path to be created and does not complain if the directory already exists.

Step 3: Clone the repository to the temporary location

Copy and paste the repository’s documented clone command:

git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills

This downloads the public repository over HTTPS and places it at `/tmp/ai-design-skills`. No GitHub SSH key is needed for the supplied HTTPS URL.

Wait for the command to finish before continuing. The source documentation does not state an expected line-by-line Terminal response, so this guide does not invent one.

Important: the documented destination is a fixed path. If `/tmp/ai-design-skills` already exists, `git clone` may not be able to clone into it. The supplied files do not provide a cleanup, overwrite, retry, or update command. Do not substitute an undocumented destructive command from this guide; resolve the existing temporary folder deliberately and then rerun the documented clone command if appropriate.

Step 4: Copy the landing-page skill into your project

The README shows `<skill-name>` as a placeholder and tells you to replace it with a skill folder name. For the listed `landing-page-design` skill, copy and paste:

cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/

This recursively copies the self-contained skill folder into the `.claude/skills` directory created in Step 2. It does not copy an executable into a system directory and does not request administrator privileges.

The three installation commands, in their required order, are therefore:

mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/

Run them from the intended project’s top-level folder. Do not literally use `<skill-name>`: that notation is only the README’s placeholder.

Step 5: Use the skill in Claude Code

The repository says that after installation you can ask, in plain language, for work covered by the skill. Open or continue Claude Code in the same project and describe the landing-page task you want completed.

The skill covers a broad workflow. It can guide Claude Code through intake questions, page structure, layout selection, conversion copy, SEO and answer-engine considerations, typography, spacing, corner radii, backgrounds, hero layout, icons, motion, interaction states, accessibility details, metadata, and shipping checks.

A suitable plain-language request could ask Claude Code to build, edit, style, review, or write copy for a landing page. This is not a Terminal command; enter your request into Claude Code as a normal prompt.

When generating a landing page from scratch, the skill directs the assistant to return these items before writing code:

1. Page outline
2. Hero copy
3. Benefits
4. Three-step explanation
5. FAQ
6. SEO/AEO recommendation
7. Layout recommendation

It then directs the build to proceed section by section rather than repeatedly rebuilding the entire page.

Confirming the installation

The source files do not provide a dedicated verification command, test suite, version command, or expected success message. A safe visual check is to use Finder to reveal hidden files in your project and confirm that the following nested location exists:

`.claude/skills/landing-page-design/SKILL.md`

Functional confirmation comes from asking Claude Code in that project for a task within the skill’s scope. The repository states that plain-language requests are sufficient after installation.

The installed skill should influence guidance rather than launch a separate program. There is no documented server to start, port to open, account to create, environment variable to set, or configuration file to edit.

Scope and important limitations

This repository supplies design instructions, not a guarantee that generated pages are factually accurate, legally compliant, accessible in every circumstance, or ready to publish without review. The skill itself calls for legal links, consent where required, image alt text, semantic HTML, keyboard access, visible focus states, validation, metadata, and a branded 404, but you should still inspect the resulting implementation.

Its design rules are intentionally opinionated. Among other constraints, the skill specifies approved fonts and icon families, a fixed spacing table, Tailwind type-scale values, flat backgrounds, particular dark-mode colors, custom motion easing, and content-realism rules. It also requires a tagline reveal section for landing pages. Your explicit prompt takes precedence when it conflicts with a skill rule, according to the skill file.

The companion repository mentioned for upgrading an existing site is separate and is not installed by the commands in this guide.

Updating, removing, and troubleshooting

The supplied first-party files document installation only. They do not provide supported commands for updating the temporary clone, refreshing an installed skill, uninstalling it, cleaning `/tmp`, or repairing a partial copy. Consequently, this guide does not invent commands for those operations.

If a documented command fails:

• Confirm Terminal is operating in the intended project before creating or copying `.claude/skills`.
• Read the exact Terminal error rather than continuing blindly.
• Remember that the clone command depends on Git and network access.
• Remember that the fixed `/tmp/ai-design-skills` destination may already exist.
• Do not use `sudo`; none of the repository’s installation commands requires or documents it.
• Consult the public repository’s README or issue tracker for guidance not present in the supplied files.

Installation is complete once the `landing-page-design` folder has been copied into the intended project’s `.claude/skills` directory. You can then use Claude Code normally and request landing-page or related web-design work in plain language.