Создавайте фронтенды Next.js с современными паттернами
Современным проектам Next.js нужны согласованные паттерны для компонентов, маршрутизации, получения данных и стилизации. Этот навык дает Claude, Codex и Claude Code практические рекомендации по фронтенду для React 19 и Next.js 15.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/0chan-smc-frontend-dev-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «frontend-dev-guidelines». Создай маршрут списка продуктов с состояниями загрузки и ошибок.
Ожидаемый результат:
Навык порекомендовал бы страницу App Router, файл loading, границу ошибок, функциональные компоненты и получение данных в Server Component.
Использование «frontend-dev-guidelines». Проверь этот план интерактивного компонента формы.
Ожидаемый результат:
Навык проверил бы требования к Client Component, типизированные props, валидацию, Server Actions, использование Shadcn/ui и организацию классов Tailwind.
Использование «frontend-dev-guidelines». Улучши производительность страницы дашборда.
Ожидаемый результат:
Навык предложил бы Server Components, границы Suspense, оптимизированные изображения, работу со шрифтами и осторожное использование клиентских hooks.
All static findings are false positives caused by Markdown formatting, placeholder example code, or JSX snippets. No prompt injection, malicious intent, credential access, command execution, or real network behavior was found in SKILL.md.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/0chan-smc-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/0chan-smc-frontend-dev-guidelines.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>0Chan-smc. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8@techreport{0chan-smc-0chan-smc-frontend-dev-guidelines-2026,
author = {0Chan-smc},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8},
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: "frontend-dev-guidelines security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "0Chan-smc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:0chan-smc-frontend-dev-guidelines:audit:8"
description: "Skillstore immutable audit report identifier"
Навык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.
Почему этот вариант первый
briandai22-frontend-dev-guidelines
2026-09-09
0chan-smc-frontend-dev-guidelines
2026-09-09
bom-98-frontend-dev-guidelines
2026-09-09
sickn33-frontend-dev-guidelines
2026-09-09
dojocodinglabs-frontend-dev-guidelines
2026-09-09
dimon94-frontend-dev-guidelines
2026-09-09
diet103-frontend-dev-guidelines
2026-09-09
Спланировать новую страницу App Router с компонентами, UI загрузки, обработкой ошибок и паттернами получения данных.
Применять согласованные соглашения для Server Component, Client Component, TypeScript, Shadcn/ui и Tailwind CSS.
Проверить, соответствует ли функциональность Next.js современным практикам организации файлов, производительности и типизации.
Используй навык frontend-dev-guidelines, чтобы спланировать страницу Next.js 15 для списка постов с состояниями загрузки и ошибок.
Используй навык frontend-dev-guidelines, чтобы решить, какие части этой функциональности должны быть Server Components или Client Components.
Используй навык frontend-dev-guidelines, чтобы спроектировать поток формы с валидацией, Server Actions и компонентами форм Shadcn/ui.
Используй навык frontend-dev-guidelines, чтобы проверить мой план функциональности Next.js на проблемы с маршрутизацией, организацией файлов, производительностью и TypeScript.
Автор
0Chan-smcЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Репозиторий
https://github.com/0Chan-smc/claude-code-workflow-lab/tree/main/.claude/skills/frontend-dev-guidelinesСсылка
2e36836131679643f7a49e4cfff588d67adc404b
Актуальность поддержки
21.07.2026
Использование
191 загрузок · 636 просмотров
Структура файлов
📄 SKILL.md
Создание готовых к промышленной эксплуатации фронтенд-функций
от davila7
Фронтенд-командам нужны согласованные рекомендации по React и Next.js для разных проектов. Этот навык предоставляет справочные рабочие процессы, практики обеспечения качества и вспомогательные скрипты для анализа фронтенда.
Создавайте 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 и маршрутизации.
Оптимизация производительности Next.js
от Atman36
Приложения Next.js могут замедляться из-за больших бандлов, слабого кэширования и неоптимизированных медиа. Этот навык помогает Claude, Codex и Claude Code выполнять целевые улучшения производительности для продакшен-приложений.
Оптимизация производительности React и Next.js
от vercel-labs
Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.