Manggala AI Skill Injector

Command-line tool to inject Manggala Enterprise AI Coding Skills into React and Vite projects.

Overview

manggala-frontend-vite-skill is a CLI utility that injects standardized AI coding guidelines, architectural patterns, UI craftsmanship rules, and git commit discipline into any React + Vite codebase.

Upon execution, the tool creates an .agents/ directory in the target project containing a central auto-discovery index (AGENTS.md) alongside five structured skill modules (SKILL.md). Modern AI coding tools automatically index these files to enforce consistent code quality, performance standards, anti-slop UI rules, and application security patterns.

Quick Start

Inject skills into the current working directory:

npx manggala-frontend-vite-skill .

Inject skills into a specific project path:

npx manggala-frontend-vite-skill ./my-app

Command Line Usage

Usage:
  npx manggala-frontend-vite-skill [directory]

Options:
  -h, --help     Show CLI help documentation
  -v, --version  Display installed CLI version

Examples:
  npx manggala-frontend-vite-skill .
  npx manggala-frontend-vite-skill ./packages/frontend

Directory Architecture

Executing the injector generates the following directory structure inside your target project:

.
└── .agents/
    ├── AGENTS.md
    └── skills/
        ├── manggala-frontend-skill/
        │   └── SKILL.md
        ├── react-vite-best-practices/
        │   └── SKILL.md
        ├── vite-auth-middleware/
        │   └── SKILL.md
        ├── anti-slop/
        │   └── SKILL.md
        └── commit-work/
            └── SKILL.md

Auto-Discovery by AI Coding Tools

