Skip to main content
affpapa.org
RU EN
skill CX Codex

project-architecture — Claude Code skill: how to install

Enforces server-first boundaries in Next.js and Astro projects. It keeps client-side rendering minimal during UI and layout refactoring.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add C3SC0-V4113/Scaffold --skill project-architecture -a claude-code
Open on GitHub

What project-architecture does

Load this skill before modifying UI, layouts, component architecture, state, or theming. The agent starts by inspecting package.json and root config files to confirm whether the project runs Next.js or Astro. If both frameworks or neither appear in the project signals, the assistant stops and asks for clarification.

Rendering stays server-first. Client components are kept minimal and added only when interaction strictly requires them. Visual decisions follow DESIGN.md when it exists, building on existing shadcn primitives and semantic tokens. Explicit loading, error, and empty states are mandatory for every data display.

Before closing a task, the agent completes a verification checklist and runs the project's existing test suite. The final output reports the detected framework and explains every server/client boundary change.

What it helps with

  • restrict client component bloat in Next.js and Astro
  • identify framework configs before modifying code structure
  • enforce UI consistency with DESIGN.md and shadcn primitives
  • ensure explicit loading, empty, and error states for data views

Example prompts for the agent

  • Refactor the dashboard layout while keeping server rendering as the default.
  • Add the order list view with explicit loading and empty states.
  • Review the navigation bar changes against our Astro island boundaries.

How to install project-architecture

1Skills CLI (Vercel)

npx skills add C3SC0-V4113/Scaffold --skill project-architecture -a claude-code

2Manually: put the files in place

~/.claude/skills/project-architecture/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/project-architecture/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about project-architecture

How to install project-architecture in Claude Code?

Run npx skills add C3SC0-V4113/Scaffold --skill project-architecture -a claude-code. The skill definition installs into ~/.claude/skills/project-architecture/SKILL.md.

What does project-architecture do?

It provides architecture guardrails for Next.js and Astro codebases. The agent enforces minimal client boundaries, checks DESIGN.md, and validates UI states.

What happens if framework detection fails?

The agent inspects package.json and config files. If both Next.js and Astro are found, or neither is detected, it halts and asks which app to target.

Source text

SKILL.md · Apache-2.0 
---
name: project-architecture
description: "Trigger: UI change, layout, component architecture, state flow, theming, server/client boundary, Astro island. Keep Next.js or Astro apps server-first."
license: Apache-2.0
metadata:
  author: purrfold
  version: "1.0"
---

# Project Architecture Guardrails

## Activation Contract

Load this skill before changing UI, layout, component structure, state flow, theming, data display, or the server/client boundary of a Next.js or Astro app.

## Hard Rules

1. Detect the framework from the project before acting; never assume it.
2. Keep rendering server-first. Add client-side code only when the interaction cannot work without it, and keep that surface as small as possible.
3. Read the installed framework's own docs before changing framework APIs or project structure.
4. Follow `DESIGN.md` for visual and UX decisions when it exists.
5. Build from existing shadcn primitives and semantic tokens before writing custom markup or styles; load `shadcn-component-boundaries` when it is installed.
6. Make loading, empty, and error states explicit for every data display.
7. Add tests proportional to risk, using the test tooling the project already has.

## Decision Gates

| Project signal | Framework | Guidance |
| --- | --- | --- |
| `next` in `package.json` dependencies, or a `next.config.*` file | Next.js | [references/next.md](references/next.md) |
| `astro` in `package.json` dependencies, or an `astro.config.*` file | Astro | [references/astro.md](references/astro.md) |
| Both or neither | Unknown | Stop and ask which app the change targets |

## Execution Steps

1. Read `package.json` and list the root config files to detect the framework.
2. Load the matching reference and apply its boundary rules.
3. Search existing components, routes, and styles before creating new ones.
4. Implement the change with the smallest client-side surface that works.
5. Answer the pre-close checklist, then load `project-min-evaluation` when it is installed, or run the project's quality scripts.

Pre-close checklist:

- Did the change add unnecessary client-side surface?
- Does it follow `DESIGN.md`?
- Are loading, empty, and error states explicit?

## Output Contract

Report the detected framework, every server/client boundary added or moved (with its reason), and the checklist answers.

## References

- [references/next.md](references/next.md) — Next.js server/client boundary rules.
- [references/astro.md](references/astro.md) — Astro island boundary rules.

© purrfold · Apache-2.0 · C3SC0-V4113/Scaffold

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set4

shadcn-component-boundaries Sets architectural boundaries for shadcn UI components. It prevents mixing product logic into registry primitives and enforces one-way imports. CX Codex +1 2,900installs project-min-evaluation Runs your project's own lint, type and test scripts before the agent calls the work done. Handy when broken commits keep slipping through. CX Codex +1 2,900installs decision-doc-sync Keeps README, DESIGN, AGENTS and ADR files aligned with the code after architectural or UX changes. Useful when an edit breaks the docs. CX Codex +1 3,000installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor