start-vibing-stacks 2.1.1 → 2.3.0

package/dist/setup.js

@@ -138,6 +138,35 @@ export async function setupProject(projectDir, config, options = {}) {
                 writeFileSync(gitignorePath, gitignore.trimEnd() + '\n\n# Claude Code local preferences\nCLAUDE.local.md\n');
             }
         }
+        // 11c. Save standards review results
+        if (config.standardsReview) {
+            const reviewPath = join(claudeDir, 'config', 'standards-review.json');
+            writeFileSync(reviewPath, JSON.stringify(config.standardsReview, null, 2));
+            if (config.standardsReview.status === 'adapted' && config.standardsReview.patterns.length > 0) {
+                const claudeMdPath = join(projectDir, 'CLAUDE.md');
+                if (existsSync(claudeMdPath)) {
+                    let claudeContent = readFileSync(claudeMdPath, 'utf8');
+                    const categories = new Map();
+                    for (const p of config.standardsReview.patterns) {
+                        const list = categories.get(p.category) || [];
+                        list.push(p.name);
+                        categories.set(p.category, list);
+                    }
+                    let standardsSection = '\n\n## Project Standards (imported)\n\n';
+                    standardsSection += `> Scanned from: ${config.standardsReview.sources.join(', ')}\n\n`;
+                    for (const [category, items] of categories) {
+                        standardsSection += `### ${category.charAt(0).toUpperCase() + category.slice(1)}\n\n`;
+                        for (const item of items) {
+                            standardsSection += `- ${item}\n`;
+                        }
+                        standardsSection += '\n';
+                    }
+                    claudeContent += standardsSection;
+                    writeFileSync(claudeMdPath, claudeContent);
+                }
+                spinner.text = `Imported ${config.standardsReview.patterns.length} project standards`;
+            }
+        }
         // 12. Copy commands
         const sharedCommandsDir = join(PACKAGE_ROOT, 'stacks', '_shared', 'commands');
         if (existsSync(sharedCommandsDir)) {

package/dist/types.d.ts

@@ -31,6 +31,7 @@ export interface FrameworkOption {
     name: string;
     icon: string;
     detectFiles?: string[];
+    skills?: string[];
     extra?: Record<string, unknown>;
 }
 export interface DatabaseOption {
@@ -42,6 +43,7 @@ export interface FrontendOption {
     id: string;
     name: string;
     icon: string;
+    frameworks?: string[];
 }
 export interface DeployTarget {
     id: string;
@@ -74,6 +76,7 @@ export interface ProjectConfig {
     domains: Record<string, {
         patterns: string[];
     }>;
+    standardsReview?: StandardsReview;
 }
 export interface DetectionResult {
     files: string[];
@@ -86,3 +89,20 @@ export interface DetectionResult {
     hasClaudeMd: boolean;
     hasGit: boolean;
 }
+export interface PatternMatch {
+    category: string;
+    name: string;
+    confidence: number;
+    detail?: string;
+}
+export interface ScanResult {
+    source: string;
+    patterns: PatternMatch[];
+}
+export interface StandardsReview {
+    status: 'adapted' | 'defaults' | 'pending';
+    scannedAt: string;
+    sources: string[];
+    patterns: PatternMatch[];
+    userChoice: 'adapt' | 'defaults' | 'pending';
+}

package/dist/ui.js

@@ -2,7 +2,7 @@
  * Start Vibing Stacks — Terminal UI
  */
 import chalk from 'chalk';
-const VERSION = '2.1.1';
+const VERSION = '2.2.0';
 const gradient = (text) => {
     const colors = [chalk.hex('#FF6B6B'), chalk.hex('#FF8E53'), chalk.hex('#FFBD2E'), chalk.hex('#48BB78'), chalk.hex('#4299E1'), chalk.hex('#9F7AEA')];
     return text.split('').map((c, i) => colors[i % colors.length](c)).join('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "start-vibing-stacks",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "AI-powered multi-stack dev workflow for Claude Code. Supports PHP, Node.js, Python and more.",
   "type": "module",
   "bin": {

package/stacks/_shared/hooks/user-prompt-submit.ts

@@ -11,6 +11,7 @@ import { join } from 'path';
 
 const PROJECT_DIR = process.env['CLAUDE_PROJECT_DIR'] || process.cwd();
 const ACTIVE_PROJECT = join(PROJECT_DIR, '.claude', 'config', 'active-project.json');
+const STANDARDS_REVIEW = join(PROJECT_DIR, '.claude', 'config', 'standards-review.json');
 
 let stackName = 'Unknown';
 let qualityCmd = 'Run quality gates';
@@ -18,7 +19,6 @@ try {
   if (existsSync(ACTIVE_PROJECT)) {
     const config = JSON.parse(readFileSync(ACTIVE_PROJECT, 'utf8'));
     stackName = config.stack || 'Unknown';
-    // Read quality gates command from stack config
     const stackConfig = join(PROJECT_DIR, '.claude', 'config', 'quality-gates.json');
     if (existsSync(stackConfig)) {
       const gates = JSON.parse(readFileSync(stackConfig, 'utf8'));
@@ -27,6 +27,30 @@ try {
   }
 } catch {}
 
+interface ReviewFile {
+  status: string;
+  sources?: string[];
+  patterns?: { category: string; name: string }[];
+}
+
+let standardsContext = '';
+try {
+  if (!existsSync(STANDARDS_REVIEW)) {
+    standardsContext = `\n\nSTANDARDS REVIEW NEEDED: No standards-review.json found. ` +
+      `This project may have existing coding standards (.cursorrules, composer.json configs). ` +
+      `Ask the user: "I noticed this project hasn't been scanned for existing standards. ` +
+      `Would you like me to review your codebase patterns and adapt my behavior, ` +
+      `or should I use the default standards?"`;
+  } else {
+    const review: ReviewFile = JSON.parse(readFileSync(STANDARDS_REVIEW, 'utf8'));
+    if (review.status === 'adapted' && review.patterns && review.patterns.length > 0) {
+      const patternList = review.patterns.map(p => `- [${p.category}] ${p.name}`).join('\n');
+      standardsContext = `\n\nPROJECT STANDARDS (scanned from ${(review.sources || []).join(', ')}):\n${patternList}\n` +
+        `Follow these project-specific patterns. They take priority over generic defaults.`;
+    }
+  }
+} catch {}
+
 async function main(): Promise<void> {
   let hookInput: any = {};
   try {
@@ -65,7 +89,7 @@ async function main(): Promise<void> {
    a. "## Last Change" (date: ${today}, branch, summary)
    b. Update ALL affected rule/flow sections
 
-6. Run stop-validator before finishing.`;
+6. Run stop-validator before finishing.${standardsContext}`;
 
   console.log(JSON.stringify({ continue: true, systemMessage }));
   process.exit(0);

package/stacks/frontend/react-inertia/skills/inertia-react/SKILL.md

@@ -0,0 +1,342 @@
+# Inertia.js + React Integration
+
+## Architecture Overview
+
+Inertia.js acts as a bridge between Laravel (backend) and React (frontend). There is NO separate API layer — controllers return Inertia responses that render React page components with server-side data as props.
+
+```
+Request Flow:
+Browser → Laravel Router → Controller → Inertia::render('Page', $props)
+                                              ↓
+                                    HandleInertiaRequests (middleware)
+                                              ↓
+                                    InertiaShare (shared props: auth, translations, menu)
+                                              ↓
+                                    React Page Component (receives all props)
+```
+
+## Backend: Middleware
+
+### HandleInertiaRequests
+
+The Inertia middleware merges shared props (auth, translations, flash messages) into every response:
+
+```php
+namespace App\Http\Middleware;
+
+use Inertia\Middleware;
+use App\Support\InertiaShare;
+
+class HandleInertiaRequests extends Middleware
+{
+    protected $rootView = 'app';
+
+    public function version(Request $request): ?string
+    {
+        return parent::version($request);
+    }
+
+    public function share(Request $request): array
+    {
+        return array_merge(
+            parent::share($request),
+            InertiaShare::getProps($request),
+        );
+    }
+}
+```
+
+**Rules:**
+- Keep `share()` lean — delegate to `InertiaShare` helper
+- `parent::share()` provides validation errors automatically
+- `version()` triggers full page reload on asset changes
+
+### InertiaShare Support Class
+
+Centralize all shared props in `App\Support\InertiaShare`:
+
+```php
+namespace App\Support;
+
+class InertiaShare
+{
+    public static function getProps(Request $request): array
+    {
+        $locale = App::getLocale();
+
+        return [
+            'auth' => [
+                'user' => $request->user() ? [
+                    'id' => $request->user()->id,
+                    'name' => $request->user()->name,
+                    'role' => $request->user()->role,
+                    'email' => $request->user()->email,
+                    'timezone' => $request->user()->timezone,
+                ] : null,
+            ],
+            'locale' => $locale,
+            'translations' => static::getTranslations(
+                $locale,
+                $request->route()->uri,
+            ),
+            'flash' => $request->hasSession() ? [
+                'success' => Session::get('success'),
+                'error' => Session::get('error'),
+            ] : [],
+        ];
+    }
+}
+```
+
+**Rules:**
+- Auth data: expose only necessary fields (never passwords, tokens)
+- Translations loaded on-demand per page (not all at once)
+- Flash messages via Laravel session
+- Menu structure loaded from DB, filtered by permissions, cached per user
+
+## Backend: Controllers with Inertia
+
+Controllers render React page components via `Inertia::render()`:
+
+```php
+use Inertia\Inertia;
+use Inertia\Response as InertiaResponse;
+
+class DashboardController extends Controller
+{
+    public function __construct(
+        private readonly DashboardService $service,
+    ) {}
+
+    public function index(Request $request): InertiaResponse
+    {
+        return Inertia::render('Dashboard/Index', [
+            'stats' => $this->service->getStats($request->user()),
+            'recentOrders' => fn () => OrderResource::collection(
+                $request->user()->orders()->latest()->limit(10)->get()
+            ),
+        ]);
+    }
+
+    public function show(Order $order): InertiaResponse
+    {
+        return Inertia::render('Orders/Show', [
+            'order' => OrderResource::make($order->load('items')),
+        ]);
+    }
+}
+```
+
+**Rules:**
+- Return type: `Inertia\Response` (not `JsonResponse`)
+- Page component path maps to: `resources/js/Pages/{path}`
+- Use lazy props with `fn ()` for data not needed on first render
+- Use API Resources to format complex data before passing as props
+- Keep controller thin — delegate to services
+
+### Inertia Redirects
+
+```php
+// After mutations, redirect (Inertia handles SPA navigation)
+public function store(StoreOrderRequest $request): RedirectResponse
+{
+    $order = $this->service->create($request->validated());
+
+    return redirect()
+        ->route('orders.show', $order)
+        ->with('success', __('orders.created'));
+}
+
+public function destroy(Order $order): RedirectResponse
+{
+    $this->service->delete($order);
+
+    return redirect()
+        ->route('orders.index')
+        ->with('success', __('orders.deleted'));
+}
+```
+
+**Rule:** POST/PUT/DELETE actions return `redirect()` with flash messages, never `Inertia::render()`.
+
+## Backend: Translations On-Demand
+
+Translations are loaded per-page via a config file that maps routes to translation files:
+
+```php
+// config/translations_inertia.php
+return [
+    'global' => ['common', 'errors', 'validation'],
+
+    'pages' => [
+        'dashboard' => ['dashboard'],
+        'orders/*' => ['orders', 'products'],
+        'settings/*' => ['settings'],
+    ],
+];
+```
+
+The `InertiaShare::getTranslations()` method:
+1. Loads global translation files (always sent)
+2. Loads page-specific files based on route URI
+3. Merges PHP files (`lang/{locale}/*.php`) + JSON file (`lang/{locale}.json`)
+4. Caches result per locale + page combination
+
+**Rules:**
+- Global files: `common`, `errors`, `validation` (always loaded)
+- Page files: only load what the page needs
+- Cache invalidation: clear on deploy (`php artisan cache:clear`)
+- Store translations in `lang/en/*.php` and `lang/pt/*.php`
+
+## Frontend: Translation Helper
+
+The `__()` function resolves translation keys from Inertia shared props:
+
+```js
+// resources/js/Utils/translate.js
+import { usePage } from '@inertiajs/react';
+
+export default function __(key, replacements = {}, pageProps = null) {
+    const propsSource = pageProps ? { props: pageProps } : usePage();
+    const translations = propsSource.props.translations || {};
+
+    let translation = key.split('.').reduce((obj, part) => {
+        return obj && typeof obj[part] !== 'undefined' ? obj[part] : null;
+    }, translations);
+
+    if (translation === null) {
+        return key;
+    }
+
+    if (typeof translation === 'string' && Object.keys(replacements).length > 0) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(
+                new RegExp(`:${placeholder}`, 'g'),
+                replacements[placeholder],
+            );
+        });
+    }
+
+    return translation;
+}
+```
+
+### Usage in React Components
+
+```tsx
+import __ from '@/Utils/translate';
+
+// CORRECT: Define translations as CONST before hooks
+const LABELS = {
+    title: __('dashboard.title'),
+    welcome: __('dashboard.welcome', { name: 'User' }),
+    save: __('common.save'),
+};
+
+export default function Dashboard({ stats }) {
+    const [loading, setLoading] = useState(false);
+
+    return (
+        <div>
+            <h1>{LABELS.title}</h1>
+            <p>{LABELS.welcome}</p>
+        </div>
+    );
+}
+
+// WRONG: Calling __() inside JSX (React Hook violation)
+return <h1>{__('dashboard.title')}</h1>; // NEVER
+```
+
+**Rules:**
+- ALWAYS define translations as `CONST` at the top of the component, BEFORE hooks
+- NEVER call `__()` inside JSX or render methods
+- New strings must be added to both `lang/en/*.php` and `lang/pt/*.php`
+- Error strings centralized in `lang/*/errors.php`
+- Use replacements for dynamic values: `__('greeting', { name: userName })`
+
+## Frontend: Page Component Structure
+
+```
+resources/js/
+├── Pages/
+│   ├── Dashboard/
+│   │   └── Index.jsx
+│   ├── Orders/
+│   │   ├── Index.jsx
+│   │   ├── Show.jsx
+│   │   └── _components/      # Page-specific components
+│   │       ├── OrderTable.jsx
+│   │       └── OrderFilters.jsx
+│   ├── Auth/
+│   │   ├── Login.jsx
+│   │   └── Register.jsx
+│   └── Users/
+│       └── Admin/
+│           └── Dashboard.jsx
+├── Components/
+│   ├── UI/                    # Reusable UI primitives
+│   ├── Layout/                # Header, Sidebar, Footer
+│   └── Shared/                # Cross-feature components
+├── Icons/
+│   ├── index.js               # Barrel export
+│   ├── CheckIcon.svg
+│   └── AlertIcon.svg
+├── Layouts/
+│   ├── AuthenticatedLayout.jsx
+│   └── GuestLayout.jsx
+└── Utils/
+    └── translate.js           # __() helper
+```
+
+**Rules:**
+- Pages map 1:1 to `Inertia::render('Path/Component')`
+- Page-specific components in `_components/` folder
+- Shared components in `Components/`
+- Icons as separate `.svg` files, imported with `?react` suffix
+
+## Frontend: Inertia Hooks
+
+```tsx
+import { usePage, useForm, router, Link } from '@inertiajs/react';
+
+// Access shared props
+const { auth, flash, locale } = usePage().props;
+
+// Form handling with Inertia
+const { data, setData, post, processing, errors } = useForm({
+    name: '',
+    email: '',
+});
+
+const handleSubmit = (e) => {
+    e.preventDefault();
+    post(route('users.store'));
+};
+
+// Programmatic navigation
+router.visit(route('dashboard'));
+router.reload({ only: ['stats'] }); // Partial reload
+
+// Links (SPA navigation, no full page reload)
+<Link href={route('orders.index')}>Orders</Link>
+```
+
+**Rules:**
+- Use `useForm` for all form submissions (handles CSRF, errors, loading state)
+- Use `router.reload({ only: [...] })` for partial page updates
+- Use `<Link>` instead of `<a>` for SPA navigation
+- Access shared props via `usePage().props`
+- `processing` boolean from `useForm` for button loading states
+
+## Forbidden Patterns
+
+| Pattern | Reason | Use Instead |
+|---------|--------|-------------|
+| `fetch()` / `axios` for page data | Bypasses Inertia | `Inertia::render()` with props |
+| `__()` inside JSX | React Hook violation | CONST at top of component |
+| Inline SVGs in JSX | Bloats components | SVG files with `?react` import |
+| `<a href>` for internal links | Full page reload | `<Link href>` |
+| `window.location` for navigation | Full page reload | `router.visit()` |
+| `Inertia::render()` after POST | Breaks Inertia protocol | `redirect()->route()` |
+| Loading all translations globally | Performance waste | On-demand per page route |