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

opinionated-nextjs-systems

Refactor TypeScript React/Next.js code into layered architecture with tokenized Emotion styling.

Updated Mar 27, 2026
Search Tags:#typescript#architecture#styling#nextjs#emotion#opinionated
One-click install
npx skills add https://github.com/theGobindSingh/cleantank --skill opinionated-nextjs-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: opinionated-nextjs-systems
Source: https://github.com/theGobindSingh/cleantank/tree/main/.agents/skills/opinionated-nextjs-systems
Command: npx skills add https://github.com/theGobindSingh/cleantank --skill opinionated-nextjs-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill codifies a strict, conversion-aware front-end discipline for Next.js projects, enabling consistent architecture, module composition, typed constants, tokenized Emotion styling, and predictable handoff through automated guidance and template generation.

Core Features & Use Cases

  • Layered architecture enforcement: components -> layouts -> modules -> pages, with composition-only index.tsx and constants-driven content.
  • Composition-first modules and standardized section wrappers to ensure predictable handoff and API boundaries.
  • Tokenized Emotion styling and typed constants to reduce drift and improve reusability across routes.
  • Drift handling and canonical-rule-driven edits with host compatibility, reporting deviations in handoff.
  • Adaptability to host project conventions (aliases, scripts, and existing patterns) without introducing architecture drift.

Quick Start

Describe your host Next.js project goals and requested changes, and the skill will generate or refactor modules following the Opinionated Next.js Systems conventions.

Frequently Asked Questions about opinionated-nextjs-systems

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

FAQPage Schema
How do I enforce a strict layered architecture in a Next.js project?▼

To enforce strict Next.js architecture, apply a composition-first structure using components, layouts, modules, and pages. This standardizes section wrappers and API boundaries, reducing drift and ensuring predictable handoff across your application.

What is the best way to manage tokenized Emotion styling in TypeScript?▼

Tokenized Emotion styling is managed by generating typed constants mapped to design tokens. This reduces style drift, improves reusability across routes, and maintains strict TypeScript safety throughout Next.js modules.

Can I refactor existing Next.js code to follow a strict composition-first module pattern?▼

Yes, you can refactor existing Next.js code into composition-first modules. The process transforms index.tsx files into composition-only entry points and extracts content into constants-driven modules without introducing architecture drift.

Does this Next.js architecture approach adapt to existing project conventions and aliases?▼

Yes, the architecture approach adapts to existing host project conventions like path aliases and scripts. It handles drift by reporting deviations during handoff, ensuring new edits remain compatible with established patterns.

Why does my Next.js front-end architecture suffer from component drift during handoff?▼

Front-end architecture drift occurs from untyped constants and inconsistent module boundaries. Enforcing canonical rules across naming, styling, and API definitions ensures framework-consistent imports and safe drift handling during handoff.

Related Skills

Explore More Software Engineering Skills→
tacogipstacogips

design-doc

Organizes design specs and references into a canonical directory structure with templates.

Community
Basic
LusciiLuscii

terraform-syntax

Guide Terraform HCL syntax for writing, reviewing, and validating configurations.

Official
Basic
kwonheekimkwonheekim

Emotion CSS-in-JS Helper

Convert CSS and inline styles into Emotion-ready CSS-in-JS code.

Community
Intermediate
wade56754wade56754

ai-ad-doc-architect

Analyze ASDD document architecture and generate a read-only analysis report.

Community
Advanced