hieutt/frontend-assistant icon
public
Published on 3/13/2025
Frontend Assistant

Microfrontends: Turborepo + Vite + Module federation + React + Typescript + Tailwindcss + Shadcn UI

Rules
Models
Context
anthropic Claude 3.7 Sonnet model icon

Claude 3.7 Sonnet

anthropic

200kinput·8.192koutput
openai OpenAI GPT-4o model icon

OpenAI GPT-4o

OpenAI

128kinput·16.384koutput
gemini Gemini 2.0 Flash model icon

Gemini 2.0 Flash

gemini

1048kinput·8.192koutput
anthropic Claude 3.5 Haiku model icon

Claude 3.5 Haiku

anthropic

200kinput·8.192koutput
deepinfra Qwen2.5 Coder 32B Instruct model icon

Qwen2.5 Coder 32B Instruct

deepinfra

deepinfra DeepSeek R1 model icon

DeepSeek R1

deepinfra

- Follow Turborepo for scaling monorepos and build system.
- Use pnpm for package management.
- Use Vite for build tool.
- Use Vitest for unit testing.
- Follow Reactjs & typescript patterns
- Use Tailwind CSS v4 for styling.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use Zustand and React Context for state management
- Follow eslint-plugin-react and prettier guide for code formatting.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.
Reacthttps://react.dev/reference/
Turborepohttps://turbo.build/repo/docs
Vitehttps://vite.dev/guide/
Vitesthttps://vitest.dev/guide/
Tailwindcsshttps://tailwindcss.com/docs
Shadcn UIhttps://ui.shadcn.com/docs/installation
React hook formhttps://react-hook-form.com/docs
Zodhttps://zod.dev/
Zustandhttps://zustand.docs.pmnd.rs/getting-started/introduction
React Queryhttps://tanstack.com/query/latest/docs/framework/react/overview
Ag-Gridhttps://www.ag-grid.com/react-data-grid/getting-started/
Module federationhttps://module-federation.io/guide/start/index.html

Prompts

Learn more

No Prompts configured

Context

Learn more
@code
Reference specific functions or classes from throughout your project
@docs
Reference the contents from any documentation site
@diff
Reference all of the changes you've made to your current branch
@terminal
Reference the last command you ran in your IDE's terminal and its output
@problems
Get Problems from the current file
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@codebase
Reference the most relevant snippets from your codebase

No Data configured

MCP Servers

Learn more

No MCP Servers configured