abdul977

website-cloner

Clone / mirror any live website so it renders fully offline, or as a starting point to rebuild it better. Use when the user wants to copy, clone, replicate, mirror, download, or recreate an existing website (a competitor site, a client's current site, a reference design, a template) OR wants to price/quote such a job for a client. Handles static sites, SPAs (React/Vue/Angular), Framer sites, and multi-page + WordPress sites (Elementor/Pagelayer/Divi); downloads HTML + all CSS/JS/images/fonts, localizes Google Fonts, makes paths offline-safe, wires up an offline server, and verifies every page renders with zero missing assets and correct styling offline. Also produces a client intake brief, a Naira pricing model (3 tiers + phased/batch delivery), a client-facing quote, and a project handover doc.

wp-admin-panel-builder

Build a standalone, Elementor-like page-builder CMS with its own /admin editor as a single self-contained WordPress plugin. Beginner-friendly tap/drag editing, 15+ content blocks (columns, accordion, tabs, testimonial, gallery, pricing, form...), rich text, per-block spacing/animation/typography, undo/redo, duplicate & copy-paste, saved-section library, autosave recovery, global brand theme, page manager (duplicate/delete/rename/publish), and version history. Use when asked to create a WordPress admin panel, a custom client-editable page builder, a no-code CMS editor, or a standalone /admin for editing pages.

Data & Documents Listed

overseer

Act as technical lead over a fleet of Claude Code agents to take a codebase from 'mostly built' to 'actually shippable'. Use when the user wants you to take over a project — rewrite or reconstruct the PRD, audit every page and flow for missing UI and weak logic, spawn and brief background agents to build the gaps, browser-test the result as real users, report defects back to those agents, and run on a loop until they come back to a finished product. Also use for enterprise-readiness audits, 'is this production ready', 'find what's missing', 'run agents and oversee them', or any request to own delivery rather than complete a single task. Covers agent briefing and file-ownership, the oversight cycle, browser verification, money/PII/authorization security review, migration safety, and the final handover.

design-to-pixel

Rebuild a website (or a single section) from a reference design image so it matches measurably, not approximately — by measuring the reference to derive a numeric spec (viewport, container width, section heights, font sizes, colours, corner radii, gaps), building section by section, then measuring the built DOM and diffing it against the reference until every delta is within a few pixels. Use this skill whenever someone supplies a screenshot, mockup, Figma export, theme demo, or competitor page and wants it "rebuilt", "cloned", "matched", "recreated", "converted to HTML/CSS", or asks for it to look "exactly like", "1:1", "pixel perfect", or "100% the same" — and also when they hand over a design image section by section, or ask you to check whether a build matches a reference. Reach for it even when they just say "make it look like this image", because the measuring loop is what separates a real match from a rough approximation.

gemini-webapi

Use Google Gemini (via the local tools/gemini toolkit) to generate ad scripts, voiceover scripts, documents, marketing copy, AI images for ads/storyboards, short video clips, and audio/music beds. Trigger when the user wants to "use Gemini" to write, narrate, generate images, generate video, generate documents, or draft ad copy/scripts inside the video-ad workspace (any project under C:\Users\user\Desktop\video-ad).

kinetic-motion-ad

Build premium white-background, single-green-accent kinetic-typography motion ads (9:16) with real footage layered behind HTML type — the divyansh.fx_ style. Use when the user wants a "motion graphics ad", "kinetic typography video", "text animation ad", or to turn a voiceover script into a faceless/objects-driven social ad in the workspace under C:\Users\user\Desktop\video-ad. Composites keyed or framed footage (green-screen OR their own Veo clips) with animated HTML/SVG objects, one green accent, italic-serif emphasis, depth/parallax, and a brand end card.

modern-css

Specialized knowledge for writing modern high-quality CSS. Trigger this skill when starting a new CSS project/file, when the user asks about new CSS features (e.g. Masonry, View Transitions, Container Queries, Scroll-driven animations), or requests refactoring of legacy styles to modern standards.

AI & Automation Listed

motion-ad-studio

Agentic orchestrator for producing premium motion-graphics ads end-to-end with a fleet of specialist subagents and a MANDATORY self-QC loop. Use when the user wants to "create a video / motion ad" in the video-ad workspace and expects it built, reviewed frame-by-frame, and fixed automatically before hand-off. Spins up an orchestrator + concept + per-scene builder + keyer/compositor + parallel frame-audit QC + critical-creative reviewer + verifier agents, then loops fixes until the render is clean. Wraps the kinetic-motion-ad build skill with orchestration + verification.

ui-ux-pro-max

UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.

Code & Development Listed

video-ad-concept-editor

Edit raw clips (AI-generated Veo/Gemini clips, phone/WhatsApp footage) into finished social ads with ffmpeg — clean the audio, cut dead air, remove AI watermarks, and re-cut one set of footage into MULTIPLE distinct concept versions by recombining voiceover and visuals independently. Trigger when the user wants to edit/cut/clean/arrange videos, make an ad from clips, produce 15s/30s shorts or multiple ad variants, remove noise or dead silence, remove a Gemini/Veo sparkle watermark, or add captions/text overlays — in any project under C:\Users\user\Desktop\video-ad.