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 React Native Expo Best Practices 2[Applies to: src/**/*.*] Enforces best practices for React Native Expo development within the src directory, promoting maintainable and efficient code.
-
tryboy869 Bundle Svelte And Sveltekit General Rules 2[Applies to: **/*.svelte] Applies general Svelte and SvelteKit best practices, including file structure, component development, and state management.
-
tryboy869 Bundle Nativescript Cursorrules Prompt File 2Apply for nativescript-cursorrules-prompt-file. --- description: Applies general NativeScript best practices. globs: **/*.tsx, **/*.ts, **/*.vue, **/*.svelte, src/**/*.ts, app/**/*.ts, src/**/*.tsx, app/**/*.tsx, src/**/*.vue, app/**/*.vue, src/**/
-
tryboy869 Bundle Qwik Tailwind Cursorrules Prompt File 2Apply for qwik-tailwind-cursorrules-prompt-file. // Qwik.js with Tailwind CSS (TypeScript and Vite included) .cursorrules // Prefer functional components const preferFunctionalComponents = true;
-
tryboy869 Bundle Astro Typescript Cursorrules Prompt File 2Apply for astro-typescript-cursorrules-prompt-file. { 'rules': { 'commit_message_guidelines': {
-
tryboy869 Bundle Typescript React Cursorrules Prompt File 2Apply for typescript-react-cursorrules-prompt-file. --- description: Testing guidelines for TypeScript + React applications, including unit testing, integration testing, and end-to-end testing strategies. globs: src/**/*
-
tryboy869 Bundle React Native Expo Cursorrules Prompt File 2Apply for react-native-expo-cursorrules-prompt-file. // React Native Expo .cursorrules // React Native Expo best practices const reactNativeExpoBestPractices = [
-
tryboy869 Bundle Typescript Nextjs Cursorrules Prompt File 2Apply for typescript-nextjs-cursorrules-prompt-file. You are an expert in TypeScript, Node.js, Next.js App Router, Drizzle ORM, React, Daisy UI and Tailwind. Always run bun as a package manager (and not npm) Follow the user's requirements carefully and
-
tryboy869 Bundle Vue3 Composition API Cursorrules Prompt File 2Apply for vue3-composition-api-cursorrules-prompt-file. --- description: Performance optimization strategies for Vue 3 Composition API applications, including bundle optimization, caching, and rendering strategies. globs: src/**/*
-
tryboy869 Bundle Web App Optimization Cursorrules Prompt File 2Apply for web-app-optimization-cursorrules-prompt-file. You are an expert in Svelte 5, SvelteKit, TypeScript, and modern web development. Key Principles - Write concise, technical code with accurate Svelte 5 and SvelteKit examples.
-
om-scogo Bundle Transitions Dev 2Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, or accordions. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3D hover tilt", "cursor glare", "plus to menu", "FAB morph", "accordion", "collapsible", "expand / collapse", "disclosure". Also "motion tokens", "scan for ad-hoc transitions", "r
0 -
om-scogo Skill Integrate Atlas Chat 2MUST be used whenever building a chat UI with Atlas agents in a Flows app. Do NOT manually write useAtlasChat integration code — this skill handles installation, component structure, and hook wiring. Triggers: useAtlasChat, atlas chat, streaming chat, agent chat, chat interface, chat component, chat UI. For a full chat app, run skills in order: (1) integrate-atlas-chat, (2) create-client-tool (per tool), (3) setup-python-tools (if Python tools needed).
0 -
tryboy869 Bundle Nextjs React Tailwind Cursorrules Prompt File 2Apply for nextjs-react-tailwind-cursorrules-prompt-file. - You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, and Tailwind and Framer Motion. - Code Style and Structure - Write concise, technical TypeScript code with accurate ex
-
tryboy869 Bundle Javascript Chrome Apis Cursorrules Prompt File 2Apply for javascript-chrome-apis-cursorrules-prompt-file. You are an expert in Chrome extension development, JavaScript, HTML, CSS, and Chrome APIs. Code Style and Structure Naming Conventions
-
tryboy869 Bundle Nextjs React Typescript Cursorrules Prompt File 2Apply for nextjs-react-typescript-cursorrules-prompt-file. --- description: General coding conventions and preferences for Solidity, TypeScript, Node.js, and Next.js projects. This rule sets the foundation for code style and architecture. globs: **/*.{sol,ts,
-
tryboy869 Bundle Python Typescript Guide Cursorrules Prompt File 2Apply for python-typescript-guide-cursorrules-prompt-file. You are an expert AI programming assistant that primarily focuses on producing clear, readable Python and Typescript code. You always use the latest stable version of Django and React, and you are fam
-
tryboy869 Bundle Typescript Vite Tailwind Cursorrules Prompt File 2Apply for typescript-vite-tailwind-cursorrules-prompt-file. --- description: Encourages leveraging VueUse functions throughout the project to enhance reactivity and performance. globs: src/**/*.*
-
tryboy869 Bundle Vue 3 Nuxt 3 Development Cursorrules Prompt File 2Apply for vue-3-nuxt-3-development-cursorrules-prompt-file. You are a Senior Frontend Developer and an Expert in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML and CSS. You are thoughtful, give nuanced answers, and are brilliant at reasoning. You car
-
tryboy869 Bundle Tailwind CSS Nextjs Guide Cursorrules Prompt File 2Apply for tailwind-css-nextjs-guide-cursorrules-prompt-file. --- description: Rules for Biome configuration. globs: biome.json
-
tryboy869 Bundle Chrome Extension Dev JS Typescript Cursorrules Pro 2Apply for chrome-extension-dev-js-typescript-cursorrules-pro. You are an expert in Chrome Extension Development, JavaScript, TypeScript, HTML, CSS, Shadcn UI, Radix UI, Tailwind and Web APIs. Code Style and Structure: - Write concise, technical JavaScript/TypeSc
-
tryboy869 Bundle Cursor AI React Typescript Shadcn UI Cursorrules P 2Apply for cursor-ai-react-typescript-shadcn-ui-cursorrules-p. --- description: General rules for React and TypeScript projects, focusing on code clarity and best practices. globs: **/*.{ts,tsx,js,jsx}
-
tryboy869 Bundle Elixir Engineer Guidelines Cursorrules Prompt File 2Apply for elixir-engineer-guidelines-cursorrules-prompt-file. Act as an expert senior Elixir engineer. Stack: Elixir, Phoenix, Docker, PostgreSQL, Tailwind CSS, LeftHook, Sobelow, Credo, Ecto, ExUnit, Plug, Phoenix LiveView, Phoenix LiveDashboard, Gettext, Jason
-
tryboy869 Bundle Elixir Phoenix Docker Setup Cursorrules Prompt Fil 2Apply for elixir-phoenix-docker-setup-cursorrules-prompt-fil. Act as an expert senior Elixir engineer. Stack: Elixir, Phoenix, Docker, PostgreSQL, Tailwind CSS, LeftHook, Sobelow, Credo, Ecto, ExUnit, Plug, Phoenix LiveView, Phoenix LiveDashboard, Gettext, Jason
-
tryboy869 Bundle Javascript Astro Tailwind CSS Cursorrules Prompt F 2Apply for javascript-astro-tailwind-css-cursorrules-prompt-f. --- description: Rules for Astro component development including proper composition and props. globs: src/components/**/*.astro
-
tryboy869 Bundle Laravel Tall Stack Best Practices Cursorrules Prom 2Apply 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 Material UI Tailwind CSS Cursorrules Prompt 2Apply for nextjs-material-ui-tailwind-css-cursorrules-prompt. Ce projet s'appel Portfolio2 Il est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui What is your project named? portfolio2
-
tryboy869 Bundle Nextjs Supabase Shadcn Pwa Cursorrules Prompt File 2Apply 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 Prompt 2Apply 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 Nodejs Mongodb JWT Express React Cursorrules Promp 2Apply for nodejs-mongodb-jwt-express-react-cursorrules-promp. --- description: Specifies the technologies to be used for backend development, including Node.js, Express.js, MongoDB, and Mongoose. globs: */backend/**/*.*
-
tryboy869 Bundle React Typescript Nextjs Nodejs Cursorrules Prompt 2Apply 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 Sveltekit Restful API Tailwind CSS Cursorrules Pro 2Apply for sveltekit-restful-api-tailwind-css-cursorrules-pro. --- description: Defines the technology stack used in the Stojanovic-One project, including frontend, backend, database, UI styling, deployment, and authentication. This rule provides a clear understa
-
tryboy869 Bundle Tauri Svelte Typescript Guide Cursorrules Prompt F 2Apply 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 File 2Apply 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 App Cursorrules Prompt Fi 2Apply for typescript-nodejs-nextjs-app-cursorrules-prompt-fi. 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 Nodejs Nextjs React UI CSS Cursorrules 2Apply 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 Nextjs Cloudflare Cursorrules Pro 2Apply for typescript-react-nextjs-cloudflare-cursorrules-pro. You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind CSS and DrizzleORM. You are also excellent at Cloudflare developer tools like D1 serverless database
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 react-native-expo-best-practices, svelte-and-sveltekit-general-rules, nativescript-cursorrules-prompt-file. 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.