Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

frontend-skill — Claude Code skill: UI and install

This skill helps agents create visually strong landing pages, websites, and app UIs with restrained composition. Use it for frontend and interface work.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill frontend-skill -a claude-code
Open on GitHub

What frontend-skill does

frontend-skill guides the creation of landing pages, websites, and application interfaces. Its approach focuses on strong visual composition without an overloaded layout, based on OpenAI's production frontend playbook.

The catalogue entry makes the skill discoverable during agent planning. The full workflow uses the original assets, scripts, and references from the upstream bundle, which is installed into the active skills directory. After installation, ask the agent to invoke frontend-skill or use one of its trigger phrases related to landing pages and UI composition.

Check access to the upstream bundle when the original assets and scripts are required. Catalogue discovery alone does not provide that full workflow.

What it helps with

  • build a landing page with restrained composition
  • design a visually strong website
  • create an application UI
  • run a frontend workflow through an agent

Example prompts for the agent

  • Use `frontend-skill` to build a landing page with strong visuals and restrained composition.
  • Apply `frontend-skill` to the current application and design its interface screens.
  • Create this site using the frontend playbook with a focus on `ui composition`.

How to install frontend-skill

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill frontend-skill -a claude-code

2Manually: put the files in place

~/.claude/skills/frontend-skill/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/frontend-skill/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

flutter-expert https://github.com/Jeffallan Skill for building cross-platform apps with Flutter 3+ and Dart. Covers widgets, state management via Riverpod or Bloc, GoRouter navigation, and performance optimization. Claude Code CX Codex Cursor +1 14,300installs ui-skills-root ibelick A UI task router that picks the right skill before interface work. Run npx ui-skills start to launch it and let the agent select just enough context to solve the problem. Claude Code CX Codex Cursor +1 7,100installs vue-pinia-best-practices github.com/vuejs-ai A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects. Claude Code CX Codex Cursor +1 16,800installs opentui msmps Guides coding agents through building OpenTUI terminal interfaces, from choosing Core, React, or Solid to handling input, animations, and tests. Claude Code CX Codex Cursor +1 64,400installs material-ui-nextjs mui A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. Use it when setting up or debugging MUI in a Next.js app. Claude Code CX Codex Cursor +1 725installs expo-router expo Skill for file-based routing, stacks, modals and tabs in Expo Router. Use it when building navigation in a React Native mobile app. Claude Code CX Codex Cursor +1 27,700installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about frontend-skill

How do I install frontend-skill in Claude Code?

Run npx skills add nexu-io/open-design --skill frontend-skill -a claude-code, then run the same command again: npx skills add nexu-io/open-design --skill frontend-skill -a claude-code. The skill file is located at ~/.claude/skills/frontend-skill/SKILL.md.

What does frontend-skill do?

It guides agents in creating landing pages, websites, and app UIs with restrained composition and strong visual direction. It is intended for frontend and interface work.

What is needed for the full frontend-skill workflow?

The full workflow uses the original assets, scripts, and references from the upstream bundle. Once installed, invoke it by asking the agent to use frontend-skill or one of its listed trigger phrases.

Source text

SKILL.md · Apache-2.0 
---
name: frontend-skill
description: |
  Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.
triggers:
  - "landing page"
  - "frontend playbook"
  - "ui composition"
  - "restrained ui"
od:
  mode: design-system
  category: design-systems
  upstream: "https://github.com/openai/skills"
---

# 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 OpenDesign 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.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor