Menu
Use when creating or modifying modal dialogs in the web-react application
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/crathgeb/potato-cannon --skill potatocreating-modalsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Use this skill to add comments or notes to an existing task. Comments help track progress, document decisions, or explain issues.
You MUST use this anytime you want to ask the user a question or feel like something is unclear. If you think you want to use the AskUserQuestion tool, first invoke this skill, we may have a different way of asking the user a question.
You MUST use this skill in order to create, update, edit, or build artifacts or files. Artifacts can be of any type but are typically markdown files.
Based on SOC occupation classification
Showing SKILL.md
| name | potato:creating-modals |
| description | Use when creating or modifying modal dialogs in the web-react application |
This skill documents the correct patterns for creating modal dialogs in the web-react application.
All modals use the Radix UI-based Dialog components from @/components/ui/dialog:
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
The dialog component uses the project's theme variables by default:
bg-bg-secondaryborder-bordertext-text-primarytext-text-secondaryThese are baked into the base DialogContent, DialogTitle, and DialogDescription components, so you typically don't need to override them.
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent>
<>
Modal Title
Description text explaining what this modal does.
{/* Modal body content */}
{/* Form fields, content, etc. */}
setIsOpen(false)}>
Cancel
Confirm
</>
For destructive actions, use a warning icon and destructive button variant:
import { AlertTriangle } from "lucide-react";
<Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<DialogContent>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-accent-red" />
Delete Item?
</DialogTitle>
<DialogDescription>
Are you sure you want to delete this item? This action cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button
variant="outline"
onClick={() => setShowDeleteDialog(false)}
disabled={isDeleting}
>
Cancel
</Button>
<Button
variant="destructive"
onClick={handleDelete}
disabled={isDeleting}
>
{isDeleting ? "Deleting..." : "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>;
For modals with form inputs:
<Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Add Item</DialogTitle>
<DialogDescription>
Fill out the form below to add a new item.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="space-y-2">
<label htmlFor="field-name" className="text-sm text-text-secondary">
Field Label
</label>
<input
id="field-name"
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Enter value"
disabled={isSubmitting}
className="w-full bg-bg-tertiary border border-border rounded-md px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
/>
</div>
{error && <p className="text-sm text-accent-red">{error}</p>}
</div>
<DialogFooter>
<Button variant="outline" onClick={handleClose} disabled={isSubmitting}>
Cancel
</Button>
<Button onClick={handleSubmit} disabled={!isValid || isSubmitting}>
{isSubmitting ? (
<>
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
Saving...
</>
) : (
"Save"
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
Use these classes for form inputs inside modals:
className =
"w-full bg-bg-tertiary border border-border rounded-md px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent";
Or use the Input component from @/components/ui/input if available.
const [showModal, setShowModal] = useState(false);
// In stores/appStore.ts
addProjectModalOpen: boolean
openAddProjectModal: () => void
closeAddProjectModal: () => void
// Usage
const isOpen = useAppStore((s) => s.addProjectModalOpen)
const closeModal = useAppStore((s) => s.closeAddProjectModal)
When creating a modal:
@/components/ui/dialogDialogContent (theme styles are built-in)DialogHeader with DialogTitle and DialogDescriptionDialogFooter with Cancel and primary action buttonsdisabled prop on buttonsvariant="destructive" for dangerous actions