peixotorms/odinlayer-skills

Use when building UI components with Tailwind CSS — buttons, forms, inputs, selects, checkboxes, toggles, badges, avatars, dropdowns, modals, dialogs, notifications, alerts, tables, lists, cards, tabs, accordions, tooltips, popovers. Covers HeadlessUI integration, component composition, data-attribute styling, polymorphic components, className helpers, clsx, focus management, transition patterns, slot patterns.

Use when writing, reviewing, or refactoring Tailwind CSS code. Covers tailwind, tailwindcss, utility classes, responsive design, dark mode, CSS, frontend, className, tw-merge, clsx, color system, typography, spacing, borders, rings, outlines, state variants, hover, focus, focus-visible, group-hover, data attributes, container queries, breakpoints, mobile-first, text-pretty, text-balance, opacity modifiers, @theme directive, @utility, Tailwind v4 CSS-first configuration, and common anti-patterns.

Use when building with HeadlessUI for Vue — unstyled, accessible UI components. Covers compound component API, v-slot props, as prop, Dialog, Menu, Listbox, Combobox, Switch, Disclosure, Popover, RadioGroup, Tabs, TransitionRoot/TransitionChild, Floating UI positioning, focus management, keyboard navigation, ARIA patterns, and playground examples via MCP tools.

Use when building marketing pages, landing pages, homepages, about pages, pricing pages, or promotional content with Tailwind CSS. Covers hero sections, call-to-action sections, feature sections, pricing tables, testimonials, team sections, FAQ sections, blog sections, newsletter forms, footers, logo clouds, stats sections, bento grids, contact forms, banners, 404 pages, headers with flyout menus.

Use when building payment processing, handling credit card data, PAN, CVV, cardholder data environment (CDE), implementing checkout flows, tokenization, Stripe, Braintree, or any code that touches cardholder information — PCI DSS v4.0 coding patterns, SAQ selection, data classification, AES-256 encryption, TLS 1.2, audit log, data masking, Luhn validation, payment gateway integration, 3-D Secure, scope reduction, network segmentation

Use when building WooCommerce payment gateways, checkout integrations, or payment processing. Covers WC_Payment_Gateway, WC_Payment_Gateway_CC, process_payment, process_refund, tokenization, saved payment methods, init_form_fields, validate_fields, wc_add_notice, Block Checkout (AbstractPaymentMethodType, wc.wcBlocksRegistry, registerPaymentMethod), cart_checkout_blocks compatibility, and classic-to-block checkout migration.

Use when optimizing PHP performance, configuring OPcache or JIT, setting up caching (Redis, Memcached), tuning database queries (PDO), choosing faster function alternatives, managing memory, or profiling. Covers OPcache configuration, opcache.validate_timestamps, preload, preloading, php.ini tuning, memory_limit, realpath_cache, JIT tracing, micro-optimizations, function choices, loops, casting, memory management, connection pooling, lazy loading, N+1 query problem, SPL data structures, SplFixedArray, PDO best practices, caching patterns, Xdebug profiler, and Blackfire production profiling.

Use when hooking into WooCommerce events, adding custom checkout fields, modifying cart behavior, or extending WooCommerce admin. Covers woocommerce_new_order, woocommerce_checkout_order_processed, woocommerce_payment_complete, woocommerce_order_status_changed, woocommerce_order_status_{status}, woocommerce_add_to_cart, woocommerce_cart_calculate_fees, woocommerce_before_calculate_totals, woocommerce_checkout_fields, woocommerce_checkout_process, woocommerce_product_options_general_product_data, woocommerce_process_product_meta, woocommerce_email_classes, woocommerce_settings_tabs_array, settings pages, custom WC_Email classes, WP-CLI wc commands, and WC_Unit_Test_Case testing patterns.

Use when starting a new WooCommerce extension, setting up plugin headers, checking WooCommerce availability, declaring HPOS and block checkout compatibility with FeaturesUtil, or understanding WooCommerce extension architecture. Covers Requires Plugins header, WC requires at least, WC tested up to, before_woocommerce_init, declare_compatibility for custom_order_tables and cart_checkout_blocks, plugins_loaded initialization, class_exists WooCommerce check, and Interactivity API store privacy (lock true).

Use when building ecommerce interfaces, product pages, shopping carts, checkout flows, order management, or store navigation with Tailwind CSS. Covers product cards, product lists, product detail pages, category filters, shopping cart, checkout forms, order summaries, order history, pricing displays, promo sections, reviews, ratings, store navigation, category previews, inventory badges, wishlist buttons, compare features.

Use when working with WooCommerce orders, products, or customers. Covers HPOS (High-Performance Order Storage, OrdersTableDataStore, custom_order_tables), wc_get_order, wc_get_orders, WC_Order CRUD methods (get_total, get_status, get_meta, set_status, update_meta_data, save), wc_get_product, WC_Product types (simple, variable, variation, grouped, external), WC_Customer, WC_Data, meta_query, Store API (/wc/store/v1/, ExtendSchema, CartItemSchema), WooCommerce REST API (/wc/v3/, consumer key authentication), and wc_get_container DI container.