# IDE rules for Design Rules for Design: what each one does, an install command and example prompts. 15 cards - HTML: https://affpapa.org/en/nevibecode/rules/topic/design - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [spec-driven-workflow-v1](https://affpapa.org/en/nevibecode/rules/spec-driven-workflow-v1.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40451 — This rule structures work from requirements analysis through design, implementation, and validation. - [power-bi-report-design-best-practices](https://affpapa.org/en/nevibecode/rules/power-bi-report-design-best-practices.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40451 — This rule guides Power BI chart selection and report layout. - [pcf-fluent-modern-theming](https://affpapa.org/en/nevibecode/rules/pcf-fluent-modern-theming.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40451 — This rule shows how to style PCF components with an app’s modern theme. - [lwc](https://affpapa.org/en/nevibecode/rules/lwc.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40451 — Defines Salesforce Lightning Web Components conventions for GitHub Copilot, covering folder structure, standard UI tags, and SLDS utility classes. - [html-css-style-color-guide](https://affpapa.org/en/nevibecode/rules/html-css-style-color-guide.md) — rule (official GitHub) · github · GitHub Copilot · ★ 40451 — This rule guides color choices for HTML and CSS, from backgrounds and text to gradients. - [toss-style-design-system](https://affpapa.org/en/nevibecode/rules/toss-style-design-system.md) — rule · PatrickJS · Cursor · ★ 41024 — This Cursor rule guides the agent toward restrained product interfaces with clear hierarchy, grayscale structure, and limited accent color. - [tailwind-react-firebase-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/tailwind-react-firebase-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41024 — A Cursor rule that sets conventions for a mobile-first web app built with Tailwind, React and Firebase. - [react-chakra-ui-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/react-chakra-ui-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41024 — A Cursor rule for React projects using Chakra UI, covering component style, theming, responsive layouts, accessibility, and project structure. - [nextjs-material-ui-tailwind-css-cursorrules-prompt](https://affpapa.org/en/nevibecode/rules/nextjs-material-ui-tailwind-css-cursorrules-prompt.md) — rule · PatrickJS · Cursor · ★ 41024 — A Cursor rule for Next.js projects using TypeScript, Tailwind CSS, Material UI, and App Router. - [landing-page-image-quality-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/landing-page-image-quality-cursorrules-prompt-file.md) — rule · PatrickJS · Cursor · ★ 41024 — Stops Cursor from injecting placeholder image URLs into user-facing pages, requiring real project assets, fixed dimensions, and valid alt attributes. - [kubestellar-console](https://affpapa.org/en/nevibecode/rules/kubestellar-console.md) — rule · PatrickJS · Cursor · ★ 41024 — Rules for KubeStellar Console development across its React/TypeScript frontend and Go backend. - [html-tailwind-css-javascript-cursorrules-prompt-fi](https://affpapa.org/en/nevibecode/rules/html-tailwind-css-javascript-cursorrules-prompt-fi.md) — rule · PatrickJS · Cursor · ★ 41024 — A Cursor rule for HTML, Tailwind CSS, and vanilla JavaScript work. - [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. - [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. - [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 [react](https://affpapa.org/en/nevibecode/tag/react.md) · [typescript](https://affpapa.org/en/nevibecode/tag/typescript.md) · [accessibility](https://affpapa.org/en/nevibecode/tag/accessibility.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [html](https://affpapa.org/en/nevibecode/tag/html.md) · [javascript](https://affpapa.org/en/nevibecode/tag/javascript.md) · [charts](https://affpapa.org/en/nevibecode/tag/charts.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [design-tokens](https://affpapa.org/en/nevibecode/tag/design-tokens.md) · [firebase](https://affpapa.org/en/nevibecode/tag/firebase.md) · [go](https://affpapa.org/en/nevibecode/tag/go.md) · [landing-page](https://affpapa.org/en/nevibecode/tag/landing-page.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