trypost/CLAUDE.md
Paulo Castellano f3f72afecd refactor: auth split layout, subscribe redesign, onboarding, i18n, cookie locale
Auth pages:
- Create AuthSplitLayout with animated feature slides (6 slides, 3 languages)
- All auth pages use split layout (form left, visual right)
- Add show/hide password toggle with tooltip on Register
- Legal footer only shown on Register via showLegal prop

Subscribe page:
- Redesign to match auth card pattern (centered, clean)
- Platform icons, feature checklist, dynamic trial days (trialDays - 1)
- Add "Switch workspace" link
- Full i18n (en, es, pt-BR)

Onboarding:
- Rename URLs: step1 -> role, step2 -> connect
- Add enforceStep() to prevent skipping/going back steps
- Redirect /onboarding to /onboarding/role
- Redesign Step2 with AuthSplitLayout and compact platform list
- 21 tests covering all step enforcement scenarios

Workspaces page:
- Redesign with AuthSplitLayout (list with avatars, current badge)

Language system:
- Move locale from DB to cookie (forever, unencrypted, session.domain)
- Create SetLocale middleware (sets cookie if missing, validates against config)
- Rename lang/pt-br to lang/pt-BR
- Add dayjs es locale

Other:
- Copy utils.ts from sendkit (formatNumber, formatMoney, copyToClipboard)
- ConfirmDeleteModal with text confirmation (sendkit pattern)
- i18n for ConfirmDeleteModal internal strings (common.php)
- EmptyState component for posts index
- Exact match for "All" posts in sidebar
- Posts breadcrumbs show current status filter
- DialogFooter buttons aligned left
- API Keys page redesign with Table, DropdownMenu, EmptyState
- Extract CreateApiKeyDialog and InviteMemberDialog to components
- Remove API Keys from sidebar
- DropdownMenuItem destructive variant for Remove action
2026-03-30 11:53:42 -03:00

21 KiB

=== foundation rules ===

Laravel Boost Guidelines

The Laravel Boost guidelines are specifically curated by Laravel maintainers for this application. These guidelines should be followed closely to ensure the best experience when building Laravel applications.

Foundational Context

This application is a Laravel application and its main Laravel ecosystems package & versions are below. You are an expert with them all. Ensure you abide by these specific packages & versions.

  • php - 8.4
  • inertiajs/inertia-laravel (INERTIA_LARAVEL) - v3
  • laravel/ai (AI) - v0
  • laravel/boost (BOOST) - v2
  • laravel/cashier (CASHIER) - v16
  • laravel/framework (LARAVEL) - v13
  • laravel/horizon (HORIZON) - v5
  • laravel/mcp (MCP) - v0
  • laravel/nightwatch (NIGHTWATCH) - v1
  • laravel/prompts (PROMPTS) - v0
  • laravel/reverb (REVERB) - v1
  • laravel/socialite (SOCIALITE) - v5
  • laravel/wayfinder (WAYFINDER) - v0
  • laravel/pail (PAIL) - v1
  • laravel/pint (PINT) - v1
  • laravel/sail (SAIL) - v1
  • laravel/telescope (TELESCOPE) - v5
  • pestphp/pest (PEST) - v4
  • phpunit/phpunit (PHPUNIT) - v12
  • @inertiajs/vue3 (INERTIA_VUE) - v3
  • tailwindcss (TAILWINDCSS) - v4
  • vue (VUE) - v3
  • @laravel/echo-vue (ECHO_VUE) - v2
  • @laravel/vite-plugin-wayfinder (WAYFINDER_VITE) - v0
  • eslint (ESLINT) - v9
  • laravel-echo (ECHO) - v2
  • prettier (PRETTIER) - v3

Skills Activation

This project has domain-specific skills available. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck.

  • cashier-stripe-development — Handles Laravel Cashier Stripe integration including subscriptions, webhooks, Stripe Checkout, invoices, charges, refunds, trials, coupons, metered billing, and payment failure handling. Triggered when a user mentions Cashier, Billable, IncompletePayment, stripe_id, newSubscription, Stripe subscriptions, or billing. Also applies when setting up webhooks, handling SCA/3DS payment failures, testing with Stripe test cards, or troubleshooting incomplete subscriptions, CSRF webhook errors, or migration publish issues.
  • laravel-best-practices — Apply this skill whenever writing, reviewing, or refactoring Laravel PHP code. This includes creating or modifying controllers, models, migrations, form requests, policies, jobs, scheduled commands, service classes, and Eloquent queries. Triggers for N+1 and query performance issues, caching strategies, authorization and security patterns, validation, error handling, queue and job configuration, route definitions, and architectural decisions. Also use for Laravel code reviews and refactoring existing Laravel code to follow best practices. Covers any task involving Laravel backend PHP code patterns.
  • configuring-horizon — Use this skill whenever the user mentions Horizon by name in a Laravel context. Covers the full Horizon lifecycle: installing Horizon (horizon:install, Sail setup), configuring config/horizon.php (supervisor blocks, queue assignments, balancing strategies, minProcesses/maxProcesses), fixing the dashboard (authorization via Gate::define viewHorizon, blank metrics, horizon:snapshot scheduling), and troubleshooting production issues (worker crashes, timeout chain ordering, LongWaitDetected notifications, waits config). Also covers job tagging and silencing. Do not use for generic Laravel queues without Horizon, SQS or database drivers, standalone Redis setup, Linux supervisord, Telescope, or job batching.
  • mcp-development — Use this skill for Laravel MCP development only. Trigger when creating or editing MCP tools, resources, prompts, or servers in Laravel projects. Covers: artisan make:mcp-* generators, mcp:inspector, routes/ai.php, Tool/Resource/Prompt classes, schema validation, shouldRegister(), OAuth setup, URI templates, read-only attributes, and MCP debugging. Do not use for non-Laravel MCP projects or generic AI features without MCP.
  • socialite-development — Manages OAuth social authentication with Laravel Socialite. Activate when adding social login providers; configuring OAuth redirect/callback flows; retrieving authenticated user details; customizing scopes or parameters; setting up community providers; testing with Socialite fakes; or when the user mentions social login, OAuth, Socialite, or third-party authentication.
  • wayfinder-development — Use this skill for Laravel Wayfinder which auto-generates typed functions for Laravel controllers and routes. ALWAYS use this skill when frontend code needs to call backend routes or controller actions. Trigger when: connecting any React/Vue/Svelte/Inertia frontend to Laravel controllers, routes, building end-to-end features with both frontend and backend, wiring up forms or links to backend endpoints, fixing route-related TypeScript errors, importing from @/actions or @/routes, or running wayfinder:generate. Use Wayfinder route functions instead of hardcoded URLs. Covers: wayfinder() vite plugin, .url()/.get()/.post()/.form(), query params, route model binding, tree-shaking. Do not use for backend-only task
  • pest-testing — Use this skill for Pest PHP testing in Laravel projects only. Trigger whenever any test is being written, edited, fixed, or refactored — including fixing tests that broke after a code change, adding assertions, converting PHPUnit to Pest, adding datasets, and TDD workflows. Always activate when the user asks how to write something in Pest, mentions test files or directories (tests/Feature, tests/Unit, tests/Browser), or needs browser testing, smoke testing multiple pages for JS errors, or architecture tests. Covers: it()/expect() syntax, datasets, mocking, browser testing (visit/click/fill), smoke testing, arch(), Livewire component tests, RefreshDatabase, and all Pest 4 features. Do not use for factories, seeders, migrations, controllers, models, or non-test PHP code.
  • inertia-vue-development — Develops Inertia.js v3 Vue client-side applications. Activates when creating Vue pages, forms, or navigation; using , , useForm, useHttp, setLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions Vue with Inertia, Vue pages, Vue forms, or Vue navigation.
  • tailwindcss-development — Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.

Conventions

  • You must follow all existing code conventions used in this application. When creating or editing a file, check sibling files for the correct structure, approach, and naming.
  • Use descriptive names for variables and methods. For example, isRegisteredForDiscounts, not discount().
  • Check for existing components to reuse before writing a new one.

Verification Scripts

  • Do not create verification scripts or tinker when tests cover that functionality and prove they work. Unit and feature tests are more important.

Application Structure & Architecture

  • Stick to existing directory structure; don't create new base folders without approval.
  • Do not change the application's dependencies without approval.

Frontend Bundling

  • If the user doesn't see a frontend change reflected in the UI, it could mean they need to run vendor/bin/sail npm run build, vendor/bin/sail npm run dev, or vendor/bin/sail composer run dev. Ask them.

Documentation Files

  • You must only create documentation files if explicitly requested by the user.

Replies

  • Be concise in your explanations - focus on what's important rather than explaining obvious details.

=== boost rules ===

Laravel Boost

Tools

  • Laravel Boost is an MCP server with tools designed specifically for this application. Prefer Boost tools over manual alternatives like shell commands or file reads.
  • Use database-query to run read-only queries against the database instead of writing raw SQL in tinker.
  • Use database-schema to inspect table structure before writing migrations or models.
  • Use get-absolute-url to resolve the correct scheme, domain, and port for project URLs. Always use this before sharing a URL with the user.
  • Use browser-logs to read browser logs, errors, and exceptions. Only recent logs are useful, ignore old entries.

Searching Documentation (IMPORTANT)

  • Always use search-docs before making code changes. Do not skip this step. It returns version-specific docs based on installed packages automatically.
  • Pass a packages array to scope results when you know which packages are relevant.
  • Use multiple broad, topic-based queries: ['rate limiting', 'routing rate limiting', 'routing']. Expect the most relevant results first.
  • Do not add package names to queries because package info is already shared. Use test resource table, not filament 4 test resource table.

Search Syntax

  1. Use words for auto-stemmed AND logic: rate limit matches both "rate" AND "limit".
  2. Use "quoted phrases" for exact position matching: "infinite scroll" requires adjacent words in order.
  3. Combine words and phrases for mixed queries: middleware "rate limit".
  4. Use multiple queries for OR logic: queries=["authentication", "middleware"].

Artisan

  • Run Artisan commands directly via the command line (e.g., vendor/bin/sail artisan route:list). Use vendor/bin/sail artisan list to discover available commands and vendor/bin/sail artisan [command] --help to check parameters.
  • Inspect routes with vendor/bin/sail artisan route:list. Filter with: --method=GET, --name=users, --path=api, --except-vendor, --only-vendor.
  • Read configuration values using dot notation: vendor/bin/sail artisan config:show app.name, vendor/bin/sail artisan config:show database.default. Or read config files directly from the config/ directory.
  • To check environment variables, read the .env file directly.

Tinker

  • Execute PHP in app context for debugging and testing code. Do not create models without user approval, prefer tests with factories instead. Prefer existing Artisan commands over custom tinker code.
  • Always use single quotes to prevent shell expansion: vendor/bin/sail artisan tinker --execute 'Your::code();'
    • Double quotes for PHP strings inside: vendor/bin/sail artisan tinker --execute 'User::where("active", true)->count();'

=== php rules ===

PHP

  • Always use curly braces for control structures, even for single-line bodies.
  • Use PHP 8 constructor property promotion: public function __construct(public GitHub $github) { }. Do not leave empty zero-parameter __construct() methods unless the constructor is private.
  • Use explicit return type declarations and type hints for all method parameters: function isAccessible(User $user, ?string $path = null): bool
  • Use TitleCase for Enum keys: FavoritePerson, BestLake, Monthly.
  • Prefer PHPDoc blocks over inline comments. Only add inline comments for exceptionally complex logic.
  • Use array shape type definitions in PHPDoc blocks.

=== sail rules ===

Laravel Sail

  • This project runs inside Laravel Sail's Docker containers. You MUST execute all commands through Sail.
  • Start services using vendor/bin/sail up -d and stop them with vendor/bin/sail stop.
  • Open the application in the browser by running vendor/bin/sail open.
  • Always prefix PHP, Artisan, Composer, and Node commands with vendor/bin/sail. Examples:
    • Run Artisan Commands: vendor/bin/sail artisan migrate
    • Install Composer packages: vendor/bin/sail composer install
    • Execute Node commands: vendor/bin/sail npm run dev
    • Execute PHP scripts: vendor/bin/sail php [script]
  • View all available Sail commands by running vendor/bin/sail without arguments.

