Set Up Claude Code Design Skills on Mac

Install Claude Code design skills and build a responsive landing page on Mac.

Introduction

30 Second Summary

Design advice often lives far away from the page you are making. Switching between guidance and browser previews slows every visual decision.

In this project, you will turn Claude Code into a design assistant with Anthropic frontend design skills, GreenSock GSAP skills, or both. You will connect it to Claude Pro before confirming the selected skills in a fresh session.

What You'll Build

After one adaptive prompt, you will open a responsive Nocturne landing page in your browser and see how the chosen skills shaped its visual direction.

By the end of this project, you'll have:

A working Claude Code session that launches from your dedicated test folder and connects to your Claude Pro account.
A verified design-skill setup with Anthropic frontend design guidance, GreenSock animation guidance, or both available to Claude.
A fresh-session skill report that names the exact installed skills and identifies the source of each one.
Secret Mission: Use one prompt to make the installed skills guide a distinctive, accessible Nocturne landing page in index.html.

Are there any prerequisites?

You need a Mac running macOS 13 or newer with at least 4 GB of RAM, internet access, and a payment method. Claude Pro costs $20 per month before applicable tax.

Before We Start

Before the hands-on work begins, choose the design-skill path that matches the pages you want Claude to improve. This decision keeps the installation focused on Anthropic frontend design skills, GreenSock GSAP skills, or both.

Set Up Claude Code and a Safe Test Folder

Your selected design-skill path needs a supported Mac before Claude Code can use it. Paid access also comes through Claude Pro.

This step turns your Mac into a supported Claude Code workspace. You finish inside a dedicated test folder with an authenticated session ready for skill installation.

In this step, get ready to:

Confirm that your Mac meets the macOS requirement.
Activate Claude Pro access.
Finish with an authenticated Claude Code session inside a dedicated test folder.

Check your Mac and activate access

Claude Code requires macOS 13 or newer. Checking this first prevents an unsupported installation.

Open the Apple menu in the top-left corner of your screen.
Select About This Mac.

You'll see the macOS name with its version number. Confirm that the major version is 13 or newer.

Is your macOS version below 13?

Stop here until your Mac is running macOS 13 or newer. An older version does not meet the Claude Code requirement.

Ask for help before changing your operating system if you are unsure about compatibility. Help me prepare my Mac for Claude Code.

Your Claude account supplies the paid access that Claude Code uses. You'll create that account through Safari.

Press Cmd+Space to open Spotlight.
Type Safari and press Return.
Enter https://claude.com/pricing in the Safari address bar.

Claude Pro Renews Monthly

This action starts recurring billing. Take a moment to confirm that the subscription fits your plans.

Claude Pro costs $20 per month before applicable tax. It renews until canceled.

The Free plan does not include Claude Code.

Follow the pricing page prompts to create your Claude account.
Select Claude Pro with monthly billing.
Complete the subscription checkout with your payment method.

Your Claude Pro access is now the account connection Claude Code needs for browser authentication.

Create and enter a dedicated workspace

A dedicated folder keeps the upcoming skill test separate from your other files. The active Terminal session also uses this folder as its working directory.

Press Cmd+Space to open Spotlight.
Type Finder and press Return.
Select Documents in the Finder sidebar.
Click File in the menu bar.
Choose New Folder.
Type claude-design-skill-test as the folder name.
Press Return to create the folder.

You'll see claude-design-skill-test inside your Documents folder.

Why Use a Dedicated Folder?

The folder gives Claude Code a clear boundary for the later page test. It also contains any project-local skills if you choose the optional installation route later.

Finder can hide the path bar, so finding this option may feel fiddly. The path bar gives you a direct way to open the correct folder in Terminal.

Click View in the Finder menu bar.
Choose Show Path Bar if the path bar is hidden.
Control-click claude-design-skill-test in the path bar.
Choose Open in Terminal.
Keep this Terminal window open for the installation.

You'll see a Terminal prompt whose location ends with claude-design-skill-test. Your safe test workspace is ready for Claude Code.

Install and authenticate Claude Code

The native installer adds Claude Code without requiring Node.js. Native installations also receive background updates.

Install Claude Code through the native Mac installer by running this command:

curl -fsSL https://claude.ai/install.sh | bash

What Does This Command Do?

The command downloads the official Claude Code installation script over HTTPS. The script installs the native command-line application on your Mac.

This installation method keeps Claude Code updated in the background.

