frontend-design

An agent skill by anthropics, from anthropics/skills. Tags: anthropic, design, developer-tools, visual-art, web.

What it does

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add anthropics/skills --skill frontend-design

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/anthropics/skills
cp -r skills/skills/frontend-design ~/.claude/skills/frontend-design

Safety box score

Grade A, minimal risk: 4 of 100 risk points, rated 2026-10-14. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill is a prompt-only frontend design guide: it ships no executables, installers, or networked components. The main practical effect is to steer an agent toward making substantial UI/code changes in the working tree, but it does not itself request secrets, privileges, or external actions.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	0 (none)	`SKILL.md` is only design guidance; there are no shell commands, scripts, or code-evaluation steps to run.
Network access	0 (none)	The files contain no download, upload, API, or remote-host instructions; the only nonlocal text is the Apache license notice.
Filesystem reach	1 (low)	The skill expects the agent to “start to write the code” and “build” the design, so it can drive edits to frontend source files, but it never names paths outside the project tree.
Secrets & credentials	0 (none)	There is no request to read, paste, store, or transmit tokens, passwords, `.env` files, keychains, or browser sessions.
Privilege & persistence	0 (none)	No `sudo`, global install, service registration, shell-profile editing, or OS-setting changes appear in the shipped files.
Instruction hijack surface	0 (none)	The text gives ordinary design-process guidance; it does not tell the agent to ignore instructions, skip confirmations, hide actions, or follow remote prompt content.
Irreversible actions	0 (none)	It does not publish, deploy, message, pay, book, delete, or force-push; it is limited to design direction.
Transparency	0 (none)	Everything shipped is readable markdown plus a plain Apache 2.0 license; there are no binaries, minified blobs, or runtime-decoded content.

Before installing

Read `SKILL.md`; it is prompt guidance only and ships no scripts or binaries.
Use a scratch branch or test repo if you do not want the agent rewriting frontend source files.
Be aware the skill may invent design content and copy when the brief is underspecified.

Rated 2026-10-14 by an automated review of 2 files from the skill's repository.

Source

Repository: anthropics/skills (all skills from this repository)
Path: skills/frontend-design/SKILL.md
Branch: main
Updated: 2026-09-19

algorithmic-art — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code.
web-artifacts-builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS.
archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
brand-guidelines — Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.
canvas-design — Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art.
slack-gif-creator — Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts.