Skip to content

Technologies Guide ​

Detailed information about rules, patterns, and best practices for each supported technology.

Maturity Tiers ​

Claude Craft classifies its 12 application technology stacks into 3 maturity tiers. This reflects the depth of support: i18n coverage, agent specialization, commands, skills, and reference documentation.

Tier Overview ​

TierLabelTechnologiesWhat to Expect
1CoreSymfony, React, Python, FlutterProduction-grade support. Deep agent specialization, extensive i18n (25+ files), 8+ commands, 3+ tech-specific skills, full reference docs with examples.
2SupportedReact Native, PHPSolid support. Customized reviewer agent, 7+ i18n files, 5+ commands, at least 1 tech-specific skill, full reference docs.
3CommunityC# / .NET, Angular, Laravel, Vue.js, ViteBasic scaffolding. Generic reviewer template, 2+ i18n files, 3+ commands, shared skills only, basic CLAUDE.md reference. Community contributions welcome.
--InfraDocker, Coolify, Kubernetes, OpenTofu, Ansible, Hcloud, PgBouncer, FrankenPHPInfrastructure tooling, not application stacks. Not tiered.

Tier Requirements ​

RequirementTier 3 (Community)Tier 2 (Supported)Tier 1 (Core)
i18n files>= 2>= 7>= 25
Agent reviewerGeneric templateCustomizedDeep specialization
Agent modelhaikuhaikusonnet
Commands>= 3>= 5>= 8
SkillsShared only1+ tech-specific3+ tech-specific
Reference docsBasic CLAUDE.mdFull referenceFull + examples

All Technologies at a Glance ​

TechnologyTierVersioni18n FilesCommandsStatusTo Reach Next Tier
Symfony / PHP1 (Core)8.1 / PHP 8.4+58+10+Full support--
React1 (Core)19.2 + Compiler 1.030+10+Full support--
Python1 (Core)3.14+25+10+Full support--
Flutter / Dart1 (Core)3.44 / Dart 3.1225+10+Full support--
React Native2 (Supported)0.85 (New Architecture)3910Good coverageExpand i18n to 25+, deepen agent specialization, add 3+ tech-specific skills
PHP2 (Supported)8.57+5Solid baseAdd more i18n files, expand commands to 8+, add tech-specific skills
C# / .NET3 (Community)10 LTS / C# 1426Basic scaffoldAdd 5+ i18n files, customize reviewer agent, create tech-specific skill
Angular3 (Community)2226Basic scaffoldAdd 5+ i18n files, customize reviewer agent, create tech-specific skill
Laravel3 (Community)13.x / PHP 8.3+26Basic scaffoldAdd 5+ i18n files, customize reviewer agent, create tech-specific skill
Vue.js3 (Community)3.5+26Basic scaffoldAdd 5+ i18n files, customize reviewer agent, create tech-specific skill
Vite3 (Community)8.137Basic scaffold — framework-agnostic (vanilla/lib/multi-page)Add 5+ i18n files, customize reviewer agent, create tech-specific skill
Paperclip2 (Supported)2026.609.029 × 5 langues (en/fr/es/de/pt)8Full i18n across 5 langsExpand tests/skills, add audit commands, promote to Tier 1

Upgrade Path ​

To promote a stack from one tier to the next, see CONTRIBUTING.md for detailed requirements and contribution guidelines.


Overview ​

TechnologyRulesFocus Areas
Symfony21Clean Architecture, DDD, API Platform
Flutter13BLoC, State Management, Testing
Python12FastAPI, Async, Type Hints
React12Hooks, Performance, Accessibility
React Native12Navigation, Native Modules, Store
Paperclip7Two-Layer Architecture, Adapter Protocol, Governance (budgets/approvals), Audit Trails

Symfony ​

Architecture ​

The Symfony rules follow Clean Architecture with Domain-Driven Design (DDD):

src/
├── Domain/           # Business logic (entities, value objects)
│   ├── Model/
│   ├── Repository/   # Interfaces only
│   └── Event/
├── Application/      # Use cases (commands, queries, handlers)
│   ├── Command/
│   ├── Query/
│   └── Handler/
├── Infrastructure/   # External concerns (DB, API, files)
│   ├── Persistence/  # Repository implementations
│   ├── Api/
│   └── Service/
└── Presentation/     # Controllers, CLI, views
    ├── Controller/
    └── Command/

Key Rules ​

RuleDescription
02-architecture-clean-dddClean Architecture layers
13-ddd-patternsDDD tactical patterns
14-multitenantMulti-tenancy support
18-value-objectsValue Object patterns
19-aggregatesAggregate Root design
20-domain-eventsDomain Event handling
21-cqrsCQRS implementation

Commands ​

bash
# Generate CRUD with proper architecture
/symfony:generate-crud Product

# Check architecture compliance
/symfony:check-architecture

# Plan database migration
/symfony:migration-plan "Add user preferences"

Templates ​

  • aggregate-root.md - Aggregate root entity
  • value-object.md - Value object pattern
  • domain-event.md - Domain event
  • service.md - Application service

