README.md

10xRules.ai by 10xDevs

👉 10xRules.ai

Create so called "rules for AI" written in Markdown, used by tools such as GitHub Copilot, Cursor and Windsurf, through an interactive, visual interface.

Features

• Build AI Rules: Create customized rule sets for different editors (Copilot, Cursor, Windsurf)
• Export Options: Easily copy to clipboard or download as markdown files
• Smart Import: Automatically generate rules by dropping package.json or requirements.txt files
• Editor Integration: Provides programmatic access to rules via an MCP Server for integration with AI assistants in editors like Cursor.

Getting Started

1. Installation

   npm install

2. Development

   npm run dev

3. Build

   npm run build

Tech Stack

• Astro 5
• TypeScript 5
• React 18.3
• Tailwind 4
• Zustand
• Lucide React

Project Components

This repository contains multiple key components:

• AI Rules Builder UI (Root): The main Astro/React application providing the web interface for creating and managing AI rules.
• MCP Server (./mcp-server): A Cloudflare Worker implementing the Model Context Protocol (MCP). This server allows AI assistants (like Cursor, Claude, etc.) to programmatically access the defined AI rules via specific tools (listAvailableRules, getRuleContent). This enables integration with editors for fetching context-aware coding guidelines. For detailed setup, usage, and planned features, see the MCP Server README.

Feature Flags

The project uses a feature flags system to separate deployments from releases. Feature flags can be used to control functionality availability based on the environment (local, integration, prod). The system supports flags for:

• API endpoints
• Astro pages
• UI components visibility

For detailed documentation about feature flags implementation, see .ai/feature-flags.md.

Testing

This project uses a comprehensive testing stack including unit tests and end-to-end tests.

Unit Testing with Vitest

Unit tests are implemented using Vitest with JSDOM for browser environment simulation and React Testing Library for component testing.

Available commands:

# Run unit tests
npm run test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage

End-to-End Testing with Playwright

E2E tests are implemented using Playwright with the Page Object Model pattern for maintainable tests.

Available commands:

# Run E2E tests
npm run test:e2e

# Run E2E tests with UI
npm run test:e2e:ui

# Generate test code with codegen
npm run test:e2e:codegen

Test Structure

• tests/unit/ - Unit tests
• tests/setup/ - Test setup files
• e2e/ - End-to-end tests
• e2e/page-objects/ - Page Object Model classes
• e2e/fixtures/ - Test fixtures and data

CI/CD Integration

Tests are automatically run in the CI/CD pipeline using GitHub Actions. See .github/workflows/tests.yml for configuration.

Contributions

Send updates to:

• src/data/dictionaries.ts
• src/data/rules/...

Important: Introduce translations for new rules in src/i18n/translations.ts, otherwise the unit test will fail.

How to Write Effective Rules

When contributing new rules, please:

• Be specific: "Use React.memo for expensive components" not "Optimize components"
• Make it actionable: Provide clear guidance that can be immediately applied
• Include placeholders: Use {{placeholder_text}} for project-specific values
• Follow conventions: Match the style and structure of existing rules
• Focus on best practices: Rules should represent industry standards, not personal preferences

See examples in src/data/rules/ directory for each technology stack.

---

10xDevs - launching soon 🚀

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Damian 💻

pawel-twardziak 💻

Michal Dudziak 🚧

Artur Laskowski 💻

Michaelzag 💻

We're recognizing all contributors with all-contributors. Feel invited to collaborate!