=== tests rules ===

Test Enforcement

  • Every change must be programmatically tested. Write a new test or update an existing test, then run the affected tests to make sure they pass.
  • Run the minimum number of tests needed to ensure code quality and speed. Use vendor/bin/sail artisan test --compact with a specific filename or filter.

=== inertia-laravel/core rules ===

Inertia

  • Inertia creates fully client-side rendered SPAs without modern SPA complexity, leveraging existing server-side patterns.
  • Components live in resources/js/pages (unless specified in vite.config.js). Use Inertia::render() for server-side routing instead of Blade views.
  • ALWAYS use search-docs tool for version-specific Inertia documentation and updated code examples.
  • IMPORTANT: Activate inertia-vue-development when working with Inertia Vue client-side patterns.

Inertia v3

  • Use all Inertia features from v1, v2, and v3. Check the documentation before making changes to ensure the correct approach.
  • New v3 features: standalone HTTP requests (useHttp hook), optimistic updates with automatic rollback, layout props (useLayoutProps hook), instant visits, simplified SSR via @inertiajs/vite plugin, custom exception handling for error pages.
  • Carried over from v2: deferred props, infinite scroll, merging props, polling, prefetching, once props, flash data.
  • When using deferred props, add an empty state with a pulsing or animated skeleton.
  • Axios has been removed. Use the built-in XHR client with interceptors, or install Axios separately if needed.
  • Inertia::lazy() / LazyProp has been removed. Use Inertia::optional() instead.
  • Prop types (Inertia::optional(), Inertia::defer(), Inertia::merge()) work inside nested arrays with dot-notation paths.
  • SSR works automatically in Vite dev mode with @inertiajs/vite - no separate Node.js server needed during development.
  • Event renames: invalid is now httpException, exception is now networkError.
  • router.cancel() replaced by router.cancelAll().
  • The future configuration namespace has been removed - all v2 future options are now always enabled.

=== laravel/core rules ===

Do Things the Laravel Way

  • Use vendor/bin/sail artisan make: commands to create new files (i.e. migrations, controllers, models, etc.). You can list available Artisan commands using vendor/bin/sail artisan list and check their parameters with vendor/bin/sail artisan [command] --help.
  • If you're creating a generic PHP class, use vendor/bin/sail artisan make:class.
  • Pass --no-interaction to all Artisan commands to ensure they work without user input. You should also pass the correct --options to ensure correct behavior.

Model Creation

  • When creating new models, create useful factories and seeders for them too. Ask the user if they need any other things, using vendor/bin/sail artisan make:model --help to check the available options.

APIs & Eloquent Resources

  • For APIs, default to using Eloquent API Resources and API versioning unless existing API routes do not, then you should follow existing application convention.

URL Generation

  • When generating links to other pages, prefer named routes and the route() function.

Testing

  • When creating models for tests, use the factories for the models. Check if the factory has custom states that can be used before manually setting up the model.
  • Faker: Use methods such as $this->faker->word() or fake()->randomDigit(). Follow existing conventions whether to use $this->faker or fake().
  • When creating tests, make use of vendor/bin/sail artisan make:test [options] {name} to create a feature test, and pass --unit to create a unit test. Most tests should be feature tests.

Vite Error

  • If you receive an "Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest" error, you can run vendor/bin/sail npm run build or ask the user to run vendor/bin/sail npm run dev or vendor/bin/sail composer run dev.

=== wayfinder/core rules ===

Laravel Wayfinder

Use Wayfinder to generate TypeScript functions for Laravel routes. Import from @/actions/ (controllers) or @/routes/ (named routes).

=== pint/core rules ===