Wait for the installer to finish.
Close the current Terminal window after the installer completes.
Return to the Finder window showing claude-design-skill-test.
Control-click claude-design-skill-test in the path bar.
Choose Open in Terminal to start a fresh shell in the same folder.

Before you check, what version information do you expect the new Terminal window to print?

Check the installed Claude Code version by running:

claude --version

What Should the Version Check Show?

The command prints a version number followed by (Claude Code). This project requires version 2.1.317 or newer.

✔️ I see the required version or newer

Claude Code is installed correctly. Your output shows version 2.1.317 or newer followed by (Claude Code).

ⓧ I see an older version

The installed build is below the project requirement. Reinstalling through the native installer retrieves the current release.

Install the latest native Claude Code release by running:

curl -fsSL https://claude.ai/install.sh | bash

What Does This Command Do?

The official native installer replaces the older build with the current Claude Code release.

Close Terminal after the installer finishes.
Return to the Finder window showing claude-design-skill-test.
Control-click claude-design-skill-test in the path bar.
Choose Open in Terminal.
Check the replacement version by running:

claude --version

What Should the New Check Show?

You should now see version 2.1.317 or newer followed by (Claude Code).

ⓧ Command not found

The new command is unavailable in this shell. Run the native installer again before starting a fresh Terminal window.

Install Claude Code again by running:

curl -fsSL https://claude.ai/install.sh | bash

What Does This Command Do?

The script installs the native Claude Code command on your Mac.

Close Terminal after the installer completes.
Return to the Finder window showing claude-design-skill-test.
Control-click claude-design-skill-test in the path bar.
Choose Open in Terminal.
Check that the command is available by running:

claude --version

What Should the Check Show?

You should see version 2.1.317 or newer followed by (Claude Code).

Still Unable to Run Claude Code?

A network interruption can prevent the installation script from finishing. Run the installer again after confirming that Safari can load a website.

If the installer completed successfully, use a newly opened Terminal window so the shell can find the installed command.

Tell me what happened during the installation.

The first Claude Code launch starts an interactive authentication flow. Safari opens so you can connect the Claude Pro account you created earlier.

The command takes over this Terminal window as an interactive Claude Code session. Keep the session running after authentication.

Before you launch Claude Code, which folder do you expect it to use as its working directory?

Launch Claude Code from the test folder by running:

claude

What Does This Command Do?

The claude command starts Claude Code in the current Terminal folder. On the first launch, it opens a browser login.

Successful authentication prints Login successful before the interactive prompt becomes available.

Complete the browser login with your Claude Pro account.
Return to Terminal after authentication finishes.
Confirm that Terminal reports Login successful.
Confirm that the Claude Code prompt uses claude-design-skill-test as its working directory.
Keep this Claude Code session open for the next step.

That's the setup complete. Claude Code is authenticated inside the isolated folder where you'll test your selected design skills.

Browser Login Did Not Complete?

Return to the Safari window that opened from Terminal. Complete the sign-in with the same Claude account that has the active Pro subscription.

If Terminal remains on the authentication flow, check that your internet connection is active before trying again.

Help me complete Claude Code authentication.

Your supported Claude Code workspace is running. Next, you'll check its plugin list to expose the missing design-skill gap.

Confirm the Design Skills Are Missing

Your authenticated Claude Code session is running inside Documents/claude-design-skill-test. You can already ask Claude Code for help from the folder that contains your eventual test page.

Anthropic frontend design guidance comes from one external plugin. GreenSock GSAP guidance comes from another.

This step records the current plugin baseline. A question inside a fresh session then makes the missing specialist guidance visible.

In this step, get ready to:

Check the installed plugin baseline.
Reopen Claude Code from the test folder.
Ask Claude Code to identify its available design skills.

Establish the plugin baseline

The shell can report every installed plugin without relying on the current Claude Code conversation. This gives you a clean baseline for the specialist guidance available on your Mac.

Close the current Claude Code session by entering this command:

/exit

What does this command do?

The slash command closes the interactive Claude Code session. It returns you to the shell in the same test folder.

Before you run the baseline check, do you think either requested plugin will appear?

Inspect the installed plugins by running this command:

claude plugin list

What does this command show?

The check prints a record for each installed plugin.
The Version line identifies the plugin release.
The Scope line identifies where the installation applies.
The Status line shows whether the plugin is enabled.

You should not see example-skills or gsap-skills in the output. This missing-plugin result is the intended obstacle.

Can't tell whether the plugins are missing?

Confirm that your normal shell prompt was visible before you entered the command.
Search the complete output for example-skills.
Search the complete output for gsap-skills.

