How to use the Frontend Dev Guidelines agent skill

What the skill makes the agent do

The skill is documentation for the agent rather than a tool that acts on its own. When it is installed and relevant to your request, the agent follows its guidance while creating components, pages, features, data fetching, styling and routing.

The guidance is written for React 18, TypeScript, MUI v7 and TanStack Router/Query. Its main rules include using React.FC<Props> components, lazy loading heavy components, wrapping them in a SuspenseLoader, fetching data with useSuspenseQuery, organizing code into features/ folders, using the sx prop with SxProps<Theme>, and using useMuiSnackbar for notifications instead of react-toastify.

• Use useSuspenseQuery for data fetching instead of isLoading checks.
• Avoid early returns with loading spinners; wrap content in SuspenseLoader to prevent layout shift.
• Use MUI v7 Grid syntax such as <Grid size={{ xs: 12, md: 6 }}>.
• Keep styles inline under 100 lines and move them to a .styles.ts file above that.
• Use strict TypeScript, avoid any, and add explicit return types.

Install the skill in Claude

Download the ZIP file for frontend-dev-guidelines from our page. Unzip it so the frontend-dev-guidelines folder, which contains SKILL.md and a resources/ folder, sits in one of two places: ~/.claude/skills/ to make it available across your projects, or a project's .claude/skills/ folder to share it with that project only.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

Trigger the skill with natural requests

You do not need a special command. The skill's description tells the agent to use it when you create components, pages or features, fetch data, style UI, set up routing, or work with frontend code. Ask for the work in plain language and mention your stack so the agent applies the right rules.

Requests that tend to match the skill's description include creating a new component, building a feature with its own folder, adding a route, or styling a form.

• Create a React component for a user profile card that fetches data with useSuspenseQuery.
• Add a new feature folder for comments with an API service file and types.
• Set up a TanStack Router route for a settings page with lazy loading.
• Style this dashboard panel using MUI v7 and the sx prop.

What the skill needs and what to expect

The skill works best in a React 18 + TypeScript project that uses MUI v7 and TanStack Router/Query. The source notes that it refers to a CLAUDE_INTEGRATION_GUIDE.md file and a vite.config.ts file in the original repository. Those files are not part of this skill folder, so the import alias details and repository-level references will not be available from the skill alone.

If your project uses a different stack, the skill says to adapt the principles rather than follow the rules literally. It is not a beginner tutorial: it gives rules, not explanations of React.

• Works best with React 18, TypeScript, MUI v7, TanStack Router and TanStack Query.
• Does not include the CLAUDE_INTEGRATION_GUIDE.md or vite.config.ts files referenced by the original repository.
• Assumes you already know React.

Safety notes: scripts and network access

The skill does not run scripts and does not use the network. It consists of Markdown guidance files that the agent reads. Because it contains no executable scripts, installing it does not add programs to your machine. As with any skill, review the files before relying on them in a production codebase.

• Runs scripts: no.
• Uses network: no.

Tips for getting the best results

Name your stack in the request so the agent knows whether the rules apply. Review generated code against your project's real aliases and config, since the skill's alias table points to a vite.config.ts that is not included. If you work in a different framework, ask the agent to adapt the principles instead of copying the patterns.

• Say 'React 18 with MUI v7 and TanStack Query' in your request.
• Ask the agent to show which resource file it followed when the output looks unusual.
• Check the import aliases (@/, ~types, ~components, ~features) against your own config.