Alanamultiskillagent
Back to skills

frontend-skill

design

A set of design rules for Claude that enforces composition-first frontend work: full-bleed heroes, brand-first hierarchy, cardless layouts, and intentional motion. Covers landing pages, app surfaces,

openaiopenai
|View all openai skills →

Setup & Installation

npx skills add https://github.com/openai/frontend-skill --skill frontend-skill
or paste the link and ask your coding assistant to install it
https://github.com/openai/frontend-skill
View on GitHub

What This Skill Does

A set of design rules for Claude that enforces composition-first frontend work: full-bleed heroes, brand-first hierarchy, cardless layouts, and intentional motion. Covers landing pages, app surfaces, prototypes, and game UIs. The constraints are specific and opinionated, not general best-practice reminders. Without explicit direction, Claude defaults to generic SaaS layouts with card grids and weak brand placement; this skill forces composition, imagery, and motion decisions before any component gets written.

When to use it

  • Working with frontend skill functionality
  • Implementing frontend skill features
  • Debugging frontend skill related issues

Similar Skills

accessibility

Audits and improves web accessibility against WCAG 2.2 guidelines, covering the POUR principles (Perceivable, Operable, Understandable, Robust). Includes code patterns for ARIA usage, keyboard navigat

algorithmic-art

Generates algorithmic and generative art using p5.js. Takes a user prompt, creates a computational philosophy for it, then produces a self-contained interactive HTML artifact with seeded randomness, p

brand-guidelines

Applies Anthropic's official brand colors and typography to documents and presentations. Maps headings to Poppins, body text to Lora, and non-text shapes to the orange, blue, and green accent palette.

canvas-design

Generates original visual art and design artifacts as .png or .pdf files. Works in two stages: first defining an aesthetic philosophy (a named movement with visual principles), then expressing that ph