Frontend Design Claude Skill

Official (Anthropic) Official documentation ↗

Offers guidance on deliberate visual design, typography and aesthetic decisions for new or revised interfaces.

Published by anthropicsanthropics/skills/frontend-design

.install .install-tabs{display:none}.install .install-panel[hidden]{display:block}@media (max-width:767px){.install .install-panel[hidden]{display:flex}}.install .install-panel+.install-panel{border-top:1px solid var(--line)}.install .install-panel-label{display:block}.install .install-all{display:none}

Install

Pick your client, then copy the command.

Claude Code

Personal skills in ~/.claude/skills (use .claude/skills for one project)

git clone 'https://github.com/anthropics/skills.git'
cd skills && git checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p ~/.claude/skills && cp -R skills/frontend-design ~/.claude/skills/frontend-design

Codex

No Codex snippet verified for this entry yet

Compatibility is not confirmed, so there is no copy-ready command. Start from the pinned checkout and follow the source docs for where the folder goes.

Pinned checkout (same for every client)

git clone 'https://github.com/anthropics/skills.git'
cd skills && git checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44

Read pinned setup documentation Codex skills documentation

Cursor

No Cursor snippet verified for this entry yet

Compatibility is not confirmed, so there is no copy-ready command. Start from the pinned checkout and follow the source docs for where the folder goes.

Pinned checkout (same for every client)

git clone 'https://github.com/anthropics/skills.git'
cd skills && git checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44

Read pinned setup documentation

Git

Check out the pinned revision

git clone 'https://github.com/anthropics/skills.git'
cd skills && git checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44

Any agent

Paste into your agent chat

Read the source at https://github.com/anthropics/skills/blob/dbd4588f9e1033efb41dad4bef2f7947c8993d44/skills/frontend-design/SKILL.md (pinned revision dbd4588f9e10). Explain what it does and which tools, credentials and network access it needs. Do not install or run anything until I confirm.

How to install Claude Code skills: compare folder, plugin and CLI methods

All client instructions (works without JavaScript)

Claude Code

Personal skills in ~/.claude/skills (use .claude/skills for one project)

git clone 'https://github.com/anthropics/skills.git'
cd skills && git checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p ~/.claude/skills && cp -R skills/frontend-design ~/.claude/skills/frontend-design

Codex

No dedicated setup snippet verified for this client. Review the shared setup and pinned source below; compatibility is not confirmed.

Read pinned source

Cursor

No dedicated setup snippet verified for this client. Review the shared setup and pinned source below; compatibility is not confirmed.

Read pinned source

Git

Check out the pinned revision

git clone 'https://github.com/anthropics/skills.git'
cd skills && git checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44

Any agent

Paste into your agent chat

Read the source at https://github.com/anthropics/skills/blob/dbd4588f9e1033efb41dad4bef2f7947c8993d44/skills/frontend-design/SKILL.md (pinned revision dbd4588f9e10). Explain what it does and which tools, credentials and network access it needs. Do not install or run anything until I confirm.

Listed ≠ audited. Snippets follow the pinned source docs; review the source and any scripts before running them. Nothing is installed from this page.

Source record

Repository: anthropics/skills
Source file: skills/frontend-design/SKILL.md
Pinned revision: dbd4588
Upstream commit: 9 Oct 2026
Last checked: 17 Oct 2026
License: Apache-2.0
Cited in guides: 1

No review scores. No automatic installs. Not affiliated with the publisher.

What you are opening

A public SKILL.md with instructions for an agent. Open the pinned source to inspect its complete scope, dependencies and permissions.

How to set it up

Open the pinned SKILL.md and read its instructions and any bundled scripts.
Copy the skill folder into your client’s skills directory with the snippet in the install card.
Start a new session and ask for the task the skill describes.

Before you add it

Read the instructions and review any scripts before running them.
Check tool access, required credentials and third-party network requests.
The source license and any resource-specific terms take precedence.

What you are opening

How to set it up

Before you add it

More from anthropics/skills

Other Claude skills