clicktronix

Nextjs Clean Skills — Development skill for Claude Code

Development community

Claude Code skills for React + Next.js with hybrid Clean Architecture and TanStack Query.

How to install Nextjs Clean Skills

This entry records only its repository, not the path inside it, so there is no exact command to give. Open clicktronix/react-clean-skills and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Nextjs Clean Skills does

Claude Code skills for React + Next.js with hybrid Clean Architecture and TanStack Query.

Alternatives in Development

Web Artifacts Builder — Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui 94.1k ★
Stitch React Components — Stitch to React components conversion 2.6k ★
Astro — Astro 5.x components, routing, collections, i18n, SEO, Tailwind, React islands, transitions 2.6k ★

README

nextjs-clean-skills

Portable Claude Code and Codex plugin marketplace for applying a capability-first Next.js 16 architecture and React Server/Client Component rules.

Plugin

Plugin	Skills	Purpose
`nextjs-clean-skills`	`designing-architecture`, `creating-react-components`	Design full-stack Next.js capability modules and React components with explicit architecture and rendering boundaries.

Both skills are model-invoked: Claude Code and Codex can select them automatically when a task matches the skill frontmatter `description`.

Claude Code Install

Add to `.claude/settings.json`:

{
  "extraKnownMarketplaces": {
    "nextjs-clean-skills": {
      "source": { "source": "github", "repo": "clicktronix/nextjs-clean-skills" }
    }
  },
  "enabledPlugins": {
    "nextjs-clean-skills@nextjs-clean-skills": true
  }
}

Interactive install:

/plugin marketplace add clicktronix/nextjs-clean-skills
/plugin install nextjs-clean-skills@nextjs-clean-skills

After install, run `/reload-plugins`. Invoke directly with:

/nextjs-clean-skills:designing-architecture
/nextjs-clean-skills:creating-react-components

Codex Install

This repository contains a Codex marketplace at `.agents/plugins/marketplace.json` and a Codex plugin manifest at `plugins/nextjs-clean-skills/.codex-plugin/plugin.json`.

Interactive install:

codex plugin marketplace add clicktronix/nextjs-clean-skills --ref main
codex plugin add nextjs-clean-skills@nextjs-clean-skills

Alternatively, open `/plugins`, select the `nextjs-clean-skills` marketplace, and install `nextjs-clean-skills`.

For a consuming repository, prefer a repo marketplace entry instead of copying the skill files:

{
  "name": "project-plugins",
  "plugins": [
    {
      "name": "nextjs-clean-skills",
      "source": {
        "source": "git-subdir",
        "url": "https://github.com/clicktronix/nextjs-clean-skills.git",
        "path": "./