Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Generates ZK Framework ZUL pages (.zul) through a structured 5-step workflow: requirements clarification, ZUL generation, validation, controller generation, and a rendered-image self-review. Every step also stands alone, so use this skill for a single step too — validating an existing .zul, writing the Composer/ViewModel for a page that already exists, or just rendering a .zul to a preview PNG without touching it. Supports both MVC (Composer-based) and MVVM (ViewModel-based) patterns, ZK 9/10, and visual analysis for screenshot-to-ZUL conversion. Use when the user asks to create a ZUL page, build ZK UI components (forms, grids, dashboards, borderlayouts), convert an image/mockup to ZUL code, edit or extend an existing ZUL page, move a page's hard-coded data into a Composer/ViewModel, validate/fix a .zul that errors, preview/screenshot/see what a ZUL page looks like, or work out why a rendered page looks wrong — a blank icon, a clipped label, an element that is not there, a colour or width nobody asked for.
Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-label), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).
Build source-backed dashboards for monitoring performance, exploring drivers, or acting on product and business metrics. Use when the task needs a dashboard, scorecard, or monitoring view with clear metrics, filters, source definitions, and QA.
Convert prompts written for custom-coded web stacks such as React, Tailwind, Next.js, Vite, or plain HTML/CSS/JS into copy-paste-ready prompts for a Framer agent. Invoke this skill whenever the user says "convert prompt" (with or without a hyphen) or asks to rewrite, adapt, translate, or convert a code-oriented website, page, section, component, animation, or interaction prompt into native Framer platform instructions while preserving the original design intent, copy, layout, typography, color, motion, interactions, responsive behavior, and constraints.
Convert a light-only site or app to a real dark mode -- semantic token mapping, elevation-based surfaces, recalibrated shadows and imagery -- not a naive inversion. Handles Tailwind, CSS variables, and styled-components, plus the toggle, persistence, and no-flash boot.
Keeping a design system in an LLM's context: loading tokens compactly, persisting design decisions across sessions, handling multiple variants, and budgeting the context window. Use when generated UI drifts from the design system, or when setting up tokens and decisions so every session and agent uses the same ones.
Use this skill whenever building interfaces that should feel physically responsive, alive, and polished. Trigger for spring animations, gesture-driven UI, interruptible animations, physics-based motion, drag interactions, momentum scrolling, layout animations, shared element transitions, spatial UI, micro-interactions, haptic feel, or any request to make an interface feel alive, snappy, smooth, natural, polished, or less static. Also trigger when building interactive components (drawers, sheets, carousels, modals, accordions, reorderable lists) without specified animation, or any interactive prototype, component library, or design system.
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter
json-render component catalog patterns for AI-safe generative UI. Define Zod-typed catalogs that constrain what AI can generate, use @json-render/shadcn for 36 pre-built components, optimize specs with YAML mode, and apply the three edit modes (patch/merge/diff) for progressive updates. Use when building AI-generated UIs, defining component catalogs, or integrating json-render into React/Vue/Svelte/React Native/Ink/Next.js projects.
Fix or build responsive layout: page shells, grids, card layouts, sidebars, breakpoint strategy, container queries. Use when the user says 'this breaks on mobile', 'the layout is messy', 'things don't line up', 'our spacing is inconsistent between sections', 'make this responsive', 'center this properly', or asks for a dashboard/page/grid layout. Inspects existing CSS for layout smells (fixed widths, absolute positioning, media-query sprawl), then produces working layout code — refactored CSS/JSX with Grid/Flexbox decision rules applied, breakpoints derived from content, and a responsive verification checklist. Hands off pure spacing-token questions to design-foundation and text-readability questions to typography-system.
Turn a topic or material, verified by search, into an Apple Live Photo informational motion card. Use Remotion to compose images, PNG, emoji, scenes, timelines and optional charts, suited to knowledge explanation, product comparison, processes of change and data stories; produce a previewable animation and a paired Live Photo asset, and explain receiver compatibility.
Use this skill when visual quality and design identity matter for a PDF. CREATE (generate from scratch): "make a PDF", "generate a report", "write a proposal", "create a resume", "beautiful PDF", "professional document", "cover page", "polished PDF", "client-ready document". FILL (complete form fields): "fill in the form", "fill out this PDF", "complete the form fields", "write values into PDF", "what fields does this PDF have". REFORMAT (apply design to an existing doc): "reformat this document", "apply our style", "convert this Markdown/text to PDF", "make this doc look good", "re-style this PDF". This skill uses a token-based design system: color, typography, and spacing are derived from the document type and flow through every page. The output is print-ready. Prefer this skill when appearance matters, not just when any PDF output is needed
Write or critique a user story—a small unit of user value framed around a real persona’s need, not a restated task. Frame stories around who, what, and why; keep them INVEST-compliant and testable; map them across the journey; and avoid stories that add no clarity. Apply the always-true core and gate context-dependent decisions (strict formula vs. free form, whether to write a story at all, acceptance-criteria depth, splitting into a map, communication framing). Trigger when asked to write user stories, turn a persona or need into stories, frame requirements as stories, build a story map, apply INVEST, or review or strengthen existing stories
Implements Syncfusion WinForms SfDataGrid component for displaying and managing tabular data in Windows Forms applications. Use this when working with data grids, column management (auto-generation, stacked headers), data operations (filtering, sorting, grouping), or grid editing with validation. The skill covers data summaries, selection modes, export capabilities (Excel/PDF), conditional styling, master-detail views, and drag-and-drop functionality.
Install and work with uifork, a CLI tool and React component library for managing UI component versions. Use when the user wants to version components, test UI variations, gather stakeholder feedback, or work with uifork commands like init, watch, new, fork, promote.
Expert vehicle designer combining industrial design rigor with entertainment artistry. This skill embodies the methodologies of Scott Robertson's "How to Draw" precision, Syd Mead's future industrial aesthetic, and the functional-aesthetic balance demanded by AAA racing games like Gran Turismo, Forza, and sci-fi franchises like Halo and Star Wars. Every vehicle tells a story through its form. A racing car must look fast standing still. A military vehicle must communicate power and protection. A spacecraft must suggest propulsion physics even when none exist. This skill bridges the gap between "cool looking" and "believably functional" - the difference between concept art that ships and concept art that gets rebuilt from scratch. Use when "vehicle design, car design, spaceship design, aircraft design, tank design, mech design, motorcycle design, racing car, futuristic vehicle, sci-fi vehicle, military vehicle, hover vehicle, flying car, starship, fighter jet, boat design, submarine design, cockpit design, vehicle interior, vehicle customization, damage states, vehicle livery, form language, vehicle proportion, wheel design, hard surface vehicle, vehicle modeling reference, vehicle turnaround, vehicle, automotive, industrial-design, concept-art, hard-surface, sci-fi, racing, military, spacecraft, mech, transportation, game-art, form-language" mentioned.
Select and correctly use the public capabilities of @veltra/* (desktop components, ai AI chat, sheet spreadsheets, styles themes, utils, compositions, directives, icons, vite) in Vue 3 projects. Mandatory when developing interfaces, forms, tables, themes or icons; when writing UForm / approval forms / modal forms you must first read the form examples (field binding, no more v-model); search this skill first before implementing equivalent UI capabilities yourself or introducing another component library.
Use when the user needs HTML Canvas, SVG graphics, data visualization, generative art, or interactive visual elements with D3.js or similar libraries. Triggers: user says "canvas", "SVG", "chart", "data visualization", "D3", "generative art", "animation", "interactive graphics", drawing on screen.
Audit and sync design tokens between the source of truth (tokens.json, Figma variables export) and the code that should consume them (Tailwind config, CSS custom properties, theme files). Finds drift -- hardcoded values, orphan tokens, out-of-date copies -- and fixes it in the right direction.
Generate images using AI. Use when asked to generate, create, or make images, textures, icons, sprites, artwork, visual assets, or mockups. Supports OpenAI (gpt-image-2) and Google Gemini (Nano Banana). Requires an API key for the chosen provider.
Create final Chinese handdrawn technical article/PPT-style page images from articles, Markdown, PDFs, DOCX files, existing slide decks, course notes, scripts, outlines, or rough ideas. Use when the user asks to turn content into PPT/PPTX/slides/courseware/课件/演示稿/配图/效果图 in a refined Chinese handdrawn technical explanation style, to plan such pages, to choose page layouts from semantic content, or to generate complete image-model pages with Chinese text baked into the final visual. Default article outputs use 21:9 covers and 16:9 body illustrations.
Design and implement the motion layer of a UI — microinteractions, transitions, hover/press feedback, and animation timing/easing — as working CSS/JS plus a written animation spec. Use when the user says 'the app feels janky', 'animations feel off', 'make it feel smoother/snappier', 'add a transition', 'the modal just pops in', 'buttons feel dead', 'add some polish/delight', or when interactions give no feedback. Also use to audit existing animations for timing, easing, performance (GPU properties), and reduced-motion support. Produces an animation spec (duration/easing per interaction class) and the implemented transitions.
Design an original app logo — a compact mascot or symbol that stays readable at 32 × 32 and works as an icon at every size. Use when asked to create, design or generate a logo, app icon, brand mark, mascot or avatar for a product, whether or not an image generator is available. Produces either a vector file the project can keep or a prompt for an image model, from one shared set of design rules.
Creates and checks conference research posters and short poster-session pitches. Use when the user asks to make a poster, prepare a research poster, adapt a paper into a poster, fit a poster to A0/A1/36x48in, check a beamerposter or tikzposter file, reuse paper figures, or write a 2-minute or 5-minute poster pitch. Bundled scripts resolve poster dimensions, inventory reusable figures, lint print-day problems, and time spoken pitches.
Build or critique an audience-understanding artifact—research-based user personas, a Jobs-to-Be-Done framing, or the choice between them. Grounds the work in real research (never invented demographic fiction), keeps only detail that changes a decision, and picks the lens by research objective, stage, and resources. Applies the always-true core and gates context-dependent decisions (personas vs. JTBD vs. both, research-based vs. proto, how many personas, which details, segmentation depth, AI's role). Trigger when asked to create user personas, define a target audience/segment, apply Jobs-to-Be-Done, decide who the product is for, or review existing personas.
Right-to-left (RTL) layout and bidirectional text support for Hebrew, Arabic, Persian, and Urdu interfaces. Use when building UI that must support RTL languages, converting physical CSS/Tailwind properties to logical ones, handling mixed-direction (bidi) text, mirroring directional icons, or testing an app with dir=\"rtl\".
For Ray mini-program smart-ui, assists with generating and modifying pages and components using a meta-first workflow. Use when the user requests UI construction, component refactoring, form and feedback interactions, navigation display, image-to-code, or smart-ui troubleshooting and upgrades; also covers using smart-ui Web Components (assets/wc/ directory) in a plain browser / H5 / non-mini-program host. Covers smart-ui only; consult _meta.json and the component docs before implementing, and do not invent props, events, or capabilities.
Design or critique an activity feed / stream — a scannable list of updates where what matters stands out and noise fades. Gates the feed-type choice (chronological vs. algorithmic/ranked) and levers like notification aggregation, follow recommendations, and per-entry controls, while applying the always-true core (curated entries, legible text, relative timestamps, no empty feed, visible refresh status). Trigger when the user asks to design or review an activity feed, news/social feed, activity stream, notifications feed, or timeline.
Design or critique a contact/support experience — help center, FAQ, contact methods, live chat, point-of-error help, and feedback flows. Leads with self-service deflection (most contacts are UX failures), applies the always-true core (easy access, expectation-setting, honest chat, close the loop) and gates context-dependent levers (which channels and order, chatbot vs. human, help-button placement) with trade-offs. Trigger when the user asks to design or review a contact us page, support page, help center, FAQ, live chat, or feedback form.
Design or critique an offboarding flow — canceling a subscription, unsubscribing, or deleting an account. Leads with the ethical stance (leaving must be easy and respectful — hiding the exit is a dark pattern), applies the always-true core (findable exit, preserve goodwill, prevent accidental destruction, explain consequences, ask feedback respectfully, offer genuine alternatives, close with a recovery path) and gates the retention levers (incentive offers, value reminders, confirmation friction, pause-vs-delete) with trade-offs so they don't tip into manipulation. Trigger when the user asks to design or review a cancel/unsubscribe/delete-account flow, a subscription cancellation, a churn/retention exit flow, or an account-deletion or deactivation experience.
Create and edit Bento presentations — single-file .bento.html decks whose document is plain JSON in a "#bento-doc" script block. Use whenever the user wants a slide deck or presentation: starting from NOTHING (it downloads the latest Bento app from bento.page automatically), from source material, or by improving an existing .bento.html. Maps content to the right feature (charts, morph transitions, state slides, ken-burns, motion paths) instead of static text slides, then writes the document JSON in place. Full schema + recipes at https://bento.page/agents.md.
Bitrix24 on-premise portal from /local — pages in bitrix24 template, SidePanel slider, UI Toolbar, left menu, employee/extranet checks, humanresources departments, Disk upload/attach, workgroups. Use when customizing an intranet portal.
Install a complete design-token theme into any project in one pass -- pulls a style from the Open Agent Stack design-styles collection (aurora-mesh, cirrus, liquid-glass, mono-brutalist, neo-terminal, sand-terra, tidal) or a local tokens.json, wires it into Tailwind/CSS, and repaints existing components to match.
Keeping a design system in an LLM's context: loading tokens compactly, persisting design decisions across sessions, handling multiple variants, and budgeting the context window. Use when generated UI drifts from the design system, or when setting up tokens and decisions so every session and agent uses the same ones.
Guide for implementing sortable and droppable components using dnd-kit library. Use this skill when building React applications that require drag-and-drop functionality with both container reordering (useSortable) and item dropping (useDroppable) capabilities, such as Kanban boards, file management systems, or playlist editors.
Motion design for explainer diagrams and films, making connections, messages, and cards kinetic and physical. Use when animating a diagram, data flow, or architecture explainer (Psychopomp, web, or video); when lines should draw on or messages should travel and land; or when a motion graphic feels flat, floaty, stuttery, or over-glowing.
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.