Help me interpret my plugin list.

Make the missing skills visible

The plugin list shows what is installed on the Mac. A fresh Claude Code session shows what the assistant can actually discover for this project.

Start Claude Code again from the current test folder by running this command:

claude

What does this command do?

This starts a fresh interactive Claude Code session. Terminal is still in Documents/claude-design-skill-test.

The new session therefore uses the same folder as its working directory.

You should see the Claude Code prompt again. The session is ready for a direct skill-discovery check.

Before you ask, do you think Claude Code can name either requested external skill source?

Test skill discovery by pasting this question:

Which skills can you use for frontend design and GSAP animation in this session? List their exact names and the plugin that provides each one.

Why ask this question?

The question requires Claude Code to name each available skill. It also requires the plugin that provides each skill.

Those details make the response easy to compare with your shell baseline.

Claude Code's answer should show that frontend-design from example-skills is unavailable. It should also show that the requested GSAP skills from gsap-skills are unavailable.

Good work. You now have direct evidence that the specialist guidance is missing from the installation and the fresh session.

Did Claude Code give a vague answer?

Paste the confirmation question exactly as shown above.
Compare every claimed provider with example-skills.
Compare every claimed provider with gsap-skills.

Help me interpret the skill response.

Your baseline is clear. Next up, you'll install your chosen design-skill path so its specialist names can appear in Claude Code.

Install Your Design-Skill Path

The baseline proved that your Claude Code session works. Its plugin list also exposed the missing specialist guidance.

This step uses a plugin marketplace or project-local skills to close that gap. Your earlier choice determines whether you install Anthropic frontend guidance, GreenSock GSAP guidance, or both.

In this step, get ready to:

Install the design-skill path you selected earlier.
Keep each marketplace plugin at user scope.
Verify the installed plugin or project-local skills.

Install your selected skill path

User scope makes a marketplace plugin available in every project on your Mac. The optional GreenSock command stores its skills in the current Documents/claude-design-skill-test folder instead.

Complete only the tab that matches the installation path you selected earlier.

Anthropic frontend design

The Anthropic path installs the example collection that provides frontend-design.

Add Anthropic's skills repository as a marketplace by entering this slash command:

/plugin marketplace add anthropics/skills

What does this command do?

The command registers the anthropics/skills repository as a source that Claude Code can use.
Registering the marketplace makes its plugin collection available for installation.

Claude Code confirms that the marketplace was added.

Having trouble adding the marketplace?

Check that Terminal still has internet access. Confirm that you copied the repository name without extra spaces.

If the command still fails, help me troubleshoot the Anthropic marketplace command.

Install the example skill collection by entering this slash command:

/plugin install example-skills@anthropic-agent-skills

What does this command do?

The command selects example-skills@anthropic-agent-skills from the marketplace you just added.
That collection includes the frontend-design skill.

Review the installation details shown by Claude Code.
Choose Install for you (user scope).

Claude Code reports that example-skills is installed for your user account.

Plugin installation not completing?

Confirm that the Anthropic marketplace was added successfully before retrying the installation. Keep the plugin identifier exactly as shown in the command.

If the installation remains stuck, help me install the Anthropic example skills plugin.

GreenSock GSAP

Choose one GreenSock route before continuing. The marketplace route needs no additional system tool.

The optional npx route is useful when you want the skills contained inside Documents/claude-design-skill-test.

Marketplace route. Use this route unless you specifically want a project-local installation.

Add GreenSock's skills repository as a marketplace by entering this slash command:

/plugin marketplace add greensock/gsap-skills

What does this command do?

The command registers greensock/gsap-skills as a plugin marketplace.
The marketplace provides the gsap-skills plugin.

Claude Code confirms that the GreenSock marketplace was added.

GreenSock marketplace not appearing?

Check your internet connection. Retry the command with the repository name copied exactly.

If the marketplace remains unavailable, help me add the GreenSock marketplace.

Open the plugin browser by entering this slash command:

/plugin

What does this command do?

The command opens Claude Code's plugin browser on the Discover tab.
The browser lets you search the marketplaces you have added.

Search for gsap-skills.
Open the gsap-skills details.
Choose Install for you (user scope).

Claude Code reports that gsap-skills is installed for your user account.

Can't find gsap-skills?

Confirm that the GreenSock marketplace add command completed before opening the plugin browser. Search for the plugin name without spaces.

If the search still returns no result, help me find the GreenSock plugin.

