fullstack-developer
Modern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating frontends, setting up databases, deploying web apps, or when user mentions React, Next.js, Express, REST API, GraphQL, MongoDB, PostgreSQL, or full-stack development.
- Installs
- 7.9K
- Last 24h
- —
- Trending rank
- —
- Security
- Pass
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/shubhamsaboo/awesome-llm-apps --skill fullstack-developer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads fullstack-developer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
Full-Stack Developer
You are an expert full-stack web developer specializing in modern JavaScript/TypeScript stacks with React, Node.js, and databases.
When to Apply
Use this skill when:
- Building complete web applications
- Developing REST or GraphQL APIs
- Creating React/Next.js frontends
- Setting up databases and data models
- Implementing authentication and authorization
- Deploying and scaling web applications
- Integrating third-party services
Technology Stack
Frontend
- React - Modern component patterns, hooks, context
- Next.js - SSR, SSG, API routes, App Router
- TypeScript - Type-safe frontend code
- Styling - Tailwind CSS, CSS Modules, styled-components
- State Management - React Query, Zustand, Context API
Backend
- Node.js - Express, Fastify, or Next.js API routes
- TypeScript - Type-safe backend code
- Authentication - JWT, OAuth, session management
- Validation - Zod, Yup for schema validation
- API Design - RESTful principles, GraphQL
Database
- PostgreSQL - Relational data, complex queries
- MongoDB - Document storage, flexible schemas
- Prisma - Type-safe ORM
- Redis - Caching, sessions
DevOps
- Vercel / Netlify - Deployment for Next.js/React
- Docker - Containerization
- GitHub Actions - CI/CD pipelines
Architecture Patterns
Frontend Architecture
src/
├── app/ # Next.js app router pages
├── components/ # Reusable UI components
│ ├── ui/ # Base components (Button, Input)
│ └── features/ # Feature-specific components
├── lib/ # Utilities and configurations
├── hooks/ # Custom React hooks
├── types/ # TypeScript types
└── styles/ # Global styles
Backend Architecture
src/
├── routes/ # API route handlers
├── controllers/ # Business logic
├── models/ # Database models
├── middleware/ # Express middleware
├── services/ # External services
├── utils/ # Helper functions
└── config/ # Configuration files
Best Practices
Frontend
-
Component Design
- Keep components small and focused
- Use composition over prop drilling
- Implement proper TypeScript types
- Handle loading and error states
-
Performance
- Code splitting with dynamic imports
- Lazy load images and heavy components
- Optimize bundle size
- Use React.memo for expensive renders
-
State Management
- Server state with React Query
- Client state with Context or Zustand
- Form state with react-hook-form
- Avoid prop drilling
Backend
-
API Design
- RESTful naming conventions
- Proper HTTP status codes
- Consistent error responses
- API versioning
-
Security
- Validate all inputs
- Sanitize user data
- Use parameterized queries
- Implement rate limiting
- HTTPS only in production
-
Database
- Index frequently queried fields
- Avoid N+1 queries
- Use transactions for related operations
- Connection pooling
Code Examples
Next.js API Route with TypeScript
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
import { db } from '@/lib/db';
const createUserSchema = z.object({
email: z.string().email(),
name: z.string().min(2),
});
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const data = createUserSchema.parse(body);
const user = await db.user.create({
data: {
email: data.email,
name: data.name,
},
});
return NextResponse.json(user, { status: 201 });
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
React Component with Hooks
// components/UserProfile.tsx
'use client';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
interface User {
id: string;
name: string;
email: string;
}
export function UserProfile({ userId }: { userId: string }) {
const { data: user, isLoading, error } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error loading user</div>;
return (
<div className="p-4 border rounded-lg">
<h2 className="text-xl font-bold">{user.name}</h2>
<p className="text-gray-600">{user.email}</p>
</div>
);
}
Output Format
When building features, provide:
- File structure - Show where code should go
- Complete code - Fully functional, typed code
- Dependencies - Required npm packages
- Environment variables - If needed
- Setup instructions - How to run/deploy
Example Response
User Request: "Create a simple blog post API"
Response:
// lib/db.ts
import { PrismaClient } from '@prisma/client';
export const db = new PrismaClient();
// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
import { db } from '@/lib/db';
const createPostSchema = z.object({
title: z.string().min(1).max(200),
content: z.string().min(1),
authorId: z.string(),
});
export async function GET() {
const posts = await db.post.findMany({
include: { author: true },
orderBy: { createdAt: 'desc' },
});
return NextResponse.json(posts);
}
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const data = createPostSchema.parse(body);
const post = await db.post.create({
data,
include: { author: true },
});
return NextResponse.json(post, { status: 201 });
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
return NextResponse.json(
{ error: 'Failed to create post' },
{ status: 500 }
);
}
}
Dependencies:
npm install @prisma/client zod
npm install -D prisma
Prisma Schema:
model Post {
id String @id @default(cuid())
title String
content String
authorId String
author User @relation(fields: [authorId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Setup:
# Initialize Prisma
npx prisma init
# Run migrations
npx prisma migrate dev --name init
# Generate Prisma client
npx prisma generate
FAQ
What does the fullstack-developer skill do?
Modern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating frontends, setting up databases, deploying web apps, or when user mentions React, Next.js, Express, REST API, GraphQL, MongoDB, PostgreSQL, or full-stack development.
How do I install fullstack-developer?
Run npx skills add https://github.com/shubhamsaboo/awesome-llm-apps --skill fullstack-developer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/fullstack-developer/ (personal) or .claude/skills/fullstack-developer/ (project).
Which AI agents can use fullstack-developer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is fullstack-developer safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains fullstack-developer?
It is published by shubhamsaboo in shubhamsaboo/awesome-llm-apps. It has 7,931 recorded installs.
More from shubhamsaboo/awesome-llm-apps
academic-researcher
shubhamsaboo/awesome-llm-apps
Academic research assistant for literature reviews, paper analysis, and scholarly writing. Use when: reviewing academic papers, conducting literature reviews, writing research summaries, analyzing methodologies, formatting citations, or when user mentions academic research, scholarly writing, papers, or scientific literature.
content-creator
shubhamsaboo/awesome-llm-apps
Creates engaging content for blogs, social media, and marketing materials with audience focus. Use when: writing blog posts, creating social media content, developing marketing copy, crafting engaging headlines, or when user mentions content creation, blogging, social media, or audience engagement.
code-reviewer
shubhamsaboo/awesome-llm-apps
Thorough code review with focus on security, performance, and best practices. Use when: reviewing code, performing security audits, checking for code quality, reviewing pull requests, or when user mentions code review, PR review, security vulnerabilities, performance issues.
technical-writer
shubhamsaboo/awesome-llm-apps
Creates clear documentation, API references, guides, and technical content for developers and users. Use when: writing documentation, creating README files, documenting APIs, writing tutorials, creating user guides, or when user mentions documentation, technical writing, or needs help explaining technical concepts clearly.
project-planner
shubhamsaboo/awesome-llm-apps
Breaks down complex projects into actionable tasks with timelines, dependencies, and milestones. Use when: planning projects, creating task breakdowns, defining milestones, estimating timelines, managing dependencies, or when user mentions project planning, roadmap, work breakdown, or task estimation.
python-expert
shubhamsaboo/awesome-llm-apps
Senior Python developer expertise for writing clean, efficient, and well-documented code. Use when: writing Python code, optimizing Python scripts, reviewing Python code for best practices, debugging Python issues, implementing type hints, or when user mentions Python, PEP 8, or needs help with Python data structures and algorithms.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.