New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Development

by avibebuilder in avibebuilder/claude-prime

A skill your agent uses for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer.

MITAuto-check passedFrontend & Design

Install Frontend Development

skills CLI
$ npx skills add avibebuilder/claude-prime --skill frontend-development -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install avibebuilder/claude-prime frontend-development --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/avibebuilder/claude-prime.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/starter-skills/frontend-development .claude/skills/frontend-development && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-development
GitHub stars
120
Token cost
~1.3k tokens
SKILL.md length
511 words
Files
17 (incl. references)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer.

  • Works in 5 steps: Check file structure — App Router or… → Identify the feature boundary — What… → Start with Server Component — Only add… → …
  • ANY work involving React
  • SKILL.md covers Architecture Decisions, Gotchas, Quick Start and References, plus 1 more section
  • Calls npx

What it does

Frontend Development is an agent skill from avibebuilder/claude-prime. Use this skill for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer. This includes building components and pages, but equally covers debugging and fixing frontend issues: CSS/Tailwind classes not applying, form validation behavior, hydration mismatches between server and client renders, styling bugs, layout shifts, and rendering problems. Also use for refactoring components (e.g., splitting Server vs Client Components), data fetching patterns, state management, bundle optimization…

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 20 other files, including reference files (for example `references/biome.md`, `references/conventions.md` and `references/data-fetching/axios.md`).

It sits in Frontend & Design, covering Frontend development, CSS and styling and State management. It works with Tailwind CSS, Next.js, React and TypeScript. The repository describes itself as: You've heard Claude Code can do amazing things. Skills, hooks, agents, memory systems — but who has time to figure all that out? Claude Prime sets it up for you in one command. The licence is MIT.

When your agent uses it

  • ANY work involving React
  • Tailwind in the browser layer
  • Refactoring components (e.g.
  • Splitting Server vs Client Components)

Example prompts

  • “/frontend-development”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Check file structure — App Router or plain React? Check references below.
  2. Identify the feature boundary — What feature does this work belong to?
  3. Start with Server Component — Only add 'use client' when you hit a wall
  4. Name files specifically — login-form.tsx not form.tsx. Must be grep-findable.
  5. Match existing patterns — Read 2-3 similar files before creating new ones

What it can do on your machine

Read from SKILL.md and the folder at commit 80bcfa4. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • nextjs.org
    • react.dev
    • typescriptlang.org
    • tailwindcss.com
    • ui.shadcn.com
    • diceui.com
    • tanstack.com
    • trpc.io
    • zustand.docs.pmnd.rs
    • react-hook-form.com
    • zod.dev
    • biomejs.dev
    • nuqs.47ng.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Development loads about 1.3k tokens when it runs, and up to ~9.9k if it reads all its reference files. Until then it costs about 189 tokens; SKILL.md has 511 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~189
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~9.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from avibebuilder/claude-prime at commit 80bcfa4, republished under its MIT licence (© avibebuilder). 511 words, ~1,270 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-development/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.
name
frontend-development
description
Use this skill for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer. This includes building components and pages, but equally covers debugging and fixing frontend issues: CSS/Tailwind classes not applying, form validation behavior, hydration mismatches between server and client renders, styling bugs, layout shifts, and rendering problems. Also use for refactoring components (e.g., splitting Server vs Client Components), data fetching patterns, state management, bundle optimization, and frontend tooling. If the problem involves what users see or interact with in a web browser — whether building, fixing, or refactoring — use this skill. Not for backend APIs, databases, infrastructure, or DevOps.

Frontend Development

Project-specific patterns for React/Next.js/TypeScript frontend work.

Architecture Decisions

Server-First Boundaries

Start with Server Components. Only add 'use client' when you need interactivity, state, or browser APIs. Extract only the interactive leaf — not the entire page or section.

Colocation Over Centralization

Types, hooks, and utilities that serve one feature live in that feature's directory. Only truly shared code goes in global directories.

Composition Over Customization

Compose existing components rather than adding props/variants. shadcn/ui components are meant to be copied and modified. Build up from primitives.

Data Flows Down, Events Flow Up

