Questions? hello@viberation.devGet supportBlogDocsChangelog

Colour mode

XGitHub
Get started

Frontend Design

Skills#design#frontend

Distinctive UI instead of templated defaults, from Anthropic.

Anthropic's guidance for intentional visual design when building a new interface or reshaping an existing one: aesthetic direction, typography, and choices that do not read as generic.

Install this skill

npx skills add https://github.com/anthropics/skills --skill frontend-design

Runs the open-source skills CLI in your own terminal. It asks which agents to add the skill to. Read what it tells your agent to do before you install it.

Download skill (.zip)

Install for your agent

  • Claude Code

    Run this in your project

    npx skills add https://github.com/anthropics/skills --skill frontend-design -a claude-code

    Add -g to install it for every project instead.

    Or ask Claude Code to do it

    Install the "frontend-design" skill from https://github.com/anthropics/skills for Claude Code.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .claude/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .claude/skills/ for this project, or ~/.claude/skills/ for all your projects.

    Picked up in the current session, no restart needed.

    Claude Code skills docs
  • Claude.ai

    Upload the ZIP

    1. In Settings > Capabilities, turn on Code execution and file creation.
    2. Go to Customize > Skills, press +, then Create skill.
    3. Choose Upload a skill and pick the ZIP you downloaded.

    Free, Pro and Max plans. On Team and Enterprise, an owner turns skills on in Organization settings first.

    Claude.ai skills docs
  • ChatGPT

    Upload the ZIP

    1. Open Skills in ChatGPT and select Create.
    2. Select Upload from your computer and pick the ZIP you downloaded.
    3. Wait for ChatGPT's safety scan. A skill marked Needs Review asks you to check it before use.

    Skills that rely on scripts or a terminal may not work unchanged in ChatGPT.

    ChatGPT skills docs
  • Codex

    Run this in your project

    npx skills add https://github.com/anthropics/skills --skill frontend-design -a codex

    Add -g to install it for every project instead.

    Or ask Codex to do it

    Install the "frontend-design" skill from https://github.com/anthropics/skills for Codex.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.agents/skills/ for all your projects.

    Restart Codex if the skill does not show up.

    Codex skills docs
  • Cursor

    Run this in your project

    npx skills add https://github.com/anthropics/skills --skill frontend-design -a cursor

    Add -g to install it for every project instead.

    Or ask Cursor to do it

    Install the "frontend-design" skill from https://github.com/anthropics/skills for Cursor.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .cursor/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .cursor/skills/ for this project, or ~/.cursor/skills/ for all your projects.

    Run it by typing / and the skill name in chat.

    Cursor skills docs
  • GitHub Copilot

    Run this in your project

    npx skills add https://github.com/anthropics/skills --skill frontend-design -a github-copilot

    Add -g to install it for every project instead.

    Or ask GitHub Copilot to do it

    Install the "frontend-design" skill from https://github.com/anthropics/skills for GitHub Copilot.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .github/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .github/skills/ for this project, or ~/.copilot/skills/ for all your projects.

    Works in Copilot CLI, the cloud agent and agent mode in VS Code and JetBrains.

    GitHub Copilot skills docs
  • Antigravity

    Run this in your project

    npx skills add https://github.com/anthropics/skills --skill frontend-design -a antigravity

    Add -g to install it for every project instead.

    Or ask Antigravity to do it

    Install the "frontend-design" skill from https://github.com/anthropics/skills for Antigravity.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.gemini/config/skills/ for all your projects.

    Antigravity skills docs
  • Gemini CLI

    Run this in your project

    npx skills add https://github.com/anthropics/skills --skill frontend-design -a gemini-cli

    Add -g to install it for every project instead.

    Or ask Gemini CLI to do it

    Install the "frontend-design" skill from https://github.com/anthropics/skills for Gemini CLI.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .gemini/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .gemini/skills/ for this project, or ~/.gemini/skills/ for all your projects.

    Run /skills to check it was found.

    Gemini CLI skills docs
Installs
883.8K via skills.sh
GitHub
176.2K stars ↗
Last updated
10 Sept 2026

Security checks

Run by independent scanners and published on skills.sh. Their results, not a Viberation review.

  • Gen Agent Trust Hub Pass

    This skill is a pure instruction-based prompt designed to guide the AI in generating high-quality frontend code. It contains no executable scripts, external dependencies, or network-enabled capabilities.

    17 Feb 2026

  • Socket Pass

    No alerts

    18 Mar 2026

  • Snyk Pass

    Risk: LOW · No issues

    17 Feb 2026

  • Runlayer Pass

    2 files scanned · No issues

    26 Feb 2026

  • ZeroLeaks Pass

    Score: 93/100 · 2 sections analyzed

    16 Apr 2026
What's inside (2 files)
  • LICENSE.txt10.2K chars
  • SKILL.md9.4K chars

SKILL.md, first part. Shown as plain text.

---
name: frontend-design
description: 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.
license: Complete terms in LICENSE.txt
---

# Frontend Design

Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's. This client has already rejected proposals that felt cliché or templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk if justified.

## Ground your designs in the subject matter

If the brief does not identify what the product or subject matter is, identify it yourself before designing, and confirm with the client. You can come up with one concrete subject, the design's audience, and the design's primary job, as a proposal. If there's any information in your memory about the client's preferences or context about what they're building, use that as a hint. The subject's industry, subject matter, materials, and vernacular are where distinctive visual choices come from — a design for a toy for girls aged 8–11 will be very aesthetically different from a dashboard for financial analysts. Build with the brief's real content and subject matter throughout.

## Design principles

For web designs, the hero is the first thing viewers will see. Open with the most characteristic thing in the subject's world, in the form that is most appropriate: a headline, an image, an animation, a live demo, an interactive moment, or other treatments. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the default treatment, so only use it if that's truly the best option.

Typography carries the personality of the page. You don't need a different typeface for display or headline text and body content: use one family or two, and if two, make them clearly distinct.

Choose your typefaces deliberately, not the default families you would reach for on any other project, and set a clear type scale following the default guidance of The Elements of Typographic Style with intentional weights, widths, and spacing. When type is used as a headline or visual element, use the type treatment itself as an active part of the design, not a neutral delivery vehicle for the content.

Default to line lengths of less than 80 characters. Serif typefaces can have slightly longer line lengths; give serif body text slightly more line-height than a sans-serif.

Avoid these default typographic treatments; they are the commonest tells of a generated page:
- Accenting just a single word or phrase in a headline, like putting one word in italic/bold or a different color.
- Using all caps for labels.
- Adding unnecessary typographic labels above content.

Visual structure is information. Structural devices like outlines, borders, numbering, eyebrows, dividers, labels, etc., encode useful information about the content rather than decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence — like a stepped process or a timeline. Before adding numbered markers, check the content really is a sequence.

Use non-user-triggered motion sparingly and deliberately, only to draw attention. A single orchestrated moment — one page-load sequence or one reveal — lands better than scattered effects; fade-and-slide-up entrances on each section and hover transitions on every card are the generic default and read as AI-generated. Motion that answers a person's action (opening, expanding, confirming) is welcome when it shows what changed.

Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy and placeholder content. Copy can

Key info

Pricing
Open source
Category
Skills

More in Skills