OpenAI Frontend Skill

Reviewed 2026-10-14codingPrompt / Rule# frontend # design # codex # openai # landing-page

OpenAI's frontend-skill for Codex: art-direction rules for landing pages and app UI. Removed from openai/skills in April 2026; still installable from history.

Security Reviewed

Instruction-only OpenAI skill with no scripts, network calls or credentials; it is no longer maintained in openai/skills.

Install OpenAI Frontend Skill in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "OpenAI Frontend Skill" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/openai-frontend-skill.md (source: https://github.com/openai/skills/tree/30444aed500c00c85294d12074f6e3ee794f808a/skills/.curated/frontend-skill).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Clone the repository and check out the last commit with the skill
```
git clone https://github.com/openai/skills /tmp/openai-skills && git -C /tmp/openai-skills checkout 30444aed500c00c85294d12074f6e3ee794f808a
```
The skill was removed from main on 2026-04-23, so check out the commit just before the removal.
2. Copy the skill into your workspace
```
mkdir -p .agents/skills && cp -r /tmp/openai-skills/skills/.curated/frontend-skill .agents/skills/
```
Run this from your project root. Antigravity then reads the skill from .agents/skills/frontend-skill/.
3. Or install it globally
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/openai-skills/skills/.curated/frontend-skill ~/.gemini/config/skills/
```
Use this instead of the previous step to make the skill available in every workspace (~/.gemini/config/skills/frontend-skill/).
4. Check that Antigravity sees it
Start a new Antigravity conversation and ask "What skills do you have?" (in the Antigravity CLI you can also run /skills).

No API keys or binaries are needed. The agents/openai.yaml file is Codex UI metadata and is ignored by other agents.

Using Claude Code, Cursor or Codex? See other assistants below.

What is OpenAI Frontend Skill?

frontend-skill was a curated Codex skill in OpenAI's openai/skills repository for visually strong landing pages, websites, apps, prototypes, demos and game UI. Its SKILL.md asks the agent to write a visual thesis, a content plan and an interaction thesis before building, and enforces restrained composition, image-led hierarchy, short copy and a few intentional motions. It was added on 2026-03-20 (commit 82d2c5b) and removed on 2026-04-23 by commit 11c6438 "Remove curated frontend and web game skills"; the files are still available at the parent commit 30444ae. The openai/skills README now says the repository is deprecated and points to github.com/openai/plugins for current Codex skill and plugin examples.

How to use OpenAI Frontend Skill?

Copy the folder into your agent's skills directory, then ask for a landing page, website or app UI. In Codex its default prompt is "Use $frontend-skill to establish a visual thesis, content plan, and interaction thesis before building ..." (agents/openai.yaml).

Key features of OpenAI Frontend Skill

✓We counted at 30444ae: 3 files, 18,772 bytes: SKILL.md (7,671 bytes, 184 lines, about 1,250 words), agents/openai.yaml (326 bytes) and LICENSE.txt (10,775 bytes, Apache 2.0)
✓We counted: SKILL.md has 11 sections, 10 Hard Rules, 7 "Reject These Failures" and 7 litmus questions; it is rules only, with no components, templates or scripts
✓Working model: write a visual thesis, a content plan (hero, support, detail, final CTA) and an interaction thesis before coding
✓Landing-page rules: full-bleed hero, brand name as the loudest text, no hero cards, stat strips or logo clouds by default; a sticky header counts against the first-viewport budget
✓Defaults we counted in the text: two typefaces maximum, one accent color, cardless layouts, and 2-3 intentional motions (hero entrance, one scroll-linked effect, one hover or reveal)
✓Separate rules for product UI: start from the working surface (KPIs, filters, tables) with utility copy, and no hero section unless you ask for one

When to use OpenAI Frontend Skill

1Build a branded landing page with a strong hero image
2Design a calm, dense app or dashboard UI
3Review a page against the litmus checks before shipping
4Prototype a demo or game UI with intentional motion

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure OpenAI Frontend Skill in your development environment.

Step 1: Claude Code (manual)claude

git clone https://github.com/openai/skills /tmp/openai-skills && git -C /tmp/openai-skills checkout 30444aed500c00c85294d12074f6e3ee794f808a && mkdir -p ~/.claude/skills && cp -r /tmp/openai-skills/skills/.curated/frontend-skill ~/.claude/skills/

Not documented by OpenAI for Claude Code; Claude Code reads personal skills from ~/.claude/skills/.

Step 2: Cursorcursor

Not documented by the project for this skill; openai/skills describes installs for Codex only.

Usage Example & Verification

Prompt / Request Example

1) README/metadata example (agents/openai.yaml default prompt): "Use $frontend-skill to establish a visual thesis, content plan, and interaction thesis before building a visually strong landing page, website, app, prototype, demo, or game UI."
-> The agent first writes the three short statements, then builds with the composition rules.

2) Our example: "Build a landing page for a ceramics studio called Kiln & Co. Follow the frontend skill: thesis first, then the page."
-> Expect a full-bleed hero with the studio name largest, one short promise and one CTA, then support, detail and final-CTA sections, per the landing-page sequence in SKILL.md.

3) Our example: "Build an admin dashboard for support tickets."
-> The Utility Copy section applies: filters, status and a ticket table first, plain headings such as "Open tickets", and no marketing hero.

Security Review

Static review

Reviewed Date

2026-10-14

Audited Ref / Commit

30444aed500c00c85294d12074f6e3ee794f808a

Reviewer

antigravityskills.org (static code review)

Instruction-only OpenAI skill with no scripts, network calls or credentials; it is no longer maintained in openai/skills.

Full review: scope, findings, risks

Audit Scope:skills/.curated/frontend-skill (SKILL.md, agents/openai.yaml, LICENSE.txt) of openai/skills at commit 30444ae (parent of removal commit 11c6438, 2026-04-23); git history of that folder (added 82d2c5b, 2026-03-20); README.md and skills/.system/skill-installer/SKILL.md at HEAD 49f948f (2026-06-23).

Key Findings:Instruction-only skill: SKILL.md with design rules, agents/openai.yaml with Codex display metadata and default prompt, and LICENSE.txt (Apache 2.0). No scripts, commands, network calls or environment variables. The folder no longer exists on main; the removal commit message gives no replacement location.

Identified Operational Risks & Permissions:Low security risk. Maintenance risk: removed from the deprecated openai/skills repository, so it will not receive updates.

At commit 30444ae, skills/.curated/frontend-skill contains SKILL.md, agents/openai.yaml and LICENSE.txt. SKILL.md is Markdown guidance on composition, landing pages, app UI, imagery, copy and motion, with no shell commands or URLs to fetch. agents/openai.yaml only sets display_name, short_description and default_prompt for the Codex interface. LICENSE.txt is the Apache License 2.0. The skill was removed from main in commit 11c6438 on 2026-04-23, and the openai/skills README marks the whole repository as deprecated, pointing to github.com/openai/plugins.

Operational Notes & Known Limitations

Known Limitations

•No longer in openai/skills main: removed in commit 11c6438 (2026-04-23), so `$skill-installer frontend-skill` by name will not find it
•openai/skills is marked deprecated in its README; OpenAI points to github.com/openai/plugins instead
•Instruction-only: no components or tools; motion advice assumes Framer Motion when available
•Strong defaults (full-bleed hero, cardless layout, real imagery) may not fit every brand
•Rules only: it will not scaffold a project, install a UI library or check contrast for you; the agent does the building

Frequently Asked Questions

What is OpenAI's frontend skill?

frontend-skill is a Codex skill OpenAI published in openai/skills (skills/.curated/frontend-skill) for visually strong landing pages, websites, apps and game UI. It makes the agent plan a visual thesis, content plan and interaction thesis, then apply rules on composition, imagery, copy and motion.

Is the OpenAI frontend-skill still available?

It was removed from openai/skills on 2026-04-23 (commit 11c6438, "Remove curated frontend and web game skills"), and the repository README now says openai/skills is deprecated in favor of github.com/openai/plugins. The skill can still be installed from commit 30444ae, the last version that contains it.

How do I install the OpenAI frontend skill in Antigravity?

Clone github.com/openai/skills, check out commit 30444aed500c, and copy skills/.curated/frontend-skill into your project's .agents/skills/ folder or into ~/.gemini/config/skills/. Then ask "What skills do you have?" (Antigravity CLI: /skills) to confirm it loaded.

Is the OpenAI frontend skill safe?

Yes in our static review: the folder has only SKILL.md, agents/openai.yaml (display name and default prompt) and an Apache 2.0 LICENSE.txt. There are no scripts, network calls or API keys.

How does it compare with Anthropic's frontend-design skill?

Both are instruction-only design skills. OpenAI's frontend-skill prescribes concrete defaults such as a full-bleed hero, cardless layouts and 2-3 intentional motions, while Anthropic's frontend-design focuses on a brief-specific plan reviewed against generic AI-design defaults before building.

Supported Platforms

antigravityclaudecodex

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More coding skills #frontend #design #codex #openai Use cases

Related Skills

💻

Impeccable

@pbakaus

Paul Bakaus's Impeccable design skill: one /impeccable skill with 24 design commands, live browser iteration and a 59-rule detector for AI-generated frontend patterns.

Tested in AntigravityStatic reviewruns scriptsnetwork accesswrites files

frontenddesign

💻

Frontend Design (Anthropic)

@anthropics

Anthropic's official frontend-design skill: guidance for distinctive, intentional UI design, typography and copy that avoids templated AI defaults.

Tested in AntigravityStatic reviewinstructions onlyoffline

frontenddesign

🎨

UI/UX Pro Max

@nextlevelbuilder

Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

mediaui