Optional npx route. Skip this route if you installed the user-scope marketplace plugin above.

Return to the shell by entering this slash command:

/exit

What does this command do?

The command closes the interactive Claude Code session.
Terminal remains in the current test folder for the project-local installation.

Check the installed Node.js version and confirm that npm is available by running:

node --version
npm --version

What do these commands check?

The first command prints your installed Node.js version.
The second command confirms that the included npm command is available.
The skills CLI requires Node.js 22.20 or later.

✔️ I see Node.js 22.20 or later and npm

Your Node.js installation meets the skills CLI requirement. Continue with the project-local installation below.

ⓧ I see an older Node.js version

Your installed version is below the skills CLI requirement. The current LTS release is v26.13.0 LTS.

Open the official Node.js download page in Safari.
Download the current LTS installer for macOS.
Complete the macOS installation prompts.
Return to the Terminal window in Documents/claude-design-skill-test.
Repeat both version checks from above.

Continue once Node.js reports 22.20 or later and npm prints its version.

ⓧ Command not found

Node.js is not installed yet. The official platform installer includes npm.

Open the official Node.js download page in Safari.
Download the current LTS installer for macOS.
Complete the macOS installation prompts.
Return to the Terminal window in Documents/claude-design-skill-test.
Repeat both version checks from above.

Continue once Node.js reports 22.20 or later and npm prints its version.

Install the GreenSock skills in the current test folder by running:

npx skills add https://github.com/greensock/gsap-skills

What does this command do?

The command uses the skills CLI to read the GreenSock repository.
The default scope stores the selected skills in the current project.
The project-local location keeps this optional route contained inside the test folder.

The first run can take a minute or two while npx prepares the skills CLI.

Select Claude Code when the installer asks which agent should receive the skills.
Select the offered GSAP skills for this project.
Confirm the installation when prompted.

The installer reports that the selected GreenSock skills were added to the current project.

Project-local installation failing?

Confirm that Node.js meets the minimum version. Check that Terminal is still using the dedicated test folder.

If the installer cannot read the repository, help me troubleshoot the GreenSock npx installation.

Start Claude Code again from the same test folder by running:

claude

What does this command do?

The command starts Claude Code with the current test folder as its working directory.
That location gives the session access to the project-local GSAP skills.

Both skill sets

The combined path installs both collections through their marketplaces. Each plugin uses user scope.

Add Anthropic's marketplace and select its example collection by entering these slash commands:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

What do these commands do?

The first command registers Anthropic's skills repository.
The second command selects the example collection that provides frontend-design.

Review the Anthropic plugin details shown by Claude Code.
Choose Install for you (user scope).

Claude Code reports that example-skills is installed for your user account.

Anthropic plugin not installing?

Confirm that the marketplace add command completed before retrying the plugin command. Keep the plugin identifier unchanged.

If the installation still fails, help me install the Anthropic half of the combined path.

Add GreenSock's marketplace by entering this slash command:

/plugin marketplace add greensock/gsap-skills

What does this command do?

The command registers GreenSock's repository as another plugin marketplace.
This marketplace provides the gsap-skills plugin.

Claude Code confirms that the GreenSock marketplace was added.

Open the plugin browser by entering this slash command:

/plugin

What does this command do?

The command opens the plugin browser.
The Discover tab searches every marketplace you have added.

Search for gsap-skills.
Open the gsap-skills details.
Choose Install for you (user scope).

Claude Code reports that gsap-skills is installed beside example-skills.

Combined path incomplete?

Check each marketplace separately. Confirm that both plugin installations use user scope.

If one plugin is missing, help me complete the combined skill path.

Verify your selected installation

Before you check, which exact plugin or skill names do you expect your selected path to show?

Select the verification tab that matches the route you completed.

Anthropic frontend design

Open the plugin browser by entering this slash command:

/plugin

What does this command check?

The plugin browser separates available plugins from installed plugins.
The Installed tab confirms the plugin name and its user scope.

Select the Installed tab.

You'll see example-skills listed as an installed plugin. This collection provides frontend-design.

GreenSock GSAP

Marketplace installation. Use this check if you installed the user-scope plugin.

Open the plugin browser by entering this slash command:

/plugin

What does this command check?

The plugin browser shows which marketplace plugins are installed.
The installed entry also confirms that the GreenSock collection uses user scope.

Select the Installed tab.

You'll see gsap-skills listed as an installed plugin.

Project-local npx installation. Use this check if you skipped the marketplace route.

Inspect the project-local skills by entering this slash command:

/skills

