About this skill
Frontend Design guides an agent through creating or reshaping web interfaces with visual choices that fit the specific brief, rather than relying on familiar defaults. It addresses the aesthetic direction, including palette, typography, layout, interface copy, and motion. Reach for it when an interface needs a considered point of view. The process starts by grounding the design in its subject, audience, and purpose, then planning, reviewing, building, and critiquing the result.
What it does
- Identifies the subject, audience, and primary job from the brief; if the subject is missing, proposes one and confirms it with the client.
- Creates a compact design plan with named color values, typefaces and roles, layout concepts, alignment guidance, and design principles.
- Reviews the plan against the brief, revising choices that seem generic before starting to code.
- Builds the interface to the revised plan and takes care to avoid conflicting CSS selector specificities.
- Critiques the work as it builds, using screenshots when the environment supports them.
- Guides responsive behavior, visible keyboard focus, reduced motion, visual accessibility, and restrained motion.
- Shapes interface copy around users’ needs, with plain language, consistent action names, clear errors, and useful empty states.
Who it's for
- Developers creating new web interfaces or reshaping existing ones.
- Teams using coding agents for frontend work.
- People who want a visual direction grounded in the interface’s subject matter and purpose.
How to use it
Use it when asked to design or build a new web interface, or reshape an existing one. The agent first proposes and reviews a compact design plan, then builds to that plan and critiques the result.
Design and build a landing page for our community pottery studio. Propose a visual plan grounded in the studio’s audience and purpose, review it for generic choices, then implement and critique the page.
Good to know before you use it
- If the brief does not identify the subject, audience, and primary job, the agent proposes them and confirms with the client before designing.
- It is a design process guide, not a dedicated UI component library.
- Screenshot-based critique depends on whether the environment supports screenshots.
Before you installA skill's instructions steer your AI agent, so a few minutes of checking is worth it.
Security checklistSix checks before you add a skill to your agent
Skills are not only code. A harmful skill can be written in plain sentences that a code scanner does not flag. Research on public skill registries has found skills with malicious instructions and scripts.
- Read the skill itself. A skill is a folder with a SKILL.md file and sometimes scripts. The SKILL.md is not just documentation: it is text your AI agent follows. Read it, and read every script, before you install. Be wary of instructions that do not fit the stated task, such as reading keys or .env files, sending data elsewhere, or fetching code from the internet while it runs.
- Look for scripts. A skill that only contains text is far less risky than one that runs scripts on your computer. Check which files the folder contains and what each script does.
- Check the source. Make sure the repository belongs to the author or vendor you expect, and beware of lookalike names. Install the exact version (commit) you reviewed, and read changes before you upgrade.
- Use the least access that works. Run a new skill in a test project or sandbox first, without your production credentials, and keep your agent’s confirmation prompts switched on for actions that write, delete, send or spend.
- Have it scanned. Several tools check skills for known risks before you install: the security audits shown on each skill’s page on skills.sh (from partners such as Snyk and Socket), Snyk’s Skill Inspector, and the open-source Cisco Skill Scanner. Use them as one layer, not as proof.
- Ask an AI model to review it, with care. Asking an LLM to read the skill and report anything suspicious before you install it is a useful extra check, and it is what many people do. It is not a guarantee: the reviewer reads text that may have been written to manipulate it, so give it the skill as data to analyse, never let it run anything, and combine it with a scanner and your own reading. A pass is not proof that a skill is safe.
Scanners to try: skills.sh audits, Snyk Skill Inspector and Cisco Skill Scanner (open source).
Who published this skill?Pinned source: anthropics/skills
The pinned source is the GitHub repository anthropics/skills. Check that this is the author or company you expect.
- Published by the vendor
- Written and maintained by the company or project behind the service the skill works with. It is usually kept in step with that service, but this describes who maintains it, not that it has been audited by us.
- Community skill
- Written and maintained by an independent developer or group, not by the company behind the service it works with. It can be excellent and widely used, but the company has not reviewed it and updates depend on its author, who can stop at any time.
How installing a skill works
A skill is a folder. Your agent finds it in a skills folder: for example, Claude Code reads skills from a skills folder in your project or in your home folder, and other agents have their own location, so check your agent's documentation for the exact place.
In general you either copy the skill folder from its source (at the commit pinned on this page) into that folder, or use your agent's own command for adding skills. After installing, ask your agent to list its skills to confirm it was picked up.
We do not show a ready-made install command for each skill: a command that is copied wrongly or changed is a way to install something else, so take it only from the source itself, after you have read the checklist above.
This page is general information, not security or legal advice, and listing a skill is not an endorsement or a security review. We do not create, host, install or run skills, and listing details can be out of date, so check the source. You use skills at your own risk. See the section on third-party products in our Terms of Service.