Frontend development

Skill Ampli-Group/agentic-mobile-blueprint/.agents/skills/frontend-development

The production-ready foundation for shipping mobile and web apps. Auth, deployment, monitoring, and CI/CD — already wired together.

Install

npx -y skills add Ampli-Group/agentic-mobile-blueprint --skill frontend-development

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Next.js frontend app development patterns with App Router, Tailwind CSS v4, Zustand, and TanStack Query. Use when creating pages, components, or API routes in the frontend app.

SKILL.md

2.4 KB, as published. Nobody here has run it

Frontend Development

Stack

Next.js 16 (App Router, Turbopack), React 19, Tailwind CSS v4, Zustand 5, TanStack Query v5, react-hook-form + Zod 4, TypeScript strict mode.

Imports

Use @/ path alias for src/: @/lib/supabase, @/components/Button.

Client vs Server

Mark interactive/stateful components with 'use client'. Default is server component.

Styling

Tailwind CSS v4 with @theme tokens in src/app/globals.css:

@import 'tailwindcss';

@theme {
  --color-cream: #FCFAF7;
  --color-slate-deep: #1B2030;
  --color-emerald-glow: #10B981;
}

Add new design tokens in @theme, not in config files.

Supabase Clients

Three clients for different contexts:

Import	Use for	Context
`@/lib/supabase`	General public queries	Client, graceful fallback if env missing
`@/lib/supabase-browser`	Auth flows (login, signup)	Client (`'use client'`)
`@/lib/supabase-admin`	Admin operations	Server-only, `createAdminClient()`

// Client component — auth flow
import { supabaseBrowser } from '@/lib/supabase-browser';

// Server component / action — admin
import { createAdminClient } from '@/lib/supabase-admin';
const supabase = createAdminClient();

State Management

Zustand with persist middleware. Use partialize to persist only selected fields:

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useMyStore = create(
  persist(
    (set) => ({
      value: '',
      setValue: (v: string) => set({ value: v }),
    }),
    { name: 'my-store', partialize: (s) => ({ value: s.value }) }
  )
);

Providers

Composed in src/app/layout.tsx. Order: QueryProvider → PostHogProvider → children. Add new providers inside QueryProvider.

Forms

Use react-hook-form + @hookform/resolvers + Zod for validation:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({ email: z.string().email() });

const { register, handleSubmit } = useForm({
  resolver: zodResolver(schema),
});

Environment Variables

Public: NEXT_PUBLIC_*. Server-only: no prefix (e.g. SUPABASE_SERVICE_ROLE_KEY).