Token导航 LogoToken导航

Agent Skill · 前端设计

project-architect(项目建筑师)

project-architect 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息,适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态,以及是否会触发联网、命令执行或文件读写。

project-architect 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为需要联网;许可证信息还不明确,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 8,797。

总安装 259周安装 11GitHub Stars 公开资料未说明下载 91核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:project-architect(项目建筑师)
来源仓库:https://github.com/monicajeon28/gmcruise
仓库路径:skills/project-architect
安装命令:
npx skills add https://github.com/monicajeon28/gmcruise --skill project-architect
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/monicajeon28/gmcruise --skill project-architect

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

用于处理 GitHub 仓库、Issue 和代码协作信息,适合围绕前端架构与设计系统进行整理。可分析组件分层、状态管理与样式规范,辅助架构演进建议。需结合现有代码库与设计资产使用,避免脱离上下文提出重大变更。

安装命令:npx skills add https://github.com/monicajeon28/gmcruise --skill project-architect 适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。

来源仓库内路径:skills/project-architect

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/monicajeon28/gmcruise --skill project-architec…;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要需要联网,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

project-architect 怎么安装?

在终端执行 npx skills add https://github.com/monicajeon28/gmcruise --skill project-architect。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

project-architect 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

project-architect 需要什么权限?

权限级别是需要联网。该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

project-architect 是免费的吗?

公开资料没有标注明确许可证,收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

project-architect 用的人多吗?

公开数据是累计安装 259 次,近一周安装 11 次,下载 91 次。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

project-architect 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。

不太适合

  • 需要明确授权才能用到公司项目里的场景。
  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
project-architect

项目建筑师 · 本页

259—需要联网未明确通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

Project Architect Skill v1.0

프로젝트 설계 마스터 - 시작부터 확장 가능한 구조로 설계

핵심 철학

Core_Philosophy:
  원칙: "집 짓기 전에 설계도 먼저"
  목표: "비개발자도 프로 개발자 수준의 구조로 시작"

  Anti_Patterns_Prevention:
    - ❌ 모든 코드가 한 파일에 (God File)
    - ❌ 폴더 없이 루트에 파일 나열
    - ❌ 비즈니스 로직과 UI 코드 혼재
    - ❌ 설정값 하드코딩
    - ❌ 테스트 없는 구조

자동 발동 조건

Auto_Trigger_Conditions:
  Keywords_KO:
    - "새 프로젝트", "프로젝트 시작"
    - "폴더 구조", "디렉토리 구조"
    - "아키텍처 설계", "구조 설계"
    - "프로젝트 세팅", "초기 설정"
    - "뼈대 잡아줘", "구조 잡아줘"
    - "보일러플레이트", "스캐폴딩"

  Keywords_EN:
    - "new project", "project setup"
    - "folder structure", "directory structure"
    - "architecture design", "scaffolding"
    - "boilerplate", "project skeleton"

  File_Events:
    - "package.json 없는 빈 디렉토리 진입"
    - "신규 프로젝트 생성 요청"

선택적 문서 로드 전략

Document_Loading_Strategy:
  Always_Load:
    - "core/universal-principles.md"   # 공통 원칙
    - "core/layer-separation.md"       # 레이어 분리

  Project_Type_Load:
    Web_Frontend: "templates/frontend.md"
    Web_Backend: "templates/backend.md"
    Fullstack: "templates/fullstack.md"
    API_Server: "templates/api-server.md"
    CLI_Tool: "templates/cli.md"
    Library: "templates/library.md"
    Monorepo: "templates/monorepo.md"

  Framework_Specific_Load:
    Next.js: "frameworks/nextjs.md"
    React: "frameworks/react.md"
    Vue: "frameworks/vue.md"
    NestJS: "frameworks/nestjs.md"
    FastAPI: "frameworks/fastapi.md"
    Express: "frameworks/express.md"
    Django: "frameworks/django.md"

