# IDE rules for Frontend and UI Rules for Frontend and UI: what each one does, an install command and example prompts. 68 cards · page 2 of 2 - HTML: https://affpapa.org/en/nevibecode/rules/topic/frontend?page=2 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [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. - [flutter-development-guidelines-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/flutter-development-guidelines-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — Locks down folder layout, naming and Dart style for Flutter apps built on MVVM with Riverpod. - [cursor-ai-react-typescript-shadcn-ui-cursorrules-p](https://affpapa.org/en/nevibecode/rules/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pushes the agent toward React and TypeScript code written the way shadcn/ui and Tailwind CSS projects expect. - [cloudflare-workers-hono-angular-saas-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/cloudflare-workers-hono-angular-saas-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that pins the stack and conventions for SaaS on Cloudflare Workers: Hono API, Angular, Drizzle, Clerk, Stripe. - [chrome-extension-dev-js-typescript-cursorrules-pro](https://affpapa.org/en/nevibecode/rules/chrome-extension-dev-js-typescript-cursorrules-pro.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that points the agent at one set of conventions for building Chrome extensions in JavaScript and TypeScript. - [android-jetpack-compose-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/android-jetpack-compose-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41011 — A Cursor rule that steers the agent through Android development with Jetpack Compose: architecture, state, tests. - [vercel](https://affpapa.org/en/nevibecode/rules/vercel.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule with opinionated guidance for building and deploying on Vercel. - [three-js](https://affpapa.org/en/nevibecode/rules/three-js.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that sets three.js coding standards: WebGL error handling, lazy asset loading, render loop optimization and explicit resource disposal. - [svelte](https://affpapa.org/en/nevibecode/rules/sanjeed5-svelte.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that pins down how Svelte 5 components get written: runes instead of legacy reactivity, typed scripts, keyed lists. - [streamlit](https://affpapa.org/en/nevibecode/rules/streamlit.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that tells the agent how to build Streamlit apps: cache expensive work, keep UI apart from logic, split the project into modules. - [shadcn](https://affpapa.org/en/nevibecode/rules/shadcn.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that pins down how a team builds with shadcn/ui: folder layout, typed props, CVA variants, forms on React Hook Form and Zod. - [react](https://affpapa.org/en/nevibecode/rules/sanjeed5-react.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that pins down React conventions for a team: pure components, hook rules, feature-based structure. - [react-native](https://affpapa.org/en/nevibecode/rules/react-native.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that sets mandatory React Native practices: feature-first layout, functional components, hooks and typing. - [qwik](https://affpapa.org/en/nevibecode/rules/qwik.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that tells the agent how to write Qwik apps: component$, useStore, $-suffixed QRLs and data loading through loader$. - [playwright](https://affpapa.org/en/nevibecode/rules/playwright.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that sets the standard for Playwright end-to-end tests: official runner, resilient locators, no manual waits. - [mobx](https://affpapa.org/en/nevibecode/rules/mobx.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that lays out MobX state in React: one RootStore, explicit observables, and observer only on leaf components. - [microsoft-teams](https://affpapa.org/en/nevibecode/rules/microsoft-teams.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule with opinionated practices for Microsoft Teams apps: project structure, Fluent UI, Adaptive Cards and Microsoft Graph. - [material-ui](https://affpapa.org/en/nevibecode/rules/material-ui.md) — rule · sanjeed5 · Cursor · ★ 3579 — This rule tells Cursor how to write React code with Material-UI: folder layout, theme setup, styling and component style. - [flutter](https://affpapa.org/en/nevibecode/rules/flutter.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that pins down Flutter code style: formatting, lints, MVVM layers and Riverpod. - [esbuild](https://affpapa.org/en/nevibecode/rules/esbuild.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that gives the agent a fixed way to configure esbuild: a single .mjs config rather than CLI flags spread across package.json. - [electron](https://affpapa.org/en/nevibecode/rules/electron.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that pins down how your team writes Electron code: context isolation, safe contextBridge APIs, request-response IPC and cross-platform paths. - [d3](https://affpapa.org/en/nevibecode/rules/d3.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that tells the agent how to write D3.js v7+ charts: modular imports, selection.join(), external CSS for styling. - [codemirror](https://affpapa.org/en/nevibecode/rules/codemirror.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that sets how to build CodeMirror 6 editors: modular imports, immutable state, extension-driven config. - [chakra-ui](https://affpapa.org/en/nevibecode/rules/chakra-ui.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that tells the agent how to build Chakra UI v2 interfaces: token-first theming, component recipes, style props instead of CSS. - [aws-amplify](https://affpapa.org/en/nevibecode/rules/aws-amplify.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that sets conventions for AWS Amplify Gen 2: split resource files, single-purpose functions, typed data access. - [apollo-graphql](https://affpapa.org/en/nevibecode/rules/apollo-graphql.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that puts the GraphQL schema before the resolvers in Apollo projects. - [ant-design](https://affpapa.org/en/nevibecode/rules/ant-design.md) — rule · sanjeed5 · Cursor · ★ 3579 — A Cursor rule that tells the agent how to build UI with Ant Design v6.x: tokens for theming, the grid for layout, accessible components. ## 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) · [css](https://affpapa.org/en/nevibecode/tag/css.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) · [csharp](https://affpapa.org/en/nevibecode/tag/csharp.md) · [dotnet](https://affpapa.org/en/nevibecode/tag/dotnet.md) · [python](https://affpapa.org/en/nevibecode/tag/python.md) ## Narrow this list Parameters: `?platform=`, `&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