How does it handle styling?

It uses Tailwind CSS v4 utility classes exclusively, following a predefined color palette and responsive breakpoint system for desktop, tablet, and mobile.

Can it help with data mocking?

Yes, the skill includes patterns for creating TypeScript-typed mock data that mirrors database schemas for rapid UI prototyping and testing.

What routing library is used?

It implements React Router v7 using a nested resource-based routing pattern, organizing views into list, detail, and edit states.

Does it include pre-built UI components?

Yes, it provides standards for UI primitives such as Cards, Badges, Buttons, StatCards, and Modals to ensure visual consistency.

Which React version does this skill support?

The skill is specifically optimized for React 19 and utilizes modern functional component patterns exclusively.

PatriotForge Frontend Architect

Name: PatriotForge Frontend Architect
Author: aka-kolton

byaka-kolton

0•

Design Tools

Architects and implements enterprise-grade React frontends using TypeScript, Tailwind CSS v4, and React Router v7 patterns.

This skill streamlines the development of the PatriotForge ERP frontend by providing Claude with strict architectural guidelines and reusable UI patterns. It enforces a standardized directory structure and component conventions while leveraging the latest features of React 19 and Tailwind CSS v4. From complex nested routing to specialized ERP page layouts like dynamic builders and KPI dashboards, this skill ensures that all UI code is performant, type-safe, and visually consistent with the PatriotForge design system.

Key Features

01Complex ERP page patterns for lists, detail views, and dynamic builders

020 GitHub stars

03React 19 and strict TypeScript component generation

04Standardized UI primitives including Cards, Badges, and StatCards

05Tailwind CSS v4 utility-first styling and layout implementation

06React Router v7 resource-based routing architecture

Use Cases

01Creating dynamic forms with auto-save and live pricing logic

02Implementing standardized layout structures with Sidebar and TopBar navigation

03Building responsive ERP dashboards with role-based widget visibility

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aka-kolton/patriotforge-claude-plugin frontend

For use in Claude.ai and ChatGPT

Download Skill