Frontend Dev Guidelines
davila7/claude-code-templatesBuilding a modern React app with TypeScript requires clear guidelines. This set of patterns helps you create components, fetch data, and organize files efficiently. It covers Suspense-based data fetching, lazy loading, and MUI v7 styling.
You will learn how to set up routes with TanStack Router and use TanStack Query for data. The skill also includes tips for performance optimization and TypeScript best practices. Each section provides checklists and code examples to follow.
Whether you are creating a new feature or a simple component, these guidelines keep your code consistent and fast. They are designed for frontend developers who want a modern, efficient workflow.
Add Frontend Dev Guidelines skill to your workflow
Global
mkdir -p ~/.claude/skills/frontend-dev-guidelinesProject
mkdir -p .claude/skills/frontend-dev-guidelinesSource Repository
More Frontend Development Claude Code Skills
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density