dnd-kit-implementation
dnd-kit Implementation Guide
Overview
This skill provides patterns for implementing drag-and-drop functionality using dnd-kit library that supports both sortable containers and droppable targets simultaneously.
Core Concept
The key to combining useSortable and useDroppable is conditional logic based on drag context:
- When dragging items → containers act as drop-only targets
- When dragging containers → containers act as sortable elements
This is achieved by detecting what's currently being dragged and enabling only the appropriate functionality.
Implementation Pattern
Container Component Structure
More from atman-33/skills
tech-article-humanizer
Transform technical article drafts or source materials into human-like, high-quality Japanese technical articles. Use this skill when the user wants to generate, rewrite, or humanize technical articles (especially about TypeScript, JavaScript, React, or frontend topics) following specific human-writing patterns and style guidelines. Triggers include requests like "記事を人間風に", "tech article を生成", "humanize this article", or providing article source materials.
4agent-memory
Use this skill when the user asks to save, remember, recall, or organize memories. Triggers on phrases like 'remember this', 'save this', 'note this', 'what did we discuss about...', 'check your notes', 'clean up memories'. Also use proactively when discovering valuable findings worth preserving.
2react-router-v7-app
Implements React Router v7 app structure, routing patterns, and component templates. Use when creating or modifying React Router v7 applications to ensure consistent folder structure, data loading patterns, and component architecture.
2pr-assistant
Analyzes git changes and assists with creating comprehensive pull requests. Use when user wants to create a PR, review changes before PR, or needs help drafting PR descriptions. Triggers on phrases like 'create PR', 'make a pull request', 'draft PR description', 'what changed in this branch', 'prepare PR'.
1openspec-bulk-archive-change
Archive multiple completed changes at once. Use when archiving several parallel changes.
1serena-skills
Standalone Serena MCP tools for code intelligence - symbol search, file ops, memory, editing, config, workflow helpers, and shell execution without MCP server
1