AIKraft/Skills/pma веб

pma веб

Frontend implementation guide for PMA-managed React + Vite SPA and internal-tool frontend projects. Covers required quality gates, file-based type-safe routing with TanStack Router, server state with TanStack Query, the shadcn/ui (base-nova) hard lock (other UI component ecosystems are forbidden), Tailwind theming, testing, i18n, nsl-based dev integration, and frontend delivery rules. Use when imp

zzci official Дизайн

Что делает навык

Набор руководящих принципов для реализации frontend-части в управляемых PMA проектах (SPA и внутренние инструменты). Определяет технологический стек, архитектуру и обязательные стандарты качества после утверждения задач.

Когда применять

  • Разработка новых SPA-приложений или внутренних инструментов под управлением PMA.
  • Настройка типобезопасной маршрутизации с использованием TanStack Router.
  • Управление серверным состоянием через TanStack Query и клиентским состоянием через Zustand.
  • Создание UI с использованием строго разрешенной экосистемы shadcn/ui (base-nova) и Tailwind CSS v4.

Как работает

  1. Использовать стек React 19, TypeScript и Vite 8.
  2. Реализовать файловую маршрутизацию с TanStack Router и управление состоянием с TanStack Query и Zustand.
  3. Применять только shadcn/ui (base-nova) с @base-ui/react и Tailwind CSS v4; запрещать Radix UI и другие библиотеки.
  4. Использовать single-app layout по умолчанию; монорепозиторий на Bun создавать только при наличии нескольких приложений или общих пакетов.
  5. Не применять данный подход для SSR-сайтов, контентных сайтов или проектов без PMA.

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

Реализуй frontend для нового внутреннего инструмента согласно руководству PMA.
Настрой маршрутизацию и управление состоянием в проекте на React 19 + Vite 8.
Проверь соответствие UI-компонентов политике shadcn/ui (base-nova) в текущем проекте.

Что понадобится

  • Среда с React 19, TypeScript, Vite 8, Bun.
  • Управление проектом через PMA (workflow, approval, task tracking).

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «pma-web» из репозитория: # https://github.com/zzci/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r pma-web/ ~/.claude/skills/pma-web/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.