메뉴
Use when adding, changing, or migrating icons in a frontend project. Enforces @phosphor-icons/react with the duotone weight, Icon-suffixed names, and the IconContext.Provider global default pattern. Forbids lucide-react.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use whenever displaying, formatting, or outputting dates in this codebase — including createdAt, updatedAt, lastSynced, or any other Date value shown in UI components, tables, dialogs, or lists. Trigger on any date rendering decision, especially when reaching for .toLocaleDateString(), .toLocaleString(), or Intl.DateTimeFormat for display purposes.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Git and GitHub wizard using gh CLI for all git operations and GitHub interactions
Comprehensive guide for building React + TypeScript frontend applications with community best practices. Use this skill whenever the user asks to create, refactor, or review React components, hooks, pages, or any frontend code involving React and TypeScript. Also trigger when the user mentions: component architecture, React patterns, TypeScript typing for React, state management setup, frontend project structure, TailwindCSS component styling, frontend testing, accessibility in React, or asks to scaffold a new feature. This skill adapts to the project's existing conventions by reading config files before applying rules. Even if the user doesn't explicitly say "React" — if they mention components, hooks, pages, forms, modals, or frontend features, use this skill.
Correct patterns for text selection dispatch and scroll in the writeme-editor Tiptap instance. Use when implementing selection navigation, find/replace, search result highlighting, or any code that scrolls to a ProseMirror position in this editor. Trigger on editor.commands.setTextSelection, scrollIntoView, scrollTo, coordsAtPos, or any navigation to a match/result in the editor.
Diagnose and fix image paste/drop in Tiptap editors. Use when image paste is broken, images don't appear after paste, or drop insertion fails. Covers FileHandler extension, editorProps.handlePaste, and Electron IPC async pitfalls.
| name | phosphor-icons |
| description | Use when adding, changing, or migrating icons in a frontend project. Enforces @phosphor-icons/react with the duotone weight, Icon-suffixed names, and the IconContext.Provider global default pattern. Forbids lucide-react. |
Always use @phosphor-icons/react. Never import from lucide-react. All icons must use the Phosphor Icon-suffixed export name. The default weight is duotone, set globally — do not add weight props at call sites unless intentionally overriding.
// Correct: named import with Icon suffix
import { ShieldIcon, ArrowLeftIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
// Wrong: no suffix, or from wrong package
import { Shield } from "@phosphor-icons/react"; // missing suffix
import { ShieldIcon } from "lucide-react"; // wrong package
import { Shield as ShieldIcon } from "lucide-react"; // wrong package + alias
Set once at the React root in src/main.tsx. Do not repeat weight="duotone" at every call site.
import { IconContext } from "@phosphor-icons/react";
<IconContext.Provider value={{ weight: "duotone" }}>
<App />
</IconContext.Provider>;
Override per-icon only when intentional:
<CheckCircleIcon weight="fill" /> // override for one icon only
Use the Icon type exported from @phosphor-icons/react (replaces the old LucideIcon type from lucide-react).
import type { Icon } from "@phosphor-icons/react";
interface CardProps {
icon: Icon;
}
from "lucide-react" import remains in the fileIcon (e.g. ShieldIcon, not Shield)as *Icon alias in imports (redundant — Phosphor already has the suffix)weight="duotone" prop on individual icons (default is set globally)Icon from @phosphor-icons/react, not LucideIconKey differences (names that don't follow the simple Foo → FooIcon pattern):
| Lucide | Phosphor |
|---|---|
| Search | MagnifyingGlassIcon |
| Home | HouseIcon |
| Settings / Settings2 | GearIcon |
| ChevronDown/Left/Right/Up | CaretDown/Left/Right/UpIcon |
| EnvelopeIcon | |
| Filter | FunnelIcon |
| LogOut | SignOutIcon |
| Trash2 | TrashIcon |
| Sparkles | SparkleIcon |
| Loader / Loader2 | CircleNotchIcon |
| Edit / Edit2 / Edit3 | PencilSimpleIcon |
| ExternalLink | ArrowSquareOutIcon |
| EyeOff | EyeSlashIcon |
| HelpCircle | QuestionIcon |
| Layers | StackIcon |
| LayoutDashboard | SquaresFourIcon |
| LayoutGrid | GridFourIcon |
| Grid3x3 | GridFourIcon |
| MoreVertical | DotsThreeVerticalIcon |
| BarChart2 / BarChart3 | ChartBarIcon / ChartBarHorizontalIcon |
| PieChart | ChartPieIcon |
| TrendingUp / TrendingDown | TrendUpIcon / TrendDownIcon |
| Pin / PinOff | PushPinIcon / PushPinSlashIcon |
| WifiOff | WifiSlashIcon |
| Maximize2 / Minimize2 | ArrowsOutIcon / ArrowsInIcon |
| RefreshCw | ArrowsCounterClockwiseIcon |
| Share2 | ShareIcon |
| Link2 | LinkIcon |
| DollarSign | CurrencyDollarIcon |
| Bitcoin | CurrencyBtcIcon |
| XLogoIcon | |
| FacebookLogoIcon | |
| InstagramLogoIcon | |
| LinkedinLogoIcon | |
| Youtube | YoutubeLogoIcon |
| Save | FloppyDiskIcon |
| Scale | ScalesIcon |
| Zap | LightningIcon |
| ZoomIn / ZoomOut | MagnifyingGlassPlusIcon / MagnifyingGlassMinusIcon |
| SearchX | MagnifyingGlassMinusIcon |
| MessageSquare | ChatTextIcon |
| MessageCircle | ChatCircleIcon |
| MessageCircleMore | ChatCircleDotsIcon |
| MessageSquareWarning | WarningCircleIcon |
| AlertCircle | WarningCircleIcon |
| AlertTriangle | WarningIcon |
| AlertOctagon | WarningOctagonIcon |
| Smile / Meh / Frown | SmileyIcon / SmileyMehIcon / SmileySadIcon |
| Bot | RobotIcon |
| Smartphone | DeviceMobileIcon |
| Store | StorefrontIcon |
| Server | ComputerTowerIcon |
| Award | TrophyIcon |
| Gem | DiamondIcon |
| Inbox | TrayIcon |
| Bookmark | BookmarkSimpleIcon |
| Music / Music2 | MusicNoteIcon |
| AudioLines | WaveformIcon |
| Logs | ListBulletsIcon |
| Languages | TranslateIcon |
| Workflow | FlowArrowIcon |
| Radar | BroadcastIcon |
| Ban | ProhibitIcon |
| ShieldAlert | ShieldWarningIcon |
| ShieldX | ShieldSlashIcon |
| ShieldQuestion | ShieldChevronIcon |
| UserRound / UsersRound | UserIcon / UsersIcon |
| UserCircle2 | UserCircleIcon |
| UserSearch | UserListIcon |
| UserX | UserMinusIcon |
| WalletCards | WalletIcon |
| Forward | ArrowBendRightUpIcon |
| Reply | ArrowBendUpLeftIcon |
| Send | PaperPlaneTiltIcon |
| ClipboardList | ClipboardTextIcon |
| FileArchive | FileArchiveIcon |
| FileSearch | FileSearchIcon |
| FileVideo | FileVideoIcon |
| FileDown / FileUp | FileArrowDownIcon / FileArrowUpIcon |
| Plane | AirplaneIcon |
| PlaneTakeoff | AirplaneTakeoffIcon |
| Unlock | LockOpenIcon |
| SquareX | XSquareIcon |
| ArrowUpDown | CaretUpDownIcon |
| Building2 | BuildingOfficeIcon |