apex-os-bad-boy

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 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. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

SEARCH/REPLACE block patterns for precise code edits. Based on Cline's edit methodology for accurate file modifications.

Use when context window is filling up, when agent responses degrade in quality over a long session, when deciding what to load into an agent's context vs keep in files, or when designing multi-agent systems where subagents need isolated contexts. Triggers on: context full, context rot, compaction, session degradation, token limit.

Comprehensive Docker best practices for images, containers, and production deployments

Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.

Use when building or refactoring Next.js 14+ App Router applications — Server Components, TypeScript patterns, Supabase integration, and performance optimization

Use when reviewing a Next.js marketing site or app for production readiness, before go-live, or when users report visual or functional bugs. Covers 26-point checklist across CRITICAL, HIGH, MEDIUM, LOW severity.

Use when Core Web Vitals are degraded, bundle size is too large, or React/Next.js rendering is slow — covers profiling, bundle analysis, and optimization patterns

Use when writing prompts for Claude or any LLM, when agent outputs are inconsistent or low quality, when structuring system prompts for APEX OS agents, or when implementing CoT/ToT reasoning patterns. Triggers on: prompt design, system prompt, instruction engineering, output quality, JSON schema enforcement.

Use when building or debugging RAG pipelines, when semantic search returns irrelevant results, when implementing hybrid BM25+dense retrieval, or when grounding LLM answers in document sources. Triggers on: retrieval augmented generation, vector search, embeddings, BM25, reranking, knowledge base.

Use when building AI agents that need to reason and act in loops, when an agent needs to use tools iteratively, when implementing memory across agent turns, or when debugging an agent that gets stuck or loops infinitely. Triggers on: ReAct, agent loop, tool use, memory, LangChain, agent stuck.

Security best practices for React/Next.js - XSS, CSRF, authentication, and API security

Shadcn UI, Radix UI, and Tailwind CSS component patterns for enterprise applications

Sovereign artifact governance for multi-repo AI agent ecosystems. One AGENTS.md to rule them all — enforces single source of truth, pointer-based sync, state file standards, skills deduplication, and cross-repo compliance. Use when creating repos, auditing governance, resolving AGENTS.md conflicts, or onboarding new agents.

Use when building or debugging Supabase features — RLS policies, Auth flows, Storage rules, Edge Functions, and real-time subscriptions

Standards for defining AI agent tools based on Cline's system prompt patterns. Covers parameter typing, documentation, edit formats, safety mechanisms, and operational best practices.

Build animated data flow pipelines with SVG circuits, traveling dots, and ambient animations using Framer Motion + SVG. Use when visualizing architecture, workflows, API pipelines, or any step-by-step data flow. Tags: webtricks, animation, pipeline, SVG, architecture.

Audit live websites using Playwright MCP for browser-based QA. Covers accessibility snapshots, screenshot verification, interactive element testing, and tier differentiation audits. Use after deploying web changes to verify they work. Tags: webtricks, QA, testing, playwright, audit.

Build interactive tier-based pricing UI with lock/unlock states, progressive disclosure, and cross-slide consistency. Use when building pricing pages, tier selectors, or feature comparison grids. Tags: webtricks, pricing, tiers, SaaS.