Skills
96,770 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Nano Banana (nano-banana) image generation skill. Use this skill when the user asks to "generate an image", "generate images", "create an image", "make an image", uses "nano banana", or requests multiple images like "generate 5 images". Generates images using Google's Gemini models (Flash, Pro, or Nano Banana 2) for any purpose - frontend designs, web projects, illustrations, graphics, hero images, icons, backgrounds, or standalone artwork. Invoke this skill for ANY image generation request.
Update and maintain joelclaw.com — the Next.js web app at apps/web/. Use when writing blog posts, editing pages, updating the network page, changing layout/header/footer, adding components, or fixing anything on the site. Hard content triggers: 'write article about X' (draft in Convex), 'publish article <slug>' (set draft=false + revalidate tags/paths). Also triggers on: 'update the site', 'write a post', 'fix the blog', 'joelclaw.com', 'update network page', 'add a page', 'change the header', or any task involving the public-facing web app.
Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.
UMPF structured prompt generation master — guides users through multi-turn deep dialogue to refine cinematic visual concepts. Supports 8 visual engines (photography/print/3D/oil painting/pixel/ink wash/stop motion/Pantone editorial illustration). Triggers: (1) the user says "generate prompt", "draw a...", "help me design a visual"; (2) Nano banana prompts are needed; (3) the user wants professional art direction to generate images; (4) UMPF or moonkite-maliang is mentioned; (5) style pantone + theme is specified, going straight into the Pantone flow
Use this skill when building, debugging, refactoring, or reviewing SwiftUI apps or views for iOS 16+ and related Apple platforms. Trigger for NavigationStack, Observation/state flow, view composition, previews, performance, accessibility, and SwiftUI architecture.
Build stronger product taste + intuition as a PM by running a Taste Calibration Sprint (benchmark set, product critique notes, intuition→hypothesis log, validation plan, practice loop). Use for “product taste”, “product sense”, “intuition”, “calibrate taste”.
Reveal complexity in stages so users see what they need when they need it. Use for onboarding, forms, settings, advanced options, dashboards, or dense interfaces; avoid when problem is simply too many choices, weak copy clarity, or overall task complexity.
Build throwaway prototypes to flesh out a design before committing. Routes between two branches — a runnable terminal app for state/business-logic questions, or several distinct UI variants switchable via one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".
Integrates ShaderGradient moving 3D gradients in React/Next.js apps with safe defaults and performance-aware setup. Use when users mention shadergradient, animated gradients, GLSL backgrounds, @shadergradient/react, or gradient hero backgrounds.
Provides comprehensive guidance for uView Pro Vue 3 component library including components, tools, layouts, and templates. Use when the user asks about uView Pro, needs to build Vue 3 applications with uView Pro, or implement mobile-first UI components.
Turn the user's business problem, idea, and supplied materials into an implementable product definition. Gradually clarify missing user, business, or UX information, whether the user has no idea, only partial context, or a clear idea with gaps. Use for requests such as “help me define what to build,” “flesh out this idea,” “create a requirements document,” or “create a PRD” when determining the user, problem, scope, acceptance criteria, and experience direction before implementation. Do not use when the product definition and UX direction are already settled and the user only requests code changes.
Works on the visuals of an edit that is already rendered, one beat at a time, without running the whole edit again. Moves, resizes, swaps, drops or adds a card, logo, real page capture or animated diagram at the moment the user names, re-plans, makes stills of just those moments, checks them (safe zone, face, motion, AI looks), patch-renders only the frames that changed and hands over on the review page. Use when the user says "add an animation here", "make a diagram of how this works", "this card is wrong", "the card covers my face", "move the card", "make the card bigger", "swap the logo", "show the real page instead", "fewer cards", "animate this screenshot", "make the motion smoother", or leaves a review note about a card. Not for the cut (cut), not for caption size, font or colour defaults (taste and style-edit), not for the first full style pass on a new cut (style-edit), and not for measuring a creator (creator-teardown).
Make printable technical documents in the style of Apollo-era NASA paperwork. The model is an Apollo Operations Handbook "Systems Data" page with a typed running head, numbered paragraphs, Leroy-lettered line drawings and schematics, a performance data table, NOTE/CAUTION/WARNING notices, a Flight Data File checklist card, a black thumb tab and a dated footer, rendered to an A4 or US Letter PDF. Use this whenever someone asks for NASA-style, Apollo-style, retro aerospace or "mission manual" documentation. Also use it for a technical explainer, spec sheet or one-pager that should look like vintage engineering paperwork, for a handbook page explaining a product, codebase, system or fictional gadget, or for "another one of those NASA pages", even if they never say Apollo or handbook.
Research identity systems and create or maintain project brand guidelines for consistent implementation, with or without Seenry MCP. Use for brand research, codifying an existing identity or authoring usable brand rules; presentation narrative belongs to deck research
Build, review or research interface motion: press feedback, menus, tooltips, dialogs, sheets, toasts, accordions, tabs, page and shared-element transitions, scroll effects, drag and gestures, number and icon changes. Decides whether something should animate at all, then picks the tool, properties, curve, duration or spring, interruption and reduced-motion behavior, with tested modern-CSS recipes and runnable assets. Also studies recorded motion from Seenry references
Design and build web interfaces at design-studio quality, not AI-template quality. Use for any new page, landing page, dashboard, app shell, pricing, settings, form or single component, web or mobile (native app screens with seenry-apps), for redesigns and visual polish, and for matching a reference. Designs the brand's identity first, the way studios do (a truth, a type voice, one color field, one graphic device, one image treatment), studies real identities, studio sites and category leaders from Seenry MCP, builds the page as an application of that identity on a proven product and motion floor, and does not finish until a strict slop check passes and a blind critic scores the page at big-company level
Design and build native-feeling mobile app screens and flows (SwiftUI, UIKit, React Native, Expo, Flutter, mobile web prototypes) that match top App Store apps. Use for onboarding, tab and stack navigation, lists, forms, settings, paywalls, players, sheets and empty or error states. Researches whole journeys in real apps via Seenry MCP (the flow from the app it is based on, the look from the app it should look like), then enforces navigation doors, a mechanical slop pre-flight and a beat-the-reference gate
Find, generate and integrate the visual material a design needs: photos, hero images, album or product art, PNG and 3D-style icons, UI icons, illustrations, textures and fonts. Sources license-clear assets from the internet (CC0/public domain photos, permissive icon sets, open fonts) and generates images when the host has an image model. Records provenance for every file. Use whenever a page or component would otherwise ship with placeholders, gradients or stock clichés
Review a web interface, a UI diff or a single component and return ranked, fixable findings. Use for design critique, UI audits, accessibility checks, reviewing a branch or PR for interface impact, stress-testing one component across states and sizes, or explaining how an observed interface or animation is built
Master design skill for Claude Code. Use whenever the user asks to design, redesign, mock up, prototype, build a UI, build a landing page, build a dashboard, build a mobile app screen, generate a design system, generate design tokens, build a component library, clone a website's design, extract a design system from a URL, convert a screenshot to code, push or pull from Figma, critique or review a design, or hand off design to another AI. Triggers on slash commands /design web, /design mobile, /design system, /design landing, /design review, /design import, /design redraw. Also triggers on natural-language phrases like "design this", "redesign", "create UI", "build interface", "clone [url]", "design system", "component library", "create prototype", "hi-fi", "mockup", "canvas", "design tokens", "figma sync", "review this design", "critique", "handoff". Always use this skill for any frontend visual design work — do not fall back to generic frontend-design unless the user explicitly opts out of design-engine.
Rebuilds an AI-generated (or any) flat motion design video as clean, editable code: inline SVG shapes animated by one GSAP timeline, seekable frame by frame, looping seamlessly, checked side by side against the source; and optionally turns an interface recording into a real interactive website (GSAP ScrollTrigger, real clicks). Ships scripts to study the video (frames, cuts, contact sheet, exact palette), render the code to mp4/GIF through anim.seek, compare it with the source frame by frame and check the loop seam and page contract. Use when the user wants a video, GIF, Lottie-like clip, motion design shot, animated logo, UI screen recording or AI video "recreated in code", "converted to SVG/GSAP", "made into an HTML animation" or "made into a real site". Not for photographic footage, 3D rendering or video editing
Use when building, changing or reviewing any interface a person operates - dashboard, admin panel, table, form, settings, modal, onboarding, mobile app screen, landing page - or when a UI looks AI-generated, cluttered, generic, "vibe coded", over-decorated, unfinished, or hard to scan. Also use when asked to remove AI slop, make a UI clean, plain, polished or professional, fix the UX, or check a build before shipping
Game asset engineer that creates pixel art sprites, animated characters, and visual entities for browser games. Use when a game needs better character art, enemy sprites, item visuals, or any upgrade from basic geometric shapes to recognizable pixel art.
Game UI/UX designer that analyzes and improves the visual polish, atmosphere, and player experience of browser games. Use when a game needs visual improvements, better backgrounds, particles, animations, screen transitions, juice/feel, or overall aesthetic upgrades.
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
Analyze a game, find what needs work, and implement the highest-impact improvements. Use when the user says “improve my game,” “make my game better,” “fix my game,” “what's wrong with my game,” or “polish my game.” Run repeatedly—each pass finds the next most impactful thing to fix. Do NOT use for adding specific new features (use add-feature) or initial game creation (use viral-game for one-shot builds, make-game for milestone-driven projects)
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
Builds bespoke motion graphics for an edit, one animated clip per beat (HyperFrames + GSAP), each designed for its line and landing on the spoken word, then lays them on the footage through the style-edit render. Picks the beats that need motion (a count, a list, a flow, a before and after, a run, a mechanism), writes a brief per clip, runs one clip-builder agent per clip at once, gates every clip (lint, layout, render, a frame-to-frame motion check, contact sheets), and falls back to the template card for a clip that fails. Use when the user says "animation", "motion graphic", "animate this", "animate the part where I say X", "make a clip for", "build the animations", or when style-edit or visual-prep reaches the beats that need motion. Not for captions or zooms (style-edit), not for real screenshots and logos alone (overlays), not for a product demo film (product-video).
Install, set up and use the tailwindcss-concentric plugin to fix and prevent mismatched nested corner radii in Tailwind CSS v4 projects. Use when the user asks to add or set up tailwindcss-concentric, to audit or fix nested border radii, or when building or reviewing UI where a rounded element sits inside a padded or bordered rounded parent (cards with media, buttons in search bars or toolbars, segmented controls, selection rings, modals, input groups), when you see hard-coded inner radii such as rounded-[calc(...)], or when the user mentions concentric, nested, inner or outer corner radius
Transform mocked-up UI specs (specs-ui skill project) into a purely UI clickable prototype in HTML + Tailwind + Alpine.js: main flows are wired up (navigation, forms, states, simulated data stored in the browser, reset), with guided test scenarios for user testing and demos, published as a multi-page artifact. Use whenever someone wants a prototype, clickable mockup, interactive demo, user-testable flow, user test, or a version "you can click through" based on existing specs or mockups, even without saying "prototype".
Use when studying a SaaS web product from the outside in order to rebuild, clone or copy it (ClickUp, Pipedrive, Notion, a CRM, a project tool), when documenting its UX, screens, components, data model, business rules or API through a browser the agent drives, when assessing what would block a clone from launching (permissioned integrations, regulation, certifications), or when an agent must explore a live SaaS account without damaging production data or notifying real people.
Remove the “AI look” from websites, landing pages, apps, dashboards, docs, and slides (HTML/CSS, Tailwind, React, shadcn). Use when creating or reviewing any interface, or when someone asks for design that feels “less AI,” “more human,” “less templated,” or “less SaaS,” or asks for visual references (Pinterest, Dribbble, Awwwards). Covers the entire process: brief, pre-code sketch, browser-based reference search, design system, build, and detector audit. Catches the tells people recognize in 2 seconds: an eyebrow above the title, a gradient or differently colored word in the title, a card with a side border, a chip with a pulsing dot, emoji in place of an icon, Tailwind purple, pills everywhere, glassmorphism, “how it works” in 3 steps, Playfair with italics at the end, a site without images, a SaaS look for a bakery. Based on the 51 replies to @greco_dev’s thread (Oct 2026).
Bans the 43 tells of a vibecoded website (purple gradient on black, indigo Tailwind buttons, bento grid, liquid glass, sparkles icon, fake counters, "Most popular" pricing, the "Create Next App" tab, no legal pages...) while Claude builds or reviews a site, so it looks made by a human. Use when building, redesigning or reviewing a website, landing page or web app UI, or when the user types /anti-vibecode, "vibecodé", "ça fait IA", "looks AI generated".
Design, improve, and validate UI/UX for applications, websites, native interfaces, and games: an art direction derived from the product, a coherent visual system kept in the project's DESIGN.md (read first, created when missing, the single source of interface values), measured layout geometry (equal spacing, shared alignment lines, content centered inside small controls, nothing clipped or touching its container edge), a catalog of AI-slop patterns that rejects page narration and redundant helper text, a living motion language (press feedback, transitions, choreography, reduced motion), an Apple-like ultra-minimal default style, an opt-in pool of signature effects, clear actions, accessibility, drag and drop anticipated from the start (drop zones for every upload), and real states (including skeleton loaders and loading splash) without AI slop. Use for interface creation, redesigns, focused UI changes, animation and interaction polish, design plans, and UX audits; not for backend-only tasks.
Design and change UI through an interactive shell. Turn a spec and a low-fidelity sketch, or an existing component, into a high-fidelity mock.html in the project's own style, iterate on it with the user, then implement it. Alternatively, open the shell over the running app so the user can inspect, comment on and restyle real elements, with changes going straight into code and tests. Use when the user invokes /building-ui, asks to mock up a new component or UI element from a sketch, change a component through a mock, implement an approved mock, or review or change the UI of the running app.
Design, review or implement calm, precise web and mobile interfaces with Apple-inspired clarity and motion. Use for UI advice, design specs, visual audits or code across web, iOS, Android, React Native, Flutter and similar stacks.
Make DeepSeek (or any model) produce motion-design videos that match what Claude Opus 5.5 makes from the same prompt, for any request in any style — brand films, showreels, kinetic typography, explainers and data stories, product and UI promos, character stories and music videos, abstract loops, title sequences. It reads the prompt like Opus, derives an art direction from it, plans before coding, builds a Remotion (React + SVG) project on a tested starter with generated sound, and reviews its own work with a five-juror critique. Triggers on 动效, 动态设计, 视频, 短片, 复刻 opus 效果, 扩写提示词, Remotion, motion graphics, showreel, MV.
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.