agentsclimarketplace

Template architecture

Skill PIXARTSeu/Synapse/packages/codegraph/data/skill/pixarts/template-architecture

Standard Next.js project architecture for Pixarts client sites - folder structure, root layout, block renderer, env config. Use when scaffolding a new client project, setting up the standard folder structure, or configuring root layout/config files.From its SKILL.md

Install
npx -y skills add PIXARTSeu/Synapse --skill template-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

6.8 KB, ~1.7k tokens by cl100k_base, as published. Nobody here has run it

Pixarts Template Architecture

Architettura standard per i siti client Pixarts basati su Next.js 15+ App Router.

Struttura Cartelle Standard

src/
├── app/
│   ├── [locale]/
│   │   ├── layout.tsx           # Root layout: fonts, metadata, providers
│   │   ├── page.tsx             # Homepage
│   │   ├── loading.tsx          # Global loading skeleton
│   │   ├── error.tsx            # Global error boundary
│   │   ├── not-found.tsx        # 404 page
│   │   ├── (pages)/
│   │   │   ├── chi-siamo/
│   │   │   │   └── page.tsx
│   │   │   ├── servizi/
│   │   │   │   └── page.tsx
│   │   │   ├── contatti/
│   │   │   │   └── page.tsx
│   │   │   └── blog/
│   │   │       ├── page.tsx        # Blog list
│   │   │       └── [slug]/
│   │   │           └── page.tsx    # Blog post
│   │   └── (legal)/
│   │       ├── privacy/
│   │       │   └── page.tsx
│   │       ├── cookie-policy/
│   │       │   └── page.tsx
│   │       └── terms/
│   │           └── page.tsx
│   ├── api/
│   │   ├── health/
│   │   │   └── route.ts           # Health check endpoint
│   │   └── revalidate/
│   │       └── route.ts           # ISR revalidation from CMS
│   ├── robots.ts                   # SEO robots.txt
│   ├── sitemap.ts                  # SEO sitemap.xml
│   └── globals.css                 # Tailwind + theme variables
│
├── components/
│   ├── ui/                         # shadcn/ui components (auto-generated)
│   ├── layout/
│   │   ├── header.tsx
│   │   ├── footer.tsx
│   │   ├── container.tsx
│   │   ├── section.tsx
│   │   ├── mobile-nav.tsx
│   │   └── language-switcher.tsx
│   ├── blocks/                     # CMS content blocks
│   │   ├── hero-block.tsx
│   │   ├── features-block.tsx
│   │   ├── testimonials-block.tsx
│   │   ├── cta-block.tsx
│   │   ├── faq-block.tsx
│   │   └── block-renderer.tsx      # Dynamic block renderer
│   ├── shared/                     # Reusable across pages
│   │   ├── section-header.tsx
│   │   ├── cta-button.tsx
│   │   ├── image-with-fallback.tsx
│   │   └── contact-form.tsx
│   └── seo/
│       ├── schema-org.tsx          # JSON-LD structured data
│       └── meta-tags.tsx           # Dynamic OG/Twitter meta
│
├── lib/
│   ├── utils.ts                    # cn() + generic utils
│   ├── payload.ts                  # CMS client singleton
│   ├── fetchers.ts                 # Data fetching functions
│   └── validators.ts               # Zod schemas for forms
│
├── hooks/
│   ├── use-scroll-direction.ts
│   ├── use-intersection-observer.ts
│   └── use-media-query.ts
│
├── i18n/
│   ├── config.ts                   # Locale config
│   ├── request.ts                  # Server-side i18n
│   └── navigation.ts               # Localized navigation
│
├── messages/
│   ├── it.json
│   ├── en.json
│   └── cs.json
│
├── types/
│   ├── payload-types.ts            # Auto-generated from CMS
│   └── index.ts
│
└── styles/
    └── fonts.ts                    # next/font declarations

File Chiave: Root Layout

// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { locales } from '@/i18n/config';
import { fontSans, fontDisplay } from '@/styles/fonts';
import { Header } from '@/components/layout/header';
import { Footer } from '@/components/layout/footer';
import { cn } from '@/lib/utils';
import '@/app/globals.css';

export default async function LocaleLayout({
  children,
  params: { locale }
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  if (!locales.includes(locale)) notFound();
  const messages = await getMessages();

  return (
    <html lang={locale} suppressHydrationWarning>
      <body className={cn(fontSans.variable, fontDisplay.variable, 'font-sans antialiased')}>
        <NextIntlClientProvider messages={messages}>
          <Header />
          <main className="min-h-[calc(100vh-4rem)]">
            {children}
          </main>
          <Footer />
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Block Renderer Pattern

// components/blocks/block-renderer.tsx
import { HeroBlock } from './hero-block';
import { FeaturesBlock } from './features-block';
import { TestimonialsBlock } from './testimonials-block';
import { CTABlock } from './cta-block';
import { FAQBlock } from './faq-block';

const blockComponents = {
  hero: HeroBlock,
  features: FeaturesBlock,
  testimonials: TestimonialsBlock,
  cta: CTABlock,
  faq: FAQBlock,
} as const;

type BlockType = keyof typeof blockComponents;

export function BlockRenderer({ blocks }: { blocks: Array<{ blockType: BlockType; [key: string]: unknown }> }) {
  return (
    <>
      {blocks.map((block, i) => {
        const Component = blockComponents[block.blockType];
        if (!Component) return null;
        return <Component key={`${block.blockType}-${i}`} {...block} />;
      })}
    </>
  );
}

Config Files Standard

FileScopo
next.config.mjsNext.js config + next-intl plugin
tailwind.config.tsTailwind v4 (o CSS-first)
tsconfig.jsonStrict mode, path aliases (@/)
postcss.config.jsTailwind PostCSS plugin
.env.localEnvironment variables
DockerfileMulti-stage Docker build
docker-compose.ymlLocal dev con hot-reload
.github/workflows/deploy.ymlCI/CD to Coolify

Checklist Nuovo Progetto

  • Scaffold con create-next-app
  • next-intl configurato (IT/EN/CZ)
  • Tailwind CSS + shadcn/ui installati
  • Font caricati con next/font
  • Layout base (Header, Footer, Container)
  • CMS client configurato (lib/payload.ts)
  • Revalidation route (/api/revalidate)
  • Block renderer per contenuti CMS
  • robots.ts + sitemap.ts
  • Schema.org JSON-LD
  • .env.local con tutte le variabili
  • Dockerfile multi-stage
  • TypeScript strict mode

What ships with it: 3 files

2.6 KB alongside SKILL.md

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.