frontend

Implement standardized React and Next.js UI patterns with type-safe forms.

Updated Aug 27, 2026

Search Tags:#typescript #frontend #react #styling #forms #nextjs #ui-patterns

Ready to run

npx skills add https://github.com/bulbulogludemir/krabby --skill frontend-bulbulogludemir

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/bulbulogludemir/krabby/tree/main/skills/frontend
Command: npx skills add https://github.com/bulbulogludemir/krabby --skill frontend-bulbulogludemir

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often suffers from inconsistent patterns, boilerplate, and fragmented guidance for building React/Next.js UIs. This skill consolidates proven frontend practices to standardize components, forms, and styling across projects.

Core Features & Use Cases

Server vs Client Component guidelines and when to choose each
State management strategies (React Query, Zustand) and common patterns
Form handling, validation, accessibility, and UX best practices with TypeScript examples

Quick Start

Create a responsive React component that uses a server component by default and switches to a client component for interactivity, including form validation with Zod.

Frequently Asked Questions about frontend

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

FAQPage Schema

How do I decide between server and client components in Next.js?▼

Next.js server components handle data fetching on the server by default, while client components manage interactivity using state and event handlers. This skill provides guidelines to standardize the selection process for React projects.

What is the best way to handle form validation and accessibility in React?▼

Handling form validation in React requires combining Zod for schema validation with accessible HTML markup and TypeScript for type safety. This skill consolidates form handling, validation, and UX best practices to ensure accessible and robust inputs.

How do I manage state in Next.js using React Query and Zustand?▼

Managing state in Next.js with React Query and Zustand involves separating server state from client state. This skill outlines common state management patterns to standardize data fetching and client stores across your project.

How to standardize UI styling and loading states across React modules?▼

Standardizing UI styling across React modules requires applying reusable templates and consistent guidelines for loading states. This skill implements UI patterns to ensure consistent styling and predictable user experiences across pages.

Can I use this frontend skill for TypeScript projects without extra dependencies?▼

Yes, this frontend skill works for TypeScript projects by providing type-safe component guidelines and templates without requiring additional dependencies. It ensures type safety and consistent patterns directly in your React codebase.