What does this command check?

The command lists every skill available in the current Claude Code session.
Project-local skills appear because the session is running from the test folder.

You'll see GreenSock names such as gsap-core, gsap-timeline, and gsap-performance.

Both skill sets

Open the plugin browser by entering this slash command:

/plugin

What does this command check?

The plugin browser shows both marketplace installations in one place.
The Installed tab confirms their shared user scope.

Select the Installed tab.

You'll see both example-skills and gsap-skills listed as installed plugins.

Selected names still missing?

Return to the installation tab that matches your path. Confirm that every marketplace add or project-local install completed successfully.

If the expected entry is still absent, help me verify my selected design-skill installation.

That's the specialist layer installed: Claude Code now has the design guidance you selected. Next, you'll restart the session so those skills load from a clean starting point.

Restart Claude Code and Confirm the Skills

Your chosen design path is installed. Claude Code loads installed plugins when a fresh session starts.

This step proves that the new session can discover your selected skills. You will also confirm the source behind each skill.

In this step, get ready to:

Restart Claude Code from the same test folder.
Inspect the skills loaded into the fresh session.
Ask Claude to name each available skill with its source.

Restart from the same folder

A clean restart gives Claude Code a new opportunity to load the path you installed. Keeping the same folder also preserves access to project-local GSAP skills.

Exit the current Claude Code session by entering:

/exit

What does this command do?

The /exit command closes the interactive Claude Code session. It returns you to the shell without changing the current folder.

You should see the shell prompt again inside the claude-design-skill-test folder.

The next check depends on how you installed your selected skills.

Marketplace plugin

Check the installed marketplace plugin metadata by running:

claude plugin list

What does this command show?

This command lists the marketplace plugins installed for Claude Code. Each entry includes Version, Scope, plus Status details.

You should see example-skills, gsap-skills, or both names according to your selected path. The output confirms the scope plus current status for each selected plugin.

Missing the selected plugin?

Check that you chose Install for you (user scope) in the plugin details.
Confirm that the listed plugin matches the path you selected earlier.

If the name still does not appear, help me find my installed Claude Code plugin.

Project-local npx skills

The npx route installs skills into the current project by default. The fresh session checks those skills from the same test folder.

Keep Terminal inside the claude-design-skill-test folder.

Start a fresh Claude Code session by running:

claude

Why restart now?

Claude Code loads plugins when it starts. Launching it from the test folder also makes the project-local skills available to this session.

You should see a fresh Claude Code prompt with the claude-design-skill-test folder as the working directory.

Does the fresh session fail to start?

Confirm that Terminal still shows the claude-design-skill-test folder before launching Claude Code.
Check that the shell returned after you exited the previous session.

If the prompt does not open, help me restart Claude Code from my test folder.

Inspect the loaded skill list

The /skills list shows which skills the current session can use. This check proves that the restart loaded your selected path.

Display the skills available in the fresh session by entering:

/skills

What does this command show?

The /skills command lists skills available in the current Claude Code session. The names shown here are the capabilities Claude can discover for the next task.

Anthropic path

You should see frontend-design in the available skill list. This confirms that the Anthropic example plugin loaded into the fresh session.

GreenSock path

You should see GSAP skills such as gsap-core, gsap-timeline, plus gsap-performance. This confirms that the marketplace or project-local GreenSock path loaded.

Combined path

You should see frontend-design alongside skills such as gsap-core plus gsap-timeline. This confirms that both skill groups loaded into the same session.

Missing your selected skills?

Confirm that this session started after the installation finished.
Confirm that project-local skill users launched Claude Code from the claude-design-skill-test folder.
Compare the visible skill names with the installation path you selected.

If the expected names remain absent, help me load my installed design skills.

Ask the availability question

The skill list proves that discovery worked. Claude's answer now confirms the exact names plus the source behind them.

Before you ask, which skill names and source do you expect Claude to report for your selected path? Keep your prediction in mind.

Send the required availability question in the fresh Claude Code session:

Which skills are available in this session for frontend design and GSAP animation? List the exact skill names and the plugin or project source that provides each one.

Why ask this question?

This prompt checks more than whether a skill name appears. It asks Claude to connect each capability to the marketplace plugin or project source that provides it.

Anthropic path

Claude should name frontend-design and identify example-skills as its plugin source.

GreenSock path

Claude should name applicable skills such as gsap-core plus gsap-timeline. A marketplace installation should identify gsap-skills as the plugin source. An npx installation should identify the project-local source in claude-design-skill-test.