AI coding assistants (including Antigravity, Gemini CLI, Cursor, Claude Code, Windsurf, and GitHub Copilot) scan the project workspace for .agents/AGENTS.md and .agents/skills/*/SKILL.md upon initialization.

The top-level AGENTS.md file serves as the main registry. When an AI agent performs tasks related to component design, performance tuning, auth setup, styling, or git operations, it automatically reads the matching SKILL.md definitions to guide its output.

Installed Skills Reference

1. Manggala Frontend Skill (manggala-frontend-skill)

Establishes core enterprise architecture for React and Vite applications.

• Technology Stack: React, Vite, TypeScript, TanStack Query, TanStack Table, Axios, React Hook Form, Zod, and Tailwind CSS.
• Architectural Guidelines:
  • src/services/: Direct API communication logic (authService.ts, userService.ts).
  • Custom Hooks: Logic encapsulation and TanStack Query state wrappers (useAuth.ts, useUsers.ts).
  • src/constants/endpoints.ts: Centralized route definition registry.
• Code Style Standards: Declarative functional programming, named exports, strict TypeScript interfaces (prefer interfaces over type aliases and avoid enum).

2. React + Vite Performance (react-vite-best-practices)

Contains 23 performance and build optimization rules across 6 operational categories:

| Priority | Category | Severity | Key Guidelines | | --- | --- | --- | --- | | 1 | Build Optimization | Critical | Manual chunks configuration, vendor splitting, ESM tree shaking, asset hashing | | 2 | Code Splitting | Critical | Route-level lazy loading (React.lazy), Suspense boundaries, dynamic imports | | 3 | Development | High | Pre-bundling optimizations (optimizeDeps), HMR server configuration | | 4 | Asset Handling | High | Image optimization, SVGR React component imports, font loading strategies | | 5 | Environment Config | Medium | VITE_ client variable prefixing, environment file scoping, secret shielding | | 6 | Bundle Analysis | Medium | Output bundle visualization with rollup-plugin-visualizer |

Recommended vite.config.ts Configuration

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    target: "baseline-widely-available",
    sourcemap: false,
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
        },
      },
    },
  },
  optimizeDeps: {
    include: ["react", "react-dom"],
  },
  server: {
    port: 3000,
    hmr: {
      overlay: true,
    },
  },
});

3. Vite Auth Middleware & RBAC (vite-auth-middleware)

Provides architectural specifications for frontend authentication, token management, and route protection.

• Token Storage Mechanics:
  • Session Cookies (httpOnly): Standard for Go/Gin session backends and Laravel Sanctum SPA setups. Prevents token extraction via XSS.
  • In-Memory Bearer Tokens: Used when APIs return tokens in response bodies. Access tokens remain in JavaScript memory, while refresh tokens use httpOnly cookies. Storing tokens in localStorage or sessionStorage is forbidden.
• Three-State Auth Lifecycle:
  • Auth context manages status: "loading" | "authenticated" | "unauthenticated".
  • Eliminates login flicker and premature route redirects during initial session verification.
• Axios 401 Handling & Refresh Concurrency:
  • Employs a shared in-flight refreshPromise for Bearer token requests, preventing race conditions when concurrent requests receive 401 status codes.
• Access Control & Route Protection:
  • ProtectedRoute: Restricts private views based on authentication status.
  • RequireRole: Enforces client-side RBAC (supplemented by backend enforcement).
  • Includes backend examples for Go + Gin session middleware and Laravel Sanctum CSRF integration.

4. Anti-Slop UI Craftsmanship (anti-slop)

Imposes visual hierarchy standards, accessibility requirements, and complete UI component states to prevent low-quality AI UI generation.

• Component Resilience & UI States (Rule C-4): Data containers must explicitly implement 3 states:
  1. Empty state (clear message when no records exist).
  2. Loading state (skeleton placeholders or spinners).
  3. Error state (actionable error message with a retry mechanism).
• Copywriting Rule (Rule R-02): Em dashes (—) are strictly forbidden in user interface copy. Use commas, periods, colons, or parentheses.
• Accessibility & Interaction Standards:
  • Interactive touch targets must meet a minimum size of 44px (Rule R-03).
  • Text contrast must comply with WCAG AA standards (4.5:1 minimum for body text, 3:1 for large text) (Rule R-25).
  • All interactive elements must maintain clear focus indicators for keyboard navigation (Rule R-32).
• Theme Integrity (Rule R-34): Dual-theme support (Light and Dark mode) must maintain proper contrast without broken background colors or illegible text.

5. Git Commit Discipline (commit-work)

Defines rules for repository version control hygiene.

• Conventional Commits Specification: Standardizes commit messages using type(scope): description structure (feat, fix, docs, style, refactor, perf, test, chore).
• Atomic Commits: Mandates staging logically distinct modifications separately rather than combining API changes, UI updates, and code formatting into a single commit.
• Pre-Commit Diff Review: Requires executing git diff --cached prior to committing to ensure no secret keys, debug statements, or temporary files enter the repository history.

Recommended Project Dependencies

The injected guidelines assume your application uses the following libraries. If these packages are not installed, run the following commands:

Application Dependencies

npm install @tanstack/react-query @tanstack/react-query-devtools @tanstack/react-table axios react-hook-form zod react-hot-toast react-quill-new lucide-react

Development Dependencies (Tailwind CSS v4 & Vite Plugin)

npm install -D tailwindcss @tailwindcss/vite

Prompting AI Assistants with Injected Skills

After running the injector, reference the installed skills when instructing your AI assistant:

Example 1: Building a Feature Page

"Create a user management view following the manggala-frontend-skill and vite-auth-middleware specifications. Define API calls in src/services/userService.ts, manage queries with custom TanStack Query hooks, restrict access to the admin role, and implement empty, loading, and error states per anti-slop rules."

Example 2: Optimizing Application Performance

"Review vite.config.ts against react-vite-best-practices. Configure manual vendor chunking, setup route lazy loading, and optimize pre-bundled dependencies."

Example 3: Staging Version Control Commits

"Format git commits for the current changes following commit-work. Verify staged files for secrets and separate UI refactoring from bug fixes into atomic commits."

Verification and Diagnostics

To confirm skill activation in your codebase:

1. Verify that .agents/AGENTS.md exists in your project root directory.
2. Confirm that each folder inside .agents/skills/ contains a valid SKILL.md file.
3. Prompt your AI assistant: "List the Manggala skills active in this project." The assistant should acknowledge the skills listed in .agents/AGENTS.md.

License

MIT © Manggala