Website Build Prompts

A simple CLI tool that provides style guide and build prompts for website development. This tool helps developers understand the purpose, features, and style guidelines for building micro applications.

Usage

You can run this tool directly using npx without installation:

# Show help menu
npx website-build-prompts --help

# Show style guide
npx website-build-prompts --style-guide

# Show micro app studio purpose
npx website-build-prompts --micro-app-studio-purpose

# Show app features
npx website-build-prompts --app-features

Available Commands

• --help: Displays the help menu with all available options
• --style-guide: Shows the development style guide and best practices
• --micro-app-studio-purpose: Provides insights about the micro app studio's purpose and potential use cases
• --app-features: Explains the main features from an end-user perspective

Style Guide Content

The tool provides a style guide with the following recommendations:

1. Remove the code from the page.js file
2. Import the necessary landing page and/or hero into there
3. Header and Footer files should be on the layout.js
4. Use TailwindCSS and .js files
5. All colours should be variables and not hardcoded
6. This is a windows machine so all commands should be powershell
7. Use images from unsplash
8. You need to add the Unsplash domain to the Next.js configuration file to allow image loading from their domain if you are using unsplash images
9. Add aria-label="Toggle theme" to the theme button
10. Add a favicon with the name of the website and a relevant svg logo
11. All components and pages must be optimized for mobile and desktop responsiveness
12. Any fake data that is generated should be in a json file located in the public/data folder and should be named relevant to the component or page using it. In addition, when data is used by the pages or components, it should be imported from the json file and used from there.

Style Guide Typescript

The tool provides a style guide with the following recommendations:

1. Remove the code from the page.tsx file
2. Import the necessary landing page and/or hero into there
3. Header and Footer files should be on the layout.tsx
4. Use TailwindCSS and .tsx files
5. All colours should be variables and not hardcoded
6. This is a windows machine so all commands should be powershell
7. Use images from unsplash
8. You need to add the Unsplash domain to the Next.js configuration file to allow image loading from their domain if you are using unsplash images
9. Add aria-label="Toggle theme" to the theme button
10. Add a favicon with the name of the website and a relevant svg logo
11. All components and pages must be optimized for mobile and desktop responsiveness
12. Each component should have a script that converts that components to javascript and converts the tailwindcss to css
13. This is an App Router project so use the App Router syntax

Micro App Studio Purpose

The micro app studio is designed to facilitate rapid idea-to-production development. It helps developers and entrepreneurs quickly create and deploy niche-focused, monetizable applications. The tool provides guidance on leveraging the template for trending topics and specific audience needs.

App Features

The tool includes a command to explain the main features and components from an end-user perspective, making it easier to understand the practical applications and benefits of each feature.

License

MIT