Server fetches data and passes it as props. Client components handle interactions and call server actions. Never fetch in client components what could be fetched on the server.

Gotchas

  • 'use client' does NOT mean "runs only in the browser" — it runs on the server during SSR too. It means "include in the client bundle." Putting secrets or DB calls in a 'use client' file will leak them.
  • Importing a Server Component into a Client Component makes it a Client Component. The boundary propagates DOWN. Pass server content as children props instead.
  • useEffect with empty deps fires AFTER paint — use useLayoutEffect for DOM measurements that affect layout, but never in Server Components.
  • Next.js fetch() caches by default in App Router. Add { cache: 'no-store' } or revalidate: 0 for data that must be fresh. Forgetting this causes stale data bugs that only appear in production.
  • Tailwind classes are purged at build time — dynamically constructed class names like bg-${color}-500 will be missing. Use complete class names or safelist them.
  • key prop on mapped elements must be stable and unique. Using array index as key causes subtle bugs when list items are reordered, inserted, or deleted.
  • useSearchParams() requires a <Suspense> boundary in Next.js App Router or the entire page becomes client-rendered.
  • shadcn/ui components are source code, not a library. After npx shadcn-ui add, the component lives in YOUR codebase — modify it directly, don't wrap it.
  • React Hook Form's register() returns a ref — don't also pass your own ref to the same input without merging them.
  • async Server Components that throw redirect() or notFound() must NOT be wrapped in try/catch — these work by throwing special errors that Next.js catches upstream.
Show full SKILL.md (145 more words)Show less

Quick Start

  1. Check file structure — App Router or plain React? Check references below.
  2. Identify the feature boundary — What feature does this work belong to?
  3. Start with Server Component — Only add 'use client' when you hit a wall
  4. Name files specifically — login-form.tsx not form.tsx. Must be grep-findable.
  5. Match existing patterns — Read 2-3 similar files before creating new ones

References

When you need...Read
File naming, imports, exportsconventions.md
Next.js App Router patternsoverview.md
React component patternsoverview.md
TypeScript project patternstypescript.md
shadcn/ui + Dice UI usageshadcn.md
Tailwind configurationtailwind.md
Data fetching (tRPC, TanStack, axios)overview.md
Biome/linter configbiome.md

Official Resources

For general framework docs beyond project-specific patterns, consult:

FrameworkURL
Next.jshttps://nextjs.org/docs
Reacthttps://react.dev
TypeScripthttps://www.typescriptlang.org/docs
Tailwind CSShttps://tailwindcss.com/docs
shadcn/uihttps://ui.shadcn.com/docs
Dice UIhttps://www.diceui.com/docs
TanStack Queryhttps://tanstack.com/query/latest/docs
tRPChttps://trpc.io/docs
Zustandhttps://zustand.docs.pmnd.rs
React Hook Formhttps://react-hook-form.com
Zodhttps://zod.dev
Biomehttps://biomejs.dev
nuqshttps://nuqs.47ng.com

© avibebuilder, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 16 other files (references) in .claude/starter-skills/frontend-development of avibebuilder/claude-prime.

  • SKILL.md
  • references/biome.md
  • references/conventions.md
  • references/data-fetching/axios.md
  • references/data-fetching/overview.md
  • references/data-fetching/tanstack.md
  • references/data-fetching/trpc-tanstack.md
  • references/nextjs/file-structure.md
  • references/nextjs/overview.md
  • references/nextjs/patterns.md
  • references/react/file-structure.md
  • references/react/overview.md
  • references/react/patterns.md
  • references/react/state.md
  • references/shadcn.md
  • references/tailwind.md
  • references/typescript.md

Open the folder on GitHubat commit 80bcfa4

Compare with similar skills

Frontend Development next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Development compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Development this skillavibebuilder/claude-prime120—~1.3kAutomated safety check: PassMIT
Oma Frontendfirst-fluke/oh-my-agent1.3k—~2.5kAutomated safety check: PassMIT
Oma Frontendfirst-fluke/oh-my-agent1.3k—~3.2kAutomated safety check: PassMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Ss Learnbitjaru/styleseed970—~1.3kAutomated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0