Combined path

Claude should name frontend-design from example-skills. It should also name applicable GSAP skills from gsap-skills.

Did Claude give a vague answer?

Send the same required question again if Claude gives categories without exact skill names.
Compare the reported sources with the installation path you selected.

If the answer still misses an available skill, help me verify Claude's skill-source answer.

That is the confirmation complete. Your fresh Claude Code session can now discover the exact design skills you installed plus the source behind each one.

Secret mission

Test the Skills on One Page

Your installed skills have passed the discovery check. This challenge uses one adaptive prompt to turn that proof into a distinctive Nocturne landing page that opens in your browser.

Clean Up Your Resources

Choose whether to keep your setup, pause its skill loading, or delete its teardownable resources. The setup's sole ongoing cost is Claude Pro at $20 per month before applicable tax until canceled.

Cost warning

Claude Pro renews each month until you cancel the subscription.

Pausing plugin loading does not affect billing.

Cancellation can feel final, but your access continues until the current billing period ends.

The Delete option is the path that prevents another renewal.

Resources you used:

An active Claude Pro monthly subscription.
A Claude Code session running from Documents/claude-design-skill-test.
The user-scope example-skills plugin, the user-scope gsap-skills plugin, or both.
Project-local GSAP skills inside Documents/claude-design-skill-test if you used the optional npx route.
The local Documents/claude-design-skill-test folder containing index.html.

Keep everything running

No action needed. Choose this if you plan to keep using the Nocturne test page or its design skills soon.

Keep your Claude Pro subscription active for continued Claude Code access.
Leave your selected user-scope plugins enabled for future projects.
Keep Documents/claude-design-skill-test to retain index.html plus any project-local GSAP skills.
Continue using the open Claude Code session from the test folder.

Pause - I'll come back to this later

Pause the setup by closing the current Claude Code session. Your files stay on the Mac while Claude Pro billing continues.

How pausing works

Marketplace plugins load when Claude Code starts. Disabling your selected plugins prevents them from loading in a future session.

Project-local GSAP skills remain inside the test folder. Closing Claude Code pauses their use without deleting them.

Switch back to the Claude Code session from earlier.
Enter /plugin if you installed a marketplace plugin.
Select the Installed tab in the plugin browser.
Open the details for each selected marketplace plugin.
Use the disable control in each details view.
Enter /exit to close the Claude Code session.

Claude Code is now closed. Your Nocturne page remains available inside the test folder.

Delete - I don't want to use this again

Deletion is permanent, so the Nocturne page disappears when its folder is removed. The native Claude Code installation stays on your Mac after these cleanup actions.

Switch back to the Claude Code session from earlier.
Enter /plugin if you installed a marketplace plugin.
Select the Installed tab in the plugin browser.
Uninstall example-skills from its details if it appears.
Uninstall gsap-skills from its details if it appears.
Enter /exit to close the Claude Code session.

Any selected user-scope plugins are now removed. Project-local GSAP skills remain until you delete the test folder.

Return to Finder from earlier.
Select Documents in the Finder sidebar.
Select the claude-design-skill-test folder.
Delete the selected folder with Finder's folder removal action.
Permanently clear the deleted folder from your Mac.
Return to Documents in Finder.
Confirm that claude-design-skill-test no longer appears.

That local cleanup is complete. The generated Nocturne page plus any project-local skills have been removed from your Mac.

Canceling the subscription stops future renewals while preserving access through the current billing period.

Return to your Claude account in Safari.
Open Settings.
Select Billing.
Choose Cancel.
Confirm the cancellation.

Your Claude Pro access continues until the billing period ends. The recurring monthly charge is now closed out.

Nice Work!

You did it! You turned a blank Mac setup into a working Claude Code design assistant. Your skill-guided Nocturne landing page is open in the browser as proof.

You've learned how to:

Install Claude Code on macOS through its native installer. Authenticate it with Claude Pro. Keep Node.js optional.
Expose the missing specialist guidance with a plugin baseline. Install your selected Anthropic frontend design skills or GreenSock GSAP skills. Complete both installations for the combined path.
Restart Claude Code so installed plugins load in a fresh session. Use /skills to verify every selected skill. Match each skill to its plugin or project source.
Secret Mission: Create a self-contained Nocturne landing page in index.html with one adaptive prompt. Shape its night-train visual direction with the installed design skills. Make the page responsive. Make it keyboard accessible. Honor reduced-motion preferences. Open the finished result in the default browser.

Ready to quiz yourself?