travisjneuman/.claude

generic-fullstack-feature-developer

Guide feature development for full-stack applications with architecture focus.

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/travisjneuman/.claude --skill generic-fullstack-feature-developer

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

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

typescript
// 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

typescript
// 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

typescript
// 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

bash
# 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

typescript
// ✓ 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

typescript
// 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

タスクに関連する項目

同じリポジトリから

関連する Skills

すべての Skills
travisjneuman
コミュニティ

learning-gap-analyzer

Map understanding, identify knowledge gaps, and build targeted learning plans with spaced repetition. Use when assessing knowledge levels, designing study plans, or optimizing learning paths.

導入数
1
GitHub Stars
105
更新日
10月19日
travisjneuman
コミュニティ

tech-debt-analyzer

This skill should be used when analyzing technical debt in a codebase, documenting code quality issues, creating technical debt registers, or assessing code maintainability. Use this for identifying code smells, architectural issues, dependency problems, missing documentation, security vulnerabilities, and creating comprehensive technical debt documentation.

導入数
1
GitHub Stars
105
更新日
10月19日
travisjneuman
コミュニティ

agent-desktop-developer

Specialist subagent: Expert desktop application developer for Electron, Tauri, and native desktop development

導入数
1
GitHub Stars
105
更新日
10月19日
travisjneuman
コミュニティ

agent-technical-writer

Specialist subagent: Architecture Decision Records, API documentation, migration guides, runbooks, and technical documentation specialist. Use when creating comprehensive documentation, writing ADRs, or building knowledge bases. Trigger phrases: ADR, documentation, runbook, migration guide, technical writing, API docs, changelog, architecture decision, knowledge base, onboarding docs.

導入数
1
GitHub Stars
105
更新日
10月19日