Frontend Skill
Ship landing pages and product UIs with restrained, production-grade composition using OpenAI’s frontend playbook.
Overview
frontend-skill is an agent skill most often used in Build (also Validate, landing) that applies OpenAI’s restrained composition playbook for landing pages, websites, and app UIs.
Install
npx skills add https://github.com/nexu-io/open-design --skill frontend-skillWhat is this skill?
- OpenAI production frontend playbook for landing pages, sites, and app UIs
- Emphasizes restrained visual composition over flashy layouts
- Trigger phrases: landing page, frontend playbook, UI composition, restrained UI
- Catalogued in Open Design with upstream bundle at openai/skills
- Design-system mode for agent discovery during planning
- Upstream curated from OpenAI skills repository
Adoption & trust: 870 installs on skills.sh; 61.4k GitHub stars.
What problem does it solve?
You need a credible marketing or product UI but lack a consistent, production-tested composition framework for solo shipping.
Who is it for?
Solo builders polishing landing pages or app shells before launch who want opinionated UI composition without hiring a designer.
Skip if: Teams that already enforce a bespoke design system in Figma and code and only need token-perfect implementation from specs.
When should I use this skill?
User mentions landing page, frontend playbook, UI composition, or restrained UI.
What do I get? / Deliverables
You get agent-ready guidance aligned with OpenAI’s frontend playbook so layouts feel intentional and shippable, then pull the upstream bundle when you want the full workflow assets.
- Composed landing or app UI aligned to playbook
- Plan to install full upstream frontend-skill bundle
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the playbook targets implemented pages and app surfaces, not early ideation only. Frontmatter and triggers center on landing pages, websites, and UI composition—core frontend build work.
Where it fits
Shape hero, sections, and typography for a waitlist page before you commit engineering time.
Implement dashboard and marketing routes with consistent spacing and hierarchy.
Refine campaign landing variants without breaking visual restraint.
How it compares
Use as a structured UI playbook instead of one-off “make it pretty” chat prompts with no composition rules.
Common Questions / FAQ
Who is frontend-skill for?
Indie and solo builders using Claude Code, Cursor, or Codex who ship web UIs and want OpenAI-style restrained layout guidance on demand.
When should I use frontend-skill?
Use it during Validate when scoping a landing page, during Build when composing marketing or app frontend, and at Launch when tightening hero and conversion surfaces—whenever triggers like “landing page” or “UI composition” appear.
Is frontend-skill safe to install?
Treat it like any third-party skill: review the Security Audits panel on this Prism page and inspect the upstream openai/skills repo before copying bundles into your agent skills directory.
SKILL.md
READMESKILL.md - Frontend Skill
# frontend-skill > Curated from OpenAI's skills repository. ## What it does Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook. ## Source - Upstream: https://github.com/openai/skills - Category: `design-systems` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/openai/skills ``` Then ask the agent to invoke this skill by name (`frontend-skill`) or with one of the trigger phrases listed in this skill's frontmatter.