К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

frontend-skill — скилл для Claude Code: UI и установка

Скилл помогает агенту собирать выразительные лендинги, сайты и интерфейсы приложений со сдержанной композицией. Пригодится для задач по frontend и UI.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add nexu-io/open-design --skill frontend-skill -a claude-code
Открыть на GitHub

Что делает frontend-skill

frontend-skill задаёт подход к созданию лендингов, сайтов и интерфейсов приложений. Он ориентирован на выразительную визуальную подачу без перегруженной композиции и собран на основе production playbook от OpenAI.

Запись в каталоге нужна для обнаружения скилла агентом во время планирования. Полный workflow берёт исходные assets, scripts и references из upstream bundle, который устанавливается в активную директорию скиллов. После установки можно попросить агента вызвать frontend-skill или использовать одну из фраз-триггеров, связанных с landing page и UI composition.

Это повод проверить доступ к upstream bundle, если нужны оригинальные assets и scripts, а не только обнаружение скилла в каталоге.

Какие задачи решает

  • собрать лендинг со сдержанной композицией
  • спроектировать визуально выразительный сайт
  • создать UI для приложения
  • запустить frontend workflow через агента

Примеры запросов агенту

  • Используй `frontend-skill`, чтобы собрать лендинг для продукта с выразительной, но сдержанной композицией.
  • Примени `frontend-skill` к текущему приложению и спроектируй UI экранов.
  • Создай сайт по frontend playbook с фокусом на `ui composition`.

Как установить frontend-skill

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/frontend-skill/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Похожие

flutter-expert https://github.com/Jeffallan Скилл для разработки кросс-платформных приложений на Flutter 3+ и Dart. Помогает с виджетами, управлением состоянием через Riverpod или Bloc, маршрутизацией GoRouter и оптимизацией производительности. Claude Code CX Codex Cursor +1 14 300установок ui-skills-root ibelick Маршрутизатор UI-задач, который определяет нужный скилл перед работой над интерфейсом. Запускается командой npx ui-skills start и помогает агенту выбрать минимальный контекст для решения. Claude Code CX Codex Cursor +1 7 100установок vue-pinia-best-practices github.com/vuejs-ai Скилл с лучшими практиками Pinia: как избежать ошибок при настройке хранилищ, сохранить реактивность и правильно организовать state management в Vue-проекте. Claude Code CX Codex Cursor +1 16 800установок opentui msmps Помогает агенту собирать терминальные интерфейсы на OpenTUI: от выбора Core, React или Solid до ввода с клавиатуры, анимаций и тестов. Claude Code CX Codex Cursor +1 64 400установок material-ui-nextjs mui Скилл для связки Material UI с Next.js: SSR, кеш Emotion, next/font, CSS-слои, Link и useSearchParams. Пригодится при настройке или отладке MUI в Next.js-приложении. Claude Code CX Codex Cursor +1 725установок expo-router expo Скилл для работы с файловой маршрутизацией, стеками, модалями и табами в Expo Router. Пригодится, если вы строите навигацию в мобильном приложении на React Native. Claude Code CX Codex Cursor +1 27 700установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о frontend-skill

Как установить frontend-skill в Claude Code?

Выполните npx skills add nexu-io/open-design --skill frontend-skill -a claude-code, затем повторите эту же команду: npx skills add nexu-io/open-design --skill frontend-skill -a claude-code. Файл скилла находится по пути ~/.claude/skills/frontend-skill/SKILL.md.

Что делает frontend-skill?

Скилл помогает создавать лендинги, сайты и интерфейсы приложений со сдержанной композицией и выразительной визуальной подачей. Он ориентирован на frontend и UI-задачи.

Что нужно для полного workflow frontend-skill?

Для полного workflow нужны исходные assets, scripts и references из upstream bundle. После установки агент можно вызвать по имени frontend-skill или через фразы-триггеры из описания скилла.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором