MCPInstall

project-architecture

Trigger: UI change, layout, component architecture, state flow, theming, server/client boundary, Astro island. Keep Next.js or Astro apps server-first.

Installs
3.2K
Last 24h
+170
Trending rank
#1406
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/c3sc0-v4113/scaffold --skill project-architecture
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads project-architecture automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 signalFrameworkGuidance
next in package.json dependencies, or a next.config.* fileNext.jsreferences/next.md
astro in package.json dependencies, or an astro.config.* fileAstroreferences/astro.md
Both or neitherUnknownStop 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 — Next.js server/client boundary rules.
  • references/astro.md — Astro island boundary rules.

FAQ

What does the project-architecture skill do?

Trigger: UI change, layout, component architecture, state flow, theming, server/client boundary, Astro island. Keep Next.js or Astro apps server-first.

How do I install project-architecture?

Run npx skills add https://github.com/c3sc0-v4113/scaffold --skill project-architecture in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/project-architecture/ (personal) or .claude/skills/project-architecture/ (project).

Which AI agents can use project-architecture?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is project-architecture safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains project-architecture?

It is published by c3sc0-v4113 in c3sc0-v4113/scaffold. It has 3,192 recorded installs.

More from c3sc0-v4113/scaffold

View all →

decision-doc-sync

c3sc0-v4113/scaffold

Trigger: architecture change, new convention, UI/UX standard, quality gate change, ADR. Keep existing project docs in sync with structural decisions.

Frontend & Design3.2K installs

project-min-evaluation

c3sc0-v4113/scaffold

Trigger: done, complete, finish, before commit, quality check, verify. Run the project's own minimum quality scripts before claiming work is complete.

shadcn-component-boundaries

c3sc0-v4113/scaffold

Trigger: components/ui, shadcn, component placement, common components, feature components, atomic design. Enforce registry and product component boundaries.

Frontend & Design3.2K installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.