Создание frontend-компонентов Next.js
Команды Next.js часто неправильно смешивают Server Components и Client Components. Этот навык предоставляет переиспользуемые паттерны для доступных, типизированных компонентов App Router.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "frontend-component" from https://skillstore.io/skills/asmayaseen-frontend-component.md and its manifest at https://skillstore.io/api/skills/asmayaseen-frontend-component/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «frontend-component». Спланировать защищенный маршрут dashboard в проекте Next.js App Router.
Ожидаемый результат:
Ответ определяет его как Client Component, потому что он использует hooks и navigation. Он включает состояния loading, redirect и authorization.
Использование «frontend-component». Улучшить компонент формы для sign up.
Ожидаемый результат:
Ответ разделяет form data, validation errors, API errors и loading state. Он также рекомендует доступные labels и понятную обратную связь при submit.
Использование «frontend-component». Добавить offline support в список задач.
Ожидаемый результат:
Ответ предлагает IndexedDB storage, sync status tracking, online recovery и error handling. Он отмечает необходимость проверки конфиденциальности для logging context.
Reviewed 107 static findings in SKILL.md. The dynamic imports, backticks, key matches, reconnaissance matches, and same-origin fetch are documentation examples, not executable malicious behavior. No prompt injection or data-exfiltration intent was found.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/asmayaseen-frontend-component/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-frontend-component/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/asmayaseen-frontend-component.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Asmayaseen. (2026). frontend-component security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-frontend-component/audits/8@techreport{asmayaseen-asmayaseen-frontend-component-2026,
author = {Asmayaseen},
title = {frontend-component security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/asmayaseen-frontend-component/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-component security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Asmayaseen"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/asmayaseen-frontend-component/audits/8"
identifiers:
- type: other
value: "skillstore:asmayaseen-frontend-component:audit:8"
description: "Skillstore immutable audit report identifier"
Генерировать планы типизированных компонентов, которые соблюдают границы Server и Client Component.
Создавать формы, защищенные маршруты, toasts, inline editing и состояния загрузки с согласованной структурой.
Проверять предложения по компонентам на соответствие ожиданиям доступности, TypeScript, Tailwind и Next.js App Router.
Используйте навык frontend-component, чтобы решить, должен ли мой новый компонент Next.js быть Server Component или Client Component. Объясните выбор.
Используйте навык frontend-component, чтобы описать структуру TypeScript-компонента для переиспользуемого виджета dashboard с props, loading state и классами Tailwind.
Используйте навык frontend-component, чтобы проверить этот план интерактивного компонента на пробелы в доступности WCAG 2.1 AA и предложить конкретные улучшения.
Используйте навык frontend-component, чтобы спланировать продвинутый компонент списка задач с drag and drop, offline sync, caching, error boundaries и logging с учетом конфиденциальности.
Автор
AsmayaseenЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
6eec4a59f63ff83440a84c18d1aef79743bc714e
Актуальность поддержки
26.07.2026
Использование
6 загрузок · 331 просмотров
Структура файлов
📄 SKILL.md
Проектирование надежных инструментов для агентов
Агенты дают сбои, когда названия инструментов, входные данные, выходные данные или ошибки неоднозначны. Этот навык дает практические шаблоны для описаний инструментов, схем, форматов ответов и тестирования.
Систематическая отладка проблем в ПО
Неструктурированное исправление ошибок тратит время впустую и может скрывать реальную причину сбоя. Этот навык проводит Claude, Codex и Claude Code через доказательный анализ первопричин.
Повышение надежности производственного сервиса
Командам, отвечающим за production, нужны четкие целевые показатели надежности и воспроизводимые практики работы с инцидентами. Этот навык предоставляет SRE-шаблоны для SLO, бюджетов ошибок, оповещений и postmortem-разборов.
Создание интерфейсов shadcn/ui в Next.js
Командам React нужны единообразные UI-паттерны, которые работают с современным Next.js. Этот навык предоставляет рекомендации по настройке shadcn/ui, примеры компонентов, валидацию форм, таблицы, боковые панели и паттерны темного режима.
Создание потоковых интерфейсов AI-чата
AI-чат в реальном времени кажется сломанным, когда пользователи не видят прогресс, состояние ответа или изменения интерфейса. Этот skill дает Claude, Codex и Claude Code шаблоны для жизненных циклов потоковой передачи, событий прогресса, клиентских эффектов и клиентских инструментов.
Диагностика деградации контекста
Длинные AI-сессии могут терять точность, когда контекст растет, содержит противоречия или отвлекающие материалы. Этот навык помогает Claude, Codex и Claude Code выявлять паттерны деградации и выбирать практические шаги по их снижению.
Создание готовых к промышленной эксплуатации фронтенд-функций
от 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 и маршрутизации.
Оптимизация производительности React и Next.js
от vercel-labs
Приложения React и Next.js часто теряют скорость из-за waterfalls, больших бандлов и предотвратимых повторных рендеров. Этот skill дает агентам конкретные правила для более безопасных изменений, ориентированных на производительность.
Создавайте современные приложения на React и Next.js
от sickn33
Проектам на React и Next.js часто нужны согласованные решения по настройке маршрутизации, компонентов, стилизации, данных, форм, тестов и развертывания. Этот навык дает Claude, Codex и Claude Code поэтапный рабочий процесс для планирования и разработки современных фронтенд-приложений.