핵심 원칙

1. 레이어 분리 (Layer Separation)

Layer_Architecture:
  Presentation_Layer:
    역할: "사용자 인터페이스"
    포함: "pages, components, views, layouts"
    규칙: "비즈니스 로직 금지, UI만"

  Business_Layer:
    역할: "비즈니스 로직"
    포함: "services, usecases, domain"
    규칙: "UI/DB 직접 접근 금지"

  Data_Layer:
    역할: "데이터 접근"
    포함: "repositories, api, database"
    규칙: "데이터 소스 추상화"

  Shared_Layer:
    역할: "공유 유틸리티"
    포함: "utils, helpers, constants, types"
    규칙: "의존성 최소화"

2. 기능별 모듈화 (Feature-Based Modularity)

Module_Structure:
  방식: "기능별로 관련 파일 그룹화"

  Before_Bad:
    components/
      Button.tsx
      UserCard.tsx
      ProductCard.tsx
    hooks/
      useUser.ts
      useProduct.ts
    services/
      userService.ts
      productService.ts

  After_Good:
    features/
      user/
        components/UserCard.tsx
        hooks/useUser.ts
        services/userService.ts
        types/user.types.ts
        index.ts  # Public exports
      product/
        components/ProductCard.tsx
        hooks/useProduct.ts
        services/productService.ts
        types/product.types.ts
        index.ts
    shared/
      components/Button.tsx
      utils/helpers.ts

3. 설정 외부화 (Configuration Externalization)

Config_Management:
  환경별_분리:
    .env.local: "로컬 개발 (git 무시)"
    .env.development: "개발 환경"
    .env.production: "프로덕션 환경"
    .env.example: "템플릿 (git 포함)"

  설정_구조:
    config/
      index.ts      # 설정 진입점
      database.ts   # DB 설정
      auth.ts       # 인증 설정
      api.ts        # API 설정
      constants.ts  # 상수

  절대_금지:
    - ❌ 코드에 API 키 직접 입력
    - ❌ 하드코딩된 URL
    - ❌ 매직 넘버 (의미 없는 숫자)

4. 명확한 진입점 (Clear Entry Points)

Entry_Points:
  규칙: "각 모듈은 index.ts로 public API 노출"

  예시:
    features/user/index.ts: |
      // Public exports only
      export { UserCard } from './components/UserCard';
      export { useUser } from './hooks/useUser';
      export type { User } from './types/user.types';
      // Internal implementations are NOT exported

  Import_규칙:
    Good: "import { UserCard } from '@/features/user';"
    Bad: "import { UserCard } from '@/features/user/components/UserCard';"

프로젝트 타입별 구조 템플릿

Next.js Fullstack (권장)

my-project/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # 인증 필요 페이지 그룹
│   │   ├── (public)/          # 공개 페이지 그룹
│   │   ├── api/               # API Routes
│   │   ├── layout.tsx         # Root Layout
│   │   └── page.tsx           # Home Page
│   │
│   ├── features/              # 기능별 모듈
│   │   ├── auth/
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   ├── services/
│   │   │   ├── types/
│   │   │   └── index.ts
│   │   └── [feature-name]/
│   │
│   ├── shared/                # 공유 모듈
│   │   ├── components/        # 공통 UI 컴포넌트
│   │   │   ├── ui/           # 기본 UI (Button, Input)
│   │   │   └── layout/       # 레이아웃 컴포넌트
│   │   ├── hooks/            # 공통 훅
│   │   ├── utils/            # 유틸리티 함수
│   │   ├── types/            # 공통 타입
│   │   └── constants/        # 상수
│   │
│   ├── services/              # 외부 서비스 연동
│   │   ├── api/              # API 클라이언트
│   │   ├── database/         # DB 연결
│   │   └── external/         # 외부 API (결제, 이메일 등)
│   │
│   └── config/               # 설정
│       ├── index.ts
│       └── env.ts
│
├── public/                    # 정적 파일
├── tests/                     # 테스트
│   ├── unit/
│   ├── integration/
│   └── e2e/
│
├── docs/                      # 문서
├── scripts/                   # 빌드/배포 스크립트
│
├── .env.example              # 환경변수 템플릿
├── .env.local                # 로컬 환경변수 (gitignore)
├── .gitignore
├── package.json
├── tsconfig.json
├── next.config.js
└── README.md

