Browse Skills

Discover and install AI Agent skills

Frontend & UI

Showing 1-20 of 6467 skills

nuxt-ui

Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

5341
@onmax

design-system-patterns

-

Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.

28.8k1
@wshobson

launch-go-to-market

Use this skill when the user needs to plan a product launch, prepare for Product Hunt, build a waitlist, coordinate a launch week, sequence go-to-market activities, or figure out how to get first users. Covers launch playbooks, beta programs, Product Hunt strategy, and post-launch momentum for bootstrapped SaaS.

1411
@whawkinsiv

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

72.9k1
@anthropics

nextjs

-

Build Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts and React 19.2. Prevents 25 documented errors. Use when: building Next.js 16 projects, or troubleshooting async params (Promise types), "use cache" directives, parallel route 404s, Turbopack issues, i18n caching, navigation throttling.

4521
@jezweb

slack

-

Use when you need to control Slack from Moltbot via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.

102.4k1
@moltbot

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

31.2k1
@nextlevelbuilder

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

600
@0000005

jira-project-management

Administer Jira projects. Use when creating/archiving projects, managing components, versions, roles, permissions, or project configuration.

30
@01000001-01001110

jira-projects

-

Manage Jira projects. Use when listing projects, getting project configuration, retrieving issue types, or managing components and versions.

30
@01000001-01001110

add-footer

-

Add a professional footer to README files with engagement prompts, community channels, and call-to-action for subscriptions. Use when you need to enhance your README with a footer that encourages interaction and builds community.

30
@0GiS0

teams-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Teams. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Teams like "make me a GIF of X doing Y for Teams."

30
@0GiS0

tiltup

-

Start Tilt dev environment in tmux, monitor bootstrap to healthy state, fix Tiltfile bugs without hard-coding or fallbacks. Use when starting tilt, debugging Tiltfile errors, or bootstrapping a dev environment.

350
@0xBigBoss

unfold-admin

Django Unfold admin theme - build, configure, and enhance modern Django admin interfaces with Unfold. Use when working with: (1) Django admin UI customisation or theming, (2) Unfold ModelAdmin, inlines, actions, filters, widgets, or decorators, (3) Admin dashboard components and KPI cards, (4) Sidebar navigation, tabs, or conditional fields, (5) Any mention of 'unfold', 'django-unfold', or 'unfold admin'. Covers the full Unfold feature set: site configuration, actions system, display decorators, filter types, widget overrides, inline variants, dashboard components, datasets, sections, theming, and third-party integrations.

70
@0xDarkMatter

viem

TypeScript patterns for low-level EVM blockchain interactions using Viem. Use when writing Node scripts, CLI tools, or backend services that read/write to Ethereum or EVM chains. Triggers on contract interactions, wallet operations, transaction signing, event watching, ABI encoding, or any non-React blockchain TypeScript code. Do NOT use for React/Next.js apps with hooks (use wagmi skill instead).

00
@0xSardius

wagmi

React hooks for Ethereum and EVM blockchain interactions using Wagmi v3. Use when building React or Next.js apps with wallet connections, contract reads/writes, or blockchain state. Triggers on useAccount, useConnect, useContractRead, useContractWrite, WagmiProvider, ConnectKit, RainbowKit, or any React blockchain hooks. Do NOT use for Node scripts or non-React code (use viem skill instead).

00
@0xSardius

graph-query

PROACTIVELY query the code graph database to understand relationships and impact of changes. Use this skill WHEN READING any file to understand context, when searching for files, when exploring the codebase, or when you need to understand what depends on a component. This is your primary tool for understanding code structure and avoiding breaking changes.

1640
@23blocks-OS

react-best-practices

-

Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.

1640
@23blocks-OS

slide-studio

Create and modify PowerPoint presentations (PPTX) through direct XML manipulation. Use this skill when: (1) Creating presentations from scratch, (2) Adding/editing/deleting slides, (3) Inserting images or custom shapes, (4) Applying POTX templates for consistent branding, (5) Editing existing PPTX files, (6) Working with slide layouts and placeholders, (7) User asks to make a "presentation", "slides", "deck", or mentions ".pptx". Supports all 11 standard Office slide layouts.

00
@24111999

angular-architect

-

Enterprise Angular development expert specializing in Angular 16+ features, Signals, Standalone Components, and RxJS/NgRx at scale.

60
@404kidwiz

Page 1 of 324

...