# IDE rules for Frontend and UI

Rules for Frontend and UI: what each one does, an install command and example prompts.

66 cards · page 1 of 2

- HTML: https://affpapa.org/en/nevibecode/rules/topic/frontend
- Instructions for agents: https://affpapa.org/en/nevibecode/agents.md

- [vue](https://affpapa.org/en/nevibecode/rules/vue.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — A Copilot instruction file that sets Vue 3 conventions: Composition API, <script setup>, reactivity, Pinia and Vue Router.
- [tanstack-start-shadcn-tailwind](https://affpapa.org/en/nevibecode/rules/tanstack-start-shadcn-tailwind.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — A Copilot instruction file that pins the stack to TanStack Start, Shadcn/ui and Tailwind CSS, with Zod validating every external payload.
- [power-bi-custom-visuals-development](https://affpapa.org/en/nevibecode/rules/power-bi-custom-visuals-development.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — A GitHub Copilot rule that gives the agent patterns for building Power BI custom visuals with React, D3.js and TypeScript.
- [pcf-manifest-schema](https://affpapa.org/en/nevibecode/rules/pcf-manifest-schema.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — A rule that feeds Copilot the structure of ControlManifest.Input.xml: which elements and attributes exist and what they do.
- [pcf-events](https://affpapa.org/en/nevibecode/rules/pcf-events.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — A rule that tells Copilot how to declare and handle custom events in Power Apps Component Framework components.
- [pcf-code-components](https://affpapa.org/en/nevibecode/rules/pcf-code-components.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — A rule that teaches Copilot how Power Apps code components are built: manifest, TypeScript implementation, resources.
- [dotnet-maui](https://affpapa.org/en/nevibecode/rules/dotnet-maui.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — This rule steers Copilot toward idiomatic .NET MAUI: MVVM, CollectionView over ListView, Shell navigation.
- [blazor](https://affpapa.org/en/nevibecode/rules/blazor.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — Guides GitHub Copilot on Razor component structure, C# 14 features, caching, and state management in Blazor applications.
- [astro](https://affpapa.org/en/nevibecode/rules/astro.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40418 — A Copilot rule that sets Astro 7 conventions: islands architecture, the Content Layer API, TypeScript, and server-first rendering by default.
- [vue](https://affpapa.org/en/nevibecode/rules/patrickjs-vue.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write Vue: Composition API, Pinia, typing and routing.
- [vue-3-nuxt-3-typescript-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/vue-3-nuxt-3-typescript-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write Vue 3 and Nuxt 3 code: Composition API, TypeScript interfaces, Nuxt conventions.
- [typescript-vite-tailwind-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/typescript-vite-tailwind-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pins down TypeScript code style for Vue projects built with Vite and styled with Tailwind.
- [typescript-nodejs-nextjs-react-ui-css-cursorrules-](https://affpapa.org/en/nevibecode/rules/typescript-nodejs-nextjs-react-ui-css-cursorrules.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pins down how the agent writes TypeScript, Next.js App Router, React and Tailwind code.
- [typescript-nextjs-supabase-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/typescript-nextjs-supabase-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that keeps TypeScript work on Next.js App Router and Supabase consistent: server components first, Shadcn UI, Tailwind.
- [typescript-code-convention-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/typescript-code-convention-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pins down TypeScript code style for Next.js App Router, React, Expo, tRPC and Tailwind projects.
- [tauri-svelte-typescript-guide-cursorrules-prompt-f](https://affpapa.org/en/nevibecode/rules/tauri-svelte-typescript-guide-cursorrules-prompt-f.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that sets how the agent writes desktop apps with Tauri: Svelte on the frontend, TypeScript for types.
- [tanstack-router](https://affpapa.org/en/nevibecode/rules/tanstack-router.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that sets agent conventions for TanStack Router v1: file-based routes, typed params and loader-based data fetching.
- [tanstack-query-v5-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/tanstack-query-v5-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write TanStack Query v5 code: query keys, mutations, optimistic updates, Suspense and prefetching.
- [tailwind-react-firebase-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/tailwind-react-firebase-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that sets conventions for a mobile-first web app built with Tailwind, React and Firebase.
- [sveltekit-typescript-guide-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/sveltekit-typescript-guide-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that points the agent at Svelte 5, SvelteKit and TypeScript: project structure, runes, state handling.
- [svelte](https://affpapa.org/en/nevibecode/rules/patrickjs-svelte.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that steers the agent toward Svelte conventions: component structure, reactivity, stores, SvelteKit routing and tests.
- [solidjs-tailwind-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/solidjs-tailwind-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write Solid.js code with Tailwind CSS: signals, utility classes, folder layout.
- [shopify-theme-dev-liquid](https://affpapa.org/en/nevibecode/rules/shopify-theme-dev-liquid.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule collecting Shopify theme practices across Liquid, JavaScript, CSS, accessibility and performance.
- [rtl-right-to-left-i18n-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/rtl-right-to-left-i18n-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pushes the agent toward logical CSS and Tailwind utilities instead of left/right.
- [react](https://affpapa.org/en/nevibecode/rules/react.md) — rule · PatrickJS · Cursor · ★ 41011 — This rule hands Cursor a set of React conventions: component structure, hooks, state, forms and accessibility.
- [react-typescript-nextjs-nodejs-cursorrules-prompt-](https://affpapa.org/en/nevibecode/rules/react-typescript-nextjs-nodejs-cursorrules-prompt.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pins down React, TypeScript, Next.js 14 and Node.js conventions: functional components, RORO, minimal use client.
- [react-styled-components-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/react-styled-components-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write React code with styled-components: functional components, theming through ThemeProvider, a fixed folder layout.
- [react-query-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/react-query-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write React Query code: where QueryClient lives, how hooks and query keys are named.
- [react-native-expo-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/react-native-expo-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write React Native code with Expo.
- [qwik-basic-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/qwik-basic-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that sets Qwik conventions for the agent: lazy functions with the $ suffix, signals, tasks, and a TypeScript plus Vite project layout.
- [nextjs15-supabase-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/nextjs15-supabase-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that keeps the agent inside a Next.js 15, Supabase and TypeScript strict stack — from session checks to RLS and Stripe keys.
- [nextjs-vercel-typescript-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/nextjs-vercel-typescript-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that sets code style and file structure for Next.js projects with TypeScript, Vercel middleware and a KV database.
- [nextjs-typescript-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/nextjs-typescript-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pins the Next.js and TypeScript stack and the agent's working order: plan first, one file at a time, fixed reply format.
- [nextjs-tailwind-typescript-apps-cursorrules-prompt](https://affpapa.org/en/nevibecode/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that points the assistant at Next.js, Tailwind CSS and TypeScript.
- [nextjs-react-typescript-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/nextjs-react-typescript-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that tells the agent how to write code in Next.js 14 App Router, React and TypeScript projects.
- [nextjs-app-router-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/nextjs-app-router-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that hands the agent a set of Next.js App Router habits: server components by default, file-based routing, separate files for loading and errors.
- [javascript-chrome-apis-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/javascript-chrome-apis-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that points the AI agent at Chrome extension work: manifest, architecture, Chrome API usage.
- [htmx-go-fiber-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/htmx-go-fiber-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule for Go projects built on Fiber with HTMX: it pins down folder layout, routing and template rendering so the agent stops improvising.
- [htmx-django-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/htmx-django-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that keeps the agent on Django rails while it writes HTMX code: templates, forms, CSRF, class-based views.
- [graphical-apps-development-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/graphical-apps-development-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that feeds the agent the Pyllments context: graph-based LLM apps in Python built on Panel and Langchain.

Next: https://affpapa.org/en/nevibecode/rules/topic/frontend.md?page=2

## Refine
[typescript](https://affpapa.org/en/nevibecode/tag/typescript.md) · [react](https://affpapa.org/en/nevibecode/tag/react.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [nextjs](https://affpapa.org/en/nevibecode/tag/nextjs.md) · [javascript](https://affpapa.org/en/nevibecode/tag/javascript.md) · [vite](https://affpapa.org/en/nevibecode/tag/vite.md) · [vue](https://affpapa.org/en/nevibecode/tag/vue.md) · [zod](https://affpapa.org/en/nevibecode/tag/zod.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [python](https://affpapa.org/en/nevibecode/tag/python.md) · [react-native](https://affpapa.org/en/nevibecode/tag/react-native.md) · [csharp](https://affpapa.org/en/nevibecode/tag/csharp.md)

## Narrow this list
Parameters: `?platform=<claude-code|codex|cursor|copilot|gemini-cli|windsurf|…>`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md