#601

Global Rank · of 601 Skills

frontend-builder AI Agent Skill

View Source: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill frontend-builder

34

Installs

Frontend Builder

Overview

Builds maintainable, performant React and Next.js frontends using a server-first architecture. Covers component design, state management, data fetching, forms, styling, and performance optimization. Not for backend API design, database schema, or deployment infrastructure.

Quick Reference

Pattern Approach Key Points
Framework Next.js App Router (default), React + Vite (SPAs) Server-first rendering, file-based routing
Components Page, Feature, UI, Layout types Single responsibility, typed props, composition
Server vs Client Server Components default, 'use client' at leaf nodes Push interactivity to edges of component tree
State (local) useState, props, lift to parent Keep state close to where it is consumed
State (global) Context API (theme, auth), Zustand (complex) Avoid Context for frequently changing values
Data fetching Server Components (server), TanStack Query (client) Server Actions for mutations, revalidatePath for cache
Forms React Hook Form + Zod, or Server Actions + useActionState Schema validation, optimistic updates with useOptimistic
Styling Tailwind CSS v4 + shadcn/ui CSS-first config with @theme, OKLCH colors
Performance Suspense streaming, code splitting, memoization React.lazy(), next/dynamic, selective memo()
Error handling Error boundaries, error.tsx per route Wrap feature sections, not individual components

Common Mistakes

Mistake Correct Pattern
Adding 'use client' to every component Default to Server Components; add 'use client' only for interactivity
Giant multi-responsibility component Break into focused sub-components with single purposes
Placing all state at the top of the component tree Keep state as close to where it is consumed as possible
Using useEffect to compute derived data Use useMemo for derived values; reserve useEffect for side effects
Missing error boundaries around feature sections Wrap feature areas with error boundaries to prevent full-page crashes
Creating API routes for simple mutations Use Server Actions with 'use server' for form submissions and mutations
Passing non-serializable props to Client Components Props crossing server/client boundary must be serializable (no functions, classes)
Using tailwind.config.js with Tailwind v4 Use CSS-first configuration with @theme directive in CSS file
Fetching data in Client Components when Server Components suffice Fetch in Server Components by default; use TanStack Query only when client-side caching is needed

Delegation

When building frontends, delegate to specialized skills:

  • react-patterns -- React hooks, rendering patterns, and performance optimization
  • nextjs -- Next.js routing, middleware, and deployment configuration
  • tanstack-query -- Client-side data fetching, caching, and mutations
  • tanstack-form -- Complex form handling and field-level validation
  • tailwind -- Tailwind CSS utility patterns and responsive design
  • design-system -- Token hierarchy and component architecture
  • performance-optimizer -- Profiling, bundle analysis, and Core Web Vitals

References

  • Component Architecture -- Component types, folder structure, TypeScript patterns, and composition
  • Server Components -- Server/client boundary, Server Actions, Suspense streaming, and data flow
  • State Management -- useState, Context API, Zustand, and URL state patterns
  • Data Fetching -- TanStack Query, Server Components data, and cache revalidation
  • Forms and Validation -- React Hook Form, Zod schemas, Server Actions, and useActionState
  • Styling -- Tailwind CSS v4, shadcn/ui, CSS-first config, and responsive patterns
  • Performance and Errors -- Memoization, code splitting, Suspense streaming, and error boundaries

Installs

Installs 34
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install frontend-builder by running npx skills add oakoss/agent-skills --skill frontend-builder in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of frontend-builder, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Customer Support