Skill Create Dialog

«Написать инструкции навыка» — диалог создания навыка: название, описание, инструкции.

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { SkillCreateDialog } from "@/components/ui/skill-create-dialog";

export default function Particle() {
  const [open, setOpen] = React.useState(false);
  const [name, setName] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [instructions, setInstructions] = React.useState("");

  return (
    <>
      <Button onClick={() => setOpen(true)} variant="outline">
        Написать инструкции навыка
      </Button>
      <SkillCreateDialog
        description={description}
        instructions={instructions}
        name={name}
        onCancel={() => setOpen(false)}
        onCreate={() => setOpen(false)}
        onDescriptionChange={setDescription}
        onInstructionsChange={setInstructions}
        onNameChange={setName}
        onOpenChange={setOpen}
        open={open}
      />
    </>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/skill-create-dialog

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

import { SkillCreateDialog } from "@/components/ui/skill-create-dialog";
 
<SkillCreateDialog
  open={open}
  onOpenChange={setOpen}
  name={name}
  onNameChange={setName}
  description={description}
  onDescriptionChange={setDescription}
  instructions={instructions}
  onInstructionsChange={setInstructions}
  saving={saving}
  issues={issues}
  onCreate={save}
  onCancel={() => setOpen(false)}
/>

API

Презентационный (plain-props): приложение владеет сохранением (PATCH /api/skills) и валидацией. В режиме editing имя навыка заблокировано.

Prop	Тип	Описание
`open` / `onOpenChange`	`bool` / `(v)=>void`	Состояние диалога.
`editing`	`bool`	Режим редактирования — имя заблокировано.
`name` / `onNameChange`	`string`	Имя навыка (id).
`description` / `onDescriptionChange`	`string`	Когда применять навык.
`instructions` / `onInstructionsChange`	`string`	Тело SKILL.md.
`issues`	`string[]`	Ошибки валидации.
`saving`	`bool`	Идёт сохранение.
`onCreate` / `onCancel`	`()=>void`	Создать / отмена.

На этой странице

Установка Использование API