writeme-editor

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.

Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, or staggered text reveals. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text". Also transitions reveal, transitions review, transitions apply.

Use when styling editor content elements — paragraphs, headings/titles, callout blocks, hashtag mentions, or links — especially when choosing text, background, or border colors for those elements inside the Tiptap editor. Trigger on any color decision for editor-rendered prose content.

Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

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.

Use when: setting up @g4rcez/components in a new project, migrating native HTML elements or hand-rolled UI to this design system, building any React UI that should use @g4rcez/components, or when the user's project already has @g4rcez/components as a dependency. Covers installation, Tailwind v3 preset, Tailwind v4 CSS-first setup, theming with createTokenStyles/TokenRemap, ComponentsProvider/tweaks, parsers, the full component catalog (components, hooks, React, UI, design-system, tokens, Tailwind, forms, modals, notifications, tables, calendar, theming), and native-element migration.

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.

Use when adding or debugging keyboard shortcuts in Tiptap extensions, especially when shortcuts involving Cmd/Ctrl (Mod-a, Mod-z, etc.) silently fail or browser default behavior overrides the handler.