Gekkos-tech

Gekkos-tech/agency-os

Command

Structured design review of the current build or a URL — hierarchy, consistency, taste, polish.

Gekkos-tech/agency-os

Skill Claude CodeCodex

Reference library of 74 real-world brand design systems as DESIGN.md files (colors, typography, spacing, components, motion). Use when the user wants to match, borrow from, or take inspiration from a specific brand's visual language — "make it look like Linear/Vercel/Stripe/Apple", "give me a Notion-style dashboard"…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Design-engineering micro-detail pass for interfaces that already work but feel unrefined. Applies concrete CSS/JS rules for hover/active/focus states, transition timing and easing, enter/exit animations, stagger patterns, layered shadows, border-vs-shadow elevation, nested border-radius, optical alignment, typography…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Upgrades an EXISTING website or app to premium visual quality without breaking functionality. Audit-first workflow - inventories current pages and components, identifies generic-AI and template patterns (centered-everything, purple gradients, uniform card grids, emoji icons), produces a prioritized redesign plan, then…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Commits a project to ONE named visual style system and applies it consistently at token level. Use when deciding a visual direction for a build — "which style should this be", "pick a visual direction", "style system", "minimalist design", "brutalist site", "soft UI", "clean product UI" — or when a codebase mixes…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Anti-generic design direction for landing pages, portfolios, and marketing sites. Use when a build brief needs a distinctive creative direction so the result does not look templated or AI-generated — reads the brief, infers the right direction, enforces a strict pre-flight check. Complements ui-ux-pro-max…

Gekkos-tech/agency-os

Skill Claude CodeCodex

UI/UX design intelligence for web and mobile. Searchable local database with 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Use when designing…

Gekkos-tech/agency-os

Plugin Claude Code

Motion & 3D: GSAP animation suite, Three.js/WebGL, React Three Fiber, Lottie, Rive and Remotion video.

Gekkos-tech/agency-os

Skill Claude CodeCodex

Complete GSAP animation suite — core tweens (gsap.to/from/fromTo, easing, stagger), timelines and sequencing, ScrollTrigger (scroll-linked animation, pinning, scrub, parallax), official plugins (Flip, Draggable, SplitText, ScrollSmoother, SVG drawing), React (useGSAP, cleanup), Vue/Svelte/Nuxt integration, gsap.utils…

Gekkos-tech/agency-os

Skill Claude CodeCodex

After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Triggers on tasks involving Lottie, lottie-web, lottie-react, dotLottie, After Effects JSON export…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusable abstractions. Ideal for product configurators, portfolios, games, data visualization, and…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Best practices for building programmatic videos in React with Remotion v4+. Use when the user mentions "Remotion", "video in React", "programmatic video", "render a video from code", "generate an MP4 from React components", or wants data-driven, templated, or automated video production. Covers the frame-based mental…

Gekkos-tech/agency-os

Skill Claude CodeCodex

State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations…

Gekkos-tech/agency-os

Plugin Claude Code

Quality assurance: performance, Core Web Vitals, accessibility, web best practices, webapp testing and pre-launch checklists.

Gekkos-tech/agency-os

Agent

Web quality auditor. Runs evidence-based QA and launch gates — functional testing, performance/Core Web Vitals, accessibility, best practices, and the legal/technical pre-launch checklist for German/EU sites. Use for QA passes, launch readiness checks, "is this ready to go live", or post-fix verification.

Gekkos-tech/agency-os

Command

Run the full pre-launch gate — legal (DSGVO, Impressum, Cookie-Consent, BFSG) + technical launch checklist.

Gekkos-tech/agency-os

Skill Claude CodeCodex

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

Gekkos-tech/agency-os

Skill Claude CodeCodex

Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".

Gekkos-tech/agency-os

Skill Claude CodeCodex

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

Gekkos-tech/agency-os

Skill Claude CodeCodex

Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".

Gekkos-tech/agency-os

Skill Claude CodeCodex

The go-live gate for websites, tuned for German/EU agencies — legal compliance (DSGVO/GDPR, Impressum, Cookie-Consent, BFSG accessibility) plus the technical launch checklist (SSL, redirects, 404, OG tags, sitemap, robots, forms, analytics). Use this skill before ANY website goes live or relaunches — trigger on…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.