Frontend Skills Plugin

Примечание: Этот проект создан для демонстрации Claude Skills совместно с Claude Code.

Плагин для Claude Code, предназначенный для создания самобытных, production-grade frontend-интерфейсов без шаблонной «AI-эстетики». Этот Skill и Subagent разработан на основе статьи блога Anthropic: Improving frontend design through Skills

Возможности

• Выразительная типографика — эффективные сочетания serif × sans-serif
• Кастомные цветовые палитры — выход за рамки стандартных цветов Tailwind
• Асимметричные сетки — пропорции 35/65, перекрывающиеся элементы
• Осмысленные анимации — акцент на ключевых моментах взаимодействия

Демонстрация

• Слева: с плагином Skills
• Справа: без плагина Skills

Промпт:

Результат:

Установка

Выполните следующие slash-команды /plugin в Claude Code.

# Добавить маркетплейс
/plugin marketplace add oikon48/cc-frontend-skills

# Установить плагин
/plugin install frontend-skills@cc-frontend-skills

Использование

Просто отправьте запрос, связанный с frontend, — дизайн-скилл применится автоматически:

Build me a flight lookup nextjs web app where the user can put in a flight number and the app gives you the start time, end time, time zones, start location, and end location of the flight. For now, use a mock API that returns a list of matching flights. Display the search results under the form input. use @frontend-design-system-implementor , ultrathink

Этот промпт взят из демо Google Antigravity (ссылка на YouTube)

Примеры тем

1. Nordic Minimal — скандинавская теплота и спокойствие
2. Neon Brutalism — слияние киберпанка и брутализма
3. Organic Growth — природные, органические формы
4. Tech Noir — тёмная tech-эстетика в стиле нуар
5. Editorial Elegance — редакционный дизайн в духе журналов

Ресурсы

• SKILL.md — руководство по дизайну
• themes.md — реализации тем
• components.md — паттерны компонентов

Участие в разработке

Issues и pull requests приветствуются! Не стесняйтесь вносить вклад в проект.

Автор

@oikon48

Лицензия

MIT