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 ceilf6 in ceilf6/FrontAgent

Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff…

Apache-2.0Auto-check passedFrontend & Design

Install Frontend Design

skills CLI
$ npx skills add ceilf6/FrontAgent --skill frontend-design -a claude-code

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

GitHub CLI
$ gh skill install ceilf6/FrontAgent 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/ceilf6/FrontAgent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/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
120
Token cost
~956 tokens
SKILL.md length
413 words
Files
9 (incl. references, assets)
Skills in repo
4
Repo updated
First seen
Licence
Apache-2.0

At a glance

Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff…

  • Works in 7 steps: If the request is visually… → Read references/design-direction.md to… → Read references/aesthetics-guidelines.md… → …
  • Restyling pages
  • SKILL.md covers Trigger, Do Not Use, Workflow and Output Contract, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Design is an agent skill from ceilf6/FrontAgent. Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff engineering boundaries. Use when building or restyling pages, landing screens, dashboards, marketing surfaces, or other frontend UI where visual quality materially affects the result.

Its SKILL.md is about 960 tokens, which your agent loads only when the skill is triggered. The skill folder holds 12 other files, including reference files and assets (for example `ADAPTATION.md`, `agents/openai.yaml` and `assets/templates/visual-brief.md`).

It sits in Frontend & Design, covering Design systems and Frontend development. The repository describes itself as: Frontend AI coding agent platform with CLI, VS Code extension, desktop app, MCP server, RAG planning, Skills, SDD guardrails, browser automation, and LoRA planner models |…. The licence is Apache-2.0.

When your agent uses it

  • Restyling pages
  • Landing screens
  • Marketing surfaces
  • Other frontend UI where visual quality materially affects the result

Example prompts

  • “/frontend-design”

Workflow steps

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

  1. If the request is visually underspecified, ask only the next 1-3 questions needed to clarify audience, tone, and acceptance criteria. Use…
  2. Read references/design-direction.md to choose one clear visual direction before coding.
  3. Read references/aesthetics-guidelines.md for typography, color, motion, composition, and background treatment.
  4. Read references/integration-guardrails.md before modifying an existing codebase, design system, or shared component surface.
  5. For a new page or major redesign, use assets/templates/visual-brief.md to form a short visual brief before implementation.
  6. Implement working code that matches the chosen direction and stays within project constraints.
  7. Read references/delivery-checks.md before handing off.

What it can do on your machine

Read from SKILL.md and the folder at commit e78cbed. 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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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 956 tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 97 tokens; SKILL.md has 413 words of instructions outside code blocks.

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

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

The full file from ceilf6/FrontAgent at commit e78cbed, republished under its Apache-2.0 licence (© ceilf6). 413 words, ~956 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.
name
frontend-design
description
Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff engineering boundaries. Use when building or restyling pages, landing screens, dashboards, marketing surfaces, or other frontend UI where visual quality materially affects the result.
license
See LICENSE.txt
triggers.keywords
landing page, hero section, dashboard, marketing site, polish ui, restyle, beautify, redesign, 美化, 重设计, 视觉升级, 设计感
triggers.negative
code review, quality audit, bugfix, debug

Frontend Design

Use this skill to produce frontend work that feels intentionally designed rather than generic. The goal is not maximalism by default. The goal is a clear visual point of view that matches the product context and still ships as maintainable code.

Trigger

  • New frontend surfaces where look and feel matter:
    • landing pages
    • dashboards
    • product pages
    • hero sections
    • marketing sites
    • polished application views
  • Requests to beautify, restyle, refine, or modernize an existing UI
  • Cases where the code must be working and production-usable, not just a mockup

Do Not Use

  • Pure bug fixes, refactors, or backend tasks
  • Review or audit requests
  • Small code changes where the user did not ask for visual improvement
  • Existing design-system work where the user only wants strict conformance and no meaningful visual interpretation

Workflow

  1. If the request is visually underspecified, ask only the next 1-3 questions needed to clarify audience, tone, and acceptance criteria. Use requirement-interviewer when the ambiguity is material.
  2. Read references/design-direction.md to choose one clear visual direction before coding.
  3. Read references/aesthetics-guidelines.md for typography, color, motion, composition, and background treatment.
  4. Read references/integration-guardrails.md before modifying an existing codebase, design system, or shared component surface.
  5. For a new page or major redesign, use assets/templates/visual-brief.md to form a short visual brief before implementation.
  6. Implement working code that matches the chosen direction and stays within project constraints.
  7. Read references/delivery-checks.md before handing off.
Show full SKILL.md (182 more words)Show less

Output Contract

  • State the chosen visual direction in one short sentence when it meaningfully affects implementation.
  • Produce working frontend code, not mood-board prose.
  • Keep the implementation cohesive:
    • typography should support the direction
    • color should feel intentional
    • motion should be meaningful, not noisy
    • layout should feel composed rather than assembled from defaults
  • When editing an existing product, preserve the established system unless the user explicitly wants a stronger redesign.

