Создавайте компактные макеты страниц Next.js
Файлы страниц Next.js могут становиться сложными в поддержке, когда макет, типы и логика страницы разрастаются вместе. Этот навык помогает Claude, Codex и Claude Code создавать модульные макеты page.tsx с вынесенными типами.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "writing-page-layout" from https://skillstore.io/skills/emz1998-writing-page-layout.md and its manifest at https://skillstore.io/api/skills/emz1998-writing-page-layout/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «writing-page-layout». Запрос на создание макета страницы dashboard.
Ожидаемый результат:
Лаконичный план макета страницы с вынесенными разделами, кратким описанием page.tsx и рекомендацией отдельного файла типов.
Использование «writing-page-layout». Длинный файл страницы, в котором смешаны макет и интерфейсы.
Ожидаемый результат:
Сводка рефакторинга, которая выносит интерфейсы из файла страницы и сохраняет фокус страницы на композиции макета.
Использование «writing-page-layout». Запрос на несколько связанных страниц приложения.
Ожидаемый результат:
Согласованное предложение по организации файлов, которое сохраняет каждую страницу компактной и использует общие определения типов.
The two static findings are false positives caused by Markdown inline code spans around file paths. No executable code, command invocation, prompt injection, or data-exfiltration intent was found in SKILL.md.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/emz1998-writing-page-layout/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/emz1998-writing-page-layout?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/emz1998-writing-page-layout?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emz1998-writing-page-layout/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/emz1998-writing-page-layout.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Emz1998. (2026). writing-page-layout security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emz1998-writing-page-layout/audits/4@techreport{emz1998-emz1998-writing-page-layout-2026,
author = {Emz1998},
title = {writing-page-layout security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/emz1998-writing-page-layout/audits/4},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "writing-page-layout security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "Emz1998"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/emz1998-writing-page-layout/audits/4"
identifiers:
- type: other
value: "skillstore:emz1998-writing-page-layout:audit:4"
description: "Skillstore immutable audit report identifier"
Создать лаконичный макет страницы Next.js, сохранив файл страницы сфокусированным и модульным.
Вынести объявления типов из перегруженного макета страницы и уменьшить размер файла страницы.
Применять согласованные правила макета страниц при генерации нескольких страниц Next.js для продукта.
Создайте макет Next.js page.tsx для простого dashboard. Сохраните файл страницы короче 40 строк и поместите все типы в отдельный файл типов.
Спроектируйте модульный Next.js page.tsx для страницы настроек. Вынесите разделы макета в компоненты и держите интерфейсы вне файла страницы.
Отрефакторьте этот существующий макет страницы Next.js, чтобы он следовал правилам навыка. Сократите файл страницы до менее чем 40 строк и вынесите определения типов в отдельный файл.
Создайте структуру для трех связанных макетов страниц Next.js. Сделайте каждый page.tsx лаконичным, определите общие типы отдельно и объясните организацию файлов.
Автор
Emz1998Лицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
a06681402992ceae98ba04d54cfd4ab004862696
Актуальность поддержки
18.07.2026
Использование
7 загрузок · 146 просмотров
Структура файлов
📄 SKILL.md
Обучение коду через создание приложений
Изучение кода может казаться абстрактным, когда примеры оторваны от реальных проектов. Этот навык обучает концепциям, одновременно пошагово создавая работающие приложения.
Генерация идей для функций приложения со структурированным подходом
Командам нужны практичные идеи функций, которые связывают пользовательскую ценность, реализуемость и метрики. Этот навык помогает проводить структурированный мозговой штурм для планирования веб- и мобильных приложений.
Генерация дорожных карт задач проекта
Проектным командам часто трудно преобразовать спецификации в понятную работу по реализации. Этот навык преобразует спецификации в поэтапные задачи с зависимостями и шагами проверки.
Пишите модульные типы Next.js
В проектах Next.js могут накапливаться большие файлы типов, которые сложно поддерживать. Этот навык помогает Claude, Codex и Claude Code писать небольшие TypeScript-типы и интерфейсы в srs/types.
Ревью реализаций перед коммитом
Команды могут пропустить недостатки плана или проблемы в коде, когда этапы рабочего процесса проходят быстро. Этот навык направляет завершенные планы и реализации агентам ревью перед следующим этапом.
Создание компонентов Tailwind CSS
Работа с компонентами Tailwind CSS часто требует согласованных правил проекта и размещения файлов. Этот навык дает Claude, Codex и Claude Code краткие правила для стилизации компонентов Tailwind.
Создание готовых к промышленной эксплуатации фронтенд-функций
от davila7
Фронтенд-командам нужны согласованные рекомендации по React и Next.js для разных проектов. Этот навык предоставляет справочные рабочие процессы, практики обеспечения качества и вспомогательные скрипты для анализа фронтенда.
Реализация React View Transitions
от vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.
Улучшение компонентов Vue Options API
от vuejs-ai
Проекты на Vue Options API могут терять безопасность типов и корректную привязку this. Этот skill дает прямые шаблоны для более безопасных компонентов Vue.
Оптимизация производительности React и Next.js
от vercel-labs
Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.
Улучшение покрытия тестами Playwright
от C0ntr0lledCha0s
Наборы тестов Playwright могут становиться нестабильными, когда конфигурация, локаторы и фикстуры непоследовательны. Этот навык дает практические шаблоны для надежных браузерных тестов, отладки и переиспользуемых page objects.
Создание приложений Starknet с помощью starknet.js
от internet-court
Интеграции со Starknet требуют точной работы с провайдерами, аккаунтами, транзакциями и комиссиями. Этот навык предоставляет Claude, Codex и Claude Code практические паттерны starknet.js v9.