Which tech stack does this skill support?

It is specifically configured for Next.js, Tailwind CSS, Shadcn UI, and modular frontend architectures used in the Cookmate project.

What is the primary purpose of the Frontend Context Loader?

It helps Claude skip the 'discovery' phase when working on the Cookmate frontend by providing direct paths to essential layouts, components, and module structures.

Can this skill be used for backend development?

This specific skill is optimized for the frontend context (apps/web/src). While Claude can still do backend work, this skill focuses on UI, layouts, and frontend modules.

Does it include specific UI patterns?

Yes, it specifically points Claude toward the AppShell, Topbar, and BottomNav patterns to ensure consistent navigation design.

How does this skill save tokens?

By providing a precise sequence of files to read, it prevents the AI from scanning unnecessary directories, significantly reducing the amount of context data processed.

Frontend Context Loader for Cookmate

Name: Frontend Context Loader for Cookmate
Author: RedBoardDev

byRedBoardDev

디자인 도구

Streamlines frontend development by providing immediate access to Next.js app structures, shared layouts, and UI patterns within the Cookmate repository.

소개

The Frontend Context Loader is a specialized productivity skill designed to minimize the time and tokens Claude spends exploring the Cookmate web application. By defining a prioritized sequence for loading critical files—including app layouts, shared providers, and domain-specific modules—this skill allows the AI to immediately understand the project's architecture. It specifically targets the Next.js app router, Tailwind configurations, and the Shadcn-based UI library, ensuring that any generated code or design changes remain consistent with the existing AppShell, navigation patterns, and mobile-responsive layouts.

주요 기능

Optimized search patterns for finding navigation and AppShell logic
0 GitHub stars
Prioritized loading of Next.js app routes and shared layouts
Rapid mapping of domain-specific modules like Recipes and Search
Direct indexing of UI primitives and Tailwind theme configurations
Reduced token consumption through targeted context discovery

사용 사례

Debugging layout and navigation issues across desktop and mobile views
Accelerating the onboarding process for new frontend tasks in the Cookmate repo
Ensuring UI consistency when building new modules or pages

소개

주요 기능

Optimized search patterns for finding navigation and AppShell logic
0 GitHub stars
Prioritized loading of Next.js app routes and shared layouts
Rapid mapping of domain-specific modules like Recipes and Search
Direct indexing of UI primitives and Tailwind theme configurations
Reduced token consumption through targeted context discovery

사용 사례

Debugging layout and navigation issues across desktop and mobile views
Accelerating the onboarding process for new frontend tasks in the Cookmate repo
Ensuring UI consistency when building new modules or pages