How do I install the Framework skill?

Run npx skillmds@latest add contentstack/framework-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Framework skill do?

Use when changing Next.js App Router structure, next.config.mjs, images, PostCSS, or Tailwind in kickstart-next-ssr. It is listed under Web & Frontend, Coding & Dev Tools, Integrations & APIs on SkillMD.

Is Framework safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Framework?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Framework free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Framework?

contentstack (@contentstack) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Framework by contentstack — Agent Skill

Name: Framework
Author: contentstack

File contents

Framework (Next.js) – kickstart-next-ssr

When to use

Editing routing, layout, or global styles
Configuring image optimization or remote image hosts
Changing Tailwind or PostCSS setup

Instructions

App Router

Application lives under app/.
app/layout.tsx is the root layout: sets metadata, imports app/globals.css, renders children, and mounts components/ContentstackLivePreview.tsx so Live Preview initializes on the client after page content.
app/page.tsx is the default home route (async server component with Live Preview query handling).

Next configuration

next.config.mjs exports images.remotePatterns:
- If NEXT_PUBLIC_CONTENTSTACK_IMAGE_HOSTNAME is set, that hostname is allowed.
- Otherwise defaults allow images.contentstack.io and *-images.contentstack.com.
Prefer env-driven hostnames when stacks use custom image delivery domains.

Tailwind CSS v4

postcss.config.mjs registers @tailwindcss/postcss.
app/globals.css uses @import "tailwindcss" and a @layer base block for border and body defaults compatible with v4.
package.json includes tailwindcss and @tailwindcss/postcss.

Linting

npm run lint runs next lint, aligned with .eslintrc.json (Next core-web-vitals + TypeScript).

Frequently asked questions

Framework