agentic-skills

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).

Apply core programming principles and design patterns from Clean Code, The Pragmatic Programmer, Code Complete, Refactoring, and Design Patterns. Use when writing code, reviewing PRs, refactoring, or designing system architecture.

Describe what the `desync-behavior-check` skill does and when to use it.

Build Go web servers with Echo framework — HTTP/2, WebSocket, SSE, JWT auth, file handling, TLS, middleware, proxying, and production patterns. Use when building Go HTTP servers or implementing web protocols.

Apply senior-level software engineering discipline including design patterns, SOLID principles, architectural reasoning, systematic verification, and safety gates. Use when writing production code, complex features, reviewing code, refactoring systems, or when engineering rigor and correctness are required. Supports both quick reference lookup and full step-by-step process mode.

Design patterns adapted for Go's philosophy. Use when writing Go code, reviewing Go architecture, translating OOP patterns to idiomatic Go, or applying design patterns in a non-OOP language.

Comprehensive standards for building production-grade Go applications including architecture, concurrency, security, testing, and best practices. Use when writing, reviewing, or architecting Go code.

Integrate Lenis smooth scroll into React and Next.js projects. Use when the user wants smooth scrolling, scroll-linked animations, parallax effects, GSAP ScrollTrigger sync, Framer Motion sync, programmatic scroll-to navigation, or scroll event listening in a React app. Covers ReactLenis provider setup, useLenis hook, custom scroll containers, SSR/Next.js considerations, and accessibility.

Build and maintain flow-based UIs with React Flow v12 using @xyflow/react (FREE version). Use for node editors, workflow builders, pipeline designers, DAG editors, visual builders, custom nodes/edges, viewport control, serialization, and production React Flow architecture.