React Frontend Development Guidelines

What it does

When your agent uses it

• Creating a new React component or page in this stack
• Setting up a new feature folder with API, hooks and types
• Fetching data with TanStack Query and Suspense
• Styling components with MUI v7

Example prompts

• “Create a settings page for notification preferences using Suspense and useSuspenseQuery.”
• “Set up a new billing feature folder with its API service, types and lazy-loaded route.”
• “Refactor this component so loading uses a Suspense boundary instead of an early-return spinner.”

Requirements

• A React 18, TypeScript and MUI v7 project, ideally with TanStack Router and Query

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

1. 1Lazy Load Everything Heavy: Routes, DataGrid, charts, editors
2. 2Suspense for Loading: Use SuspenseLoader, not early returns
3. 3useSuspenseQuery: Primary data fetching pattern for new code
4. 4Features are Organized: api/, components/, hooks/, helpers/ subdirs
5. 5Styles Based on Size: <100 inline, >100 separate
6. 6Import Aliases: Use @/, ~types, ~components, ~features
7. 7No Early Returns: Prevents layout shift
8. 8useMuiSnackbar: For all user notifications

What it can do on your machine

Read from SKILL.md and the folder at commit 07f75ce. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Frontend Development Guidelines loads about 2.9k tokens when it runs. Until then it costs about 101 tokens; SKILL.md has 709 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~101

When it runs · the whole SKILL.md, loaded when a task matches

~2.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from diet103/claude-code-infrastructure-showcase at commit 07f75ce, republished under its MIT licence (© diet103). 709 words, ~2,858 tokens.

name

frontend-dev-guidelines

description

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

// React & Lazy Loading
import React, { useState, useCallback, useMemo } from 'react';
const Heavy = React.lazy(() => import('./Heavy'));

// MUI Components
import { Box, Paper, Typography, Button, Grid } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

// TanStack Query (Suspense)
import { useSuspenseQuery, useQueryClient } from '@tanstack/react-query';

// TanStack Router
import { createFileRoute } from '@tanstack/react-router';

// Project Components
import { SuspenseLoader } from '~components/SuspenseLoader';

// Hooks
import { useAuth } from '@/hooks/useAuth';
import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';

// Types
import type { Post } from '~types/post';

features/
  my-feature/
    api/          # API service layer
    components/   # Feature components
    hooks/        # Custom hooks
    helpers/      # Utility functions
    types/        # TypeScript types

<Grid size={{ xs: 12, md: 6 }}>  // ✅ v7 syntax
<Grid xs={12} md={6}>             // ❌ Old syntax

import { createFileRoute } from '@tanstack/react-router';
import { lazy } from 'react';

const MyPage = lazy(() => import('@/features/my-feature/components/MyPage'));

export const Route = createFileRoute('/my-route/')({
    component: MyPage,
    loader: () => ({ crumb: 'My Route' }),
});

// ❌ NEVER - Causes layout shift
if (isLoading) {
    return <LoadingSpinner />;
}

// ✅ ALWAYS - Consistent layout
<SuspenseLoader>
    <Content />
</SuspenseLoader>

src/
  features/
    my-feature/
      api/
        myFeatureApi.ts       # API service
      components/
        MyFeature.tsx         # Main component
        SubComponent.tsx      # Related components
      hooks/
        useMyFeature.ts       # Custom hooks
        useSuspenseMyFeature.ts  # Suspense hooks
      helpers/
        myFeatureHelpers.ts   # Utilities
      types/
        index.ts              # TypeScript types
      index.ts                # Public exports

  components/
    SuspenseLoader/
      SuspenseLoader.tsx      # Reusable loader
    CustomAppBar/
      CustomAppBar.tsx        # Reusable app bar

  routes/
    my-route/
      index.tsx               # Route component
      create/
        index.tsx             # Nested route

import React, { useState, useCallback } from 'react';
import { Box, Paper } from '@mui/material';
import { useSuspenseQuery } from '@tanstack/react-query';
import { featureApi } from '../api/featureApi';
import type { FeatureData } from '~types/feature';

interface MyComponentProps {
    id: number;
    onAction?: () => void;
}

export const MyComponent: React.FC<MyComponentProps> = ({ id, onAction }) => {
    const [state, setState] = useState<string>('');

    const { data } = useSuspenseQuery({
        queryKey: ['feature', id],
        queryFn: () => featureApi.getFeature(id),
    });

    const handleAction = useCallback(() => {
        setState('updated');
        onAction?.();
    }, [onAction]);

    return (
        <Box sx={{ p: 2 }}>
            <Paper sx={{ p: 3 }}>
                {/* Content */}
            </Paper>
        </Box>
    );
};

export default MyComponent;

© diet103, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files in .agents/skills/frontend-dev-guidelines of diet103/claude-code-infrastructure-showcase.

• SKILL.md
• resources/common-patterns.md
• resources/complete-examples.md
• resources/component-patterns.md
• resources/data-fetching.md
• resources/file-organization.md
• resources/loading-and-error-states.md
• resources/performance.md
• resources/routing-guide.md
• resources/styling-guide.md
• resources/typescript-standards.md

Open the folder on GitHubat commit 07f75ce

Used in 2 other repositories

We found 5 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in diet103/claude-code-infrastructure-showcase, which our catalogue first saw on October 7, 2026.

• davila7/claude-code-templatescli-tool/components/skills/development/frontend-dev-guidelines
• aiskillstore/marketplaceskills/diet103/frontend-dev-guidelinesskills/dimon94/frontend-dev-guidelines+1 more