New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Design

by BuilderIO in BuilderIO/agent-native

Sets the visual direction for UI work, avoiding generic AI aesthetics.

No licenceAuto-check passedFrontend & Design

Install Frontend Design

skills CLI
$ npx skills add BuilderIO/agent-native --skill frontend-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install BuilderIO/agent-native frontend-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/BuilderIO/agent-native.git skills-src && mkdir -p .claude/skills && cp -r skills-src/community-templates/win-loss-memo/.agents/skills/frontend-design .claude/skills/frontend-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-design
GitHub stars
7.1k
Token cost
~5.4k tokens
SKILL.md length
2,957 words
Files
2 (incl. references)
Skills in repo
102
Repo updated
First seen
Licence
None found

At a glance

Sets the visual direction for UI work, avoiding generic AI aesthetics.

  • Works in 6 steps: Run the relevant formatter/checks. → Start the dev server when the app needs… → Verify with the available browser… → …
  • Any user-facing UI change: new surfaces
  • SKILL.md covers Design Thinking, Visual Direction Contract, Interaction Responsiveness and Default Surface Density, plus 6 more sections
  • Calls pnpm and node

What it does

Frontend Design is an agent skill from BuilderIO/agent-native. Sets the visual direction for UI work, avoiding generic AI aesthetics. Use for any user-facing UI change: new surfaces, screenshot-driven feedback, copy/density cleanup, settings, control placement, or a "make this look good" pass. Do not load it only for purely mechanical wiring or formatting.

Its SKILL.md is about 5.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/visual-direction.md`).

It sits in Frontend & Design. The repository describes itself as: A framework for building agentic apps.

When your agent uses it

  • Any user-facing UI change: new surfaces
  • Screenshot-driven feedback
  • Copy/density cleanup
  • Control placement

Example prompts

  • “make this look good”
  • “/frontend-design”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Run the relevant formatter/checks.
  2. Start the dev server when the app needs one.
  3. Verify with the available browser tooling at desktop and mobile widths.
  4. Check interactive states: hover, focus, loading, empty, error, and destructive confirmations.
  5. When registering or changing a company adapter, run
  6. For a new app or a visual redesign, review DESIGN.md against the rendered

What it can do on your machine

Read from SKILL.md and the folder at commit be0d784. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Design loads about 5.4k tokens when it runs, and up to ~6.7k if it reads all its reference files. Until then it costs about 78 tokens; SKILL.md has 2,957 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~78
When it runs · the whole SKILL.md, loaded when a task matches
~5.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 2,957 words (~5,390 tokens).

“This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with strong product judgment, excellent accessibility, and a clear visual point of view.”

— opening of SKILL.md by BuilderIO
name
frontend-design
scope
both
license
Complete terms in LICENSE.txt
source
https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
local-changes
Description deliberately widened on 2026-08-09 because the previous narrow trigger excluded routine UI edits, including screenshot-driven cleanup, copy and…
metadata.internal
true

Read the full SKILL.md on GitHub

Files

SKILL.md and 1 other file (references) in community-templates/win-loss-memo/.agents/skills/frontend-design of BuilderIO/agent-native.

  • SKILL.md
  • references/visual-direction.md

Open the folder on GitHubat commit be0d784

Compare with similar skills

Frontend Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Design this skillBuilderIO/agent-native7.1k—~5.4kAutomated safety check: PassNone
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from BuilderIO/agent-native

All 102 skills in this repo

  • Actions

    BuilderIO/agent-native

    How to create and run agent actions. An agent skill from BuilderIO/agent-native.

    7.1k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Client Methods

    BuilderIO/agent-native

    Client method surface rules. An agent skill from BuilderIO/agent-native.

    7.1k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Adding A Feature

    BuilderIO/agent-native

    The four-area checklist every new feature must complete. An agent skill from BuilderIO/agent-native.

    7.1k GitHub stars~4k tokensUpdated today
    Auto-check passed

  • Address Feedback

    BuilderIO/agent-native

    Triage feedback from docs, issues, Slack threads, or pasted notes into verified bugs, UX proposals, unclear questions, and skipped noise.

    7.1k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Audit Log

    BuilderIO/agent-native

    Durable, access-scoped, append-only record of who changed what app data, when, and whether it was the agent or a human.

    7.1k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Automations

    BuilderIO/agent-native

    Event-triggered and schedule-triggered automations with natural-language conditions.

    7.1k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

Categories

Questions about Frontend Design

What does Frontend Design do?

Sets the visual direction for UI work, avoiding generic AI aesthetics. Frontend Design is an agent skill from BuilderIO/agent-native. Sets the visual direction for UI work, avoiding generic AI aesthetics.

When should I use Frontend Design?

Frontend Design fits situations like: any user-facing UI change: new surfaces; screenshot-driven feedback; copy/density cleanup; control placement.

How do I install Frontend Design in Claude Code?

Run `npx skills add BuilderIO/agent-native --skill frontend-design -a claude-code`. Or copy the skill folder (community-templates/win-loss-memo/.agents/skills/frontend-design in BuilderIO/agent-native) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Design in Codex?

Run `npx skills add BuilderIO/agent-native --skill frontend-design -a codex`. Or copy the skill folder (community-templates/win-loss-memo/.agents/skills/frontend-design in BuilderIO/agent-native) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.

Can I use Frontend Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add BuilderIO/agent-native --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.

What does Frontend Design need to run?

Going by SKILL.md and its folder, Frontend Design needs the command-line tools its instructions call (pnpm and node).

Does Frontend Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Design use?

No licence was found for Frontend Design or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Frontend Design use?

About 5.4k tokens (SKILL.md is roughly 22k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.

What are the alternatives to Frontend Design?

Skills that share tags, products or a category with Frontend Design: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Design?

BuilderIO (a GitHub organization) maintains it in BuilderIO/agent-native, which has 7,103 GitHub stars. The repository holds 102 skills in this directory. The repository was last updated on October 9, 2026.

Source: BuilderIO/agent-native on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.