skills.rest
menfem
menfemCOMMUNITY
Explore all skills by this author →
Website𝕏@menfemmGitHub

frontend

Create Next.js 15 components with type-safe Tailwind styling and Zod validation.

Updated Aug 23, 2026
Search Tags:#React#frontend#UI/UX#components#Next.js#forms#Tailwind CSS
One-click install
npx skills add https://github.com/menfem/menfem-vercel --skill frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/menfem/menfem-vercel/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/menfem/menfem-vercel --skill frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Frontend development often suffers from inconsistent UI, slow component creation, and deviation from best practices. This skill provides a structured approach to building Next.js 15 components, ensuring consistency, type safety, and adherence to the project's feature-based architecture and styling patterns.

Core Features & Use Cases

  • Three-Tier Component System: Guides component placement (Base UI, Shared, Feature-specific) for maintainability.
  • Type-Safe Styling: Leverages Tailwind CSS and class-variance-authority for consistent, variant-driven UI.
  • Enhanced Form System: Provides patterns for robust, type-safe forms with Zod validation and server actions.
  • Use Case: A developer needs to create a new "Product Card" component. Use this skill to guide them to use the feature-component.tsx template, apply menfem-brand styling, and integrate it with the products feature, ensuring it's consistent with existing UI.

Quick Start

To implement a new frontend component, specify its purpose and location.

Example: "Create a new base UI button component with default and outline variants." "Implement a client-side form for user input with persistence." "Build a feature-specific card for displaying video content."