Frontend React / Next.js UI Pack

Component planning, App Router UI patterns and accessible interaction checks.

Совместимость88

Собрать стек с этим паком

Совместимые модели

GPT-5.5
Claude Sonnet
Gemini

Внутри пака

prompts
rules
workflow templates
QA checklist

Включенные workflow

Responsive pass
Component state checklist
Accessibility review
Build-safe UI edits

Установить skill pack

Скачай через серверно-проверенный manifest API, запусти installer из корня проекта и перезапусти Codex.

Скачать JSON

Команда установки

node scripts/install-skill-pack.mjs ./frontend-nextjs-ui.skillpack.json

Codex skills устанавливаются в $CODEX_HOME/skills. Installer не перезаписывает существующие папки skills.

{
  "schemaVersion": 1,
  "kind": "artificial-search.skill-pack",
  "id": "frontend-nextjs-ui",
  "name": "Frontend React / Next.js UI Pack",
  "summary": "Component planning, App Router UI patterns and accessible interaction checks.",
  "tier": "Free",
  "compatibilityScore": 88,
  "notice": "This installs Codex skill files from the pack manifest. MCP servers still require a separate verified mcp.json configuration.",
  "install": {
    "target": "$CODEX_HOME/skills",
    "command": "node scripts/install-skill-pack.mjs ./frontend-nextjs-ui.skillpack.json",
    "steps": [
      "Download this manifest as frontend-nextjs-ui.skillpack.json.",
      "Run the installer from the Artificial Search project root.",
      "Restart Codex after installation so the new skills are loaded."
    ]
  },
  "skills": [
    {
      "id": "frontend-nextjs-ui-rules",
      "name": "Frontend React / Next.js UI Pack Rules",
      "description": "Rules skill for Frontend React / Next.js UI Pack. Component planning, App Router UI patterns and accessible interaction checks.",
      "files": [
        {
          "path": "SKILL.md",
          "content": "---\nname: frontend-nextjs-ui-rules\ndescription: \"Rules skill for Frontend React / Next.js UI Pack. Component planning, App Router UI patterns and accessible interaction checks.\"\n---\n\n# Frontend React / Next.js UI Pack Rules\n\nUse this skill when a task matches the Frontend React / Next.js UI Pack pack.\n\n## Pack Summary\n\nComponent planning, App Router UI patterns and accessible interaction checks.\n\n## Compatible Models\n\n- GPT-5.5\n- Claude Sonnet\n- Gemini\n\n## Pack Contents\n\n- prompts\n- rules\n- workflow templates\n- QA checklist\n\n## Operating Rules\n\n- Use the pack scope before choosing a model, MCP server or prompt chain.\n- Keep generated outputs tied to explicit user intent and validated project context.\n- Do not expose secrets, private files or credentials through MCP tools.\n"
        }
      ]
    },
    {
      "id": "frontend-nextjs-ui-workflow",
      "name": "Frontend React / Next.js UI Pack Workflow",
      "description": "Workflow skill for Frontend React / Next.js UI Pack. Component planning, App Router UI patterns and accessible interaction checks.",
      "files": [
        {
          "path": "SKILL.md",
          "content": "---\nname: frontend-nextjs-ui-workflow\ndescription: \"Workflow skill for Frontend React / Next.js UI Pack. Component planning, App Router UI patterns and accessible interaction checks.\"\n---\n\n# Frontend React / Next.js UI Pack Workflow\n\nUse this skill when a task matches the Frontend React / Next.js UI Pack pack.\n\n## Pack Summary\n\nComponent planning, App Router UI patterns and accessible interaction checks.\n\n## Compatible Models\n\n- GPT-5.5\n- Claude Sonnet\n- Gemini\n\n## Pack Contents\n\n- prompts\n- rules\n- workflow templates\n- QA checklist\n\n## Operating Rules\n\n- Responsive pass\n- Component state checklist\n- Accessibility review\n- Build-safe UI edits\n"
        }
      ]
    },
    {
      "id": "frontend-nextjs-ui-validation",
      "name": "Frontend React / Next.js UI Pack Validation",
      "description": "Validation skill for Frontend React / Next.js UI Pack. Component planning, App Router UI patterns and accessible interaction checks.",
      "files": [
        {
          "path": "SKILL.md",
          "content": "---\nname: frontend-nextjs-ui-validation\ndescription: \"Validation skill for Frontend React / Next.js UI Pack. Component planning, App Router UI patterns and accessible interaction checks.\"\n---\n\n# Frontend React / Next.js UI Pack Validation\n\nUse this skill when a task matches the Frontend React / Next.js UI Pack pack.\n\n## Pack Summary\n\nComponent planning, App Router UI patterns and accessible interaction checks.\n\n## Compatible Models\n\n- GPT-5.5\n- Claude Sonnet\n- Gemini\n\n## Pack Contents\n\n- prompts\n- rules\n- workflow templates\n- QA checklist\n\n## Operating Rules\n\n- Check the recommended model and agent against the task constraints.\n- Verify every MCP server permission before using the generated config.\n- Run the relevant lint, build, smoke or review gate before delivery.\n"
        }
      ]
    }
  ]
}

Как использовать

Выбери модель и агента под тип задачи: кодинг, документы, автоматизация или приватная локальная работа.

Подключай только MCP серверы, нужные для workflow, и проверяй permissions до доступа к файлам или секретам.

Перед сдачей прогоняй checklist пака, чтобы prompts, rules и проверки оставались последовательными.