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.
-
tryboy869 Bundle Laravel Tall Stack Best Practices Cursorrules PromApply for laravel-tall-stack-best-practices-cursorrules-prom. You are an expert in the TALL stack: Laravel, Livewire, Alpine.js, and Tailwind CSS, with a strong emphasis on Laravel and PHP best practices. Key Principles - Write concise, technical responses with
-
tryboy869 Bundle Nextjs Supabase Shadcn Pwa Cursorrules Prompt FileApply for nextjs-supabase-shadcn-pwa-cursorrules-prompt-file. --- description: Sets conventions for Next.js 15+ projects, including leveraging the App Router, React Server Components (RSC), SSR capabilities, and Zustand for state management. globs: **/*.js, **/*
-
tryboy869 Bundle Nextjs Tailwind Typescript Apps Cursorrules PromptApply for nextjs-tailwind-typescript-apps-cursorrules-prompt. You are an expert programming assistant that primarily focus on producing clear, readable Next.JS + Tailwind + Typescript code. You always use latest version of Next.JS, and you are familiar with the
-
tryboy869 Bundle React Typescript Nextjs Nodejs Cursorrules PromptApply for react-typescript-nextjs-nodejs-cursorrules-prompt-. --- description: Enforces specific React/Next.js component development practices, including functional components, declarative JSX, UI library usage, and optimization techniques. globs: components/**/
-
tryboy869 Bundle Tauri Svelte Typescript Guide Cursorrules Prompt FApply for tauri-svelte-typescript-guide-cursorrules-prompt-f. You are an expert in developing desktop applications using Tauri with Svelte and TypeScript for the frontend. Key Principles: - Write clear, technical responses with precise examples for Tauri, Svelte
-
tryboy869 Bundle Typescript Nextjs Supabase Cursorrules Prompt FileApply for typescript-nextjs-supabase-cursorrules-prompt-file. You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Supabase, Tailwind, and Vercel AI SDK. **Code Style and Structure** - Write concise, technical TypeScript code
-
tryboy869 Bundle Typescript Nodejs Nextjs React UI CSS CursorrulesApply for typescript-nodejs-nextjs-react-ui-css-cursorrules-. --- description: Applies general TypeScript, Node.js, Next.js, and React best practices across the project. It focuses on code style, structure, TypeScript usage, syntax, UI, and performance optimizat
-
tryboy869 Bundle Typescript React Cursorrules Prompt File CursorrulesApply for typescript-react-cursorrules-prompt-file. --- description: Performance optimization strategies for TypeScript + React applications, including bundle optimization, caching, and rendering strategies. globs: src/**/*
-
tryboy869 Bundle Vscode Extension Dev Typescript Cursorrules Prompt FileApply for vscode-extension-dev-typescript-cursorrules-prompt-file. You are an expert in VSCode Extension Development, TypeScript, Node.js, HTML, CSS, VSCode APIs, and Electron. Code Style and Structure: - Write clear, concise TypeScript code following modern ECMAScri
-
tryboy869 Bundle General Typescript Node JS Next JS App Router React Rule[Applies to: **/*.{ts,tsx,js,jsx}] Applies general TypeScript, Node.js, Next.js, and React best practices across the project. It focuses on code style, structure, TypeScript usage, syntax, UI, and performance optimization.
-
pleaseai Skill NextNext.js adapter for embedding emulators directly in a Next.js app via @emulators/adapter-next. Use when the user needs to embed emulators in Next.js, set up same-origin OAuth for Vercel preview deployments, create an emulate catch-all route handler, configure Auth.js/NextAuth with embedded emulators, add persistence to embedded emulators, or wrap next.config with withEmulate. Triggers include "Next.js emulator", "adapter-next", "embedded emulator", "same-origin OAuth", "Vercel preview", "createEmulateHandler", "withEmulate", or any task requiring emulators inside a Next.js app.
-
pleaseai Skill Use TanstackAnswer questions and write code for TanStack libraries using version-accurate, officially shipped Agent Skills instead of training data. Use when working with any @tanstack/* package or TanStack library: Query (react-query, solid-query, vue-query — useQuery, useMutation, QueryClient, queryOptions, invalidation, optimistic updates), Router (@tanstack/react-router — createFileRoute, loaders, search params, path params, type-safe navigation), Start (full-stack framework — server functions, SSR, streaming), Table (headless tables — useReactTable, columns, sorting, filtering, pagination), Form (useForm, field validation), DB (createCollection, live queries, optimistic mutations, sync adapters), Virtual (useVirtualizer, list/grid virtualization), Store, Pacer (debounce/throttle/queue), AI, Devtools, Config, or CLI. Also use when the user mentions tanstack.com docs or the @tanstack/intent CLI.
-
tryboy869 Bundle Web App Optimization Cursorrules Prompt File CursorrulesApply for web-app-optimization-cursorrules-prompt-file. --- description: Applies general Svelte and SvelteKit best practices, including file structure, component development, and state management. globs: **/*.svelte
-
tryboy869 Bundle Nextjs15 React19 Vercelai Tailwind Cursorrules Prompt FileApply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Error handling patterns for Next.js 15 and React 19 applications, including error boundaries, API error handling, and graceful degradation strategies. globs: app/**/*
-
tryboy869 Bundle Nextjs React Typescript Cursorrules Prompt File CursorrulesApply for nextjs-react-typescript-cursorrules-prompt-file. You are an expert in Solidity, TypeScript, Node.js, Next.js 14 App Router, React, Vite, Viem v2, Wagmi v2, Shadcn UI, Radix UI, and Tailwind Aria. Key Principles - Write concise, technical responses w
-
tryboy869 Bundle System Prompt Nextjs 14 And Tailwind CSS Code Generation WitApply for system-prompt-nextjs-14-and-tailwind-css-code-generation-wit. You are an AI assistant specialized in generating TypeScript code for Next.js 14 applications using Tailwind CSS. Your task is to analyze design screenshots and create corresponding TypeScript code th
-
tryboy869 Bundle Typescript Vite Tailwind Cursorrules Prompt File CursorrulesApply for typescript-vite-tailwind-cursorrules-prompt-file. You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, DaisyUI, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these t
-
tryboy869 Bundle Javascript Astro Tailwind CSS Cursorrules Prompt F CursorrulApply for javascript-astro-tailwind-css-cursorrules-prompt-f. You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development. Key Principles - Write concise, technical responses with accurate Astro examples.
-
tryboy869 Bundle Python Fastapi Best Practices Cursorrules Prompt F CursorrulApply for python-fastapi-best-practices-cursorrules-prompt-f. --- description: Defines the preferred file structure and component usage for FastAPI applications. globs: **/main.py
-
pleaseai Bundle Use Better AuthAnswer questions about better-auth and help build authentication features. Use when developers: (1) ask about better-auth APIs like `betterAuth`, `auth.api.*`, `authClient.*`; (2) wire up sign-in / sign-up / sessions; (3) integrate framework adapters (Next.js, Nuxt, SvelteKit, Hono, Astro, Bun, Express); (4) add plugins (organization, two-factor, magic-link, passkey, oauth-proxy); (5) configure DB adapters (Prisma, Drizzle, Kysely, Mongoose). Triggers on: "better-auth", "betterAuth", "authClient", "sign in flow", "auth session", "social login", "magic link", "passkey", "organization plugin".
-
tryboy869 Bundle React Typescript Nextjs Nodejs Cursorrules Prompt CursorruleApply for react-typescript-nextjs-nodejs-cursorrules-prompt-. You are an expert in Solidity, TypeScript, Node.js, Next.js 14 App Router, React, Vite, Viem v2, Wagmi v2, Shadcn UI, Radix UI, and Tailwind Aria. Key Principles: - Write concise, technical responses
-
tryboy869 Bundle Typescript Nodejs Nextjs React UI CSS Cursorrules CursorruleApply for typescript-nodejs-nextjs-react-ui-css-cursorrules-. You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind. Code Style and Structure - Write concise, technical TypeScript code with accurate examples.
-
tryboy869 Bundle Typescript React Nextjs Cloudflare Cursorrules Pro CursorrulApply for typescript-react-nextjs-cloudflare-cursorrules-pro. --- description: General rules for TypeScript, Node.js and Next.js projects, focusing on best practices and preferred technologies. globs: **/*.{ts,tsx,js,jsx}
-
samarthakv29 Bundle SuperdesignSuperdesign is a design agent specialized in frontend UI/UX design. Use this skill before implementing any UI that requires design thinking. Common commands: superdesign create-project --title "X" (setup project), superdesign create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx (faithful reproduction), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (design variations), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (extend to more pages). Supports line ranges: --context-file path:startLine:endLine
-
pleaseai Bundle Vercel React View TransitionsGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
-
pramoddutta Skill Cypress E2e TestingEnd-to-end testing skill using Cypress for web applications, covering custom commands, network intercepts, fixtures, cy.session, and component testing patterns.
-
xfstudio Skill A2ui EmbedWrite HTML visualizations to the A2UI panel or embed running apps
-
pramoddutta Skill Detox Mobile TestingGray-box end-to-end testing for React Native apps with Detox. Covers .detoxrc.js configuration, build and test commands, matchers, device.launchApp control, automatic synchronization, and macOS CI pipelines.
-
pramoddutta Skill Xcuitest IOS TestingiOS UI testing with XCUITest framework covering element queries, gesture simulation, accessibility testing, and Xcode test plan configuration.
-
outlinedriven-odin-claude-plugin Bundle ReadoutUse when a user wants a readable, shareable HTML document of findings. Not for remote, credential, publish, deploy, or irreversible changes.
-
outlinedriven-odin-claude-plugin Bundle CatchupUse when the human returns after a gap, cannot follow the project, asks what happened, or wants a visual HTML recap page. Not for onboarding: use onboard. Not for handoff: use handoff.
-
fdu-ins Bundle Quality ComplianceContains verified SQMS No. 1 eight-component implementation checklists, Florida DBPR CPE/licensure rules (61H1-33, Chapter 473), and E&O claim-trigger analysis with loss prevention protocols. National standards (SQMS, NASBA, AICPA) plus Florida as the reference state jurisdiction. Quality management, peer review, CPE tracking, state board compliance, professional liability, independence monitoring, engagement inspection. Consult when designing or evaluating a firm QM system, preparing for peer review under SQMS, tracking CPE hours or verifying renewal compliance, managing multi-state practice privilege, resolving independence threats, building corrective action plans, screening clients for liability risk, or reviewing E&O coverage adequacy.
-
pramoddutta Skill Next JS Testing PatternsNext.js application testing covering Server Components, App Router, API routes, middleware, dynamic routes, and SSR/SSG testing patterns.
-
pramoddutta Skill Svelte Component TestingSvelte component testing with @testing-library/svelte, vitest, component rendering, event simulation, store testing, and SvelteKit testing.
-
pramoddutta Skill Vue Test Utils TestingVue.js component testing using Vue Test Utils with mount/shallow mount, event simulation, Vuex/Pinia store testing, and composition API testing.
-
fdu-ins Bundle Claim Source AuditorVerify claims, quotes, timelines, and findings against supplied source files and return a source map with verified, conflicting, not found, and manual-review statuses. Use when the user asks to fact-check a memo, audit, timeline, executive summary, research packet, or project brief against PDFs, XML, HTML, notes, screenshots, exported chat logs, or other supplied files before sending, publishing, or relying on the result.
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 laravel-tall-stack-best-practices-cursorrules-prom, nextjs-supabase-shadcn-pwa-cursorrules-prompt-file, nextjs-tailwind-typescript-apps-cursorrules-prompt. 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.