Frontend Builder

This one teaches Claude to build React and Next.js apps following solid architectural patterns: component composition, state proximity, and performance optimization. It passed audits from Gen Agent Trust Hub, Socket, and Snyk, which is reassuring. The repository has 28 stars, so it's still early but someone's clearly using it. If you're tired of Claude generating messy frontend code with props drilled everywhere and no thought for bundle size, this could tighten things up. The principles are straightforward, nothing revolutionary, but that's probably the point. Worth trying if you're doing serious frontend work with Claude and want more consistent output.

GitHub stars: 33
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill 'Frontend Builder' --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Builder

Build maintainable, performant React and Next.js frontends.

Core Principles

1. Component Composition

Break UI into small, reusable, single-purpose components

2. State Proximity

Keep state as close to where it's used as possible

3. Performance by Default

Optimize rendering, code splitting, and asset loading

4. Developer Experience

Clear naming, consistent patterns, helpful errors

Framework Selection

React (Vite) vs. Next.js

Use React + Vite when:

Client-side only application
No SEO requirements
Simple deployment (static hosting)
Faster initial setup

Use Next.js when:

SEO important (marketing sites, blogs, e-commerce)
Server-side rendering needed
API routes required
File-based routing preferred
Image optimization critical

Recommended for most projects: Next.js (App Router)

Component Architecture

Component Types

1. Page Components (Route entry points):

// app/users/page.tsx (Next.js App Router)
export default function UsersPage() {
  return (
    <div>
      <Header />
      <UserList />
      <Footer />
    </div>
  )
}

SKILL.md on GitHub