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

frontend-ui-dark-ts — скилл для Claude Code: что делает

Скилл помогает создавать тёмные интерфейсы на React, Tailwind CSS и Framer Motion. Пригодится для дашбордов и панелей управления.

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

Что делает frontend-ui-dark-ts

Скилл задаёт правила вёрстки тёмных интерфейсов в React-проектах на TypeScript. Он нацелен на административные панели, аналитические дашборды и экраны с большим объёмом данных. Стек опирается на Tailwind CSS. Для эффектов глассморфизма используются анимации Framer Motion.

Внутри скилла зафиксирована палитра с готовыми классами. Для основных кнопок задан bg-brand text-white. Фону страницы назначен класс bg-neutral-bg1, а карточкам и полям ввода — bg-neutral-bg2. Для приподнятых поверхностей используется bg-neutral-bg3. Также предусмотрены токены границ и статусные стили для ошибок, предупреждений и успешных действий.

Перед запуском требуется изучить файл references/detailed-guide.md с обязательными требованиями к безопасности. Сгенерированный код не заменяет ручное тестирование и проверку окружения, поэтому результат обязательно нужно тестировать в проекте.

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

  • оформить панель управления в тёмной теме с эффектом стекла
  • настроить цветовую схему Tailwind CSS для карточек и полей ввода
  • добавить плавные анимации Framer Motion в аналитический дашборд
  • разметить статусные сообщения об ошибках и успехе по готовой палитре

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

  • Собери карточку аналитики в тёмной теме по правилам frontend-ui-dark-ts с фоном bg-neutral-bg2.
  • Оформи форму входа с эффектом глассморфизма и анимацией Framer Motion.
  • Добавь таблицу дашборда с кнопкой действия bg-brand и нейтральными границами.

Как установить frontend-ui-dark-ts

1Через Skills CLI (Vercel)

npx skills add sickn33/agentic-awesome-skills --skill frontend-ui-dark-ts -a claude-code

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

~/.claude/skills/frontend-ui-dark-ts/SKILL.md

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

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

Весь набор →
docker-expert sickn33 Скилл для ИИ-агента, который разбирает Dockerfile, multi-stage сборки и безопасность контейнеров. Пригодится, когда нужно навести порядок в образах и Compose. Claude Code CX Codex Cursor +1 27 200установок typescript-expert sickn33 Скилл для работы с TypeScript и JavaScript: разбирает типы, ускоряет проверку и помогает с миграциями. Пригодится, когда проект на TS растёт и компилятор начинает тормозить. Claude Code CX Codex Cursor +1 12 600установок browser-automation sickn33 Скилл помогает проверять браузерные сценарии по состоянию интерфейса и результату операции. Подходит для UI-тестов, диагностики таймингов и разрешённого сбора данных. Claude Code CX Codex Cursor +1 6 700установок nextjs-supabase-auth sickn33 Скилл настраивает Supabase Auth в Next.js App Router: клиенты, middleware, OAuth callback и Server Actions. Пригодится для защиты маршрутов и работы с сессиями. Claude Code CX Codex Cursor +1 6 500установок 3d-web-experience sickn33 Помогает создавать и отлаживать 3D-сцены, конфигураторы товаров и портфолио для веба. Разбирает выбор стека, загрузку моделей и производительность. Claude Code CX Codex Cursor +1 5 200установок prisma-expert sickn33 Скилл помогает разбирать схемы Prisma, миграции и запросы. Пригодится, когда нужно найти причину ошибки или проверить изменения перед деплоем. Claude Code CX Codex Cursor +1 4 200установок playwright-skill sickn33 Скилл для написания и запуска тестов браузера через Playwright: проверка вёрстки на разных экранах, скриншоты, тесты логина и заполнения форм. Код выполняется локально через Node. Claude Code CX Codex Cursor +1 3 900установок game-development sickn33 Координирует структуру игры: задаёт базовые принципы архитектуры и перенаправляет агента к подскиллам для веба, ПК, мобильных платформ или VR. Claude Code CX Codex Cursor +1 3 800установок

Похожие

render-textures phaserjs Скилл обучает агента работать с RenderTexture и DynamicTexture в Phaser 4: рисовать объекты в текстуру, использовать Stamp и настраивать командный буфер. Claude Code CX Codex Cursor +1 767установок physics-matter phaserjs Скилл учит ИИ настраивать физику Matter.js в Phaser 4: твёрдые тела, ограничения, сенсоры и перетаскивание объектов мышью. Claude Code CX Codex Cursor +1 754установок ink vercel-labs Помогает создавать интерактивные терминальные интерфейсы из JSON-спецификаций через @json-render/ink. Пригодится при настройке TUI и каталогов компонентов для агентов. Claude Code CX Codex Cursor +1 1 300установок sign-in-with-google-web официальный google Помогает настроить вход через Google Identity Services на вебе. Защищает токены и закрывает уязвимости авторизации по стандартам IETF. Claude Code Gemini CLI CX Codex 743установок v3-to-v4-migration phaserjs Помогает обновить проект игры с Phaser 3 до Phaser 4. Разбирает несовместимые изменения рендерера, перенос масок в фильтры и замену tintFill. Claude Code CX Codex Cursor +1 711установок react-joyride gilbarbara Учит агента создавать пошаговые туры и онбординг-подсказки в React-приложениях через библиотеку React Joyride v3. Claude Code CX Codex Cursor +1 686установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о frontend-ui-dark-ts

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

Выполните в терминале команду npx skills add sickn33/agentic-awesome-skills --skill frontend-ui-dark-ts -a claude-code. Файл навыка сохранится по пути ~/.claude/skills/frontend-ui-dark-ts/SKILL.md.

Что делает скилл frontend-ui-dark-ts?

Он направляет агента при разработке тёмных интерфейсов на React, TypeScript, Tailwind CSS и Framer Motion. Скилл задаёт готовые классы для поверхностей, текста, границ и статусов.

Какие ограничения есть у frontend-ui-dark-ts?

Результат генерации не заменяет ручное тестирование и экспертное ревью в конкретном окружении. Перед работой также обязательно изучить требования безопасности из файла references/detailed-guide.md.

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

SKILL.md · MIT 
---
name: frontend-ui-dark-ts
description: "A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations."
risk: critical
source: community
date_added: "2026-02-27"
---

# Frontend UI Dark Theme (TypeScript)

A modern dark-themed React UI system using **Tailwind CSS** and **Framer Motion**. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.

## Detailed Guide

Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

## Color Usage

| Use Case | Color | Class |
|----------|-------|-------|
| Primary action | Brand purple | `bg-brand text-white` |
| Primary hover | Brand hover | `hover:bg-brand-hover` |
| Page background | Neutral bg1 | `bg-neutral-bg1` |
| Card background | Neutral bg2 | `bg-neutral-bg2` |
| Elevated surface | Neutral bg3 | `bg-neutral-bg3` |
| Input background | Neutral bg2 | `bg-neutral-bg2` |
| Input focus | Neutral bg3 | `focus:bg-neutral-bg3` |
| Border default | Border default | `border-border` |
| Border subtle | Border subtle | `border-border-subtle` |
| Success | Status success | `text-status-success` |
| Warning | Status warning | `text-status-warning` |
| Error | Status error | `text-status-error` |

## When to Use
This skill is applicable to execute the workflow or actions described in the overview.

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

© sickn33 · MIT · sickn33/agentic-awesome-skills

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

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

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

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