Skills For Openclaw

Frameworks & When to Use

Component Patterns

// ✅ ALWAYS write components like this — typed, accessible, composable
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button = ({
  variant = 'primary',
  size = 'md',
  loading = false,
  disabled = false,
  onClick,
  children
}: ButtonProps) => {
  return (
    <button
      className={cn(buttonVariants({ variant, size }))}
      disabled={disabled || loading}
      onClick={onClick}
      aria-busy={loading}
    >
      {loading ? <Spinner size="sm" /> : children}
    </button>
  );
};

State Management Strategy

• Local state → useState / useReducer
• Server state → TanStack Query (React Query)
• Global UI state → Zustand (lightweight) or Jotai
• Forms → React Hook Form + Zod validation
• Avoid Redux unless team is already using it and app is large

CSS Approach (Preferred Order)

1. Tailwind CSS — utility-first, fast, consistent
2. CSS Modules — scoped styles for complex components
3. shadcn/ui — for rapid UI with Tailwind
4. Avoid inline styles (except dynamic values)

⚙️ Backend Excellence

API Design (REST)

GET    /api/v1/users          → List users (paginated)
POST   /api/v1/users          → Create user
GET    /api/v1/users/:id      → Get single user
PUT    /api/v1/users/:id      → Full update
PATCH  /api/v1/users/:id      → Partial update
DELETE /api/v1/users/:id      → Soft delete (set deleted_at)

Always version your APIs: /api/v1/...
Always return consistent response shape:
{
  "success": true,
  "data": { ... },
  "meta": { "page": 1, "total": 100 },
  "error": null
}

Node.js / Express Best Practices

// ✅ Proper error handling middleware
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  const status = err instanceof AppError ? err.statusCode : 500;
  logger.error({ err, req: { method: req.method, url: req.url } });
  res.status(status).json({
    success: false,
    data: null,
    error: {
      message: status === 500 ? 'Internal server error' : err.message,
      code: err.name
    }
  });
});

// ✅ Always use async wrapper to avoid unhandled rejections
const asyncHandler = (fn: Function) => (req: Request, res: Response, next: NextFunction) => {
  Promise.resolve(fn(req, res, next)).catch(next);
};

Python / FastAPI Best Practices

from fastapi import FastAPI, HTTPException, Depends, status
from pydantic import BaseModel, validator
from typing import Optional

app = FastAPI(title="My API", version="1.0.0")

class UserCreate(BaseModel):
    email: str
    password: str
    name: str

    @validator('email')
    def email_must_be_valid(cls, v):
        if '@' not in v:
            raise ValueError('Invalid email')
        return v.lower()

@app.post("/users", response_model=UserResponse, status_code=status.HTTP_201_CREATED)
async def create_user(user: UserCreate, db: AsyncSession = Depends(get_db)):
    # Always check for conflicts before creating
    existing = await db.get_user_by_email(user.email)
    if existing:
        raise HTTPException(status_code=409, detail="Email already registered")
    return await db.create_user(user)

🗃️ Database Design

PostgreSQL Schema Conventions

-- ✅ Always include these in every table
CREATE TABLE users (
  id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  created_at  TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  updated_at  TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  deleted_at  TIMESTAMPTZ,  -- soft delete
  
  -- actual columns
  email       TEXT NOT NULL UNIQUE,
  name        TEXT NOT NULL,
  
  -- indexes
  CONSTRAINT users_email_check CHECK (email ~* '^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$')
);

CREATE INDEX CONCURRENTLY idx_users_email ON users(email) WHERE deleted_at IS NULL;
CREATE INDEX CONCURRENTLY idx_users_created_at ON users(created_at DESC);

ORM Usage

• Prisma (Node.js) — best DX, type-safe, migrations
• SQLAlchemy (Python) — most powerful, flexible
• DrizzleORM (Node.js) — lightweight, SQL-like syntax

Query Optimization Rules

1. Always index foreign keys
2. Use SELECT specific_columns not SELECT *
3. Add LIMIT to all list queries
4. Use connection pooling (PgBouncer or built-in pool)
5. Explain analyze slow queries

🔐 Security Standards

Authentication (Always implement these)

// JWT with refresh tokens
const ACCESS_TOKEN_EXPIRY = '15m';   // Short-lived
const REFRESH_TOKEN_EXPIRY = '7d';   // Long-lived, stored in httpOnly cookie

// Password hashing
import bcrypt from 'bcryptjs';
const SALT_ROUNDS = 12;
const hashedPassword = await bcrypt.hash(password, SALT_ROUNDS);

// Never store plain passwords. Never log passwords. Never return passwords in API responses.

Input Validation (Always)

// Zod schema validation
import { z } from 'zod';

const CreateUserSchema = z.object({
  email: z.string().email().toLowerCase(),
  password: z.string().min(8).max(100).regex(/(?=.*[A-Z])(?=.*[0-9])/),
  name: z.string().min(1).max(255).trim()
});

// Validate at the edge — in middleware before it hits your handler

Security Checklist

• HTTPS everywhere
• Rate limiting on auth endpoints
• CORS configured properly
• Helmet.js (Node) / security headers
• SQL injection prevention (parameterized queries only)
• XSS prevention (sanitize user input)
• CSRF tokens for state-changing requests
• Secrets in environment variables, never in code

🐳 DevOps & Deployment

Docker Setup

# ✅ Production-optimized multi-stage Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/node_modules ./node_modules
COPY . .
EXPOSE 3000
USER node
CMD ["node", "server.js"]

Docker Compose (Full Stack)