
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- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads project-architecture automatically when relevant.
- 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
- Detect the framework from the project before acting; never assume it.
- Keep rendering server-first. Add client-side code only when the interaction cannot work without it, and keep that surface as small as possible.
- Read the installed framework's own docs before changing framework APIs or project structure.
- Follow
DESIGN.mdfor visual and UX decisions when it exists. - Build from existing shadcn primitives and semantic tokens before writing custom markup or styles; load
shadcn-component-boundarieswhen it is installed. - Make loading, empty, and error states explicit for every data display.
- 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 |
astro in package.json dependencies, or an astro.config.* file | Astro | references/astro.md |
| Both or neither | Unknown | Stop and ask which app the change targets |
Execution Steps
- Read
package.jsonand list the root config files to detect the framework. - Load the matching reference and apply its boundary rules.
- Search existing components, routes, and styles before creating new ones.
- Implement the change with the smallest client-side surface that works.
- Answer the pre-close checklist, then load
project-min-evaluationwhen 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
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.
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.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
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.