Agent skill

generic-fullstack-feature-developer

Quellcode ansehen: travisjneuman/.claude

#116Globales Ranking · von 116 SkillsSafe

Installation

npx skills add travisjneuman/.claude --skill generic-fullstack-feature-developer

177

Installationen

EU-hosted inference API

Power your AI agent skills with open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

MiniMax

MiniMax M3

$0.50 / $1.90

per M tokens

Z.ai

GLM 5.3 Flash

$0.20 / $0.60

per M tokens

MoonshotAI

Kimi K3

$4.00 / $18.00

per M tokens

DeepSeek

DeepSeek V4.1 Flash

$0.40 / $1.42

per M tokens

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

File Purpose
page.tsx Route UI (server component by default)
layout.tsx Shared UI wrapper
loading.tsx Suspense loading UI
error.tsx Error boundary
route.ts API 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

So verwenden Sie diesen Skill

  1. 1

    Install generic-fullstack-feature-developer by running npx skills add travisjneuman/.claude --skill generic-fullstack-feature-developer in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

  2. 2

    Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

  3. 3

    Der Skill verbessert das Verständnis Ihres Agenten für generic-fullstack-feature-developer, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.