Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

aiskillstore/nextjs-architecture

Name: nextjs-architecture
Author: aiskillstore

skills/89jobrien/nextjs-architecture/SKILL.md

npx skillsauth add aiskillstore/marketplace nextjs-architecture

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Next.js Architecture

This skill provides Next.js architecture expertise including App Router, Server Components, performance optimization, and migration strategies.

When to Use This Skill

When designing Next.js application architecture
When migrating from Pages Router to App Router
When implementing Server Components
When optimizing Next.js performance
When making Next.js architecture decisions
When building full-stack Next.js applications

What This Skill Does

Architecture Design: Designs Next.js application structure
App Router: Implements App Router patterns and routing
Server Components: Uses Server Components effectively
Performance: Optimizes Next.js for production
Migration: Migrates from Pages Router to App Router
Best Practices: Applies Next.js best practices

How to Use

Design Architecture

Design the architecture for this Next.js application

Migrate this Pages Router app to App Router

Specific Patterns

Implement Server Components for this feature

Architecture Patterns

App Router Structure

app/
├── (auth)/
│   ├── login/page.tsx
│   └── register/page.tsx
├── dashboard/
│   ├── layout.tsx
│   ├── page.tsx
│   └── analytics/page.tsx
├── api/
│   └── users/route.ts
└── layout.tsx

Server Components

Pattern:

Server Components by default
Client Components with 'use client'
Direct database access in Server Components
Streaming with Suspense

Performance

Strategies:

Static generation for known content
ISR for frequently changing content
Streaming for slow queries
Image optimization
Code splitting

Examples

Example 1: App Router Migration

Input: Migrate Pages Router to App Router

Output:

## Next.js Migration: Pages Router → App Router

### Migration Steps

**1. Convert Layout**
```typescript
// Before: pages/_app.tsx
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// After: app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

2. Convert Pages

// Before: pages/users/[id].tsx
export default function UserPage({ user }) {
  return <UserProfile user={user} />;
}

// After: app/users/[id]/page.tsx
export default async function UserPage({ params }) {
  const user = await getUser(params.id);
  return <UserProfile user={user} />;
}


## Best Practices

### Next.js Architecture

1. **Server First**: Use Server Components by default
2. **Client When Needed**: Add 'use client' only when necessary
3. **Static When Possible**: Generate static pages when feasible
4. **Stream Slow Queries**: Use Suspense for slow data
5. **Optimize Images**: Use Next.js Image component

## Related Use Cases

- Next.js architecture design
- App Router migration
- Server Components implementation
- Next.js performance optimization
- Full-stack Next.js development

aiskillstore/nextjs-architecture

skills/89jobrien/nextjs-architecture/SKILL.md

Next.js architecture specialist. Use when designing Next.js applications, migrating to App Router, implementing Server Components, or optimizing Next.js performance. Covers App Router, Server Components, and best practices.

230 stars

testing

Updated Mar 27, 2026

$ install --global

skillsauth

npx skillsauth add aiskillstore/marketplace nextjs-architecture

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Mar 28, 2026, 2:04 PM36.6s2 files scanned

SKILL.md

name:: nextjs-architecture
description:: Next.js architecture specialist. Use when designing Next.js applications,
author:: Joseph OBrien
status:: unpublished
updated:: 2025-12-23
version:: 1.0.1
tag:: skill
type:: skill

Next.js Architecture

This skill provides Next.js architecture expertise including App Router, Server Components, performance optimization, and migration strategies.

When to Use This Skill

When designing Next.js application architecture
When migrating from Pages Router to App Router
When implementing Server Components
When optimizing Next.js performance
When making Next.js architecture decisions
When building full-stack Next.js applications

What This Skill Does

Architecture Design: Designs Next.js application structure
App Router: Implements App Router patterns and routing
Server Components: Uses Server Components effectively
Performance: Optimizes Next.js for production
Migration: Migrates from Pages Router to App Router
Best Practices: Applies Next.js best practices

How to Use

Design Architecture

Design the architecture for this Next.js application

Migrate this Pages Router app to App Router

Specific Patterns

Implement Server Components for this feature

Architecture Patterns

App Router Structure

app/
├── (auth)/
│   ├── login/page.tsx
│   └── register/page.tsx
├── dashboard/
│   ├── layout.tsx
│   ├── page.tsx
│   └── analytics/page.tsx
├── api/
│   └── users/route.ts
└── layout.tsx

Server Components

Pattern:

Server Components by default
Client Components with 'use client'
Direct database access in Server Components
Streaming with Suspense

Performance

Strategies:

Static generation for known content
ISR for frequently changing content
Streaming for slow queries
Image optimization
Code splitting

Examples

Example 1: App Router Migration

Input: Migrate Pages Router to App Router

Output:

## Next.js Migration: Pages Router → App Router

### Migration Steps

**1. Convert Layout**
```typescript
// Before: pages/_app.tsx
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// After: app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

2. Convert Pages

// Before: pages/users/[id].tsx
export default function UserPage({ user }) {
  return <UserProfile user={user} />;
}

// After: app/users/[id]/page.tsx
export default async function UserPage({ params }) {
  const user = await getUser(params.id);
  return <UserProfile user={user} />;
}


## Best Practices

### Next.js Architecture

1. **Server First**: Use Server Components by default
2. **Client When Needed**: Add 'use client' only when necessary
3. **Static When Possible**: Generate static pages when feasible
4. **Stream Slow Queries**: Use Suspense for slow data
5. **Optimize Images**: Use Next.js Image component

## Related Use Cases

- Next.js architecture design
- App Router migration
- Server Components implementation
- Next.js performance optimization
- Full-stack Next.js development

Related Skills

aiskillstore/hig-components-content

development

VerifiedTrustedCommunity

Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/hig-components-content

aiskillstore/helpdesk-automation

tools

VerifiedTrustedCommunity

Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/helpdesk-automation

aiskillstore/haskell-pro

testing

VerifiedTrustedCommunity

Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/haskell-pro

aiskillstore/graphql

tools

VerifiedTrustedCommunity

GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.

244SKILL.mdUpdated Apr 10, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/aiskillstore/marketplace.git

# Copy into Claude Code skills folder (global)
cp -r marketplace/skills/89jobrien/nextjs-architecture ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

aiskillstore/marketplace

230 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT