Skip to content
Get packs

Frontend Dev Guidelines

Teaches the agent React + TypeScript conventions: Suspense data fetching, MUI v7 styling, TanStack routing.

Source Download skill
Repository
diet103/claude-code-infrastructure-showcase
Stars
10,043
Licence
MIT
Files
11 files

What it does

When installed, the agent follows a set of opinionated rules for building React and TypeScript front-end code, such as using Suspense-based data fetching, lazy loading heavy components, organizing code into feature folders, styling with MUI v7, and routing with TanStack Router. It reads this guidance from SKILL.md and the linked reference files, so its code is more consistent with these patterns. The skill is documentation for the agent rather than a tool that performs actions on its own.

Great for

  • Developers whose React app uses React 18, TypeScript, MUI v7 and TanStack Router/Query and want consistent generated code
  • Teams that want a written frontend style guide the AI agent applies automatically
  • Developers adapting these principles to a similar React stack

Skip it if

  • Projects using a different stack (for example Vue, Tailwind or Redux); the guidance is written for React 18, MUI v7 and TanStack, and the skill itself says to adapt it otherwise
  • Beginners expecting a tutorial; the skill assumes existing React knowledge and gives rules, not explanations

Try asking

  • “Create a new user settings component following the project's frontend guidelines”
  • “Set up a new feature folder with api, components, hooks, helpers and types subdirectories”
  • “Add a new route with TanStack Router and lazy loading for the page”
  • “Refactor a data-fetching component to use useSuspenseQuery with a Suspense loader”
Step-by-step guide: how to use Frontend Dev GuidelinesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 11 original files, the MIT licence and an attribution note.

    frontend-dev-guidelines.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frontend-dev-guidelines.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frontend-dev-guidelines.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the specific task (component, feature, route) so it loads only the relevant guide file
  • Check the import aliases (@/, ~components, ~features) against your own vite.config.ts before relying on generated imports
  • Treat the rules as opinionated defaults and override them where your team's conventions differ

What's inside

  • 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
  • SKILL.md

Redistributed unmodified from diet103/claude-code-infrastructure-showcase under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.