skills.rest
theGobindSingh
theGobindSinghCOMMUNITY
Explore all skills by this author →
Website𝕏@thegobindsinghGitHub

james-portfolio

Guides development of a Next.js portfolio site using Pages Router, TypeScript, and Emotion.

Updated May 19, 2026
Search Tags:#typescript#react#coding conventions#next.js#portfolio#emotion#pages router
One-click install
npx skills add https://github.com/theGobindSingh/james-portfolio --skill james-portfolio-thegobindsingh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: james-portfolio
Source: https://github.com/theGobindSingh/james-portfolio
Command: npx skills add https://github.com/theGobindSingh/james-portfolio --skill james-portfolio-thegobindsingh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It gives an AI coding agent the project-specific conventions, architecture boundaries, and workflow rules needed to make consistent changes to a Next.js portfolio codebase without introducing conflicting patterns. ## Core Features & Use Cases - Architecture Guidance: Enforces the Pages Router structure with thin route files in src/pages, composition logic in src/modules, and reusable UI in src/components. - Styling Conventions: Directs all styling through Emotion with theme tokens (--color-, --fs-, --font-*) and mediaQuery helpers instead of hardcoded values or Tailwind. - Use Case: When asked to add a new homepage section, the agent creates a module under src/modules/home with co-located styles.ts, wires it into the home composition, and keeps docs synchronized. ## Quick Start Ask the agent to add a new section to the portfolio homepage following the project's Emotion and module conventions.

Frequently Asked Questions about james-portfolio

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

FAQPage Schema
How do I add a new section to a Next.js Pages Router homepage?▼

Create a module folder under src/modules/home with index.tsx for render logic and styles.ts for Emotion styles, then mount it in src/modules/home/index.tsx. Use theme variables and mediaQuery helpers for responsive behavior.

How to style React components with Emotion in Next.js?▼

Use css or styled from @emotion/react and @emotion/styled in co-located styles.ts files. Set jsxImportSource to @emotion/react in tsconfig and consume theme CSS variables like --color-text-900 instead of hardcoded values.

Does this project support the Next.js App Router?▼

No, the repository uses Pages Router exclusively with src/pages, getStaticPaths, and getStaticProps. App Router patterns like the app directory and generateStaticParams are explicitly disallowed.

Why does pnpm build modify my source files?▼

The build script runs prebuild, which executes pnpm lint:fix. Both lint scripts run Prettier in write mode before ESLint, so files are reformatted automatically during the build process.

Can I use Tailwind classes in this Next.js project?▼

No, the project uses Emotion exclusively for styling. Tailwind classes should not be introduced unless the entire styling stack is intentionally migrated.

Related Skills

Explore More Software Engineering Skills→
BrunoSantanaDeveloperBrunoSantanaDeveloper

content-strategy

Define brand copy, voice, audience, and SEO metadata for SaaS pages.

Community
Advanced
joaoguirunasjoaoguirunas
3

sites-deployment

Deploy Next.js sites to Vercel, Netlify, and Cloudflare Pages with CI/CD pipelines.

Community
Basic
yonetim258852yonetim258852

image-to-code

Translate visual design images into modular HTML, CSS, and JavaScript code.

Community
Advanced
kirillshilinkirillshilin

shai-scaffold-nextjs-app

Automate Next.js App Router project scaffolding with TypeScript and Tailwind.

Community
Advanced