jkkn-institutional-page

Generates Next.js institutional content pages using a fixed green-and-cream Tailwind design system.

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/JKKN-Institutions/Pharmacy_College_JKKN --skill jkkn-institutional-page-jkkn-institutions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: jkkn-institutional-page
Source: https://github.com/JKKN-Institutions/Pharmacy_College_JKKN/tree/main/.claude/skills/jkkn-institutional-page
Command: npx skills add https://github.com/JKKN-Institutions/Pharmacy_College_JKKN --skill jkkn-institutional-page-jkkn-institutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating new committee, cell, policy, or disclosure pages for the JKKN College of Pharmacy website normally requires manually copying layout patterns and matching an existing visual style, which leads to inconsistent pages. This Skill encodes the exact design tokens, section patterns, and file structure so every new static page matches the established institutional look. ## Core Features & Use Cases - Standardized page generation: Produces the required app/<slug>/page.tsx and app/<slug>/layout.tsx pair with hero banner, SEO metadata, and breadcrumb wiring. - Reusable section patterns: Provides ready-made blocks for intro cards, green-header zebra tables, green-dot bullet lists, and two-column card grids. - Raw content conversion: Maps pasted Word/PDF text into the correct sections — paragraphs to intro cards, name lists to tables, numbered points to bullet lists. - Use Case: A user pastes the member list and objectives of a new Library Committee and asks for a page "same design as sports-committee"; the Skill outputs both files with correct colors, tables, and metadata. ## Quick Start Ask the AI to create a new committee page for the JKKN pharmacy site using the pasted committee content and the standard institutional design.

Frequently Asked Questions about jkkn-institutional-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new committee page in a Next.js App Router site?

Create an `app/<slug>/` directory containing a `page.tsx` with the hero banner and content sections, plus a `layout.tsx` exporting SEO metadata and a BreadcrumbWrapper. This Skill generates both files following the site's established design tokens.

How do I convert raw Word document text into a styled web page?

Split the raw text by content type: paragraphs become intro cards, name and designation lists become zebra-striped tables, and numbered or dashed points become bullet lists. The Skill maps each content type to a predefined Tailwind section pattern.

Can these pages use client components or framer-motion animations?

No. The pages are strictly server components with no 'use client', no state, and no animation libraries. This keeps the static institutional pages fast and consistent with the rest of the site.

What Tailwind colors does this institutional page design use?

The design uses a cream page background (#FBFBEE), dark green (#006837) for hero banners, table headers, and headings, and a lighter green (#7cb983) for bullet dots. Content sits in white rounded cards with subtle borders and shadows.

When should I not use this page template?

Avoid it for interactive pages needing client-side state, forms, or animations, since the template is server-component only. It also does not fit pages requiring a different visual identity, as the design tokens must not be modified.