Flutter ​

Architecture ​

Flutter rules follow a feature-based architecture with BLoC pattern:

lib/
├── core/             # Shared utilities
│   ├── constants/
│   ├── errors/
│   ├── network/
│   └── utils/
├── features/         # Feature modules
│   └── auth/
│       ├── data/
│       │   ├── datasources/
│       │   ├── models/
│       │   └── repositories/
│       ├── domain/
│       │   ├── entities/
│       │   ├── repositories/
│       │   └── usecases/
│       └── presentation/
│           ├── bloc/
│           ├── pages/
│           └── widgets/
└── injection/        # Dependency injection

Key Rules ​

RuleDescription
02-architectureFeature-based architecture
07-testingWidget and unit testing
12-performancePerformance optimization
13-state-managementBLoC/Riverpod patterns

Commands ​

bash
# Generate feature module
/flutter:generate-feature authentication

# Generate widget with tests
/flutter:generate-widget UserAvatar

# Analyze performance
/flutter:analyze-performance

State Management ​

BLoC pattern with events and states:

dart
// Events
abstract class AuthEvent {}
class LoginRequested extends AuthEvent {
  final String email;
  final String password;
}

// States
abstract class AuthState {}
class AuthInitial extends AuthState {}
class AuthLoading extends AuthState {}
class AuthSuccess extends AuthState {
  final User user;
}
class AuthFailure extends AuthState {
  final String error;
}

// BLoC
class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthInitial()) {
    on<LoginRequested>(_onLoginRequested);
  }
}

Python ​

Architecture ​

Python rules follow a layered architecture suitable for FastAPI/Django:

src/
├── api/              # API layer
│   ├── routes/
│   ├── schemas/      # Pydantic models
│   └── dependencies/
├── core/             # Configuration
│   ├── config.py
│   └── security.py
├── domain/           # Business logic
│   ├── models/
│   ├── services/
│   └── repositories/
├── infrastructure/   # External services
│   ├── database/
│   ├── cache/
│   └── external/
└── tests/

Key Rules ​

RuleDescription
02-architectureLayered architecture
07-testingPytest best practices
11-securitySecurity guidelines
12-performanceAsync optimization

Commands ​

bash
# Generate FastAPI endpoint
/python:generate-endpoint users

# Check async code
/python:async-check

# Type coverage analysis
/python:type-coverage

Type Hints ​

All code should use type hints:

python
from typing import Optional, List
from pydantic import BaseModel

class UserCreate(BaseModel):
    email: str
    password: str
    name: Optional[str] = None

async def create_user(
    user_data: UserCreate,
    db: AsyncSession
) -> User:
    user = User(**user_data.dict())
    db.add(user)
    await db.commit()
    return user

React ​

Architecture ​

React rules follow a feature-based structure with hooks:

src/
├── components/       # Shared components
│   ├── ui/          # Basic UI components
│   └── layout/      # Layout components
├── features/        # Feature modules
│   └── auth/
│       ├── components/
│       ├── hooks/
│       ├── api/
│       └── types/
├── hooks/           # Shared hooks
├── lib/             # Utilities
├── stores/          # State management
└── types/           # Global types

Key Rules ​

RuleDescription
02-architectureComponent architecture
07-testingTesting Library patterns
11-securityXSS prevention
12-performanceRender optimization

Commands ​

bash
# Generate component with tests
/react:generate-component Button

# Generate custom hook
/react:generate-hook useAuth

# Check accessibility
/react:accessibility-check

Component Pattern ​

tsx
// Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