Guardrails

  • Project design specification constraints, protected files, project stack rules, and user requirements remain hard boundaries.
  • Respect the existing design system first. Only deviate when the request explicitly calls for redesign or the current surface clearly lacks a defined visual direction.
  • Prefer minimal diffs for scoped tasks. Do not turn a local UI tweak into a whole-app restyle.
  • Do not add new dependencies, font loaders, or animation libraries unless the task clearly justifies them.
  • Avoid generic AI aesthetics:
    • default-looking font stacks for new standalone surfaces
    • timid palettes
    • predictable card grids with no visual idea
    • purple-gradient-on-white defaults
  • Do not optimize for ornament over clarity. If visual flair hurts usability, accessibility, or maintainability, scale it back.

© ceilf6, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 8 other files (references, assets) in skills/frontend-design of ceilf6/FrontAgent.

  • SKILL.md
  • ADAPTATION.md
  • LICENSE.txt
  • agents/openai.yaml
  • assets/templates/visual-brief.md
  • references/aesthetics-guidelines.md
  • references/delivery-checks.md
  • references/design-direction.md
  • references/integration-guardrails.md

Open the folder on GitHubat commit e78cbed

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 skillceilf6/FrontAgent120—~956Automated safety check: PassApache-2.0
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Superdesignsuperdesigndev/superdesign-skill630—~4.1kAutomated safety check: PassMIT
UI Design Braincarmahhawwari/ui-design-brain893—~2.1kAutomated safety check: PassMIT
Frontend Design Routercode-yeongyu/oh-my-openagent70k—~5.3kAutomated safety check: PassCustom licence
Project-Native Component Builderkostja94/bricks199—~965Automated safety check: PassMIT

Similar skills

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Superdesign

    superdesigndev/superdesign-skill

    Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models.

    630 GitHub stars~4.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • UI Design Brain

    carmahhawwari/ui-design-brain

    Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.

    893 GitHub stars~2.1k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Design Router

    code-yeongyu/oh-my-openagent

    Routes frontend and UI work through design reference rulesets, with a design-system gate plus layout and print guidance, before any UI code is written.

    70k GitHub stars~5.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Project-Native Component Builder

    kostja94/bricks

    Builds new interface components inside an existing project, reusing its design system, stack and conventions instead of producing isolated demo UI.

    199 GitHub stars~965 tokensUpdated 13 days ago
    Frontend & DesignAuto-check passed

  • Frontend Design

    udecode/plate

    Build web interfaces with genuine design quality, not AI slop.

    17k GitHub stars~3.6k tokensUpdated today
    Frontend & DesignAuto-check passed

More from ceilf6/FrontAgent

  • Skill Lifecycle

    ceilf6/FrontAgent

    Create, evaluate, improve, and benchmark content skills using the local Skill Lab workflow.

    120 GitHub stars~747 tokensUpdated 8 days ago
    Auto-check passed

  • Frontend Reviewer

    ceilf6/FrontAgent

    Review frontend code, UI changes, generated implementations, and pull requests with severity-based findings and checklist-driven analysis.

    120 GitHub stars~491 tokensUpdated 8 days ago
    Auto-check passed

  • Requirement Interviewer

    ceilf6/FrontAgent

    Gather missing product, UX, technical, and delivery constraints before planning or coding.

    120 GitHub stars~476 tokensUpdated 8 days ago
    Auto-check passed

Categories

Questions about Frontend Design

What does Frontend Design do?

Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff…. Frontend Design is an agent skill from ceilf6/FrontAgent. Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff engineering boundaries.

When should I use Frontend Design?

Frontend Design fits situations like: restyling pages; landing screens; marketing surfaces; other frontend UI where visual quality materially affects the result.

How do I install Frontend Design in Claude Code?

Run `npx skills add ceilf6/FrontAgent --skill frontend-design -a claude-code`. Or copy the skill folder (skills/frontend-design in ceilf6/FrontAgent) 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 ceilf6/FrontAgent --skill frontend-design -a codex`. Or copy the skill folder (skills/frontend-design in ceilf6/FrontAgent) 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 ceilf6/FrontAgent --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?

SKILL.md names no scripts, command-line tools or credentials: Frontend Design is instructions for the agent only.

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?

Frontend Design is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Design use?

About 956 tokens (SKILL.md is roughly 3.8k 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.7k 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: Design Style (Castor6/tactus, 376 stars), Superdesign (superdesigndev/superdesign-skill, 630 stars), UI Design Brain (carmahhawwari/ui-design-brain, 893 stars) and Frontend Design Router (code-yeongyu/oh-my-openagent, 70k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Design?

ceilf6 (a GitHub user) maintains it in ceilf6/FrontAgent, which has 120 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on September 30, 2026.

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