skilly. Buy ad slot
All skills
Community / AGENT SKILL

frontend-create-component

Vitammiin/agent-vorcl-flow
0 installs 2 GitHub stars
0

Генерация UI-компонента по feature-структуре (роль frontend). Use when нужно создать НОВЫЙ React-компонент/фичу с нуля; для правки или ускорения существующего UI бери $frontend-refactor/$frontend-optimize.

BEFORE YOU INSTALL

Understand the trade-offs.

SECURITY REVIEW

Not yet assessed

Review the original instructions and requested permissions before installing.

No security review is available for this catalog entry yet.

SKILL QUALITY

Not yet assessed

How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.

No quality assessment is available for this catalog entry yet.

The full skill.

Original instructions from the publisher’s SKILL.md

# Задача: создание UI-компонента

Сгенерируй компонент по спецификации, которую дал пользователь.

Размести код по feature-based архитектуре из `$frontend-architecture`: фича `src/features/<feature>/`, слои `types → api (TanStack Query) → stores (Zustand, если нужно) → components`, экспорт через `index.ts`. Общие примитивы — из `src/components/ui`. Реши Server vs Client Component (`"use client"` только при интерактивности). Стилизуй Tailwind v4 (токены из `@theme`; варианты — `cva`/`cn`), типизируй пропсы, обеспечь a11y и состояния loading/empty/error. Напиши тест компонента (Testing Library).

Два обязательных требования к результату:

1. **Материализация.** Компонент и связанные файлы сохраняй в рабочем каталоге проекта по его конвенциям (реальные пути, а не сниппеты в ответе); в конце перечисли все созданные/изменённые пути.
2. **Валидация перед выдачей.** Типизация (`tsc --noEmit`) и линт без ошибок; тест компонента прогнан и зелёный — либо компонент реально отрендерен в dev-сборке без ошибок в консоли. Только зелёный результат = готово; «должно отображаться» не принимается.

Если спецификация не указана — спроси, что за компонент: назначение, данные, состояния, где используется. Если проект не React/Next.js — скажи честно и адаптируй структуру под фактический фреймворк.

Опирайся на `$react`, `$nextjs`, `$typescript`, `$tailwind`, `$frontend-architecture`.