К основному содержанию
скилл CX Codex

project-architecture — скилл для Claude Code: как установить

Скилл удерживает серверный рендеринг в Next.js и Astro. Ассистент проверяет границы компонентов и не выносит лишний код на клиент.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add C3SC0-V4113/Scaffold --skill project-architecture -a claude-code
Открыть на GitHub

Что делает project-architecture

Скилл активируется перед правками интерфейса, структуры компонентов, темы или потоков данных. Сначала агент определяет стек по package.json и конфигурационным файлам. Если в репозитории найдены одновременно Next.js и Astro либо ни один из них, работа останавливается до уточнения цели.

Архитектура остаётся серверной. Клиентский код добавляется только тогда, когда интерфейс не может работать без интерактива. При наличии DESIGN.md ассистент следует его правилам, а компоненты собирает из примитивов shadcn и семантических токенов. Для каждого блока вывода данных обязательно оформляются состояния загрузки, ошибки и пустого ответа.

Перед завершением задачи запускается контрольный чеклист и тесты проекта. В отчёте агент фиксирует определённый фреймворк, а также обосновывает каждую добавленную или смещённую границу серверного и клиентского кода.

Какие задачи решает

  • ограничить разрастание клиентского кода в Next.js и Astro
  • выявить фреймворк проекта до изменения структуры файлов
  • согласовать компоненты с DESIGN.md и токенами shadcn
  • добавить явную обработку состояний загрузки и ошибок

Примеры запросов агенту

  • Перенеси блок профиля на клиентские компоненты только там, где нужна интерактивность.
  • Сверь карточку товара с правилами архитектуры и DESIGN.md.
  • Оформи вывод списка заказов с обработкой пустого состояния и ошибок.

Как установить project-architecture

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/project-architecture/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о project-architecture

Как установить project-architecture в Claude Code?

Выполните команду npx skills add C3SC0-V4113/Scaffold --skill project-architecture -a claude-code. Конфигурация запишется в ~/.claude/skills/project-architecture/SKILL.md.

Что делает скилл project-architecture?

Он задаёт архитектурные правила для Next.js и Astro. Агент минимизирует клиентские компоненты, сверяется с DESIGN.md, переиспользует shadcn и требует явных состояний данных.

Что произойдёт, если фреймворк проекта не определён?

Ассистент проверяет package.json и файлы конфигураций. Если нужных зависимостей нет или обнаружены оба фреймворка сразу, выполнение остановится до ответа пользователя.

Исходный текст

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

Похожие скиллы

Всё по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора4

Спонсоры проекта

Компании, которые помогают держать аналитику открытой