{"enrichment":{"faq":[{"a":"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.","q":"What frontend patterns does this skill cover for modern web frameworks?"},{"a":"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.","q":"How do I build UI components with Next.js using these patterns?"},{"a":"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.","q":"What authentication flows and protected routes does Frontend Patterns teach?"},{"a":"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.","q":"How can I implement form validation with React Hook Form in Frontend Patterns?"},{"a":"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.","q":"What accessibility and responsive design guidance does this skill provide?"},{"a":"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.","q":"Does Frontend Patterns cover analytics event tracking and feature flags?"}],"shadow_tags":["next-js-patterns","react-component-design","auth-implementation","form-handling","event-analytics","a11y-standards","responsive-layout","feature-flags"],"summary_rewrite":"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."},"files":[{"bytes":7829,"path":".agents/skills/frontend-patterns/SKILL.md","sha256":"295334e72395f65b86404cd238fc61e291c717c67df47440355cb8a16256d2f0","url":"https://skillfed.io/files/bybren-llc/safe-agentic-workflow/frontend-patterns/cfcd2784/SKILL.md"}],"id":"bybren-llc/safe-agentic-workflow/frontend-patterns","links":{"html":"https://skillfed.io/bybren-llc/safe-agentic-workflow/frontend-patterns","md":"https://skillfed.io/bybren-llc/safe-agentic-workflow/frontend-patterns.md","repo":"https://github.com/bybren-llc/safe-agentic-workflow"},"meta":{"agents_supported":["claude-code","gemini"],"first_seen":"2026-07-28","forks":83,"language":"Shell","last_updated":"2026-07-20","license":"MIT","name":"frontend-patterns","publisher":"bybren-llc","stars":383},"relations":{"similar":[{"id":"shep-ai/shep/shadcn-ui"},{"id":"giuseppe-trisciuoglio/developer-kit/shadcn-ui"},{"id":"dirnbauer/webconsulting-skills/shadcn-ui"},{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"MajesteitBart/TalentMatcher/shadcn-ui-expert"},{"id":"elophanto/EloPhanto/shadcn"},{"id":"binjuhor/shadcn-lar/ui-styling"},{"id":"nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"},{"id":"mrgoonie/claudekit-skills/ui-styling"},{"id":"gocallum/nextjs16-agent-skills/shadcn-skills"}]},"slug":{"owner":"bybren-llc","repo":"safe-agentic-workflow","skill":"frontend-patterns"},"version":"cfcd2784"}