Реализация веб-навигации в React
Решения по маршрутизации в приложениях React могут приводить к неработающим ссылкам и хрупкому состоянию. Этот навык предоставляет практические паттерны React Router и Next.js для путей, ссылок, перенаправлений и состояния URL.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "web-navigation" from https://skillstore.io/skills/cjharmath-web-navigation.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-navigation/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «web-navigation». Create routes for a dashboard with analytics and settings sections.
Ожидаемый результат:
Ассистент предлагает макет панели управления, вложенные дочерние маршруты, навигацию боковой панели и резервный маршрут для неизвестных путей.
Использование «web-navigation». Make product filters shareable in the URL.
Ожидаемый результат:
Ассистент описывает параметры запроса для категории, порядка сортировки и номера страницы, а затем объясняет, как обновления должны сохранять существующие фильтры.
Использование «web-navigation». Plan a Next.js user detail area with loading and error states.
Ожидаемый результат:
Ассистент описывает динамические страницы пользователей, общий макет, интерфейс загрузки, восстановление после ошибок и состояние not found.
All static findings are false positives from Markdown code fences, inline code formatting, and TypeScript route examples in SKILL.md. No prompt injection, malware intent, system reconnaissance, command execution, or credential handling was found in the skill content.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/cjharmath-web-navigation/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/cjharmath-web-navigation?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/cjharmath-web-navigation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-navigation/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/cjharmath-web-navigation.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>CJHarmath. (2026). web-navigation security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-navigation/audits/7@techreport{cjharmath-cjharmath-web-navigation-2026,
author = {CJHarmath},
title = {web-navigation security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-navigation/audits/7},
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: "web-navigation security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-navigation/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-navigation:audit:7"
description: "Skillstore immutable audit report identifier"
Спроектируйте дерево маршрутов с публичными страницами, защищенными страницами, вложенными макетами и резервными экранами.
Сохраняйте вкладки, фильтры, сортировку и пагинацию в URL, чтобы пользователи могли делиться точными состояниями приложения.
Сравните подходы к маршрутизации в React Router и Next.js перед переносом функции или раздела приложения.
Use this skill to define basic React Router routes for my app pages. Include a home page, detail page, and not found page.
Use this skill to design URL query parameters for filters, sorting, tabs, and pagination in a React product list.
Use this skill to plan a Next.js App Router folder structure with public pages, protected pages, shared layouts, and dynamic routes.
Use this skill to review my navigation flow for redirects, loading states, error states, scroll restoration, and unsaved change guards.
Автор
CJHarmathЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
dd4a3ef9f20ddf38830950b4bb713df96b431fd6
Актуальность поддержки
18.07.2026
Использование
5 загрузок · 274 просмотров
Структура файлов
📄 SKILL.md
Оптимизация производительности React Native
Приложения React Native могут страдать от медленных списков, лишних рендеров и зависаний потока JS. Этот навык предоставляет сфокусированные паттерны для более быстрых экранов FlatList, мемоизированных компонентов, оптимизированных селекторов, кешированных изображений и профилирования.
Улучшение паттернов React-хранилищ Zustand
Команды React могут сталкиваться с устаревшим состоянием, особенностями времени рендеринга и ошибками асинхронных действий при использовании Zustand. Этот навык дает прямые паттерны для хранилищ, селекторов, производного состояния, тестирования, отладки и персистентности.
Надежное развертывание React-приложений
Настройка развертывания React может быть повторяющейся и подверженной ошибкам. Этот навык предоставляет практические примеры для Vercel, Netlify, Docker, CI/CD, окружений и мониторинга.
Создавайте надежные сторы Zustand для React Native
Команды React Native часто теряют время из-за устаревшего состояния, тайминга асинхронных действий и лишних рендеров. Этот навык предоставляет паттерны Zustand, которые упрощают понимание, тестирование и отладку поведения сторов.
Применение паттернов стилизации React Native
Стилизация React Native может становиться непоследовательной между темами, экранами и платформами. Этот навык дает практические паттерны NativeWind и BrandColors для приложений Expo.
Улучшение наблюдаемости React Native
Тихие сбои и слабые сообщения об ошибках затрудняют диагностику мобильных багов. Этот навык дает практические паттерны React Native для логов, ошибок, трассировки и безопасной отправки отчетов.
Создавайте fullstack-приложения с рекомендациями senior-разработчика
от alirezarezvani
Fullstack-проекты часто требуют согласованной настройки, выбора архитектуры и проверок качества. Этот навык предоставляет скрипты и справочные материалы для работы с React, Next.js, Node.js, GraphQL и PostgreSQL.
Реализация React View Transitions
от vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.
Создание типобезопасных компонентов React
от softaworks
Работа с React и TypeScript часто требует точных типов для событий, хуков и маршрутов. Этот skill предоставляет сфокусированные паттерны для типизированных компонентов, API React 19 и маршрутизации.
Создание готовых к промышленной эксплуатации фронтенд-функций
от davila7
Фронтенд-командам нужны согласованные рекомендации по React и Next.js для разных проектов. Этот навык предоставляет справочные рабочие процессы, практики обеспечения качества и вспомогательные скрипты для анализа фронтенда.
Оптимизация производительности Next.js
от Atman36
Приложения Next.js могут замедляться из-за больших бандлов, слабого кэширования и неоптимизированных медиа. Этот навык помогает Claude, Codex и Claude Code выполнять целевые улучшения производительности для продакшен-приложений.
Оптимизация производительности React и Next.js
от vercel-labs
Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.