MHassan0000
- 1.4k skills
- 0 followers
- 1 repo stars
- 2 weeks ago last updated
- ▌ Frontend Slides · mhassan0000Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.
- ▌ Gsap Frameworks · mhassan0000Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.
- ▌ Library Curator · mhassan0000Search the OD Library (the global asset registry) and apply matching assets into the current project mid-task. Use when the user asks to reuse an image they captured/uploaded earlier, "pull a logo/screenshot from my library", or to find and drop a stored asset into the page being built.
- ▌ Platform Design · mhassan0000300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.
- ▌ Vfx Text Cursor · mhassan0000 bundleCursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.
- ▌ Youtube Clipper · mhassan0000YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.
- ▌ Test Driven Development · mhassan0000 bundleUse when implementing any feature or bugfix, before writing implementation code
- ▌ Website To Hyperframes · mhassan0000 bundleCapture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.
- ▌ D3 Visualization · mhassan0000Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.js skill with examples across chart types and techniques giving the agent expert-level knowledge to generate complex, interactive visualizations. Useful for editorial dashboards, reports, data-rich prototypes, and explanatory graphics.
- ▌ Frame Logo Outro · mhassan0000 bundleSegmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.
- ▌ Gsap Performance · mhassan0000Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
- ▌ Minimalist UI · mhassan0000 bundleClean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
- ▌ Video Downloader · mhassan0000Download videos from YouTube and other platforms for offline viewing, editing, or archival with support for various formats and quality options.
- ▌ Competitor Alternatives · mhassan0000 bundleWhen the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' or 'competitive landing pages.' Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. Emphasizes deep research, modular content architecture, and varied section types beyond feature tables.
- ▌ Remotion To Hyperframes · mhassan0000 bundleTranslate a Remotion (React-based) video composition into a HyperFrames HTML composition. Use when (1) the user provides Remotion source (`.tsx` files using `useCurrentFrame`, `Sequence`, `AbsoluteFill`, `interpolate`, `spring`, `staticFile`, etc.) and asks to port, convert, or migrate it to HyperFrames; (2) the user pastes a Remotion entry point (`Root.tsx`, `Composition`) and wants HTML; (3) the user links a Remotion repo and asks for the HyperFrames equivalent; (4) the user says "port my Remotion project", "translate this Remotion code", "rewrite as HTML", or "I have a Remotion comp, make it HyperFrames". Skill detects unsupported patterns (useState, useEffect with side effects, async calculateMetadata, third-party React component libraries, `@remotion/lambda` features) and recommends the runtime interop escape hatch instead of attempting a lossy translation.
- ▌ Continuous Learning V2 · mhassan0000 bundleInstinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.
- ▌ Artifacts Builder · mhassan0000Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
- ▌ Creative Director · mhassan0000AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.
- ▌ Gif Sticker Maker · mhassan0000Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Useful for personalized chat stickers and avatar packs.
- ▌ Review Animations · mhassan0000 bundleReviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
- ▌ Venice Image Edit · mhassan0000Image edits, upscaling, and background removal via the Venice.ai API.
- ▌ Doc Kami Parchment · mhassan0000 bundleWarm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.
- ▌ Gsap Scrolltrigger · mhassan0000Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.
- ▌ Plan Design Review · mhassan0000Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work.
- ▌ Social Reddit Card · mhassan0000 bundleRealistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.
- ▌ Social X Post Card · mhassan0000 bundleRealistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
- ▌ Venice Audio Music · mhassan0000Music generation queueing, retrieval, and completion endpoints via Venice.ai. Suited for jingles, background loops, and prototype scoring.
- ▌ Writing Guidelines · mhassan0000 bundleReview docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".
- ▌ Chat Motion Overlay · mhassan0000 bundleGenerate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, optional device frames, preset or uploaded avatars, nickname display rules, and transparent-video-ready Remotion bundles. Use when Codex needs to create reusable short-form chat clips for Douyin, demo videos, story reenactments, social-message proof scenes, or embeddable alpha overlays for Hyperframe and Remotion workflows.
- ▌ Design Consultation · mhassan0000Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.
- ▌ Emilkowalski Motion · mhassan0000Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.
- ▌ Hand Drawn Diagrams · mhassan0000Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
- ▌ Image To Code · mhassan0000 bundleElite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
- ▌ Paywall Upgrade Cro · mhassan0000Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.
- ▌ Social Spotify Card · mhassan0000 bundleSpotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
- ▌ Venice Audio Speech · mhassan0000Text-to-speech models, voices, formats, and streaming via Venice.ai. Useful for narration, voiceover, and conversational agent voices.
- ▌ Dispatching Parallel Agents · mhassan0000Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
- ▌ Subagent Driven Development · mhassan0000 bundleUse when executing implementation plans with independent tasks in the current session
- ▌ Frame Data Chart Nyt · mhassan0000 bundleNYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
- ▌ Frame Liquid Bg Hero · mhassan0000 bundleWebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.
- ▌ Full Page Screenshot · mhassan0000Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports.
- ▌ Marketing Psychology · mhassan0000Apply psychological principles and behavioral science to copy and design. Useful for tightening hooks, framing, and pricing presentation.
- ▌ Make Interfaces Feel Better · mhassan0000 bundleDesign engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
- ▌ Cro · mhassan0000 bundleWhen the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms. Also use when the user says 'CRO,' 'conversion rate optimization,' 'this page isn't...
- ▌ Odw · mhassan0000Dynamic multi-agent workflows — plan first, then orchestrate parallel agents with adversarial verification via the local odw daemon. Use when the user asks for a "workflow", says "ultracode", or hands you a task spanning many files/items that benefits from parallel agents.
- ▌ Figma Create New File · mhassan0000Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.
- ▌ Figma Generate Design · mhassan0000Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
- ▌ Imagegen Frontend Web · mhassan0000 bundleElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
- ▌ Screenshots Marketing · mhassan0000Generate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals.
- ▌ Venice Image Generate · mhassan0000Image generation endpoints and available styles via the Venice.ai API.
- ▌ Cirq · mhassan0000Cirq is Google Quantum AI's open-source framework for designing, simulating, and running quantum circuits on quantum computers and simulators.
- ▌ Deck Guizang Editorial · mhassan0000 bundleEditorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
- ▌ Figma Generate Library · mhassan0000Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
- ▌ Figma Implement Design · mhassan0000Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
- ▌ Flutter Animating Apps · mhassan0000Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.
- ▌ Frame Flowchart Sticky · mhassan0000 bundleSVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
- ▌ Research Decision Room · mhassan0000 bundleTurn messy user research notes, interviews, support tickets, surveys, and product context into an evidence-backed decision room: a single HTML artifact with an evidence ledger, theme map, confidence heatmap, opportunity matrix, decision memo, and experiment queue. Use when teams need to move from qualitative signals to product or design decisions without fabricating certainty.
- ▌ Finishing A Development Branch · mhassan0000Use when implementation is complete, all tests pass, and you need to decide how to integrate the work
- ▌ Verification Before Completion · mhassan0000Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
- ▌
- ▌ Loopy · mhassan0000 bundleDiscover, find, compare, audit, repair, adapt, craft, run, debrief, and prepare repeatable AI-agent loops for publication. Use when a user asks to analyze code or coding threads for recurring work, find a published loop, interview them to turn a goal into a bounded loop, review a loop...
- ▌ Maxia · mhassan0000Connect to MAXIA AI-to-AI marketplace on Solana. Discover, buy, sell AI services. Earn USDC. 13 MCP tools, A2A protocol, DeFi yields, sentiment analysis, rug detection.
- ▌ Sympy · mhassan0000SymPy is a Python library for symbolic mathematics that enables exact computation using mathematical symbols rather than numerical approximations.
- ▌ Frame Light Leak Cinema · mhassan0000 bundleFilm light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
- ▌ Release Notes One Pager · mhassan0000 bundleRelease notes one-page HTML with highlights, Added, Fixed, Breaking changes, Known issues, and Upgrade note. Writes explicit "None" style sections whenever the user does not provide details.
- ▌
- ▌ Kaizen · mhassan0000Guide for continuous improvement, error proofing, and standardization. Use this skill when the user wants to improve code quality, refactor, or discuss process improvements.
- ▌ Offers · mhassan0000 bundleWhen the user wants to design, construct, or improve an offer — the thing they actually sell — including value framing, bonus stacking, guarantee design, scarcity/urgency, naming, and payment structure. Also use when the user mentions 'offer,' 'offer design,' 'build an offer,' 'grand...
- ▌ Plotly · mhassan0000Interactive visualization library. Use when you need hover info, zoom, pan, or web-embeddable charts. Best for dashboards, exploratory analysis, and presentations. For static publication figures use matplotlib or scientific-visualization.
- ▌ Polars · mhassan0000Fast in-memory DataFrame library for datasets that fit in RAM. Use when pandas is too slow but data still fits in memory. Lazy evaluation, parallel execution, Apache Arrow backend. Best for 1-100GB datasets, ETL pipelines, faster pandas replacement. For larger-than-RAM data use dask or vaex.
- ▌ Qiskit · mhassan0000Qiskit is the world's most popular open-source quantum computing framework with 13M+ downloads. Build quantum circuits, optimize for hardware, execute on simulators or real quantum computers, and analyze results. Supports IBM Quantum (100+ qubit systems), IonQ, Amazon Braket, and other providers.
- ▌ Scanpy · mhassan0000Scanpy is a scalable Python toolkit for analyzing single-cell RNA-seq data, built on AnnData. Apply this skill for complete single-cell workflows including quality control, normalization, dimensionality reduction, clustering, marker gene identification, visualization, and trajectory analysis.
- ▌ Sdk Dx · mhassan0000 bundleDesign SDKs that developers love to use—APIs that feel native, error messages that guide, and experiences that reduce friction. This skill covers creating SDKs that drive adoption through exceptional developer experience rather than aggressive marketing. Trigger phrases: "SDK design",...
- ▌ Deck Swiss International · mhassan0000 bundle16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).
- ▌ Domain Name Brainstormer · mhassan0000Generate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai.
- ▌ Ecommerce Image Workflow · mhassan0000 bundleReference-product ecommerce image workflow for generating a compact set of product-faithful main, feature, and lifestyle images from real product reference photos. V1 requires uploaded product imagery and intentionally defers brief-only concept generation and platform-specific batch exports.
- ▌ Frame Macos Notification · mhassan0000 bundleRealistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
- ▌ Impeccable Design Polish · mhassan0000Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.
- ▌ PPTX HTML Fidelity Audit · mhassan0000 bundleAudit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.
- ▌ Pr Feedback Quality Gate · mhassan0000Safely track pull request feedback, resolve review comments or merge conflicts, validate fixes, and use a read-only cross-review before committing or pushing follow-up changes.
- ▌ Astropy · mhassan0000 bundleAstropy is the core Python package for astronomy, providing essential functionality for astronomical research and data analysis.
- ▌ Deepapi · mhassan0000Use DeepAPI for supported scraping, research, and email workflows with explicit credentials and approval.
- ▌ Expo UI · mhassan0000 bundleBuild native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in an Expo or React Native app. Covers universal cross-platform components (Host, Column, Row, Button, Text, List, and more imported from @expo/ui), drop-in replacements...
- ▌ Molykit · mhassan0000CRITICAL: Use for MolyKit AI chat toolkit. Triggers on: BotClient, OpenAI, SSE streaming, AI chat, molykit, PlatformSend, spawn(), ThreadToken, cross-platform async, Chat widget, Messages, PromptInput, Avatar, LLM
- ▌ PHP Pro · mhassan0000Write idiomatic PHP code with generators, iterators, SPL data structures, and modern OOP features. Use PROACTIVELY for high-performance PHP applications.
- ▌ Pricing · mhassan0000 bundleWhen the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increase,' 'value metric,' 'Van Westendorp,' 'willingness to pay,' 'monetization,' 'how much...
- ▌ Riffkit · mhassan0000Riff a winning TikTok into your own short video — study a proven video's emotion formula and regenerate it with your product, character, and language (EN/ES). Also makes UGC ad creative.
- ▌ Seaborn · mhassan0000Seaborn is a Python visualization library for creating publication-quality statistical graphics. Use this skill for dataset-oriented plotting, multivariate analysis, automatic statistical estimation, and complex multi-panel figures with minimal code.
- ▌
- ▌
- ▌
- ▌ Competitive Ads Extractor · mhassan0000Extract and analyze competitors' ads from ad libraries to understand messaging and creative approaches that resonate.
- ▌ Export Download Debugging · mhassan0000Diagnose and fix browser, preview, or Electron export/download failures, especially image export issues involving Save As, Blob/Data URLs, the File System Access API, createWritable failures, and 0 KB files.
- ▌ Reference Design Contract · mhassan0000 bundleTurn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff. Use it before prototypes, decks, redesigns, or image remix work when the user needs a reusable visual direction rather than a one-off prompt.
- ▌ Firebase · mhassan0000Firebase gives you a complete backend in minutes - auth, database, storage, functions, hosting. But the ease of setup hides real complexity. Security rules are your last line of defense, and they're often wrong.
- ▌ Form Cro · mhassan0000Optimize any form that is NOT signup or account registration — including lead capture, contact, demo request, application, survey, quote, and checkout forms.
- ▌ Fp Async · mhassan0000Practical async patterns using TaskEither - clean pipelines instead of try/catch hell, with real API examples
- ▌ Fp React · mhassan0000Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.
- ▌ Langfuse · mhassan0000Expert in Langfuse - the open-source LLM observability platform. Covers tracing, prompt management, evaluation, datasets, and integration with LangChain, LlamaIndex, and OpenAI. Essential for debugging, monitoring, and improving LLM applications in production.
- ▌ Monopoly · mhassan0000MONOPOLY is a Senior System Design Engineer skill for architecting, reviewing, and scaling systems. Triggers on requests involving architecture, databases, scaling, microservices, or infrastructure design. Proactively engages to design resilient backend systems.