Similar skills

  • Oma Frontend

    first-fluke/oh-my-agent

    Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment.

    1.3k GitHub stars~2.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Oma Frontend

    first-fluke/oh-my-agent

    Implement or modify web UI in React, Next.js, or Angular. An agent skill from first-fluke/oh-my-agent.

    1.3k GitHub stars~3.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    970 GitHub stars~1.3k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Frontend & DesignAuto-check: notes

More from avibebuilder/claude-prime

All 19 skills in this repo

  • Diagnose

    avibebuilder/claude-prime

    Investigate unexpected behavior and mysterious bugs. An agent skill from avibebuilder/claude-prime.

    120 GitHub starsUsed in 1 repo~1.2k tokens
    Auto-check passed

  • Frontend Design

    avibebuilder/claude-prime

    Builds distinctive, production-grade UIs that avoid generic AI aesthetics.

    120 GitHub stars~2.1k tokensUpdated 4 mo ago
    Auto-check passed

  • Media Processor

    avibebuilder/claude-prime

    Specialized visual and multimedia processing tools. An agent skill from avibebuilder/claude-prime.

    120 GitHub stars~1.2k tokensUpdated 4 mo ago
    Auto-check: notes

  • Skill Creator

    avibebuilder/claude-prime

    A skill your agent uses when the user wants to work on a Claude Code skill file (SKILL.md): writing one from scratch, testing whether an existing one works well, running evals or benchmarks…

    120 GitHub stars~8.2k tokensUpdated 4 mo ago
    Auto-check passed

  • Self Evolve

    avibebuilder/claude-prime

    The single config quality skill. An agent skill from avibebuilder/claude-prime.

    120 GitHub stars~1.9k tokensUpdated 4 mo ago
    Auto-check passed

  • Cook

    avibebuilder/claude-prime

    Implement, build, create, or add any feature, endpoint, page, component, or functionality.

    120 GitHub stars~970 tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Frontend Development

What does Frontend Development do?

A skill your agent uses for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer. Frontend Development is an agent skill from avibebuilder/claude-prime.js, TypeScript, or Tailwind in the browser layer.

When should I use Frontend Development?

Frontend Development fits situations like: ANY work involving React; tailwind in the browser layer; refactoring components (e.g; splitting Server vs Client Components).

How do I install Frontend Development in Claude Code?

Run `npx skills add avibebuilder/claude-prime --skill frontend-development -a claude-code`. Or copy the skill folder (.claude/starter-skills/frontend-development in avibebuilder/claude-prime) into .claude/skills/frontend-development in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Development in Codex?

Run `npx skills add avibebuilder/claude-prime --skill frontend-development -a codex`. Or copy the skill folder (.claude/starter-skills/frontend-development in avibebuilder/claude-prime) into .agents/skills/frontend-development in your project. Codex loads it when a task matches its description.

Can I use Frontend Development in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add avibebuilder/claude-prime --skill frontend-development -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-development, .gemini/skills/frontend-development, .github/skills/frontend-development and .opencode/skills/frontend-development in your project.

What does Frontend Development need to run?

Going by SKILL.md and its folder, Frontend Development needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Frontend Development access the network?

SKILL.md names 13 domains. As links in the text: nextjs.org, react.dev, typescriptlang.org, tailwindcss.com, ui.shadcn.com, diceui.com, tanstack.com, trpc.io, zustand.docs.pmnd.rs, react-hook-form.com, zod.dev, biomejs.dev and nuqs.47ng.com. This is read from the text; nothing was executed.

Is Frontend Development safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Development use?

Frontend Development is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Development use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8.6k tokens, read only when the agent opens those files.

What are the alternatives to Frontend Development?

Skills that share tags, products or a category with Frontend Development: Oma Frontend (first-fluke/oh-my-agent, 1.3k stars), Oma Frontend (first-fluke/oh-my-agent, 1.3k stars), Coss (crafter-station/petdex, 4.2k stars) and Ss Learn (bitjaru/styleseed, 970 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Development?

avibebuilder (a GitHub organization) maintains it in avibebuilder/claude-prime, which has 120 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on May 16, 2026.

Source: avibebuilder/claude-prime on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.