Which frameworks is this skill designed for?

It is specifically designed for Next.js projects using the App Router, shadcn/ui, and next-intl for internationalization.

How does the internationalization work?

The skill scans installed blocks for hardcoded text, moves that text into de.json and en.json files, and replaces the hardcoded strings with the useTranslations hook.

Does this skill overwrite my existing UI components?

No, it features a critical safety check that prioritizes existing components and will never overwrite your custom-styled files in the components directory.

Can I use this for global sections like navbars?

Yes, it detects navbar and footer sections and ensures only one instance is present, typically placing them in the root layout if they aren't already there.

Shadcnblocks Page Builder

Name: Shadcnblocks Page Builder
Author: deomiarn

bydeomiarn

0•

Herramientas de Diseño

Builds localized website pages by automatically installing shadcnblocks components and implementing i18n support.

The install-sections skill automates the process of scaffolding complex web pages using the shadcnblocks library. It streamlines the installation of specific UI blocks, manages component reuse to prevent duplication, and automatically handles internationalization by extracting hardcoded text into localized JSON files. By coordinating page creation, layout management, and translation hook implementation, it transforms high-level page descriptions into production-ready, multi-language Next.js routes while strictly preserving your existing UI customizations.

Características Principales

01Smart layout integration for global navbar and footer sections

02Intelligent component reuse to prevent file duplication

030 GitHub stars

04Automated shadcnblocks component installation via pnpm

05Automatic i18n text extraction for German and English localization

06Next.js route and page file generation with pre-configured hooks

Casos de Uso

01Standardizing UI architecture across multiple Next.js routes efficiently

02Converting static frontend components into a multi-language application

03Rapidly scaffolding a landing page from a specific list of UI blocks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deomiarn/website-template install-sections

For use in Claude.ai and ChatGPT

Download Skill