Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
intense-visions Bundle Astro Deployment Config 2Astro Deployment Configuration
18 -
intense-visions Bundle Audit Component Anatomy 2Audit Component Anatomy
18 -
intense-visions Bundle Test Accessibility Testing 2Test Accessibility Testing
18 -
intense-visions Bundle React Progressive Hydration 2React Progressive Hydration
18 -
intense-visions Bundle Svelte Performance Patterns 2Svelte Performance Patterns
18 -
intense-visions Bundle Next Deployment Optimization 2Next.js Deployment Optimization
18 -
intense-visions Bundle Svelte Component Composition 2Svelte Component Composition
18 -
intense-visions Bundle Trpc React Query Integration 2tRPC React Query Integration
18 -
intense-visions Bundle Svelte Transitions Animations 2Svelte Transitions and Animations
18 -
intense-visions Bundle React Container Presentational 2React Container/Presentational Pattern
18 -
intense-visions Bundle React State Management Pattern 2React State Management Pattern
18 -
intense-visions Bundle Next Parallel Intercepting Routes 2Next.js Parallel and Intercepting Routes
18 -
ericgrill Bundle Tailwind Design System 2Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
-
ericgrill Skill HTML To Image Automation 2Automate Html To Image tasks via Rube MCP (Composio). Always search tools first for current schemas.
-
jiayaoqijia Bundle Sui Dev 2Full-stack Sui blockchain development — Move smart contracts, TypeScript SDK, and frontend dApp Kit. Routes to the appropriate sub-skill based on what the user is building.
-
jiayaoqijia Bundle Sui Move 2Sui Move smart contract development. Use when writing, reviewing, or debugging Move code on Sui. Covers Move abilities (key, store, copy, drop), TxContext, init functions, One-Time Witness, package publishing and upgrades, resource safety, events, and coins. Also use when the user asks about struct abilities, UID, how to destroy objects, or how to create a fungible token. For object model and ownership, see the `object-model` skill. For programmable transaction blocks, see the `ptbs` skill. For frontend dApp development, see the `frontend-apps` skill. For project setup and Move.toml, see the `sui-move-project` skill.
-
jiayaoqijia Bundle Solana Dev 2End-to-end Solana development playbook (Jan 2026). Prefer Solana Foundation framework-kit (@solana/client + @solana/react-hooks) for React/Next.js UI. Prefer @solana/kit for all new client/RPC/transaction code. When legacy dependencies require web3.js, isolate it behind @solana/web3-compat (or @solana/web3.js as a true legacy fallback). Covers wallet-standard-first connection (incl. ConnectorKit), Anchor/Pinocchio programs, Codama-based client generation, LiteSVM/Mollusk/Surfpool testing, and security checklists.
-
jiayaoqijia Bundle Monad MCP 2Monad MCP server built on Next.js. Provides blockchain tools for interacting with the Monad network, including ABI guessing, contract analysis, and EVM interactions.
-
jiayaoqijia Bundle Mobile Testing 2Single MetaMask Mobile testing entrypoint. Routes unit, component-view, integration, Appium E2E, and test-layer placement work to the right references. Use when writing, fixing, reviewing, or placing Mobile tests; when the user mentions Jest layers, *.view.test.tsx, *.integration.test.ts, Appium smoke, MMQA test-layer tickets, or asks which testing skill to install.
-
jiayaoqijia Bundle UI Development 2UI component development standards for MetaMask clients: the strict design-system-first component hierarchy, availability checks before building custom components, styling with design tokens, and required imports. Use when building, restyling, or reviewing any UI component, or when choosing between a design-system, component-library, or custom component.
-
jiayaoqijia Bundle Certified Variables 2Serve cryptographically verified responses from query calls using Merkle trees and subnet BLS signatures. Covers certified data API, RbTree/CertTree construction, witness generation, and frontend certificate validation. Use when query responses need verification, certified data, or response authenticity proofs.
-
jiayaoqijia Bundle Neo Dapp Starter 2Production-ready Neo N3 dApp starter template with Next.js 15, wallet integration (NeoLine/OneGate), NEP-17 token operations, multi-chain support, and edge deployment. Use when building Neo dApps, creating Neo frontends, integrating Neo wallets, or scaffolding Neo N3 projects.
-
jiayaoqijia Bundle Component View Test 2Deprecated. Use testing/mobile-testing instead (references/component-view.md). Kept as a redirect stub for older installs and --include paths.
-
jiayaoqijia Bundle Vetkeys 2Build vetKeys cryptography on the Internet Computer via the vetKD system API and the ic-vetkeys (Rust, Motoko) and @icp-sdk/vetkeys (frontend) libraries: identity-based encryption (IBE), threshold BLS signatures, timelock encryption, symmetric key derivation, and offline public-key derivation. Use when implementing IBE, encrypting to a principal, BLS signing, sealed-bid or timelock schemes, deriving encryption keys on-chain, transport keys, or calling vetkd_public_key / vetkd_derive_key. For access-controlled encrypted key-value storage (password managers, encrypted notes), use the encrypted-maps skill instead. Not for authentication — use internet-identity.
-
jiayaoqijia Bundle Frontend Apps 2Sui frontend / dApp development with @mysten/dapp-kit-react (React) and @mysten/dapp-kit-core (Vue, vanilla JS, Svelte, Web Components, other frameworks). Use when building browser apps that connect Sui wallets, query on-chain state, or submit transactions. Covers wallet connection, network switching, transaction execution, query patterns with TanStack React Query, and the specific pitfalls of browser + wallet + async-indexer environments. Pair with the `sui-sdks` skill for @mysten/sui Transaction construction patterns and the `ptbs` skill for PTB semantics.
-
jiayaoqijia Bundle Move Security 2Move smart contract security on Sui. Use when reviewing Move code for security vulnerabilities, designing access control patterns, handling capabilities safely, securing randomness usage, validating invariants, planning upgrade governance, managing keys, or auditing privileged operations. Also use when the user asks about UpgradeCap security, capability revocation, shared object authorization, onchain randomness restrictions, oracle data validation, emergency controls, or frontend transaction signing safety. For Move language fundamentals, see the `sui-move` skill. For object model and ownership, see the `object-model` skill. For publishing and upgrading packages, see the `sui-publish` skill.
-
jiayaoqijia Bundle Static Site 2Deploy a frontend or any static site to the IC with the @dfinity/static-site recipe (the certified-assets canister). Covers icp.yaml recipe config, SPA routing with _redirects, custom headers/CSP with _headers, clean URLs, access protection for private apps, custom domains, and building against canister IDs. This is the recommended way to host frontends and static files on the IC. Also the entry point for the legacy @dfinity/asset-canister recipe and .ic-assets.json5 (see the legacy reference) and for migrating an existing asset canister to certified-assets. Use when hosting a frontend, deploying static files, an asset canister, or setting up SPA routing on the IC. Do NOT use for canister-level HTTP code patterns or custom domain DNS setup — use custom-domains for DNS.
-
jiayaoqijia Bundle Caffeine App 2Scaffold and build a complete Caffeine app (caffeine.ai) from scratch — the project layout, the caffeine.toml workspace + canister manifests, the mops.toml for the single Motoko `backend` canister, the React/Vite frontend, and the caffeine CLI build loop (auth login, doctor, install, check --fix, preview --build). Use whenever the user wants to create, scaffold, set up, or build a Caffeine app or a caffeine.ai project, asks about caffeine.toml or mops.toml structure, or needs the caffeine CLI workflow — even if they do not say the words 'from scratch'. Always pair it with the `writing-motoko` skill for the backend code. Do NOT use it for Motoko language syntax or compiler errors (use the `writing-motoko` skill), and do NOT use it for generic Internet Computer / dfx / icp deployment (use the `icp-cli` skill).
-
jiayaoqijia Bundle Sui TS Sdk 2Sui TypeScript SDK — PTB construction, client setup, transaction execution, and on-chain queries. Use when writing code that interacts with the Sui blockchain via @mysten/sui. These patterns apply in both backend scripts and frontend apps. For frontend-specific setup (dApp Kit, wallet adapters, React hooks), use the sui-frontend skill first or alongside this one.
-
jiayaoqijia Bundle Sui TS Sdk Backend 2Sui TypeScript SDK for backend services and autonomous agents. Use when building a backend, agent, or service that interacts with Sui programmatically without CLI — keypair creation, faucet funding, client setup, transaction building and signing, package publishing from code, sponsored transactions, running transactions at scale with executors, cloud KMS signing (AWS/GCP), and multisig workflows. Also use when the user asks how to bootstrap a Sui agent, build a backend signer service, or run high-throughput transaction pipelines. For frontend dApp development with wallets, see the `frontend-apps` skill. For SDK selection (TS vs Rust vs community), see the `sui-sdks` skill. For PTB semantics and command reference, see the `ptbs` skill. For Move smart contract development, see the `sui-move` skill.
-
theneoai Bundle Prompt Engineer 2Expert-level Prompt Engineer skill. Transforms AI into a specialist who designs, evaluates, and optimizes prompts for LLMs, RAG pipelines, and agent workflows. Covers prompt patterns (zero-shot, few-shot, CoT, ReAct, Tree-of-Thought), RAG context injection and chunking strategies, agent tool-calling and multi-agent coordination, LLM-as-judge evaluation pipelines, and prompt injection
-
jiayaoqijia Bundle React Compiler Migration 2Migrate existing files so the React Compiler can optimize them, using react-compiler-marker output as the source of truth. Use when fixing React Compiler bail-outs, working through a react-compiler-marker report, or when the user mentions rcm, compiler failures, "Cannot access refs during render", "Existing memoization could not be preserved", or other compiler diagnostics.
-
jiayaoqijia Bundle Custom Domains 2Register and manage custom domains for IC canisters via the HTTP gateway custom domain service. Covers DNS record configuration (CNAME, TXT, ACME challenge), the .well-known/ic-domains file, domain registration/validation/update/deletion via the REST API, TLS certificate provisioning, and HttpAgent host configuration. Use when the user wants to serve a canister under a custom domain, configure DNS for IC, register a domain with boundary nodes, troubleshoot custom domain issues, or update/remove a custom domain. Do NOT use for general frontend hosting or asset/static-site canister configuration without custom domains — use static-site instead.
-
jiayaoqijia Bundle Encrypted Maps 2Add access-controlled, end-to-end encrypted key-value storage to a canister with the vetKeys EncryptedMaps library (ic-vetkeys for Rust and Motoko backends, @icp-sdk/vetkeys for the frontend). Values are encrypted client-side under vetKeys and shared between principals with per-user access rights (Read, ReadWrite, ReadWriteManage). Use when building a password manager, encrypted notes, a secure vault, or any app that stores and shares encrypted data on-chain. Start here for encrypted storage; escalate to the vetkeys skill only for BLS signatures, custom IBE, or timelock encryption.
-
jiayaoqijia Bundle Sui Frontend 2Sui frontend dApp development with @mysten/dapp-kit-react (React) and @mysten/dapp-kit-core (Vue, vanilla JS, other frameworks). Use when building browser apps that connect to Sui wallets, query on-chain data, or execute transactions. Use alongside the sui-ts-sdk skill for PTB construction patterns.
-
theneoai Skill Agentscope Developer 2Expert-level AgentScope developer skill for building production-ready LLM agents. Transforms AI into an experienced AgentScope architect with deep knowledge of ReAct agents, multi-agent orchestration, memory modules, voice agents, MCP/A2A integrations, and model fine-tuning. Use when: building agents, agent framework, multi-agent, voice agent, MCP, A2A, memory, fine-tuning.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include astro-deployment-config, audit-component-anatomy, test-accessibility-testing. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.