Frontend Framework Rules & Custom Instructions
High-performance .cursorrules and system instructions for modern web frontend frameworks including React, Next.js, Vue, Nuxt, and Tailwind CSS.
Frontend development with AI coding assistants requires strict architectural guardrails. Without tailored framework rules, language models frequently mix up client and server components, generate outdated lifecycle hooks, import non-existent utility classes, or produce code that violates accessibility standards.
The Frontend category on MCPBridge provides curated, battle-tested system prompt rules (.cursorrules) and custom instructions for the world's leading web frameworks — including Next.js 15 App Router, React 19, Vue 3, Nuxt, SvelteKit, Angular, and Tailwind CSS.
Each rule set enforces modern best practices: strict TypeScript typing, React Server Component (RSC) hydration safety, Core Web Vitals performance benchmarks, and WCAG accessibility standards, transforming generic AI code suggestions into production-grade engineering output.
What Types of Tools Belong in Frontend?
The Frontend ecosystem encompasses distinct tool architectures tailored for different stages of the development and operational lifecycle.
React & Next.js Ecosystem Guidelines
Optimized guidelines for React 19, Next.js App Router, Server Actions, and React Server Components (RSC).
- ✓Server vs Client boundary enforcement
- ✓Server Actions error handling
- ✓Suspense & streaming data patterns
- ✓Static export optimization
Vue & Nuxt Reactive Framework Rules
Tailored instructions for Vue 3 Composition API, `<script setup>` syntax, Pinia state stores, and Nuxt 3 server routes.
- ✓Composition API best practices
- ✓TypeScript ref/computed typing
- ✓Auto-import convention alignment
- ✓Nuxt SSR hydration safety
Lightweight Reactive & Island Architectures
Rules for fine-grained reactivity engines and static site generators including Svelte 5, SolidJS, and Astro.
- ✓Svelte 5 runes syntax ($state, $derived)
- ✓SolidJS signal lifecycle management
- ✓Astro island component hydration
- ✓Zero-JS baseline styling
CSS Frameworks & Component Styling Systems
Design system instructions for Tailwind CSS, CSS Modules, and modern design token architectures.
- ✓Utility class ordering & deduplication
- ✓Arbitrary value prevention
- ✓Responsive & dark mode variants
- ✓Container query best practices
Developer Selection Criteria for Frontend
Key technical dimensions to evaluate when choosing a Frontend integration for your AI assistant environment.
Framework Version Alignment
Select rule sets that match your exact major framework version (e.g. Next.js 15 vs Next.js 13 Pages Router). Outdated rules will generate deprecated APIs.
TypeScript Strictness vs Prototyping Speed
For production repositories, enforce strict TypeScript rules (`no-explicit-any`, exhaustive discrimination). For early hackathons, use relaxed typing rules.
Styling System Conventions
Ensure the rule set specifies your exact styling library (Tailwind CSS, Vanilla Extract, CSS Modules) to prevent the AI from mixing conflicting paradigms.
State Management Architecture
Clearly define whether state should be stored in URL search params, server cache (React Cache), or client stores (Zustand, Pinia).
Important Architectural Distinctions
Understanding fundamental design trade-offs between execution models, protocol transports, and privilege boundaries.
React Server Components (RSC) vs Client Components
RSC executes exclusively on the server with zero client bundle footprint, whereas Client Components ('use client') run on both server and browser to handle interactivity.
React Server ComponentsModel A
- •Can directly access database and server-side secrets
- •Zero JavaScript sent to the client; faster Core Web Vitals
- •Cannot use useState, useEffect, or browser DOM event listeners
Client Components ('use client')Model B
- •Handles user interaction, clicks, inputs, and browser state
- •Can use React hooks (useState, useEffect, useContext)
- •Adds JavaScript to client bundle; requires careful hydration guards
Full-Stack Meta-Framework vs Client-Only SPA
Full-stack frameworks (Next.js, Nuxt, SvelteKit) provide integrated server routes and SSR, while SPAs (Vite + React) serve static bundles to the browser.
Full-Stack Meta-FrameworkModel A
- •Built-in Server-Side Rendering (SSR) and dynamic edge rendering
- •Optimal for SEO, social sharing, and search engine crawlers
- •Requires Node.js runtime, Docker, or edge hosting (Cloudflare/Vercel)
Client-Only SPAModel B
- •Deployable anywhere as flat static HTML/CSS/JS files
- •Zero backend server maintenance; low-cost S3/CloudFront hosting
- •Requires client-side data fetching and has weaker SEO indexing
Curated Recommendations
Hand-picked integrations thoroughly tested in laboratory environments for stability, token efficiency, and developer ergonomics.
Next.js .cursorrules→
Comprehensive system instructions for Next.js 15 App Router. Enforces React Server Components, Server Actions, proper caching, and TypeScript typing.
cp /rules/nextjs/.cursorrules ./Tailwind CSS .cursorrules→
Guides AI assistants to generate clean, responsive, and accessible Tailwind CSS classes without redundant inline styles.
cp /rules/tailwind/.cursorrules ./Vue 3 .cursorrules→
Optimized for Vue 3 `<script setup>` syntax, Pinia stores, and TypeScript integration.
cp /rules/vue/.cursorrules ./.cursorrules for angular
FrontendAngular development with standalone components and signals
.cursorrules for astro
FrontendAstro content-driven development with islands architecture
.cursorrules for nextjs
FrontendNext.js full-stack development with App Router and server components
.cursorrules for nuxt
FrontendNuxt 3 full-stack development with Vue and Nitro
.cursorrules for react
FrontendReact component development with TypeScript, hooks, and best practices
.cursorrules for remix
FrontendRemix full-stack development with web fundamentals
.cursorrules for solid
FrontendSolid.js reactive UI development with fine-grained reactivity
.cursorrules for svelte
FrontendSvelte 5 development with runes and reactivity
.cursorrules for tailwind
FrontendTailwind CSS utility-first styling with custom design systems
.cursorrules for vue
FrontendVue 3 development with Composition API and TypeScript
Relevant Guides & Technical Tutorials
In-depth developer guides covering installation, security hardening, and prompt engineering for Frontend integrations.
Complete Guide to .cursorrules for AI Coding
How to craft effective system prompt instructions that guide Cursor Composer and Claude to follow your team's code conventions.
Setting Up Workspace Rules in Cursor IDE
Configuring workspace-level rule files and combining framework prompts with Model Context Protocol servers.
How Frontend Listings are Evaluated
Framework rule sets are audited for code quality, syntax modernness, TypeScript type correctness, and prevention of deprecated framework APIs.
Strict adherence to latest stable framework releases (e.g. Next.js 15, React 19) without deprecated methods.
- ✓Modern idiomatic patterns
- ✓Zero deprecated APIs
- ✓Aligned with official docs
Enforcement of proper interface definitions, generic types, and prohibition of `any` types.
- ✓Strict type definitions
- ✓Props interface standards
- ✓No explicit any
Mandatory inclusion of WCAG semantic elements, ARIA attributes, and Core Web Vitals optimization.
- ✓Semantic HTML5 elements
- ✓ARIA attributes on interactive elements
- ✓Lazy loading images
Concise rule instructions that maximize impact while consuming minimal prompt token overhead.
- ✓Structured bullet formatting
- ✓Under 1,000 tokens
- ✓Actionable DO/DON'T rules
Frontend Complete Specification Directory
Explore individual integration specifications, multi-client installation matrix, and configuration parameters for all Frontend Model Context Protocol servers and frameworks.
Browse by Category
Explore MCP server integrations organized by platform and use case.