Laravel Pint Code Formatter

  • If you have modified any PHP files, you must run vendor/bin/sail bin pint --dirty --format agent before finalizing changes to ensure your code matches the project's expected style.
  • Do not run vendor/bin/sail bin pint --test --format agent, simply run vendor/bin/sail bin pint --format agent to fix any formatting issues.

=== pest/core rules ===

Pest

  • This project uses Pest for testing. Create tests: vendor/bin/sail artisan make:test --pest {name}.
  • Run tests: vendor/bin/sail artisan test --compact or filter: vendor/bin/sail artisan test --compact --filter=testName.
  • Do NOT delete tests without approval.

=== inertia-vue/core rules ===

Inertia + Vue

Vue components must have a single root element.

  • IMPORTANT: Activate inertia-vue-development when working with Inertia Vue client-side patterns.

Project-Specific Rules

Frontend (Vue/TypeScript)

  • Always use arrow functions in Vue components and TypeScript files. Never use function declarations.

Icons (@tabler/icons-vue)

  • This project uses @tabler/icons-vue for all icons. NEVER use lucide-vue-next.
  • All Tabler icons are prefixed with Icon, e.g. IconCheck, IconChevronRight, IconMail.
  • Import icons from @tabler/icons-vue: import { IconCheck, IconX } from '@tabler/icons-vue'.
  • Browse available icons at https://tabler.io/icons
  • Button never use icon + text, it's icon or text, never together
  • dropdown lists always use icon + text, and both have the same color

Dates

  • For date manipulation, always use @/dayjs (pre-configured dayjs instance with utc, timezone, relativeTime plugins).
  • For formatting dates for display (formatDate, formatDateTime, formatTime, diffForHumans), always use @/date which centralizes all formatting logic with proper timezone handling.
  • Never use raw new Date() for date calculations — use dayjs.

Routing (Wayfinder)

  • This project uses Laravel Wayfinder for type-safe frontend routing.
  • ALWAYS use Wayfinder-generated route helpers in Vue pages (e.g. register(), login(), dashboard()). NEVER hardcode URL strings like href="/register".
  • After creating or modifying PHP routes/controllers, run php artisan wayfinder:generate to regenerate the TypeScript route helpers.
  • Import routes from @/routes/... (e.g. import { store } from '@/routes/login').

Pagination

  • Always use normal pagination (->paginate()). NEVER use cursor pagination (->cursorPaginate()).
  • All paginated lists must use Inertia's scroll pagination (Inertia::scroll() on the backend with <InfiniteScroll> on the frontend). NEVER use traditional page-based pagination with page links/buttons.

Form Validation

  • NEVER use HTML5 validation attributes (required, minlength, pattern, etc.) on form inputs. Always rely solely on backend validation.

Dusk (Browser Tests)

  • In Dusk tests, ALWAYS use named routes via route() helper. NEVER hardcode URLs like 'https://app.sendkit.test/login'.
    • Example: $browser->visit(route('login')) instead of $browser->visit('https://app.sendkit.test/login').
  • ALWAYS use dusk selectors (@selector-name) for interacting with and asserting elements. NEVER use CSS classes (.text-red-600), tag names, or text strings.
    • Add dusk="my-element" attributes to Vue components and use $browser->click('@my-element'), $browser->waitFor('@my-element'), etc.
    • Example: $browser->waitFor('@input-error') instead of $browser->waitFor('.text-red-600').

Array Data Access

  • In Action classes and similar service classes, ALWAYS use Laravel's data_get() helper instead of direct array access.
    • Example: data_get($data, 'name') instead of $data['name'].
    • Use the third parameter for fallback values: data_get($data, 'username', $sender->username) instead of $data['username'] ?? $sender->username.

API Response Status Codes

  • When returning JSON responses with explicit status codes, always use Symfony\Component\HttpFoundation\Response constants instead of magic numbers.
    • Example: Response::HTTP_CREATED instead of 201, Response::HTTP_NO_CONTENT instead of 204.

Sendkit Documentation

Git

  • NEVER add Co-Authored-By lines to commit messages.
  • NEVER commit, push, or open PRs unless explicitly asked by the user.
  • Always create a new branch for feature work before making changes.