export function Button({
  variant = 'primary',
  size = 'md',
  children,
  onClick,
  disabled = false,
}: ButtonProps) {
  return (
    <button
      className={cn(
        'rounded font-medium',
        variants[variant],
        sizes[size]
      )}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

Hook Pattern ​

tsx
// useAuth.ts
export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged((user) => {
      setUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  const login = useCallback(async (email: string, password: string) => {
    // Login logic
  }, []);

  const logout = useCallback(async () => {
    // Logout logic
  }, []);

  return { user, loading, login, logout };
}

React Native ​

Architecture ​

React Native rules extend React patterns for mobile:

src/
├── components/       # Shared components
├── features/        # Feature modules
├── navigation/      # Navigation setup
│   ├── RootNavigator.tsx
│   └── types.ts
├── screens/         # Screen components
├── services/        # Native services
├── stores/          # State management
└── utils/           # Platform utilities

Key Rules ​

RuleDescription
02-architectureMobile architecture
07-testingMobile testing
11-securityMobile security
12-performanceMobile performance

Commands ​

bash
# Generate screen
/reactnative:generate-screen Profile

# Native module integration
/reactnative:native-module Camera

# Prepare for store
/reactnative:store-prepare

React Navigation setup:

tsx
// RootNavigator.tsx
const Stack = createNativeStackNavigator<RootStackParamList>();

export function RootNavigator() {
  const { user } = useAuth();

  return (
    <Stack.Navigator>
      {user ? (
        <Stack.Screen name="Home" component={HomeScreen} />
      ) : (
        <Stack.Screen name="Login" component={LoginScreen} />
      )}
    </Stack.Navigator>
  );
}

Platform-Specific Code ​

tsx
// Component.tsx
import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

LSP Plugins by Stack ​

Claude Code LSP plugins provide structural code intelligence. Install the recommended plugin for each technology:

TechnologyPluginLanguage ServerInstallation
Symfonyphp-lspIntelephensenpm install -g intelephense
Laravelphp-lspIntelephensenpm install -g intelephense
PHPphp-lspIntelephensenpm install -g intelephense
Pythonpyright-lspPyrightpip install pyright
Reacttypescript-lspvtslsnpm install -g @vtsls/language-server typescript
Angulartypescript-lspvtslsnpm install -g @vtsls/language-server typescript
Vue.jstypescript-lspvtslsnpm install -g @vtsls/language-server typescript
React Nativetypescript-lspvtslsnpm install -g @vtsls/language-server typescript
Flutterdart-analyzerDart SDKIncluded with Flutter SDK
C# / .NETcsharp-lspcsharp-lsdotnet tool install -g csharp-ls

Install: /plugins install <name>@claude-plugins-official (except Flutter: @claude-code-lsps)


Cross-Technology Patterns ​

Testing ​

All technologies follow similar testing patterns:

TechnologyUnitIntegrationE2E
SymfonyPest 4.5+ / PHPUnit 12Pest 4.5+Playwright via Pest
Flutterflutter_testintegration_test-
Pythonpytestpytestpytest
ReactVitest 4.1+Testing Library / PlaywrightPlaywright
React NativeJestDetox-

Security ​

Common security practices:

  • Input validation
  • Output encoding
  • Authentication/Authorization
  • Secure storage
  • HTTPS enforcement
  • Dependency auditing

Performance ​

Common performance practices:

  • Lazy loading
  • Caching strategies
  • Code splitting
  • Image optimization
  • Database query optimization
  • Memory management

Choosing Technologies ​

Web Application ​

yaml
modules:
  - path: "frontend"
    tech: react
  - path: "api"
    tech: symfony  # or python

Mobile Application ​

yaml
modules:
  - path: "."
    tech: flutter  # Cross-platform
  # OR
  - path: "."
    tech: reactnative  # If team knows React

Full-Stack ​

yaml
modules:
  - path: "web"
    tech: react
  - path: "mobile"
    tech: flutter
  - path: "api"
    tech: symfony
  - path: "workers"
    tech: python

AI-Workforce Orchestration ​

yaml
modules:
  - path: "."
    tech: paperclip   # When the repo IS a Paperclip fork / custom Paperclip adapter

Paperclip ​

Paperclip is an open-source orchestration platform for AI workforces: Node.js + TypeScript + React UI + Vitest + PostgreSQL. It acts as a control plane over adapters (Claude Code, Codex, Gemini, HTTP, process) with budgets, approvals, and audit trails. Docs: https://docs.paperclip.ing/ — Repo: https://github.com/paperclipai/paperclip — License: MIT

Architecture ​

Two-layer:

Control Plane (server + web + DB)   ◄──►   Adapters (claude-local, codex-local, http, process, ...)

Adapters never hold governance state. They execute, heartbeat, report cost, and forward approval requests. Budgets are hard limits; approvals block execution; every mutation emits an activity event.

Key Rules ​

  • 02-architecture-paperclip.md — Two-layer control plane + adapters, modular monolith, append-only activity log
  • 03-coding-standards.md — TypeScript strict, kebab files, no any, structured logs
  • 06-tooling.md — pnpm 9.15+, tsx, Vitest, Node 20+, paperclipai CLI
  • 07-testing-paperclip.md — Vitest + adapter contract tests + cross-tenant isolation
  • 08-quality-tools.md — ESLint flat config strict-type-checked, complexity limits, coverage thresholds
  • 11-security-paperclip.md — Tenancy, secrets, approval gates, signed adapter channel (ed25519 + TLS 1.3)
  • 12-adapter-protocol.md — Heartbeat, cost reporting, approvals, task envelope, signatures

Commands ​

See /paperclip:* — 5 audit commands + generate-adapter, generate-agent-config, setup-company.

Use this stack when ​

  • You are contributing to a Paperclip codebase (server, web, SDK, or a built-in adapter)
  • You are building a custom adapter that connects Paperclip to a proprietary execution backend
  • You are onboarding a company onto Paperclip and want guardrails on agents, budgets, and approvals

Don't use this stack for ​

  • Generic Node.js / TypeScript apps — use react + (symfony or python) instead
  • Replacing a job queue — Paperclip is governance on top of AI execution, not a queue

Internal Tooling Note: Svelte 5 ​

Note: Svelte 5 is not a supported project stack in Claude Craft. However, the built-in Kanban SPA (claude-craft kanban) is itself implemented in Svelte 5. This is an internal implementation detail — Svelte is used for Claude Craft tooling, not as a recommendation for user projects. Community-maintained Svelte references are available at .claude/references/svelte/CLAUDE.md with a full disclaimer.