frontend-patterns
Frontend Patterns provides standardized approaches for constructing UI components, pages, authentication flows, and analytics integration across modern web frameworks. It covers server and client component distinctions, protected route implementation, form handling with validation, and accessibility requirements to maintain consistency throughout your project.
Frontend Patterns helps you build consistent UI components and pages using established patterns for modern frameworks, auth, and analytics.
AI-generated summary based on this skill's SKILL.md
Install
bybren-llc/safe-agentic-workflow/frontend-patterns · repository language: Shell
git clone https://github.com/bybren-llc/safe-agentic-workflow
cp -r safe-agentic-workflow/.agents/skills/frontend-patterns ~/.claude/skills/frontend-patternsnpx skillfed install bybren-llc/safe-agentic-workflow/frontend-patternsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What frontend patterns does this skill cover for modern web frameworks?
Frontend Patterns provides standardized approaches for constructing UI components, pages, authentication flows, and analytics integration across modern web frameworks like Next.js and React. The skill emphasizes building consistent UI components and pages using established patterns, implementing authentication flows and protected routes, adding form validation and analytics event tracking, and ensuring accessibility and responsive design compliance throughout your project.
How do I build UI components with Next.js using these patterns?
Frontend Patterns covers UI component construction with Next.js by distinguishing between server and client components, establishing import conventions, and providing standardized component patterns. The skill guides you through building consistent, reusable components that follow established conventions, helping you maintain uniformity across your application while leveraging Next.js capabilities for both server-side and client-side rendering.
What authentication flows and protected routes does Frontend Patterns teach?
Frontend Patterns covers authentication flows and route protection through server component patterns and admin verification approaches. The skill teaches how to implement authentication checks, protect routes effectively, and organize route structures using Next.js App Router, ensuring your application securely manages user access and authentication states across different page types.
How can I implement form validation with React Hook Form in Frontend Patterns?
Frontend Patterns provides form handling patterns using React Hook Form combined with Zod validation. The skill teaches standardized form patterns that integrate validation rules, manage form state efficiently, and maintain consistency across your application's forms while ensuring data integrity and user experience.
What accessibility and responsive design guidance does this skill provide?
Frontend Patterns includes an accessibility checklist for web apps and responsive design patterns using Tailwind CSS with mobile-first approaches. The skill ensures you meet accessibility requirements including keyboard navigation and covers responsive design patterns to maintain consistency and compliance throughout your project across all device sizes.
Does Frontend Patterns cover analytics event tracking and feature flags?
Frontend Patterns covers analytics integration including event tracking with PostHog and feature flags implementation. The skill teaches standardized approaches for adding analytics events throughout your application and integrating feature flags, enabling you to track user behavior and control feature rollouts while maintaining consistent patterns across your codebase.
SKILL.md
rendered from the published skill — quoted content, verbatim
Frontend Patterns Skill
> TEMPLATE: This skill uses {{PLACEHOLDER}} tokens. Replace with your project values before use.
Purpose
Ensure consistent frontend development using established patterns for your framework (Next.js App Router, React, etc.), authentication provider, UI component library, and analytics platform.
When This Skill Applies
- Building new UI components or pages
- Implementing authentication flows
- Adding forms with validation
- Integrating analytics events
- Creating protected/authenticated routes
- Working with component libraries (shadcn/ui, Radix, etc.)
Server vs Client Components
```typescript // SERVER COMPONENT (default) - Use for: // - Data fetching // - Auth checks // - SEO-critical content import { auth } from "{{AUTH_SERVER_IMPORT}}";
export default async function DashboardPage() { const { userId }
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
.agents/skills/frontend-patterns/SKILL.md
.agents/skills/frontend-patterns/assets/.gitkeep
.agents/skills/frontend-patterns/references/.gitkeep
.agents/skills/frontend-patterns/scripts/.gitkeep