prime-frontend

Analyzes frontend codebase structure, components, and conventions to build session context.

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/az9713/claude-code-hooks-tutorial --skill prime-frontend-az9713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prime-frontend
Source: https://github.com/az9713/claude-code-hooks-tutorial/tree/main/skills/.claude/skills/prime-frontend
Command: npx skills add https://github.com/az9713/claude-code-hooks-tutorial --skill prime-frontend-az9713

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting work on a large full-stack codebase wastes context window space when the agent loads backend code irrelevant to a UI task. This Skill primes the agent with only the frontend portion — components, routing, state management, and styling — so frontend work begins with focused, accurate understanding. ## Core Features & Use Cases - Targeted Frontend Analysis: Locates the frontend root (frontend/, client/, web/, app/), reads entry points, routing, state setup, and representative components while skipping unrelated backend code. - External Task Context: Optionally pulls Jira issues and Confluence pages via Atlassian MCP tools first, anchoring the analysis to actual acceptance criteria and specs. - Structured Summary Report: Produces a scannable report covering framework, component patterns, directory map, conventions, and current git state. - Use Case: At the start of a session scoped to a UI ticket like ACC-2, run the skill with the Jira key so the agent loads the issue's acceptance criteria and then maps the relevant React components and styling conventions before writing any code. ## Quick Start Ask the agent to prime the frontend context for this repository, optionally passing a Jira issue key such as ACC-2 to include its task context.

Frequently Asked Questions about prime-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load only frontend context into an AI coding session?▼

Run the prime-frontend skill at session start. It locates the frontend root via git ls-files, reads entry points, routing, state setup, and representative components, then outputs a structured summary while skipping backend code.

How to prime an AI agent with Jira issue context before coding?▼

Pass Jira issue keys as arguments, such as ACC-2 or ACC-2,ACC-3. The skill calls Atlassian MCP tools to fetch each issue's summary, description, and acceptance criteria before analyzing the codebase.

Does frontend priming work with Next.js and React projects?▼

Yes. The skill recognizes common roots like app/ for Next.js and src/ for frontend-only projects, and reads framework-specific files such as app/layout.tsx, pages/_app.tsx, next.config.ts, and vite.config.ts.

Can I include Confluence design docs in the context priming?▼

Yes. Pass numeric Confluence page ids as arguments and the skill fetches each page in markdown format via the Atlassian MCP integration, treating the content as supporting specs and requirements.

What happens if I run frontend priming without any arguments?▼

The external context step is skipped entirely and the skill proceeds directly to locating the frontend root, reading documentation and key files, and producing the codebase summary report.