Claude Skills by SkyyRoseLLC

Multi-platform content distribution across X, LinkedIn, Threads, and Bluesky, adapting each post per platform and never posting identical copy cross-platform. Use when the user wants one message distributed across social platforms. Do NOT use for authoring the content from scratch (content-engine) or for full launch orchestration across channels and email (marketing-campaign).

CSS accessibility audit and fixes. Checks focus-visible styles, reduced motion support, contrast preferences, forced-colors mode, visually-hidden patterns, touch target sizes, color contrast ratios, color-only indicators, skip links, and reading order. Use when auditing accessibility, fixing a11y issues, adding focus styles, supporting reduced motion, improving contrast, or making CSS accessible.

Create performant CSS animations using composited properties, scroll-driven animations, View Transitions, and @keyframes choreography. Always includes prefers-reduced-motion fallback. Use when the user asks for CSS animation, transition, scroll animation, view transition, keyframes, hover effect, entrance animation, or motion design.

Deep CSS quality audit that scores architecture, specificity, redundancy, accessibility, performance, and modernity on a 0-10 scale. Flags anti-patterns and generates a prioritized fix plan. Report-only — does not modify code. Use when the user asks for a CSS audit, CSS review, stylesheet quality check, CSS health check, or CSS score.

CSS cascade, specificity, and selector-weight discipline for large legacy stylesheets (50+ plain-CSS files, no build-time scoping). Use when adding, changing, or reviewing CSS in wordpress-theme/skyyrose-flagship — a color/typography override, a new component rule, a scoped reset, or a "the style isn't applying" investigation. Do NOT use for React/CSS-Modules/Tailwind work where the compiler already scopes selectors (use frontend-patterns), and do NOT use it as the .min build checklist (that ...

Systematic CSS debugging. Covers specificity analysis, inheritance tracing, computed value inspection, layout debugging (overflow, unexpected sizing, collapsing margins), CSS containment issues, z-index stacking context mapping, custom property resolution chains, and paint/layout performance diagnosis. Uses outline technique for visual debugging. Use when debugging CSS, fixing layout bugs, resolving specificity conflicts, tracing z-index issues, or diagnosing rendering performance.

Expert CSS guidance for writing modern, performant, accessible CSS. Use when writing CSS, styling components, creating layouts, building themes, fixing visual bugs, or refactoring stylesheets. Activates automatically for any CSS-related task. Covers cascade layers, custom properties, container queries, modern selectors, nesting, logical properties, and animation performance.

Create or fix layouts using modern CSS Grid, Flexbox, container queries, and logical properties. Includes a Grid vs Flexbox decision tree and patterns for common layouts. Use when the user asks for a CSS layout, grid layout, flexbox layout, sidebar layout, holy grail, card grid, centering, or layout fix.

Upgrade legacy CSS to modern standards. Scans stylesheets for outdated patterns (floats, clearfix, vendor prefixes, old flexbox syntax, px media queries, @import, !important abuse) and replaces them with modern equivalents. Introduces cascade layers, extracts design tokens, and consolidates redundancy. Use when refactoring CSS, modernizing stylesheets, upgrading legacy code, removing vendor prefixes, or replacing floats with grid/flexbox.

Modern responsive design using container queries, fluid typography, responsive images, logical properties, viewport units, intrinsic sizing, and preference queries. Prioritizes container queries over media queries. Use when the user asks for responsive CSS, responsive design, mobile layout, fluid typography, responsive images, dark mode, prefers-reduced-motion, or adaptive design.

Build theming systems with modern CSS. Covers custom properties architecture (primitive, semantic, component tokens), oklch/oklab color spaces, color-mix() for tints and shades, light-dark() for automatic dark mode, @property for typed custom properties, multiple theme support, contrast themes, and forced-colors mode. Use when building a theme, adding dark mode, creating color systems, setting up design tokens, or implementing color schemes.

Safe schema and data migrations — expand/contract, concurrent indexes, batched backfills, rollback strategy — across PostgreSQL/MySQL and Alembic (this repo's canonical tool), Prisma, Drizzle, Kysely, Django, golang-migrate. Use when a model/table/column/index changes, a backfill is needed, or migration tooling is being set up or repaired. Do NOT use for query tuning and index *selection* on an unchanged schema (that is postgres-patterns), for Redis key/TTL design (redis-patterns), or for bri...

Multi-source deep research using firecrawl and exa MCPs. Searches the web, synthesizes findings, and delivers cited reports with source attribution. Use when the user wants thorough research on any topic with evidence and citations. Do NOT use for questions about this codebase (read the code), single-fact lookups one search answers, or library/API docs (Context7 first).

Visual QC of a running UI — captures screenshots via `openwolf designqc`, then reviews them against modern UI standards (DevSkyy dashboard) or SkyyRose brand canon (WP theme). Use when the user asks to check, evaluate, or improve the design/UI of the DevSkyy app or the SkyyRose theme. Do NOT use for choosing or migrating a component framework (that is `reframe`) or for building net-new UI from scratch (that is `frontend-design` / `fashion-theme-architect`).

Generate or audit a design-token system, score visual consistency, and detect AI-slop patterns. Use when starting a project that needs tokens, auditing a codebase for palette/type/spacing drift, or reviewing a PR that touches styling. Do NOT use for one-off component styling (use frontend-design) or for SkyyRose brand-taste judgments (use luxury-design-taste — the tokens there are already locked and are not yours to regenerate).

DevSkyy dashboard (devskyy.app) implementation patterns — Next.js 16 App Router, React 19, auth gating, admin pages, WP/WC data wiring. Use for any frontend/ work — pages, components, API routes, deployment. Encodes hard-won production lessons (bug-161, bug-162, Vercel quirks).

Coding patterns extracted from DevSkyy git history (200 commits analyzed 2026-06-10). Commit conventions, hot-surface workflows, co-change rules (CSS→.min rebuild, source→.wolf docs), and testing layout. Use when committing, editing theme assets, or onboarding a session to this repo's actual practices.

Multi-agent orchestration using dmux (tmux pane manager for AI agents). Patterns for parallel agent workflows across Claude Code, Codex, OpenCode, and other harnesses. Use when running multiple agent sessions in parallel or coordinating multi-agent development workflows.

Docker and Docker Compose patterns for local development, container security, networking, volume strategies, and multi-service orchestration. Use when authoring or debugging a Dockerfile / compose file, bringing the local DevSkyy stack up, or diagnosing container networking, healthcheck, or volume failures. Do NOT use for production orchestration on Fly/Vercel/Kubernetes, for WordPress theme deploys (that is wp-deploy — skyyrose.co is WP.com Atomic, not containerized), or for schema changes i...

Neural search via Exa MCP for web, code, and company research. Use when the user needs web search, code examples, company intel, people lookup, or AI-powered deep research with Exa's neural search engine.

Video and audio generation via the fal.ai MCP — text/image-to-video (Seedance, Kling v3, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user asks to generate a video, a voiceover, music, or a sound effect with AI. Do NOT use for product or still imagery — SkyyRose product renders are OpenAI `gpt-image-2` only, via the `ai-image-generation` skill — and do NOT use for editing or assembling clips that already exist (that is video-editing / ffmpeg work, not generat...

Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.

Set an ECC-specific frontend design direction — Purpose / Audience / Tone / Memorable-detail / Constraints — BEFORE any UI code is written. Use when a website, dashboard, app, component, or landing page needs a decided direction, or when existing UI reads flat, generic, or mismatched to its audience. Do NOT use for implementation once the direction is settled (that is `frontend-design`), for token-system generation or drift audits (`design-system`), or for SkyyRose brand-canon calls (`luxury-...

Build production-grade frontends grounded in the user's existing codebase, framework, and design system. Read first, design second. Defaults: accessible (WCAG 2.2 AA), performant (Core Web Vitals budgeted), responsive (mobile-first). Use when building or restyling a page, view, component, or layout in a real codebase and the aesthetic register still has to be chosen — picks calm-editorial / dense-utility / expressive-brand from product context rather than impulse. Do NOT use for SkyyRose bran...

React/Next.js structural patterns — component composition, custom hooks, state layering, data fetching, memoization, virtualization, forms, and error boundaries — as practised in the devskyy dashboard at frontend/. Use when building or reviewing a component, hook, API route, or state container under frontend/ (Next.js 16 + React 19). Do NOT use for the WordPress theme (no React — that is skyyrose-wp-platform / css-cascade-discipline), and do NOT use for animation specifics (motion-ui) or acce...

Specialized architect for building augmented reality, 3D, and immersive shopping experiences — across ANY output format (React JSX, standalone HTML/CSS/JS, WordPress/WooCommerce PHP, Python backends, or any other language). Use this skill whenever the user mentions: 3D product viewers, virtual try-on, AR fitting rooms, immersive brand showrooms, 3D collection environments, interactive drop pages, Three.js, React Three Fiber, A-Frame, model-viewer, WebXR, GSAP cinematic scroll, Lottie animatio...

Expert knowledge in building interactive, dynamic web experiences with React, Vue, Svelte, animations, and user interactions. Triggers on keywords like "interactive", "animation", "dynamic", "react", "vue", "svelte", "gsap", "framer motion", "scroll animations", "parallax", "hover effects", "transitions".

Create and update pitch decks, one-pagers, investor memos, accelerator applications, financial models, and fundraising materials that stay internally consistent across every asset. Use when the user needs investor-facing documents, projections, use-of-funds tables, or milestone plans. Do NOT use for the underlying market study (market-research), for outbound investor emails (investor-outreach), or for customer-facing launch copy (marketing-campaign).

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

Luxury streetwear design taste for SkyyRose surfaces — visual hierarchy, restraint, materials, motion, and imagery treatment. Use when doing any visual design, design review, or elevation work on skyyrose.co or the DevSkyy dashboard (mockups, theme CSS, hero sections, collection pages, motion passes). Do NOT use for generic non-SkyyRose UI work (use frontend-design) or native iOS glass surfaces (use liquid-glass-design). Replaces the lost high-end-visual-design / design-taste-frontend / image...

Conduct market research, competitive analysis, investor due diligence, and industry intelligence with source attribution and decision-oriented summaries. Use when the user wants market sizing, competitor comparisons, fund research, technology scans, or research that informs a business decision. Do NOT use for building the investor-facing documents themselves (investor-materials) or for campaign copy derived from the findings (marketing-campaign).

End-to-end marketing campaign planning and execution — audience research, positioning, campaign angle, landing page copy, email sequences, social posts, ad copy, video scripts, and content calendars. Use when orchestrating a multi-channel product launch from one brief. Do NOT use for a single asset (content-engine for a post, article-writing for a piece, crosspost for distribution only) or for the underlying market study (market-research).

Production-ready React/Next.js motion system (Framer Motion / Motion for React) covering tokens, AnimatePresence, reduced motion, and SSR safety. Use when adding or reviewing animation in frontend/ — a new motion.* component, an AnimatePresence enter/exit, a scroll-linked transform, or a jank/hydration complaint about an animated dashboard surface. Do NOT use for the WordPress theme's vanilla-CSS/Three.js motion (no React there — use css-cascade-discipline for keyframes and skyyrose-3d-web-os...

Next.js 16+ with Turbopack — the default dev bundler, its filesystem cache, module-trace (NFT) failures, and when to fall back to webpack. Use when developing or debugging a Next.js 16+ app, diagnosing slow `next dev` startup or HMR, reading a `next build` route table, or resolving a Turbopack-specific build error such as "Encountered unexpected file in NFT list". Do NOT use for Next.js App Router semantics — RSC boundaries, `<Suspense>` under `cacheComponents`, data fetching (that is `intera...

PostgreSQL patterns for query optimization, schema design, indexing, RLS, and connection pooling. Use when writing or reviewing SQL against the devskyy Postgres, choosing an index, diagnosing a slow query, or hardening database security. Do NOT use for versioning schema changes (that is database-migrations — Alembic owns every DDL change here), for Redis/cache semantics (redis-patterns), or for the container/compose layer around the database (docker-patterns).

Python best practices, security patterns, type hints, async patterns, and Pythonic idioms for FastAPI/Django projects.

Redis data structure patterns, caching strategies, distributed locks, rate limiting, pub/sub, and connection management for production applications. Use when adding or debugging caching, a distributed lock, a rate limiter, session/token storage, or a Streams/Pub-Sub flow against the devskyy Redis. Do NOT use for durable relational data or transactional integrity (postgres-patterns — Redis is not a system of record), for schema/versioned state (database-migrations), or for the container's heal...

Choose or migrate the UI component framework of a project (shadcn/ui, Aceternity, Magic UI, DaisyUI, HeroUI, Chakra, Flowbite, Preline, Park, Origin, Headless UI, Cult UI) using the OpenWolf knowledge base at `.wolf/reframe-frameworks.md`. Use when the user asks to change, pick, migrate, or "reframe" their project's UI framework, or asks "which component library should we use". Do NOT use for restyling inside a framework the project already uses (that is `frontend-design` / `ui-ux-pro-max`), ...

Audit, plan, and implement SEO improvements across technical SEO, on-page optimization, structured data, Core Web Vitals, and content strategy. Use when the user wants better search visibility, SEO remediation, schema markup, sitemap/robots work, or keyword mapping. Do NOT use for writing the page copy itself (article-writing / brand-voice) or for general page-speed refactors unrelated to search (that is the optimize skill).

The SkyyRose flagship theme's own engineering doctrine (wordpress-theme/skyyrose-flagship/) — brand-specific, not a generic WordPress reference. Covers templates/patterns, the .min build pipeline, WooCommerce REST/webhooks, the vanilla three.js mascot and immersive worlds, and the gates that keep a luxury storefront luxury. Use when a task touches wordpress-theme/skyyrose-flagship PHP, its CSS/JS build, its WooCommerce integration, or its Three.js scenes. Do NOT use for generic WordPress ques...

Agent-driven scheduling and publishing of social media posts across 13 platforms via SocialClaw. Use when the user wants to publish to X, LinkedIn, Instagram, Facebook Pages, TikTok, Discord, Telegram, YouTube, Reddit, WordPress, or Pinterest — or when managing campaigns, uploading media, or monitoring post delivery status.

Drives RED → GREEN → IMPROVE in this repo's actual runners — pytest via `rtk proxy`, vitest in frontend/, Playwright for flows — and requires the RED state to be observed, not assumed. Use when writing a new feature, fixing a bug, or refactoring anything under the Python API, frontend/, or the theme's JS. Do NOT use for retrofitting tests onto code that already shipped green (that is a coverage-gap task), and do NOT use it to decide whether an existing suite's result is trustworthy — that is ...

Offers the user an informed choice about how much response depth to consume before answering. Use this skill when the user explicitly wants to control response length, depth, or token budget. TRIGGER when: "token budget", "token count", "token usage", "token limit", "response length", "answer depth", "short version", "brief answer", "detailed answer", "exhaustive answer", "respuesta corta vs larga", "cuántos tokens", "ahorrar tokens", "responde al 50%", "dame la versión corta", "quiero contro...

"UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styl...

Runs the full DevSkyy gate battery (pytest, ruff, phpcs/phpstan, verify:theme, .min rebuild, live curl, eyes-on) and reports each result with an evidence-scope tag. Use when a feature, fix, or refactor is finished and you are about to claim "done", open a PR, or deploy. Do NOT use for choosing which gate to add or for reviewing code quality by reading it — that is code-review; this skill only executes gates that already exist and reports what they returned.

WooCommerce product-detail-page and add-to-cart correctness for the skyyrose-flagship theme — AJAX contract, variation forms, stock states, cart fragments. Use when building, changing, or reviewing single-product templates, product cards, or any add-to-cart surface under wordpress-theme/skyyrose-flagship/. Do NOT use for WooCommerce core contributions (that is woocommerce-backend-dev) or for REST-API automation against the live store (that is wordpress-woocommerce-automation).

Browser-measured Core Web Vitals (LCP/CLS/INP) budgets and measurement workflow for hero video, animated headers, and immersive media surfaces. Use when shipping or auditing any above-the-fold media change to skyyrose.co, and during launch audits — the browser half that wp-performance (backend-only) explicitly excludes. Do NOT use for backend TTFB root-causing, DB/query/cron/object-cache work (that is wp-performance), or for changes that cannot alter above-fold rendering.

Automate WordPress and WooCommerce operations via REST API. Use when managing products, orders, content, or site configuration programmatically. Triggers on requests to create/update products, manage inventory, generate Elementor layouts, handle WooCommerce orders, or automate any WordPress operations. Includes Elementor JSON generation patterns for skyyrose.co.

Deploy the skyyrose-flagship WordPress theme to skyyrose.co through the gated pipeline (scripts/deploy-theme.sh). Use when a theme change is built, verified, and ready to ship to production, or when previewing a deploy with --dry-run. Do NOT use for editing theme code, running verify:theme during development, MU-plugin deploys (scripts/deploy-mu-plugin.sh), WooCommerce data writes, or the Vercel dashboard — those have their own paths.

Test code with WordPress by starting a WordPress server. Use when testing changes to a WordPress plugin, a WordPress theme, WordPress source code, verifying WordPress behavior, or needing a running WordPress instance to validate work