Frontend React / Next.js UI Pack

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

Compatibility88

Build Stack With This Pack

Compatible Models

GPT-5.5
Claude Sonnet
Gemini

Inside The Pack

prompts
rules
workflow templates
QA checklist

Included Workflows

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

Install Skill Pack

Download through the server-checked manifest API, run the installer from this project root, then restart Codex.

Download JSON

Install command

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

Codex skills install into $CODEX_HOME/skills. The installer does not overwrite existing skill folders.

{
  "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"
        }
      ]
    }
  ]
}

How to use it

Pick the model and agent that match the task pressure: coding, documents, automation or private local work.

Attach only the MCP servers needed for that workflow and verify permissions before exposing files or secrets.

Run the pack checklist before delivery so prompts, rules and validation steps stay consistent.