{"id":30155268,"url":"https://github.com/pglevy/vibe-coding-boilerplate","last_synced_at":"2025-08-11T12:19:59.126Z","repository":{"id":283906007,"uuid":"952792317","full_name":"pglevy/vibe-coding-boilerplate","owner":"pglevy","description":"A simple site framework for designers who want an easy way to drop in React pages and components generated by LLMs like Claude for viewing and tweaking locally","archived":false,"fork":false,"pushed_at":"2025-07-11T12:46:15.000Z","size":283,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-11T15:30:03.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pglevy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-21T22:25:13.000Z","updated_at":"2025-07-11T12:46:15.000Z","dependencies_parsed_at":"2025-06-30T22:28:40.389Z","dependency_job_id":null,"html_url":"https://github.com/pglevy/vibe-coding-boilerplate","commit_stats":null,"previous_names":["pglevy/vite-boilerplate","pglevy/react-prototyping-boilerplate","pglevy/vibe-coding-boilerplate"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/pglevy/vibe-coding-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fvibe-coding-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fvibe-coding-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fvibe-coding-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fvibe-coding-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pglevy","download_url":"https://codeload.github.com/pglevy/vibe-coding-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fvibe-coding-boilerplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269886032,"owners_count":24490829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-11T12:19:58.472Z","updated_at":"2025-08-11T12:19:59.117Z","avatar_url":"https://github.com/pglevy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Prototyping Boilerplate\n\nThe purpose of this project is to provide a simple site framework for designers who want an easy way to drop in React pages and components generated by LLMs like Claude or Gemini for viewing and tweaking locally.\n\nIt uses [Vite](https://vite.dev/) build tools, [shadcn](https://ui.shadcn.com/) components, and [Tailwind CSS](https://tailwindcss.com/) styling, which works with the typescript (.tsx) files you get out of LLMs.\n\nSome benefits of this approach:\n\n- View files directly in the browser instead of through the LLM UI.\n- Make tweaks quickly and directly without asking the LLM for everything.\n- Link pages together for flexible prototyping.\n\n## Requirements\n\n- [Node.js](https://nodejs.org/en/download)\n- [VS Code](https://code.visualstudio.com/Download) (recommended)\n- [GitHub Desktop](https://central.github.com/deployments/desktop/desktop/latest/darwin-arm64) (recommended if using version control)\n\n## Installation\n\n### Installing Node.js\n\nThis requires Node.js to be installed on your machine. You can check if it's installed by opening Terminal and running this command to see the version: \n\n```\nnode -v\n```\n\nIf you get a \"command not found\" message, go to the [Node.js download page](https://nodejs.org/en/download) to get it. You can use the selection tool to run the installation from the command line or the download the binary and run it from your machine.\n\nPick the current LTS (long-term support) version of Node.\n\nThe command line tool will have you pick a node version manager and node package manager. Unless you have a preference for something else, use `nvm` and `npm`.\n\n### Downloading the project\n\n#### Option 1: Without git version control (simpler)\n\nIf you want to keep things simple, just download the ZIP.\n\n1. [Download ZIP](https://github.com/pglevy/vibe-coding-boilerplate/archive/refs/heads/main.zip) of this repo\n1. Extract ZIP\n1. Move folder where you want to keep it\n1. Launch VS Code and use the `Open Folder` command to open the project\n\n#### Option 2: Manage versions with git and GitHub (advanced)\n\nIf you want to manage your own project on Github and track versions, you can copy this repo as a template.\n\n1. [Create new repository from template](https://github.com/new?template_name=vibe-coding-boilerplate)\n1. Press the green `Code` button in your new repo and select `Open with GitHub Desktop`\n1. Save to your machine using the dialog\n1. Press the `Open in Visual Studio Code` button\n\nWith either option, you should now see the project files in VS Code.\n\n### Installing the project\n\n1. In VS Code, open the Terminal pane (control-~)\n1. Run this command:\n\n```\nnpm install --legacy-peer-deps\n```\n\nThis will install all the necessary files locally to run the project. The [legacy-peer-dependency flag](https://ui.shadcn.com/docs/react-19#solution-1---force-or---legacy-peer-deps) ignores dependency conflicts, which shouldn't cause problems.\n\n## Running the project\n\nIf everything went OK with installation, now you can run this command to start the project: \n\n```\nnpm run dev\n``` \n\nThis runs the project in development mode. If it works, you'll see a message that it's now running on a local server, for example, Local: [http://localhost:5173/](http://localhost:5173/). You can control-click on that link in VS Code to see the site running in your browser, or just copy and paste.\n\nIf it's running you should see this in your browser at the localhost URL:\n\n![Screenshot of homepage](public/home-confirmation.png)\n\nWhenever you want to run the project again, you'll just use the command `npm run dev` again. You don't have to reinstall. Periodically, you may want to run `npm update --legacy-peer-deps` to update the package dependencies.\n\n### Managing the server\n\nIf you need to run some other command in Terminal after the server is running for some reason, open a new Terminal tab (using the plus button).\n\nTo stop the server, press `control-C`.\n\n## Adding pages\n\n1. Generate a page with an LLM like Claude or Gemini. See the [suggested LLM instructions](LLM_INSTRUCTIONS.md) for providing context along with the specific task for your prompt.\n1. Once the interface displays as desired in the LLM UI, download the .tsx file.\n1. Move the file, e.g., signup-form.tsx to the `/src/pages` folder in your project.\n    - Use sub-folders to organize your pages within the `/pages` folders. The sub-folder will be part of the URL, e.g., `localhost:5173/company/about`.\n\nIf the development server is running, the browser should refresh automatically when adding pages or making changes.\n\nIf you've just added a new page, enter the URL manually to see it (page name without suffix, e.g., `localhost:5173/signup-form`).\n\n\u003e [!TIP]\n\u003e Don't worry about typescript warnings, or even errors, if the page is loading. If there's a big problem, the page won't even load.\n\n## Styling components\n\nUse the standard Tailwind syntax to style components. With React, you apply these using the `className` attribute. See some of the demo page examples.\n\n## Taking Screenshots with Playwright MCP\n\nYou can use Amazon Q with the Playwright MCP server to take automated screenshots of your prototypes for documentation and sharing on digital whiteboards. These instructions assume you have Amazon Q up and running.\n\n### Setup\n\n1. **Configure Amazon Q MCP**: Open your config file in VS Code. Run this command in a terminal:\n   ```bash\n   code ~/.aws/amazonq/mcp.json\n   ```\n\n   *If this file doesn't exist*, you can run this in a terminal to create the file in this location: `mkdir -p ~/.aws/amazonq \u0026\u0026 touch ~/.aws/amazonq/mcp.json`\n   \n   Add this to your `mcpServers` section:\n   ```json\n   \"playwright\": {\n     \"command\": \"npx\",\n     \"args\": [\"@modelcontextprotocol/server-playwright\"]\n   }\n   ```\n\n2. **Start your development server**: Make sure your prototype is running:\n   ```bash\n   npm run dev\n   ```\n\n### Taking Screenshots\n\n#### Basic Example (Multiple Tabs)\nFor capturing all tabs of a multi-tab interface:\n\n```\nUsing playwright mcp, take screenshots of this page with each of the tabs selected: http://localhost:5173/#/your-page-route. Save them to the screenshots folder with descriptive names like tab1-overview.png, tab2-details.png, etc.\n```\n\n#### Full-Height Screenshots (Recommended)\nSince the Playwright MCP doesn't support true full-page screenshots, use the resize method to capture more content:\n\n```\nResize browser to 1920x4000, then take a screenshot and save it to /Users/[your-username]/Documents/[your-project]/screenshots/full-height-screenshot.png, (optional: then reset browser to 1280x720)\n```\n\n### Tips \u0026 Workarounds\n\n- **File Paths**: Use absolute paths to ensure screenshots save to your project folder instead of temporary directories\n- **Copying from Temp**: If screenshots end up in temp folders, you can ask Q to move them or copy them with this command in a separate terminal:\n  ```bash\n  cp \"/path/to/temp/screenshot.png\" \"/Users/[username]/path/to/project/screenshots/\"\n  ```\n- **Viewport Sizes**: \n  - You can mention specific sizes to keep things consisten, for example, 1280x720\n  - For full-height, either ask Q to make the adjustment or specify an extra tall height, for example, 1920x4000\n- **File Naming**: If for particular description names if you have a preference, for example, `overview-tab.png`, `full-height-dashboard.png`\n\n### Example Workflow\n\n1. Start development server: `npm run dev`\n2. Open Amazon Q chat\n3. Use this prompt template:\n   ```\n   Resize browser to 1920x4000, navigate to http://localhost:5173/#/my-page, take a screenshot and save it to /Users/[username]/Documents/[your-project]/screenshots/my-page-full.png, then reset browser to 1280x720\n   ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fvibe-coding-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpglevy%2Fvibe-coding-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fvibe-coding-boilerplate/lists"}