Senior Fullstack
Fullstack development toolkit with project scaffolding for Next.js/FastAPI/MERN/Django stacks and code quality analysis. Use when scaffolding new projects, analyzing codebase quality, or implementing fullstack architecture patterns. Skill: Senior Fullstack Owner: alirezarezvani Summary: Fullstack development toolkit with project scaffolding for Next.js/FastAPI/MERN/Django stacks and code quality analysis. Use when scaffolding new projects, analyzing codebase quality, or implementing fullstack architecture patterns. Tags: latest:1.0.0 Version history: v1.0.0 | 2026-02-06T18:27:48.566Z | auto - Initial release of the senior-fullstack skill. - Prov
Rank
62
Safety
84
Downloads
1.8k
Updated
Apr 15, 2026
Version
1.0.0
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 1.8K downloads reported by the source. Last updated 4/15/2026.
Avoid when
- Contract metadata is missing or unavailable for deterministic execution.
Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing
Public facts
Every fact links back to the source it came from.
- Vendor
- Clawhubvendor · observed Apr 15, 2026
- Protocol compatibility
- OpenClawcompatibility · observed Apr 15, 2026
- Adoption signal
- 1.8K downloadsadoption · observed Apr 15, 2026
- Latest release
- 1.0.0release · observed Feb 6, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: low.
clawhub skill install kn7f2gr00xy51fj1nx2y64ckjs800mhn:senior-fullstack- Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
- Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-alirezarezvani-senior-fullstack/snapshot"
Documentation
CLAWHUB
52,397 characters of source documentation, loaded on request.
Extracted files
5 files captured from the source.
SKILL.md
--- name: senior-fullstack description: Fullstack development toolkit with project scaffolding for Next.js/FastAPI/MERN/Django stacks and code quality analysis. Use when scaffolding new projects, analyzing codebase quality, or implementing fullstack architecture patterns. --- # Senior Fullstack Fullstack development skill with project scaffolding and code quality analysis tools. --- ## Table of Contents - [Trigger Phrases](#trigger-phrases) - [Tools](#tools) - [Workflows](#workflows) - [Reference Guides](#reference-guides) --- ## Trigger Phrases Use this skill when you hear: - "scaffold a new project" - "create a Next.js app" - "set up FastAPI with React" - "analyze code quality" - "check for security issues in codebase" - "what stack should I use" - "set up a fullstack project" - "generate project boilerplate" --- ## Tools ### Project Scaffolder Generates fullstack project structures with boilerplate code. **Supported Templates:** - `nextjs` - Next.js 14+ with App Router, TypeScript, Tailwind CSS - `fastapi-react` - FastAPI backend + React frontend + PostgreSQL - `mern` - MongoDB, Express, React, Node.js with TypeScript - `django-react` - Django REST Framework + React frontend **Usage:** ```bash # List available templates python scripts/project_scaffolder.py --list-templates # Create Next.js project python scripts/project_scaffolder.py nextjs my-app # Create FastAPI + React project python scripts/project_scaffolder.py fastapi-react my-api # Create MERN stack project python scripts/project_scaffolder.py mern my-project # Create Django + React project python scripts/project_scaffolder.py django-react my-app # Specify output directory python scripts/project_scaffolder.py nextjs my-app --output ./projects # JSON output python scripts/project_scaffolder.py nextjs my-app --json ``` **Parameters:** | Parameter | Description | |-----------|-------------| | `template` | Template name (nextjs, fastapi-react, mern, django-react) | | `project_name` | Name for the new project directory | | `--output, -o` | Output directory (default: current directory) | | `--list-templates, -l` | List all available templates | | `--json` | Output in JSON format | **Output includes:** - Project structure with all necessary files - Package configurations (package.json, requirements.txt) - TypeScript configuration - Docker and docker-compose setup - Environment file templates - Next steps for running the project --- ### Code Quality Analyzer Analyzes fullstack codebases for quality issues. **Analysis Categories:** - Security vulnerabilities (hardcoded secrets, injection risks) - Code complexity metrics (cyclomatic complexity, nesting depth) - Dependency health (outdated packages, known CVEs) - Test coverage estimation - Documentation quality **Usage:** ```bash # Analyze current directory python scripts/code_quality_analyzer.py . # Analyze specific project python scripts/code_quality_analyzer.py /path/to/project # Verbose output with detailed find
_meta.json
{
"ownerId": "kn7f2gr00xy51fj1nx2y64ckjs800mhn",
"slug": "senior-fullstack",
"version": "1.0.0",
"publishedAt": 1770402468566
}references/architecture_patterns.md
# Fullstack Architecture Patterns
Proven architectural patterns for scalable fullstack applications covering frontend, backend, and their integration.
---
## Table of Contents
- [Frontend Architecture](#frontend-architecture)
- [Backend Architecture](#backend-architecture)
- [API Design Patterns](#api-design-patterns)
- [Database Patterns](#database-patterns)
- [Caching Strategies](#caching-strategies)
- [Authentication Architecture](#authentication-architecture)
---
## Frontend Architecture
### Component Architecture
**Atomic Design Pattern**
Organize components in hierarchical levels:
```
src/components/
├── atoms/ # Button, Input, Icon
├── molecules/ # SearchInput, FormField
├── organisms/ # Header, Footer, Sidebar
├── templates/ # PageLayout, DashboardLayout
└── pages/ # Home, Profile, Settings
```
**When to use:** Large applications with design systems and multiple teams.
**Container/Presentational Pattern**
```typescript
// Presentational - pure rendering, no state
function UserCard({ name, email, avatar }: UserCardProps) {
return (
<div className="card">
<img src={avatar} alt={name} />
<h3>{name}</h3>
<p>{email}</p>
</div>
);
}
// Container - handles data fetching and state
function UserCardContainer({ userId }: { userId: string }) {
const { data, loading } = useUser(userId);
if (loading) return <Skeleton />;
return <UserCard {...data} />;
}
```
**When to use:** When you need clear separation between UI and logic.
### State Management Patterns
**Server State vs Client State**
| Type | Examples | Tools |
|------|----------|-------|
| Server State | User data, API responses | React Query, SWR |
| Client State | UI toggles, form inputs | Zustand, Jotai |
| URL State | Filters, pagination | Next.js router |
**React Query for Server State:**
```typescript
function useUsers(filters: Filters) {
return useQuery({
queryKey: ["users", filters],
queryFn: () => api.getUsers(filters),
staleTime: 5 * 60 * 1000, // 5 minutes
gcTime: 30 * 60 * 1000, // 30 minutes
});
}
// Mutations with optimistic updates
function useUpdateUser() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: api.updateUser,
onMutate: async (newUser) => {
await queryClient.cancelQueries({ queryKey: ["users"] });
const previous = queryClient.getQueryData(["users"]);
queryClient.setQueryData(["users"], (old) =>
old.map(u => u.id === newUser.id ? newUser : u)
);
return { previous };
},
onError: (err, newUser, context) => {
queryClient.setQueryData(["users"], context.previous);
},
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ["users"] });
},
});
}
```
---
## Backend Architecture
### Clean Architecture
```
src/
├── domain/ # Business entities, no dependencies
│ ├── entities/ # User, Order, Product
│ └── interfaces/ # Reporeferences/development_workflows.md
# Fullstack Development Workflows
Complete development lifecycle workflows from local setup to production deployment.
---
## Table of Contents
- [Local Development Setup](#local-development-setup)
- [Git Workflows](#git-workflows)
- [CI/CD Pipelines](#cicd-pipelines)
- [Testing Strategies](#testing-strategies)
- [Code Review Process](#code-review-process)
- [Deployment Strategies](#deployment-strategies)
- [Monitoring and Observability](#monitoring-and-observability)
---
## Local Development Setup
### Docker Compose Development Environment
```yaml
# docker-compose.yml
version: "3.8"
services:
app:
build:
context: .
target: development
volumes:
- .:/app
- /app/node_modules
ports:
- "3000:3000"
environment:
- DATABASE_URL=postgresql://user:pass@db:5432/app
- REDIS_URL=redis://redis:6379
depends_on:
- db
- redis
db:
image: postgres:16-alpine
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: pass
POSTGRES_DB: app
volumes:
- postgres_data:/var/lib/postgresql/data
ports:
- "5432:5432"
redis:
image: redis:7-alpine
ports:
- "6379:6379"
volumes:
postgres_data:
```
**Multistage Dockerfile:**
```dockerfile
# Base stage
FROM node:20-alpine AS base
WORKDIR /app
RUN apk add --no-cache libc6-compat
# Development stage
FROM base AS development
COPY package*.json ./
RUN npm ci
COPY . .
CMD ["npm", "run", "dev"]
# Builder stage
FROM base AS builder
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Production stage
FROM base AS production
ENV NODE_ENV=production
COPY --from=builder /app/package*.json ./
RUN npm ci --only=production
COPY --from=builder /app/dist ./dist
USER node
CMD ["node", "dist/index.js"]
```
### Environment Configuration
```bash
# .env.local (development)
DATABASE_URL="postgresql://user:pass@localhost:5432/app_dev"
REDIS_URL="redis://localhost:6379"
JWT_SECRET="development-secret-change-in-prod"
LOG_LEVEL="debug"
# .env.test
DATABASE_URL="postgresql://user:pass@localhost:5432/app_test"
LOG_LEVEL="error"
# .env.production (via secrets management)
DATABASE_URL="${DATABASE_URL}"
REDIS_URL="${REDIS_URL}"
JWT_SECRET="${JWT_SECRET}"
```
**Environment validation:**
```typescript
import { z } from "zod";
const envSchema = z.object({
NODE_ENV: z.enum(["development", "test", "production"]),
DATABASE_URL: z.string().url(),
REDIS_URL: z.string().url().optional(),
JWT_SECRET: z.string().min(32),
PORT: z.coerce.number().default(3000),
});
export const env = envSchema.parse(process.env);
```
---
## Git Workflows
### Trunk-Based Development
```
main (protected)
│
├── feature/user-auth (short-lived, 1-2 days max)
│ └── squash merge → main
│
├── feature/payment-flow
│ └── squash merge → main
│
└── release/v1.2.0 (cut from main for hotfixes)
```
**Branch naming:**
- `feature/description` - New features
- `fix/description` - Bug fixes
- `chore/descriptireferences/tech_stack_guide.md
# Fullstack Tech Stack Guide
Technology selection guide with trade-offs, use cases, and integration patterns for modern fullstack development.
---
## Table of Contents
- [Frontend Frameworks](#frontend-frameworks)
- [Backend Frameworks](#backend-frameworks)
- [Databases](#databases)
- [ORMs and Query Builders](#orms-and-query-builders)
- [Authentication Solutions](#authentication-solutions)
- [Deployment Platforms](#deployment-platforms)
- [Stack Recommendations](#stack-recommendations)
---
## Frontend Frameworks
### Next.js
**Best for:** Production React apps, SEO-critical sites, full-stack applications
| Pros | Cons |
|------|------|
| Server components, streaming | Learning curve for advanced features |
| Built-in routing, API routes | Vercel lock-in concerns |
| Excellent DX and performance | Bundle size can grow |
| Strong TypeScript support | Complex mental model (client/server) |
**When to choose:**
- Need SSR/SSG for SEO
- Building a product that may scale
- Want full-stack in one framework
- Team familiar with React
```typescript
// App Router pattern
// app/users/page.tsx
async function UsersPage() {
const users = await db.user.findMany(); // Server component
return <UserList users={users} />;
}
// app/users/[id]/page.tsx
export async function generateStaticParams() {
const users = await db.user.findMany();
return users.map((user) => ({ id: user.id }));
}
```
### React + Vite
**Best for:** SPAs, dashboards, internal tools
| Pros | Cons |
|------|------|
| Fast development with HMR | No SSR out of the box |
| Simple mental model | Manual routing setup |
| Flexible architecture | No built-in API routes |
| Smaller bundle potential | Need separate backend |
**When to choose:**
- Building internal dashboards
- SEO not important
- Need maximum flexibility
- Prefer decoupled frontend/backend
### Vue 3
**Best for:** Teams transitioning from jQuery, progressive enhancement
| Pros | Cons |
|------|------|
| Gentle learning curve | Smaller ecosystem than React |
| Excellent documentation | Fewer enterprise adoptions |
| Single-file components | Composition API learning curve |
| Good TypeScript support | Two paradigms (Options/Composition) |
**When to choose:**
- Team new to modern frameworks
- Progressive enhancement needed
- Prefer official solutions (Pinia, Vue Router)
### Comparison Matrix
| Feature | Next.js | React+Vite | Vue 3 | Svelte |
|---------|---------|------------|-------|--------|
| SSR | Built-in | Manual | Nuxt | SvelteKit |
| Bundle size | Medium | Small | Small | Smallest |
| Learning curve | Medium | Low | Low | Low |
| Enterprise adoption | High | High | Medium | Low |
| Job market | Large | Large | Medium | Small |
---
## Backend Frameworks
### Node.js Ecosystem
**Express.js**
```typescript
import express from "express";
import { userRouter } from "./routes/users";
const app = express();
app.use(express.json());
app.use("/api/users", userRouter);
app.listen(3000);
```
| Pros | Cons |
|---activepieces
AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents
cherry-studio
AI productivity studio with smart chat, autonomous agents, and 300+ assistants.
AionUi
Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!
CopilotKit
The Frontend for Agents & Generative UI. React + Angular
Machine-readable data
The same record, as JSON, for agents and crawlers.
{
"facts": [
{
"factKey": "vendor",
"category": "vendor",
"label": "Vendor",
"value": "Clawhub",
"href": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceUrl": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-04-15T00:45:39.800Z",
"isPublic": true
},
{
"factKey": "protocols",
"category": "compatibility",
"label": "Protocol compatibility",
"value": "OpenClaw",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-alirezarezvani-senior-fullstack/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-alirezarezvani-senior-fullstack/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-04-15T00:45:39.800Z",
"isPublic": true
},
{
"factKey": "traction",
"category": "adoption",
"label": "Adoption signal",
"value": "1.8K downloads",
"href": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceUrl": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-04-15T00:45:39.800Z",
"isPublic": true
},
{
"factKey": "latest_release",
"category": "release",
"label": "Latest release",
"value": "1.0.0",
"href": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceUrl": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-02-06T18:27:48.566Z",
"isPublic": true
},
{
"factKey": "handshake_status",
"category": "security",
"label": "Handshake status",
"value": "UNKNOWN",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-alirezarezvani-senior-fullstack/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-alirezarezvani-senior-fullstack/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true
}
],
"events": [
{
"eventType": "release",
"title": "Release 1.0.0",
"description": "- Initial release of the senior-fullstack skill. - Provides project scaffolding for Next.js, FastAPI+React, MERN, and Django+React stacks. - Includes a code quality analyzer: detects security issues, complexity, dependency health, and documentation quality. - Offers guidance and workflows for starting new projects, code audits, and stack selection. - Supplies reference guides on architecture, development workflows, and tech stack choices. - Quick reference materials: decision matrix and solutions to common fullstack issues.",
"href": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceUrl": "https://clawhub.ai/alirezarezvani/senior-fullstack",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-02-06T18:27:48.566Z",
"isPublic": true
}
]
}Record generated Oct 9, 2026.
