MCPInstall

generic-fullstack-feature-developer

Guide feature development for full-stack applications with architecture focus. Covers Next.js App Router patterns, NestJS backend services, database models, data workflows, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.

Installs
175
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/travisjneuman/.claude --skill generic-fullstack-feature-developer
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads generic-fullstack-feature-developer automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Fullstack Feature Developer

Guide feature development for Next.js/NestJS full-stack applications.

Extends: Generic Feature Developer - Read base skill for development workflow, decision frameworks, data flow patterns, and error handling.

Full-Stack Data Flow

User Action → Event Handler → API Call → NestJS Controller
                                              ↓
UI Update ← Response ← Service ← Prisma ← Database

Request/Response Cycle

// Frontend: Call API
const response = await fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify(userData),
});

// Backend: Handle request
@Post()
@UseGuards(JwtAuthGuard)
async createUser(@Body() dto: CreateUserDto) {
  return this.userService.create(dto);
}

Next.js App Router Patterns

File Conventions

FilePurpose
page.tsxRoute UI (server component by default)
layout.tsxShared UI wrapper
loading.tsxSuspense loading UI
error.tsxError boundary
route.tsAPI endpoint

Server vs Client Components

// Server Component (default) - can fetch data
export default async function Page() {
  const data = await getData(); // Direct DB/API call
  return <div>{data.title}</div>;
}

// Client Component - needs 'use client'
'use client';
export default function Interactive() {
  const [state, setState] = useState();
  return <button onClick={() => setState(...)}>Click</button>;
}

NestJS Module Pattern

Module → Controller → Service → Prisma

Adding a Feature Module

// 1. Module definition
@Module({
  controllers: [UsersController],
  providers: [UsersService],
  exports: [UsersService],
})
export class UsersModule {}

// 2. Controller with guards
@Controller("users")
@UseGuards(JwtAuthGuard)
export class UsersController {
  @Post()
  create(@Body() dto: CreateUserDto) {
    return this.usersService.create(dto);
  }
}

// 3. Service with Prisma
@Injectable()
export class UsersService {
  constructor(private prisma: PrismaService) {}

  create(dto: CreateUserDto) {
    return this.prisma.user.create({ data: dto });
  }
}

Prisma Workflow

Schema Changes

# 1. Edit schema.prisma
# 2. Create migration
npx prisma migrate dev --name add_user_role

# 3. Regenerate client
npx prisma generate

# 4. Update services to use new fields

Type-Safe Queries

// ✓ Type-safe with generated types
const user = await this.prisma.user.findUnique({
  where: { id },
  include: { posts: true },
});

// ✗ Avoid raw SQL
await this.prisma.$queryRaw`SELECT * FROM users`; // No type safety

Authentication Flow

Login Request → Validate Credentials → Generate JWT → Set Cookie
      ↓
Protected Route → JwtAuthGuard → Extract User → Inject to Controller

Auth Integration Points

// Frontend: Include credentials
fetch('/api/protected', { credentials: 'include' });

// Backend: Guard + decorator
@UseGuards(JwtAuthGuard)
@Get('profile')
getProfile(@CurrentUser() user: User) {
  return user;
}

Feature Checklist (Fullstack)

Before Starting

  • Plan data model (Prisma schema)
  • Define API contract (DTOs)
  • Identify auth requirements

During Development

  • Create/update Prisma schema
  • Run migrations
  • Implement NestJS module (controller + service)
  • Create frontend components
  • Add loading/error states

Before Completion

  • Add DTO validation decorators
  • Review services and API error paths against the DTOs and callers
  • Backend unit and API E2E tests only if the user asked for them
  • Verify TypeScript types match

See Also

  • Generic Feature Developer - Base methodology
  • Code Review Standards - Quality requirements
  • Design Patterns - UI patterns

FAQ

What does the generic-fullstack-feature-developer skill do?

Guide feature development for full-stack applications with architecture focus. Covers Next.js App Router patterns, NestJS backend services, database models, data workflows, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.

How do I install generic-fullstack-feature-developer?

Run npx skills add https://github.com/travisjneuman/.claude --skill generic-fullstack-feature-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/generic-fullstack-feature-developer/ (personal) or .claude/skills/generic-fullstack-feature-developer/ (project).

Which AI agents can use generic-fullstack-feature-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 generic-fullstack-feature-developer safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains generic-fullstack-feature-developer?

It is published by travisjneuman in travisjneuman/.claude. It has 175 recorded installs.

More from travisjneuman/.claude

View all →

document-skills

travisjneuman/.claude

Professional document creation, editing, and analysis for Office formats (docx, pdf, pptx, xlsx). Use when working with Word documents, PDFs, PowerPoint presentations, or Excel spreadsheets.

Docs & Writing3.3K installs

brand-identity

travisjneuman/.claude

Brand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.

Marketing & SEO1.7K installs

travel-planner

travisjneuman/.claude

Travel destination research and daily itinerary creation with logistics planning, budget tracking, and experience optimization. Use when planning trips, creating travel itineraries, comparing destinations, or organizing travel logistics.

business-strategy

travisjneuman/.claude

Business strategy expertise for strategic planning, competitive analysis, market entry, M&A strategy, portfolio management, and strategic decision-making. Use when analyzing competitive positioning, planning growth strategies, or making strategic decisions.

Business & Finance498 installs

graphic-design

travisjneuman/.claude

Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.

Frontend & Design493 installs

real-estate-analyzer

travisjneuman/.claude

Open the skill to read its SKILL.md instructions.

400 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.