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
Decision gist · record as of 2026-07-20
Frontend Patterns helps you build consistent UI components and pages using established patterns for modern frameworks, auth, and analytics. 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.
Use it when
- Frontend Patterns covers UI component construction with Next.js by distinguishing between server and client components.
- Frontend Patterns covers authentication flows and route protection through server component patterns and admin verification approaches.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
bybren-llc/safe-agentic-workflow/frontend-patterns · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build consistent UI components and pages using established patterns”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill guides you through initializing shadcn/ui, installing individual components, and configuring your project with Radix UI primitives and Tailwind CSS. Learn to build forms with validation, customize themes, and implement production-ready accessible components you own and control.
shadcn-ui guides you through initializing the component library, installing individual components via CLI, and building forms with validation. It covers button variants, dialogs, tables, toasts, and charts styled with Tailwind CSS and CSS variables for custom theming.
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation.
Shadcn Ui Expert helps you design and implement accessible React components using shadcn-ui, Tailwind CSS, and Radix UI. Get guidance on component selection, customization, and best practices across forms, layouts, dialogs, tables, and data displays. Works with Next.js, Vite, Remix, Astro, and other frameworks.
web-artifacts-builder enables you to generate sophisticated, multi-layered React applications and UI components directly within Claude Code. Designed for developers who need production-ready artifact generation with contemporary frameworks and build patterns, this skill streamlines the creation of interactive web experiences through structured, reusable component architecture.
Shadcn is a collection of accessible, copy-paste React components built on Tailwind CSS and Radix UI primitives. It includes form handling, dark mode support, pre-designed blocks, and an MCP server for safe component discovery and installation in Next.js projects.
More skills ui-styling (MIT) · artifacts-builder (Apache-2.0) · Shadcn Skills (unlicensed) · impeccable (Apache-2.0) · redis-patterns (Apache-2.0)