### Cursor Get Started Source: https://docs.cursor.com/context/rules Guides new users through the initial setup of Cursor, including installation, a quick start tutorial, and fundamental concepts. ```mdx welcome get-started/installation get-started/quickstart get-started/concepts ``` -------------------------------- ### Speakeasy Quickstart Guide Source: https://github.com/speakeasy-api/speakeasy Provides a guided setup process to quickly create a new SDK from an OpenAPI source in minutes. ```shell speakeasy quickstart # Description: Guided setup to help you create a new SDK in minutes. ``` -------------------------------- ### Project Setup and Execution Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-two Instructions for setting up and running the Vue 3 + GraphQL example project. This includes installing dependencies and starting the development server. ```shell npm install npm run dev ``` -------------------------------- ### Vue 3 + GraphQL Getting Started Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-two This snippet provides the initial steps for getting started with the project. It includes cloning the repository and installing dependencies, which are crucial first steps for any user wanting to run or explore the example code. ```Vue Getting Started: 1. Clone this repository 2. Install dependencies: ``` -------------------------------- ### Project Setup and Development Commands Source: https://github.com/alexanderop/sqlite-vue-example Standard commands for cloning the repository, installing dependencies, and starting the development server. These commands are essential for setting up and running the project locally. ```shell git clone https://github.com/your-username/vue-sqlite-playground.git cd vue-sqlite-playground ``` ```shell npm install ``` ```shell npm run dev ``` -------------------------------- ### Local Setup: Install and Run Source: https://github.com/elk-zone/elk Commands to install project dependencies using pnpm and start the development server. Requires corepack to be enabled. ```shell pnpm i pnpm run dev ``` -------------------------------- ### Installation and Setup Source: https://github.com/alexanderop/post-matcher-ai Provides the necessary commands to clone the project repository and install its required Node.js dependencies. ```shell git clone cd post-matcher npm install ``` -------------------------------- ### Install Dependencies and Run Development Server Source: https://github.com/satnaing/astro-paper After creating the project, install its dependencies and start the local development server. This ensures all necessary packages are downloaded and the project is ready for local testing. ```pnpm # install dependencies if you haven't done so in the previous step. pnpm install # start running the project pnpm run dev ``` -------------------------------- ### Project Setup and Execution Commands Source: https://github.com/alexanderop/vue3-pwa-example Commands for installing dependencies, running the development server, and building the project for production using pnpm. ```shell pnpm install pnpm run dev pnpm run build ``` -------------------------------- ### Install Dependencies Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-one Installs all necessary project dependencies using npm. This command is essential before running the development server. ```bash npm install ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-one Installs all necessary project dependencies using npm. This command should be run in the project's root directory. ```shell npm install ``` -------------------------------- ### Install and Run Puppeteer Server Source: https://github.com/merajmehrabi/puppeteer-mcp-server Steps to install dependencies, build the project, and start the Puppeteer server using npm. ```shell npm install npm run build npm start ``` -------------------------------- ### Run Astro Paper Locally Source: https://github.com/satnaing/astro-paper Instructions to install project dependencies and start the local development server for the Astro Paper project. Assumes project has already been created. ```bash # install dependencies if you haven't done so in the previous step. pnpm install # start running the project pnpm run dev ``` -------------------------------- ### Run Development Server Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-one Starts the Vite development server, allowing you to preview the Vue 3 application locally. It typically includes hot module replacement. ```bash npm run dev ``` -------------------------------- ### Run Development Server Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-one Starts the development server, typically for local testing and development. This command compiles the project and serves it locally. ```shell npm run dev ``` -------------------------------- ### Local Development Setup Source: https://github.com/elk-zone/elk Instructions for setting up the Elk project locally for development. This involves installing dependencies and running the development server. It recommends using `ni` for package management. ```bash pnpm i pnpm run dev ``` ```bash ni nr dev ``` -------------------------------- ### Install Dependencies with Vite Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-one This snippet shows the command to install project dependencies using npm, typically executed after cloning a Vite-based project. It assumes a standard Node.js environment. ```bash npm install ``` -------------------------------- ### Install Project Dependencies with npm Source: https://github.com/alexanderop/pluginPiniaTabs Installs all necessary packages for the project using npm. This command fetches dependencies defined in package.json and is crucial for project setup. ```shell npm install ``` -------------------------------- ### Get MCP Server Help Source: https://github.com/vercel/sdk A shell command to display help information for the 'mcp start' command using npx. This is useful for understanding available options and arguments for server startup. ```shell npx -y --package @vercel/sdk -- mcp start --help ``` -------------------------------- ### Install Dependencies (npm) Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-two Installs project dependencies using npm. Ensure Node.js and npm are installed before running. ```shell npm install ``` -------------------------------- ### Vue 3 + GraphQL Project Setup Source: https://github.com/alexanderop/vue-graphql-simple-example/tree/part-one Demonstrates the core technologies used in the project: Vue 3 with TypeScript, GraphQL for data fetching, and Vite as the build tool. This snippet highlights the project's technical stack. ```APIDOC Project Technologies: - Vue 3 - TypeScript - GraphQL - Vite - Script Setup syntax ``` -------------------------------- ### Nuxt Minimal Starter Setup and Development Source: https://github.com/alexanderop/NuxtPapier Provides instructions for setting up and running the Nuxt Minimal Starter project. Covers development server commands and production build steps. ```javascript npm install npm run dev npm run build npm run preview ``` -------------------------------- ### TypeScript Project Navigation Source: https://www.typescriptlang.org/docs/handbook/intro.html Key navigation links for the TypeScript project, including getting started guides, downloads, community resources, and configuration references. ```Markdown * [Get Started](/docs/) * [Download](/download/) * [Community](/community/) * [Playground](/play/) * [TSConfig Ref](/tsconfig/) * [Code Samples](/play/#show-examples) * [Why TypeScript](/why-create-typescript/) * [Design](/branding/) ``` -------------------------------- ### Vercel Documentation Navigation Structure Source: https://vercel.com/docs/rest-api/sdk Defines the navigation structure for Vercel documentation, including sections like 'Get Started', 'Errors', and various 'Examples' categories. It specifies titles, descriptions, and links for each page. ```APIDOC VercelDocsNavigation: global: null tabs: - tab: Get Started pages: - title: Using the REST API description: Interact programmatically with your Vercel account using the SDK or direct HTTP requests. href: /welcome - title: Using the Vercel SDK description: Interact programmatically with your Vercel account using the SDK. href: /sdk - title: Errors description: List of general and specific errors you may encounter when using the REST API. href: /errors - tab: Examples pages: - title: Deployment Automation description: Learn how to use the Vercel SDK through real-life examples. href: /examples/deployments-automation - title: Domain Management description: Learn how to use the Vercel SDK through real-life examples. href: /examples/domain-management - title: Environment Variables description: Learn how to use the Vercel SDK through real-life examples. href: /examples/environment-variables - title: Integrations description: Learn how to use the Vercel SDK through real-life examples. href: /examples/integrations - title: Logs and Monitoring description: Learn how to use the Vercel SDK through real-life examples. href: /examples/logs-monitoring - title: Project Management description: Learn how to use the Vercel SDK through real-life examples. href: /examples/project-management ``` -------------------------------- ### Claude Desktop Configuration for Vercel MCP Server Source: https://github.com/vercel/sdk Example JSON configuration for `claude_desktop_config.json` to define the Vercel MCP server. This setup specifies the command to run (`npx`), arguments including the package name (`@vercel/sdk`), and parameters for starting the MCP server with a bearer token. ```json { "mcpServers": { "Vercel": { "command": "npx", "args": [ "-y", "--package", "@vercel/sdk", "--", "mcp", "start", "--bearer-token", "..." ] } } } ``` -------------------------------- ### Getting Started with GraphQL in Vue 3 Source: https://context7_llms A guide for setting up GraphQL integration in a Vue 3 application using the Composition API, Apollo Client, and Vite. This covers the initial steps for wiring up a Vue 3 app to a GraphQL API. ```Vue.js --- title: Getting Started with GraphQL in Vue 3 — Complete Setup with Apollo description: Part 1 of the Vue 3 + GraphQL series: a zero-to-hero guide for wiring up a Vue 3 app to a GraphQL API using the Composition API, Apollo Client, and Vite. tags: ['graphql', 'vue'] --- ``` ```GraphQL # Example GraphQL Schema (Conceptual) type Query { users: [User] user(id: ID!): User } type User { id: ID! name: String! email: String } ``` ```Vue.js // Example Vue 3 Composition API setup with Apollo Client (Conceptual) import { useQuery } from '@vue/apollo-composable' import gql from 'graphql-tag' const GET_USERS = gql` query GetUsers { users { id name } } ` export default { setup() { const { result, loading, error } = useQuery(GET_USERS) return { users: computed(() => result.value?.users), loading, error } } } ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/alexanderop/vue-graphql-simple-example Installs all necessary packages for the project using npm. This command downloads and sets up the required libraries and frameworks. ```bash npm install ``` -------------------------------- ### Styling for Get Started Buttons (CSS) Source: https://www.typescriptlang.org/play/ Defines styles for various 'get started' buttons, including different sizes (short, tall) and states (hover, active, focus). It also handles background images and SVG path colors for visual feedback. ```css #index-2 .next-headline-button .fluid-button-title{font-weight:600}#index-2 .next-headline-button svg path{fill:#000}@media screen and (-ms-high-contrast:active){#index-2 .next-headline-button svg path{fill:#ff0}}#index-2 a.get-started{align-items:flex-end;background-color:#fff;box-shadow:0 4px 20px -6px rgba(0,0,0,.25);box-sizing:border-box;color:#000;cursor:pointer;display:flex;margin:0 auto;max-width:244px;padding:1rem;text-decoration:none;width:100%}@media screen and (-ms-high-contrast:active){#index-2 a.get-started{border:2px solid gray}}#index-2 a.get-started.focus,#index-2 a.get-started:hover{background-color:#eee}#index-2 a.get-started:active{background-color:#ddd}#index-2 a.get-started .fluid-button-title{font-weight:600}#index-2 a.get-started.short{background:#3178c6;background-position-y:bottom -180px;color:#fff;height:260px;outline:1px solid #fff}#index-2 a.get-started.short.handbook{background-image:url(/images/index/get-started-handbook-blue.svg)}#index-2 a.get-started.short.playground{background-image:url(/images/index/get-started-playground-blue.svg)}#index-2 a.get-started.short.download{background-image:url(/images/index/get-started-download-blue.svg);background-position:100% 100%;background-repeat:no-repeat}#index-2 a.get-started.short svg path{stroke:#fff}#index-2 a.get-started.short:active{background-color:#156fb4}#index-2 a.get-started.short:focus-visible,#index-2 a.get-started.short:hover{box-shadow:0 4px 20px -2px rgba(0,0,0,.25);outline-width:2px}#index-2 a.get-started.tall{background:#fff;color:#000;height:342px;margin-bottom:2px;outline:1px solid #000}#index-2 a.get-started.tall:focus-visible,#index-2 a.get-started.tall:hover{box-shadow:0 4px 20px -2px rgba(0,0,0,.25);color:#3178c6;margin-bottom:0;outline-color:#3178c6;outline-width:2px}#index-2 a.get-started.tall:focus-visible svg path,#index-2 a.get-started.tall:hover svg path{stroke:#3178c6}#index-2 a.get-started.tall:active{background-color:#eee}#index-2 a.get-started .fluid-button-title{font-size:1.4rem}#index-2 a.get-started svg{margin-bottom:10px;margin-left:20px}#index-2 a.get-started:active{box-shadow:0 4px 10px 0 rgba(0,0,0,.25)}#index-2 a.get-started.handbook{background-image:url(/images/index/get-started-handbook.svg);background-position:0 100%;background-repeat:no-repeat}#index-2 a.get-started.playground{background-image:url(/images/index/get-started-playground.svg);background-position:bottom;background-repeat:no-repeat}#index-2 a.get-started.download{background-image:url(/images/index/get-started-download.svg);background-position:100% 100%;background-repeat:no-repeat} ``` -------------------------------- ### Styling for Get Started Buttons (CSS) Source: https://www.typescriptlang.org/docs/handbook/intro.html Defines styles for various 'get started' buttons, including different sizes (short, tall) and states (hover, active, focus). It also handles background images and SVG path colors for visual feedback. ```css #index-2 .next-headline-button .fluid-button-title{font-weight:600}#index-2 .next-headline-button svg path{fill:#000}@media screen and (-ms-high-contrast:active){#index-2 .next-headline-button svg path{fill:#ff0}}#index-2 a.get-started{align-items:flex-end;background-color:#fff;box-shadow:0 4px 20px -6px rgba(0,0,0,.25);box-sizing:border-box;color:#000;cursor:pointer;display:flex;margin:0 auto;max-width:244px;padding:1rem;text-decoration:none;width:100%}@media screen and (-ms-high-contrast:active){#index-2 a.get-started{border:2px solid gray}}#index-2 a.get-started.focus,#index-2 a.get-started:hover{background-color:#eee}#index-2 a.get-started:active{background-color:#ddd}#index-2 a.get-started .fluid-button-title{font-weight:600}#index-2 a.get-started.short{background:#3178c6;background-position-y:bottom -180px;color:#fff;height:260px;outline:1px solid #fff}#index-2 a.get-started.short.handbook{background-image:url(/images/index/get-started-handbook-blue.svg)}#index-2 a.get-started.short.playground{background-image:url(/images/index/get-started-playground-blue.svg)}#index-2 a.get-started.short.download{background-image:url(/images/index/get-started-download-blue.svg);background-position:100% 100%;background-repeat:no-repeat}#index-2 a.get-started.short svg path{stroke:#fff}#index-2 a.get-started.short:active{background-color:#156fb4}#index-2 a.get-started.short:focus-visible,#index-2 a.get-started.short:hover{box-shadow:0 4px 20px -2px rgba(0,0,0,.25);outline-width:2px}#index-2 a.get-started.tall{background:#fff;color:#000;height:342px;margin-bottom:2px;outline:1px solid #000}#index-2 a.get-started.tall:focus-visible,#index-2 a.get-started.tall:hover{box-shadow:0 4px 20px -2px rgba(0,0,0,.25);color:#3178c6;margin-bottom:0;outline-color:#3178c6;outline-width:2px}#index-2 a.get-started.tall:focus-visible svg path,#index-2 a.get-started.tall:hover svg path{stroke:#3178c6}#index-2 a.get-started.tall:active{background-color:#eee}#index-2 a.get-started .fluid-button-title{font-size:1.4rem}#index-2 a.get-started svg{margin-bottom:10px;margin-left:20px}#index-2 a.get-started:active{box-shadow:0 4px 10px 0 rgba(0,0,0,.25)}#index-2 a.get-started.handbook{background-image:url(/images/index/get-started-handbook.svg);background-position:0 100%;background-repeat:no-repeat}#index-2 a.get-started.playground{background-image:url(/images/index/get-started-playground.svg);background-position:bottom;background-repeat:no-repeat}#index-2 a.get-started.download{background-image:url(/images/index/get-started-download.svg);background-position:100% 100%;background-repeat:no-repeat} ``` -------------------------------- ### Run Development Server Source: https://github.com/alexanderop/vue-graphql-simple-example Starts the Vite development server, enabling hot module replacement and live reloading for efficient local development. ```bash npm run dev ``` -------------------------------- ### Start Development Server (Shell) Source: https://github.com/alexanderop/sqlite-vue-example Starts the local development server for the Vue.js application. This command allows you to preview the project in your browser and enables hot-reloading for development. It requires Node.js to be installed. ```Shell npm run dev ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/alexanderop/vue-graphql-simple-example This snippet shows the commands to install the necessary project dependencies using either npm or yarn. It's a standard step for setting up a new Node.js-based project. ```shell npm install # or yarn install ``` -------------------------------- ### Project Setup and Navigation Paths Source: https://github.com/alexanderop/sqlite-vue-example Defines key paths and URLs used for project setup, user settings, and creating new development environments. ```APIDOC Navigation and Setup Paths: defaultProtocol: "http" - The default network protocol used. newSshKeyUrl: "/settings/ssh/new" - Path to the page for creating a new SSH key. setProtocolPath: "/users/set_protocol" - API endpoint or path to set the user's protocol preference. newCodespacePath: "/codespaces/new?hide_repo_select=true\u0026repo=893111257" - Path to create a new codespace for the repository. ``` -------------------------------- ### Install Dependencies and Run Vue Project Source: https://context7_llms Commands to navigate into the created project directory, install necessary dependencies, and start the development server. ```bash cd local-first-example pnpm install pnpm run dev ``` -------------------------------- ### Installation and Usage Source: https://github.com/merajmehrabi/puppeteer-mcp-server Instructions for installing and running the Puppeteer MCP Server, including global installation via npm and direct execution using npx. ```APIDOC Installation: Option 1: Install from npm Command: npm install -g puppeteer-mcp-server Description: Installs the server globally on your system, making the command available system-wide. Option 2: Run directly with npx Command: npx puppeteer-mcp-server Description: Executes the server without requiring a global installation, useful for quick testing or one-off runs. ``` -------------------------------- ### Setup Vue Project with TypeScript Source: https://context7_llms Installs necessary dependencies to create a new Vue 3 project with TypeScript support using Vite. Includes installing the Hugging Face Transformers.js library for AI model integration. ```bash npm create vite@latest vue-translator -- --template vue-ts cd vue-translator npm install npm install @huggingface/transformers ``` -------------------------------- ### IDE Setup Recommendation Source: https://github.com/alexanderop/pluginPiniaTabs Details the recommended IDE and extensions for developing Vue 3 projects with Vite. ```markdown Recommended IDE Setup VSCode + Volar (and disable Vetur). ``` -------------------------------- ### TypeScript: Get Logged-in User Image URL Source: https://github.com/vultix/ts-results This snippet defines and uses TypeScript functions to get the current logged-in username and then generate a corresponding image URL. It handles cases where the username might be undefined. The example concludes by creating a URL object from the retrieved image URL. ```typescript declare function getLoggedInUsername(): string | undefined; declare function getImageURLForUsername(username: string): string | undefined; function getLoggedInImageURL(): string | undefined { const username = getLoggedInUsername(); if (!username) { return undefined; } return getImageURLForUsername(username); } const stringUrl = getLoggedInImageURL(); const optionalUrl = stringUrl ? new URL(stringUrl) : undefined; console.log(optionalUrl); ``` -------------------------------- ### Start Development Server Source: https://github.com/alexanderop/vue-dexie Starts the project's development server, enabling local testing and live reloading. The application will typically be accessible via http://localhost:5173. ```shell npm run dev ``` -------------------------------- ### Clone Repository (Shell) Source: https://github.com/alexanderop/sqlite-vue-example Clones the project repository from GitHub. This is the first step to get the project files onto your local machine. It requires Git to be installed. ```Shell git clone https://github.com/your-username/vue-sqlite-playground.git cd vue-sqlite-playground ``` -------------------------------- ### Cursor Guides and Tutorials Source: https://docs.cursor.com/context/rules Resources for learning how to use Cursor effectively, including guides on working with context, selecting models, and specific tutorials for web development and architectural diagrams. ```mdx guides/working-with-context guides/selecting-models guides/tutorials/web-development guides/tutorials/architectural-diagrams ``` -------------------------------- ### Docker Compose Setup for Micro-Frontend Environment Source: https://micro-frontends.org/ This command initiates the Docker Compose setup to build and run the micro-frontend environment. It starts the Nginx server on port 3000 and the Node.js applications for each team, allowing local testing of the server-rendered components. ```shell git clone https://github.com/neuland/micro-frontends.git cd micro-frontends/2-composition-universal docker-compose up --build ``` -------------------------------- ### Start Development Server Source: https://github.com/alexanderop/NuxtPapier Starts the development server, typically accessible at http://localhost:3000. Supports npm, pnpm, yarn, and bun package managers. ```shell # npm npm run dev ``` ```shell # pnpm pnpm dev ``` ```shell # yarn yarn dev ``` ```shell # bun bun run dev ``` -------------------------------- ### Install Dependencies Source: https://github.com/alexanderop/vue-graphql-simple-example Installs the necessary project dependencies using npm. ```shell npm install ``` -------------------------------- ### Install Dependencies Source: https://github.com/alexanderop/post-matcher-ai Installs all necessary project dependencies using npm, ensuring the project is ready to run. ```shell npm install ``` -------------------------------- ### Run Development Server Source: https://github.com/alexanderop/vue-graphql-simple-example Starts the development server to run the Vue.js application. ```shell npm run dev ``` -------------------------------- ### Vue TypeScript Conditional Props Example Source: https://github.com/vuejs/core/issues/8952 Demonstrates how to define props in Vue's