Setup & Installation
npx skills add https://github.com/openai/skills --skill frontend-skill
https://github.com/openai/skills/tree/main/skills/.curated/frontend-skill
View on GitHubWhat 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
- Building a product landing page where one full-bleed image anchors the entire first viewport
- Replacing a dashboard card mosaic with a layout-first information surface
- Adding scroll-linked and hover motion that changes how a page feels without adding visual noise
- Structuring a startup homepage so the brand name reads louder than the feature list
- Prototyping a game or app UI with deliberate spacing and minimal chrome