marco/marcos-vue-assistant icon
public
Published on 3/4/2025
Marco's Vue Assistant

Expert in Vue.js development, emphasizing component design patterns and progressive framework features.

Rules
Prompts
Models
Context
anthropic Claude 3.7 Sonnet model icon

Claude 3.7 Sonnet

anthropic

200kinput·8.192koutput
anthropic Claude 3.5 Haiku model icon

Claude 3.5 Haiku

anthropic

200kinput·8.192koutput
mistral Codestral model icon

Codestral

mistral

voyage Voyage AI rerank-2 model icon

Voyage AI rerank-2

voyage

voyage voyage-code-3 model icon

voyage-code-3

voyage

openai OpenAI GPT-4o model icon

OpenAI GPT-4o

OpenAI

128kinput·16.384koutput
openai o3-mini model icon

o3-mini

OpenAI

200kinput·100koutput
openai OpenAI GPT-4o Mini model icon

OpenAI GPT-4o Mini

OpenAI

128kinput·16.384koutput
lmstudio deepseek-r1 8b model icon

deepseek-r1 8b

lmstudio

deepinfra DeepSeek R1 model icon

DeepSeek R1

deepinfra

novita deepseek-r1 model icon

deepseek-r1

novita

- Follow Vue style guide
- Avoid using this.$parent
- Follow Nuxt.js 3 patterns and correctly use server and client components.
- Use Nuxt UI for components and styling (built on top of Tailwind CSS).
- Use VueUse for utility composables.
- Use Pinia for state management.
- Use Vee-Validate + Zod for form handling and validation.
- Use Nuxt DevTools for debugging.
- Use Vue Query (TanStack) for complex data fetching scenarios.
- Use Prisma for database access.
- Follow Vue.js Style Guide for code formatting.
- Use script setup syntax for components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
- Follow Next.js patterns, use app router and correctly use server and client components.
- Use Tailwind CSS for styling.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use React Context for state management.
- Use Prisma for database access.
- Follow AirBnB style guide for code formatting.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
- You are an Angular developer
- Use Angular CLI for project scaffolding
- Use TypeScript with strict mode enabled
- Use RxJS for state management and async operations
- Use the typical naming conventions:
  - Components: .component.ts
  - Services: .service.ts
  - Pipes: .pipe.ts
  - Module: .module.ts
  - Test: .spec.ts
  - Directives: .directive.ts
- Follow Next.js patterns, use app router and correctly use server and client components.
- Use Tailwind CSS for styling.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use React Context for state management.
- Use Prisma for database access.
- Follow AirBnB style guide for code formatting.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
- Follow Nuxt.js 3 patterns and correctly use server and client components.
- Use Nuxt UI for components and styling (built on top of Tailwind CSS).
- Use VueUse for utility composables.
- Use Pinia for state management.
- Use Vee-Validate + Zod for form handling and validation.
- Use Nuxt DevTools for debugging.
- Use Vue Query (TanStack) for complex data fetching scenarios.
- Use Prisma for database access.
- Follow Vue.js Style Guide for code formatting.
- Use script setup syntax for components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
Vue docshttps://vuejs.org/v2/guide/
Nuxt.jshttps://nuxt.com/docs
Next.jshttps://nextjs.org/docs/app
Reacthttps://react.dev/reference/
Angular Docshttps://angular.io/docs
Next.jshttps://nextjs.org/docs/app
Reacthttps://react.dev/reference/
Nuxt.jshttps://nuxt.com/docs

Prompts

Learn more
Write Vue Test Utils
Write tests with Vue Test Utils
Use Vue Test Utils to write a comprehensive suite of tests for this component
Page
Creates a new Nuxt.js page based on the description provided.
Create a new Nuxt.js page based on the following description.
Page
Creates a new Next.js page based on the description provided.
Create a new Next.js page based on the following description.
API route inspection
Analyzes API routes for security issues
Review this API route for security vulnerabilities. Ask questions about the context, data flow, and potential attack vectors. Be thorough in your investigation.
Prisma schema
Create a Prisma schema.
Create or update a Prisma schema with the following models and relationships. Include necessary fields, relationships, and any relevant enums.
Client component
Create a client component.
Create a client component with the following functionality. If writing this as a server component is not possible, explain why.
API route
Create an API route.
Create an API route with the following functionality.
Page
Creates a new Nuxt.js page based on the description provided.
Create a new Nuxt.js page based on the following description.

Context

Learn more
@code
Reference specific functions or classes from throughout your project
@docs
Reference the contents from any documentation site
@diff
Reference all of the changes you've made to your current branch
@terminal
Reference the last command you ran in your IDE's terminal and its output
@problems
Get Problems from the current file
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@codebase
Reference the most relevant snippets from your codebase
@currentFile
Reference the currently open file
@open
Reference the contents of all of your open files
@url
Reference the markdown converted contents of a given URL
@file
Reference any file in your current workspace
@os
Reference the architecture and platform of your current operating system

No Data configured

MCP Servers

Learn more

No MCP Servers configured