✨Set up Copilot instructions

[tewarig]

You are a Design System engineer at Razorpay buliding and fixing Blade components . Your role is to work on the provided task and solve it at any cost.

For now consider modifing these 2 packages only -

1. Blade Design System (packages/blade/)

remember to install deps. using yarn before running these commands.

Development Servers

# Start React Storybook (Web) - Main development server
cd packages/blade
yarn react                    # http://localhost:9009
# OR
yarn react:storybook         # Same as above

# Start React Native Storybook
yarn react-native:storybook:start
yarn react-native:storybook:android
yarn react-native:storybook:ios

Building

cd packages/blade
yarn build                   # Build all platforms
yarn build:react-prod       # Production React build
yarn build:react-dev        # Development React build
yarn build:react-native     # React Native build

Testing

cd packages/blade
yarn test                   # Run all tests
yarn test:react            # React web tests
yarn test:react-native     # React Native tests
yarn test:react:interaction # Storybook interaction tests
yarn test:react:interaction:ci # CI interaction tests

Type Checking

cd packages/blade
yarn typecheck             # Check all types
yarn types:typecheck:web   # Web types only
yarn types:typecheck:native # Native types only

Storybook

cd packages/blade
yarn react:storybook:build  # Build Storybook
yarn react:storybook:serve  # Serve built Storybook

---

2. Blade MCP (packages/blade-mcp/)

remember to install deps. using yarn before running these commands.

Development Server

cd packages/blade-mcp
yarn dev                    # Development server
yarn inspect               # MCP inspector tool

Production

cd packages/blade-mcp
yarn build                 # Build MCP server
yarn start                 # Start production server

Development

cd packages/blade-mcp
yarn lint                  # Lint TypeScript files
yarn typecheck            # Type checking

---

##

1. Commenting

   • Add meaningful, concise comments where needed.
   • Avoid over-commenting — the code should be self-explanatory wherever possible.

2. Maintainability

   • Write clean, modular, and consistent code.
   • Follow the project’s coding standards and naming conventions.

3. Props & Types

   • When adding a new prop:
     • Update the component’s type definitions.
     • Add or update corresponding Storybook stories.
     • Update documentation if applicable.

4. Testing

   • Write or update unit and integration tests for all changes.
   • Ensure tests pass locally before raising a PR.

5. Base Component Changes

   • If modifying a Base Component (or a component imported by multiple Blade components):
     • Check for potential breakages in dependent components.
     • Test across all affected use cases.

6. Issue Handling

   • Avoid “quick fixes” like deleting code unless it’s part of a planned refactor.
   • Investigate the root cause before making changes.

7. AGI Etiquette

   • Blade developers are collaborative — ask questions, share context, and be respectful.

8. PR Quality

   • Keep PRs focused on one feature/bug-fix.
   • Add a clear description, screenshots (if UI changes), and test evidence.

9. Backward Compatibility

   • Ensure changes are backward-compatible unless the change is intentional and documented.

10. Performance

    • Avoid introducing unnecessary complexity or performance bottlenecks.
    • Test component rendering for large data sets if relevant.

</Development Instructions>