Systematic UI/UX behaviour analysis for interactive applications. Audits every user action, state transition, view mode, and edge case like an experienced QA + UX engineer. Produces a complete interaction matrix with expected vs actual behaviour, finds inconsistencies, dead states, and missing feedback. Use when reviewing UI behaviour, before shipping features, or when something "feels off" but you can't pinpoint why.
Build complete, production-grade design token systems for web apps. Covers color ramps (OKLCH), spacing (4px grid), typography scales, component sizing, surface elevation, motion, density modes, grid systems, accessibility auditing, and cross-file consistency. Use when creating a design system from scratch, auditing an existing one, migrating to Tailwind v4 + shadcn/ui tokens, or when the user mentions design tokens, theming, or a complete visual foundation. Outputs CSS custom properties, TypeScript pattern libraries, documentation, and HTML showcases.
Design and improve frame-based character animations for avatar/expression systems. Use when working on tick-based animation arrays, expression timing, blink cycles, idle loops, or mouth movement for a desktop character or mascot. Applies Disney's 12 animation principles concretely: asymmetric blinks, secondary actions, slow-in/slow-out, speaking rhythm, and idle personality.
Writes or rewrites project README files using repository evidence instead of generic filler. Use when creating a new README, improving an existing README, or auditing an LLM-written README for inaccuracies, missing setup details, weak quickstarts, unclear audience fit, vague feature claims, or poor presentation choices.
Guide for writing idiomatic Rust code based on Apollo GraphQL's best practices handbook. Use this skill when: (1) writing new Rust code or functions, (2) reviewing or refactoring existing Rust code, (3) deciding between borrowing vs cloning or ownership patterns, (4) implementing error handling with Result types, (5) optimizing Rust code for performance, (6) writing tests or documentation for Rust projects.
Core UI/UX design principles for building production interfaces. Covers typography systems (scale ratios, line height rules, tracking), color theory (contrast, semantic mapping, warmth), spacing grids (4px/8px systems), visual hierarchy (elevation, density, depth), motion design (easing selection, duration, reduced motion), accessibility (WCAG AA/AAA, touch targets, focus management), responsive layout (breakpoints, fluid scaling), and component patterns (buttons, cards, forms, badges). Use when designing interfaces, reviewing designs for quality, building components, choosing fonts/colors/spacing, or when the user asks about UI best practices, accessibility, or visual polish.
Build flow-based SaaS UIs using React Flow v12 (@xyflow/react). Use this skill whenever the user mentions nodes, edges, flow diagrams, workflow builders, pipeline editors, DAGs, canvas UIs, node-based editors, or anything involving draggable/connectable components. Also trigger for state management with Zustand in a flow context, custom node/edge types, handle connections, layout algorithms (dagre/elk), undo/redo in flows, and drag-and-drop onto a canvas. Stack: React + Tailwind + shadcn/ui + lucide-icons + Zustand. Free tier only.
One consolidated skill that behaves like a Staff/Senior SDE-3 engineer specializing in React/Next.js. It enforces environment gating, architecture-first reasoning, pattern gating, tests-as-output, negative-doubt self-verification, and React/Next.js constraints (RSC-first, SEO, a11y, Core Web Vitals, Zustand hierarchy, Tailwind + shadcn/ui + lucide-react).