القائمة
جمع SkillsMP عدد ٧٠ من skills من TheGoat395/Codex-Skills. افتح أي skill لمراجعة مصدره وتفاصيله.
عرض ٤٠ من أصل ٧٠ skills مجمعة.
Motion and interaction design skill using interpretive lenses informed by publicly available work from Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Two modes: build interactive components with purposeful motion, or audit existing animations to catch…
لغة النص الأصلي: الإنجليزية
Audit frontend websites and apps before launch. Use for production-readiness reviews, visual polish checks, responsive QA, accessibility risks, performance and SEO basics, interaction states, forms, media, copy clarity, trust signals, and ship/no-ship…
لغة النص الأصلي: الإنجليزية
GSAP performance guidance — prefer transforms, avoid layout thrashing, use will-change selectively, and batch animation work. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
لغة النص الأصلي: الإنجليزية
Audit website accessibility. Use for semantic structure, headings, alt text, forms, focus states, keyboard navigation, color contrast, labels, ARIA misuse, reduced motion, captions, skip links, modals, menus, carousels, and final frontend QA aligned with…
لغة النص الأصلي: الإنجليزية
Improve website accessibility and performance polish. Use for semantic HTML, keyboard navigation, focus states, contrast, alt text, reduced motion, image/video loading, canvas fallbacks, bundle caution, animation performance, and final production readiness…
لغة النص الأصلي: الإنجليزية
Define animation easing language for premium websites and apps. Use for motion timing systems, easing curves, spring feel, duration scales, stagger rhythm, delay strategy, entrance/exit timing, tactile controls, cinematic sections, and translating luxury,…
لغة النص الأصلي: الإنجليزية
Run animation jank QA. Use for GSAP, Motion, CSS transitions, scroll animation, pinned scenes, parallax, hover states, page transitions, mobile motion, reduced-motion fallbacks, performance-heavy animations, and final motion polish before delivery.
لغة النص الأصلي: الإنجليزية
Use when planning or implementing website motion, scroll choreography, microinteractions, page transitions, text reveals, pinned sections, smooth scrolling, Lottie, Three.js/R3F, WebGL, or animation-heavy premium sites. Chooses the lightest appropriate tool…
لغة النص الأصلي: الإنجليزية
Detect and remove generic AI website output. Use to review or improve any site with default SaaS structure, weak typography, generic cards, fake browser chrome, placeholder copy, random gradients, overused bento grids, repetitive bullets, basic buttons, bland…
لغة النص الأصلي: الإنجليزية
Translate brand voice into UI copy for websites and apps. Use for buttons, labels, empty states, loading states, errors, tooltips, form help, nav labels, product copy, onboarding microcopy, premium tone systems, and making brand voice usable in interface text…
لغة النص الأصلي: الإنجليزية
Run browser inspection for websites and apps. Use after building or changing frontend work to open the rendered site, inspect console and network errors, verify layout and interactions, test links/forms/media, capture screenshots, check responsive behavior,…
لغة النص الأصلي: الإنجليزية
Preserve a rollback path before risky code or website edits. Use when changes may touch many files, delete files, overwrite generated output, alter user work, refactor shared behavior, modify deployment config, or otherwise risk losing working code.
لغة النص الأصلي: الإنجليزية
Undo or revert code changes safely. Use when the user asks to undo, revert, roll back, restore, recover, go back, remove recent changes, or compare current work against a previous checkpoint.
لغة النص الأصلي: الإنجليزية
Design website color, material, surface, and lighting direction. Use for premium visual systems, avoiding one-note palettes, defining luxury or cinematic color without cliches, setting contrast, backgrounds, gradients, surfaces, shadows, glass, and material…
لغة النص الأصلي: الإنجليزية
Review and prune website content. Use for removing generic copy, duplicate sections, weak feature cards, unsupported claims, placeholder content, bloated FAQs, repeated testimonials, excessive prose, stale pages, low-value sections, and AI-generated filler…
لغة النص الأصلي: الإنجليزية
Plan website content structure and information architecture. Use for page maps, nav, section sequencing, user questions, service pages, product pages, portfolios, case studies, blogs, docs, ecommerce, and any site where content order and naming affect clarity…
لغة النص الأصلي: الإنجليزية
Design and polish website conversion flows. Use for CTAs, lead forms, booking forms, newsletter signup, checkout, pricing, contact pages, service inquiries, ecommerce purchase paths, error states, validation, trust signals, and conversion sections that must…
لغة النص الأصلي: الإنجليزية
Run cross-browser QA for websites and apps. Use before production or after CSS, media, forms, animation, canvas, layout, or interaction changes to test Chromium, WebKit/Safari-like, and Firefox behavior, browser-specific CSS/media issues, focus/keyboard…
لغة النص الأصلي: الإنجليزية
Create CSS Grid editorial layout systems for premium websites. Use for asymmetric grids, magazine layouts, portfolio indexes, case-study plates, image galleries, hero compositions, feature narratives, product proof layouts, masonry-like rhythms, and replacing…
لغة النص الأصلي: الإنجليزية
Write CTA language systems for websites and apps. Use for primary buttons, secondary links, hero CTAs, pricing CTAs, booking CTAs, forms, checkout actions, navigation links, waitlists, demo requests, product tours, and conversion copy that must be clear,…
لغة النص الأصلي: الإنجليزية
Create refined typography for websites. Use for premium, editorial, luxury, portfolio, product, Squarespace-like, Vercel-like, Raycast-like, Linear-like, and modern sites needing font pairing, type scale, responsive headings, line length, hierarchy, captions,…
لغة النص الأصلي: الإنجليزية
Prepare final website handoff. Use after completing a site, app, landing page, redesign, deployment, or production QA to summarize changed files, commands run, checks passed, local/deployed URLs, environment variables, content/CMS notes, known limitations,…
لغة النص الأصلي: الإنجليزية
Use before installing or recommending npm packages, GitHub repos, templates, MCP servers, plugins, Codex skills, ChatGPT skills, scripts, CLI tools, design libraries, scraping tools, or AI agent tools for frontend or website work. Produces trust…
لغة النص الأصلي: الإنجليزية
Art-direct website hero imagery. Use for landing pages, homepages, product pages, portfolios, venue sites, editorial pages, and premium first viewports that need real or generated media, text-safe composition, responsive focal points, visual hierarchy,…
لغة النص الأصلي: الإنجليزية
Run responsive image crop QA for websites. Use after adding or changing images, hero media, galleries, product grids, portraits, venue photos, screenshots, background images, object-fit/object-position rules, art-directed picture sources, image dimensions,…
لغة النص الأصلي: الإنجليزية
Run image and video loading QA. Use after adding or changing images, videos, posters, responsive sources, lazy loading, galleries, hero media, product media, background videos, image sequences, or CMS media to verify loading, dimensions, crops, network…
لغة النص الأصلي: الإنجليزية
Run mobile responsive QA for websites and apps. Use after layout, media, navigation, form, pricing, dashboard, gallery, checkout, or motion changes to inspect phone and tablet viewports, prevent horizontal overflow, fix crop issues, verify touch targets, and…
لغة النص الأصلي: الإنجليزية
Implement beautiful modern websites and web apps with an opinionated premium frontend stack. Use for Next.js, React, Tailwind, Motion, GSAP, Lenis, Three.js/React Three Fiber, shadcn/ui customization, responsive layouts, landing pages, portfolios, cinematic…
لغة النص الأصلي: الإنجليزية
Define website motion direction before implementation. Use for cinematic websites, Viktor-style motion, GSAP/ScrollTrigger pages, Motion for React microinteractions, Framer-like transitions, scroll reveals, product storytelling, luxury pacing, and any site…
لغة النص الأصلي: الإنجليزية
Run motion performance QA for websites and apps. Use after adding Motion, GSAP, Lenis, scroll scenes, page transitions, hover states, carousels, WebGL sync, observers, timers, RAF loops, or any animation-heavy UI to catch jank, layout shift, leaks, cleanup…
لغة النص الأصلي: الإنجليزية
Implement Motion for React layout transitions. Use for layout prop, layoutId, shared element transitions, tabs, expanding cards, accordions, reordering lists, filterable grids, animated underline nav, product UI panels, portfolio previews, and smooth…
لغة النص الأصلي: الإنجليزية
Implement refined React and Motion for React microinteractions. Use for buttons, menus, nav, modals, tabs, cards, accordions, layout transitions, reveal wrappers, hover/tap states, mobile menus, and interactive UI that should feel premium without heavy GSAP…
لغة النص الأصلي: الإنجليزية
Create Motion for React page transitions and route transitions. Use for AnimatePresence, route-level enter/exit, view transitions, shared page elements, Next.js client navigation, loading transitions, portfolio detail transitions, and cinematic but accessible…
لغة النص الأصلي: الإنجليزية
Implement Motion for React animation patterns for premium websites and apps. Use for motion/react, motion components, variants, initial/animate/exit, whileHover, whileTap, whileInView, useAnimate, useInView, useReducedMotion, MotionConfig, LazyMotion,…
لغة النص الأصلي: الإنجليزية
Plan and implement Next.js App Router routing for premium websites and apps. Use when working with app/ routes, pages, layouts, templates, loading, error, not-found files, route groups, dynamic segments, nested navigation, Link usage, or homepage structure in…
لغة النص الأصلي: الإنجليزية
Design Next.js Server Component and Client Component boundaries. Use when deciding where to add use client, how to pass props from server to client, how to keep secrets off the client, how to reduce bundle size, how to interleave interactive components, or…
لغة النص الأصلي: الإنجليزية
Structure modern Next.js websites and landing pages. Use for App Router projects, TypeScript, metadata, fonts, images, static pages, route groups, sections, component organization, performance, SEO basics, and production-ready architecture for premium…
لغة النص الأصلي: الإنجليزية
Write and revise website copy so it feels specific, credible, and non-generic. Use for headlines, subheads, CTAs, navigation, product copy, service copy, luxury/editorial language, testimonials, empty states, forms, pricing, and any website where placeholder…
لغة النص الأصلي: الإنجليزية
Audit website performance. Use for Core Web Vitals, LCP, INP, CLS, Lighthouse or browser performance checks, bundle and asset weight, image/video loading, font loading, third-party scripts, animation cost, hydration cost, and production-readiness performance…
لغة النص الأصلي: الإنجليزية
Use for website performance planning, Lighthouse/web-vitals checks, bundle/media/font budgets, Core Web Vitals triage, image/video optimization, animation performance, deployment readiness, and premium-site speed audits.
لغة النص الأصلي: الإنجليزية