Backend API Server (NestJS/Express)

my-api/
├── src/
│   ├── modules/               # 기능별 모듈
│   │   ├── auth/
│   │   │   ├── controllers/
│   │   │   ├── services/
│   │   │   ├── dto/
│   │   │   ├── entities/
│   │   │   └── auth.module.ts
│   │   └── [module-name]/
│   │
│   ├── common/                # 공통 모듈
│   │   ├── decorators/
│   │   ├── filters/
│   │   ├── guards/
│   │   ├── interceptors/
│   │   ├── pipes/
│   │   └── middleware/
│   │
│   ├── database/              # DB 관련
│   │   ├── migrations/
│   │   ├── seeds/
│   │   └── config/
│   │
│   ├── config/                # 설정
│   │   ├── app.config.ts
│   │   ├── database.config.ts
│   │   └── index.ts
│   │
│   ├── app.module.ts
│   └── main.ts
│
├── test/
│   ├── unit/
│   └── e2e/
│
├── docker/
│   ├── Dockerfile
│   └── docker-compose.yml
│
├── .env.example
├── package.json
└── README.md

체크리스트

프로젝트 시작 시 필수 확인

## 구조 체크리스트

### 레이어 분리
□ UI 코드와 비즈니스 로직이 분리되어 있는가?
□ 데이터 접근 로직이 추상화되어 있는가?
□ 공유 코드가 별도 폴더에 있는가?

### 모듈화
□ 기능별로 폴더가 분리되어 있는가?
□ 각 모듈에 index.ts가 있는가?
□ 순환 참조가 없는가?

### 설정 관리
□ .env.example이 있는가?
□ 하드코딩된 설정값이 없는가?
□ 환경별 설정이 분리되어 있는가?

### 확장성
□ 새 기능 추가 시 기존 코드 수정이 최소화되는가?
□ 폴더 구조가 일관성 있는가?
□ 네이밍 컨벤션이 통일되어 있는가?

### 문서화
□ README.md가 있는가?
□ 프로젝트 구조 설명이 있는가?
□ 실행 방법이 문서화되어 있는가?

Quick Commands

명령동작
architect init대화형으로 프로젝트 구조 생성
architect analyze현재 구조 분석 및 개선점 제안
architect template <type>특정 타입 템플릿 적용
architect validate구조 규칙 검증

출력 형식

구조 제안 시

## 📁 프로젝트 구조 제안

### 프로젝트 정보
- **타입**: Next.js Fullstack
- **규모**: 중형 (10-50 페이지 예상)
- **팀 규모**: 1-3명

### 권장 구조
[폴더 트리 출력]

### 핵심 규칙
1. **features/** - 기능별 모듈화
2. **shared/** - 공통 컴포넌트만
3. **services/** - 외부 연동 추상화

### 시작 명령
\`\`\`bash
npx create-next-app@latest my-project --typescript --tailwind --app
\`\`\`

### 다음 단계
1. 폴더 구조 생성
2. 기본 설정 파일 추가
3. 첫 번째 기능 모듈 생성

Version: 1.0.0 Dependencies: tech-stack-advisor, requirements-analyzer Quality Target: 프로 개발자 수준 구조

平台分布

Codex

32.95%
按下载量换算30

Claude

31.21%
按下载量换算28

Cursor

19.03%
按下载量换算17

Gemini CLI

8.65%
按下载量换算8

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills