AI Ml AI agent skills

8,771 skills in the archive. Read a skill’s instructions or open its original repository.

• Layout Grid

  by @Owl-Listener

  Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use…

• Responsive Design

  by @Owl-Listener

  Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use…

• Design Brief

  by @Owl-Listener

  Write a project brief — problem space, constraints, audience, and success criteria. Use at kickoff for one specific project. For long-horizon aspiration use `north-star-vision`; for reusable decision rules use `design-principles`.

• Heuristic Evaluation

  by @Owl-Listener

  Run an expert review against Nielsen's heuristics and domain criteria, with severity ratings. Use when you need findings without recruiting participants. For a facilitated team feedback session, use `design-critique` (design-ops).

• Business Design

  by @Owl-Listener

  Read financials, map competitive landscapes, and argue design decisions in the language of value. Use when defending design to commercial stakeholders. For the live negotiation itself, use `design-negotiation` (designer-toolkit).

• Law Of Closure

  by @Owl-Listener

  Apply the Law of Closure — the eye completes implied shapes from partial forms. Use when reducing visual weight by dropping borders or letting negative space suggest structure. For explicit containers, use `law-of-common-region`.

• State Machine

  by @Owl-Listener

  Model component behaviour as explicit states, events, and transitions. Use when a component has many interacting states that must be exhaustive. For the feel and feedback of a single interaction, use `micro-interaction-spec`.

• Visual Hierarchy

  by @Owl-Listener

  Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).

• Von Restorff Effect

  by @Owl-Listener

  Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use `visual-hierarchy`.

• Law Of Continuity

  by @Owl-Listener

  Apply the Law of Continuity — the eye follows alignment and unbroken paths. Use when sequencing steps, aligning content, or designing carousels and timelines. For grouping rather than sequencing, use `law-of-proximity`.

• Dark Mode Design

  by @Owl-Listener

  Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.

• Law Of Figure Ground

  by @Owl-Listener

  Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use `von-restorff-effect`.

• Law Of Common Region

  by @Owl-Listener

  Apply the Law of Common Region — a shared container, background, or border groups elements regardless of spacing. Use when grouping must survive a tight layout. For grouping by spacing alone, use `law-of-proximity`.

• Test Scenario

  by @Owl-Listener

  Write realistic usability task scenarios with success criteria and facilitation notes. Use when you have a study and need the tasks. For the surrounding study design, use `usability-test-plan` (design-research).

• Competitive Analysis

  by @Owl-Listener

  Compare UX patterns, features, strengths, and gaps across rival products. Use when you need to know what others actually do. For deliberately adopting their conventions, use `jakobs-law` (interaction-design).

• Law Of Similarity

  by @Owl-Listener

  Apply the Law of Similarity — shared colour, shape, or size signals that elements belong to one category. Use when signalling relationships across distance. For grouping by position, use `law-of-proximity`.

• A B Test Design

  by @Owl-Listener

  Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

• Zeigarnik Effect

  by @Owl-Listener

  Apply the Zeigarnik Effect — incomplete tasks stay mentally active. Use when designing progress indicators, saved drafts, and return hooks. For the emotional shape of the ending, use `peak-end-rule`.

• Metrics Definition

  by @Owl-Listener

  Define UX metrics and KPIs that connect design decisions to measurable outcomes. Use when choosing what to measure. For presenting the results afterwards, use `design-impact-reporting` (design-ops).

• Teslers Law

  by @Owl-Listener

  Apply Tesler's Law — every process has irreducible complexity that someone must absorb. Use when deciding whether the product or the user carries it. For reducing apparent choice, use `hicks-law`.

• Readable Measure

  by @Owl-Listener

  Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use `typography-scale`.

• Illustration Style

  by @Owl-Listener

  Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).

• Design Principles

  by @Owl-Listener

  Define actionable principles that resolve trade-offs when the team disagrees. Use when the same decisions keep getting relitigated. For a single project's framing, use `design-brief`.

• Wireframe Spec

  by @Owl-Listener

  Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).

• User Flow Diagram

  by @Owl-Listener

  Diagram screen-level paths, decision points, and branch logic. Use when specifying how a feature is traversed. For the emotional end-to-end arc, use `journey-map` (design-research).

• Prototype Strategy

  by @Owl-Listener

  Choose prototype fidelity and method to match the design question and the decision at stake. Use before building a prototype. For what to test once it exists, use `test-scenario`.

• Spacing System

  by @Owl-Listener

  Create a spacing scale from a base unit with rules for when each step applies. Use when standardising padding and margins. For page-level columns and gutters, use `layout-grid`.

• Click Test Plan

  by @Owl-Listener

  Design first-click and click tests for findability and navigation. Use when testing whether people can locate something. For full task-based observation, use `test-scenario`.

• Llm Council

  by @rohitg00

  Provider-agnostic multi-LLM deliberation. Three phases — independent responses, cross-model anonymized ranking, chairman synthesis. Provider config from env (OPENAI/ANTHROPIC/FIREWORKS/OPENROUTER/custom OpenAI-compatible base…

• Context Engineering

  by @rohitg00

  Master the four operations of context engineering — Write, Select, Compress, Isolate. Manage token budgets, compaction strategies, and context partitioning to keep AI sessions sharp and efficient.

• Phone Harness

  by @ShawnPana

  Control the user's phone — iPhone through the Mac's iPhone Mirroring window, or an Android over adb: open apps, tap, type, swipe, read the screen.

• Seedance

  by @songguoxs

  This skill should be used when the user asks to "generate video prompts", "create Seedance prompts", "write video descriptions", mentions "Seedance", "seedance", "即梦", "即梦平台", "视频提示词", "视频生成", "AI视频", "短剧", "广告视频", "视频延长", or…

• Codex

  by @bergside

  A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone…

• Fiction

  by @bergside

  A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded…

• Immersive

  by @bergside

  An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep…

• Claude

  by @bergside

  A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.

• Sega

  by @bergside

  A playful, arcade-inspired interface for games — built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blocks

• Sketch

  by @bergside

  A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.

• Impeccable

  by @bergside

  A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.

• Pulse

  by @bergside

  Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

• Bento

  by @bergside

  Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.

• Lingo

  by @bergside

  Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.

• Geometric

  by @bergside

  Geometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way.

• Riso

  by @bergside

  A playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every section

• Enterprise

  by @bergside

  Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.

• Expressive

  by @bergside

  Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

• Brutalism

  by @bergside

  Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.

• Perspective

  by @bergside

  Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.

• Ant

  by @bergside

  Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.

• Dramatic

  by @bergside

  High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.

• Flat

  by @bergside

  Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.

• Clean

  by @bergside

  Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.

• Dithered

  by @bergside

  Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.

• Material

  by @bergside

  Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.

• Agentic

  by @bergside

  Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.

• Skeumorphism

  by @bergside

  Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.

• Pacman

  by @bergside

  Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.

• Creative

  by @bergside

  Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.

• Modern

  by @bergside

  Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.

• Paper

  by @bergside

  Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.

• Sleek

  by @bergside

  Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.

• Editorial

  by @bergside

  Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.

• Cafe

  by @bergside

  Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.

• Mono

  by @bergside

  Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.

• Minimal

  by @bergside

  Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

• Power

  by @bergside

  High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.

• Premium

  by @bergside

  Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.

• Roku

  by @bergside

  App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.

• Artistic

  by @bergside

  High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.

• Corporate

  by @bergside

  Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.

• Fantasy

  by @bergside

  Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

• Levels

  by @bergside

  Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.

• Neobrutalism

  by @bergside

  Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.

• Basic

  by @bergside

  Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.

• Doodle

  by @bergside

  Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.

• Futuristic

  by @bergside

  Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.

• Neumorphism

  by @bergside

  Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.

• Retro

  by @bergside

  Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.

• Glassmorphism

  by @bergside

  Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.

• Professional

  by @bergside

  Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.

• Refined

  by @bergside

  Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.

• Spacious

  by @bergside

  Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.

• Matrix

  by @bergside

  A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements

• Contemporary

  by @bergside

  Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.

• Claymorphism

  by @bergside

  Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.

• Shadcn

  by @bergside

  Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.

• Friendly

  by @bergside

  Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.

• Gradient

  by @bergside

  Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.

• Neon

  by @bergside

  Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.

• Colorful

  by @bergside

  Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.

• Cosmic

  by @bergside

  Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.

• Bold

  by @bergside

  Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.

• Draft Wireframe

  by @jeremylongshore

  Wireframe a screen — text/ASCII by default, or hand-drawn HTML when the user says "sketch", "hand-drawn", "lo-fi HTML", "whiteboard", "graph paper", or "visual wireframe". Text mode produces a buildable ASCII spec Form and Prism…

• Draft Ia

  by @jeremylongshore

  Information architecture — design navigation structure, content hierarchy, sitemap, and taxonomy for a product or feature set. Use when asked to "organize the navigation", "information architecture", "how should content be…

• Draft Recon

  by @jeremylongshore

  UI and UX reconnaissance — scan existing frontend routes, components, navigation, and flows to understand the current UX state before designing. Use when asked to "understand the current UI", "what UX patterns exist", "map the…

• Crest Recon

  by @jeremylongshore

  Strategic context reconnaissance — read existing roadmaps, OKRs, competitive docs, and briefs to establish context before planning. Use when asked to "understand our strategy", "what's the current roadmap", "what OKRs do we…

• Buzz Community

  by @jeremylongshore

  Build and manage open source community — Discord/Slack structure, contributor onboarding, ambassador program, community flywheel design, and GitHub community health. Use when asked to "build a community", "grow our Discord",…

• Draft Flow

  by @jeremylongshore

  Use when asked to design a user flow, map how a user moves through a feature, create a wireframe or flow diagram, or document interaction design for a product brief. Examples: "design the flow for X", "map out the user journey",…

• Crest Narrative

  by @jeremylongshore

  Strategic narrative — write a standalone strategy memo that frames product direction, bets, and rationale for a planning horizon. Use when asked to "write a strategy doc", "product vision", "strategic narrative", "company…

• Deal Recon

  by @jeremylongshore

  Revenue reconnaissance — audit current sales pipeline, deal patterns, ICP definition, and revenue motion to understand what's working and where the constraint is. Use when asked to "audit our sales", "where is revenue stuck",…