---
description: Quickly generate a new React component structure
---
1. **Create Directory**:
- Create a folder for the component.
// turbo
- Run
2. **Create Component File**:
- Create the main file with boilerplate code.
// turbo
- Run
3. **Pro Tips**:
- Use a VS Code snippet to automate the typing.
- Consider using a tool like
description: Quickly generate a new React component structure
---
1. **Create Directory**:
- Create a folder for the component.
// turbo
- Run
mkdir -p src/components/NewComponent2. **Create Component File**:
- Create the main file with boilerplate code.
// turbo
- Run
printf "export const NewComponent = () => {\n return (\n <div className='p-4'>\n <h1>NewComponent</h1>\n </div>\n );\n};" > src/components/NewComponent/index.tsx3. **Pro Tips**:
- Use a VS Code snippet to automate the typing.
- Consider using a tool like
plop.js for advanced scaffolding templates.By Antigravity Team
How to Use This Workflow
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/workflows/ - Save the file as
scaffold-new-react-component-structure.md - In Antigravity, type
/scaffold_new_react_component_structureor just describe what you want to do
Related Workflows
Implement Dark Mode
UITailwindTheming
--- description: Add dark mode support using next-themes --- 1. **Install next-themes**: - Install the library. // turbo - Run `npm install next-themes` 2. **Add Provider**: - Wrap your app in `app/layout.tsx`. ```tsx import { ThemeProvider } from 'next-themes'; export def...
Setup Internationalization (i18n)
i18nNext.jsLocalization
--- description: Configure next-intl for multi-language support --- 1. **Install next-intl**: - Install the library. // turbo - Run `npm install next-intl` 2. **Create Messages**: - Create `messages/en.json` and `messages/es.json`. ```json { "Index": { "title": "Hello...
Handle File Uploads (S3)
AWSS3Uploads
--- description: Setup secure file uploads to AWS S3 --- 1. **Install AWS SDK**: - Install the S3 client and presigner. // turbo - Run `npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner` 2. **Create Presigned URL (Server Action)**: - Generate a presigned URL on the server fo...
Recommended Rules
View more rules →React Component Scaffolding Workflow
WorkflowsReactComponent
Create a workflow to generate React components with standard structure. Workflow File: .agent/workflows/create_component.md ```markdown --- descript...
React Hook Generator Workflow
WorkflowsReactHooks
Scaffold custom React hooks with standard boilerplate code. Workflow File: .agent/workflows/create_hook.md ```markdown --- description: Create a new...
React Hooks Best Practices
ReactHooksBest Practices
You are an expert in React Hooks. Key Principles: - Follow Rules of Hooks strictly - Use custom hooks for reusable logic - Optimize dependency arrays...
