skill

frontend-dev-guidelines · davila7 — Claude Code skill for React/TypeScript

Q: How do I install frontend-dev-guidelines in Claude?

Use the author's templates: `npx claude-code-templates@latest --skill development/frontend-dev-guidelines`. The other route is `npx skills add davila7/claude-code-templates --skill frontend-dev-guidelines -a claude-code`. The file then sits at `~/.claude/skills/frontend-dev-guidelines/SKILL.md`.

Q: Which import aliases does the skill use?

`@/` maps to `src/`, `~types` to `src/types`, `~components` to `src/components`, and `~features` to `src/features`. They are declared in `vite.config.ts`, so projects without them need the examples edited.

A skill that gives the agent one set of rules for React and TypeScript work: Suspense, lazy loading, features layout, MUI v7 and TanStack.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill development/frontend-dev-guidelines

Open on GitHub

What frontend-dev-guidelines does

The skill kicks in when the agent writes components, pages or hooks, sets up routing, or fetches data. Inside are checklists for a new component and a new feature, an import cheatsheet, and topic guides: component patterns, data fetching, file organization, styling, routing, loading and error states, performance, TypeScript. Each topic points to its own file under resources/.

Data fetching follows useSuspenseQuery with Suspense boundaries instead of isLoading checks. Early returns with a spinner are ruled out because they shift the layout. User notifications go through useMuiSnackbar; react-toastify is out. Styling uses the sx prop typed as SxProps<Theme>, and in MUI v7 the grid is written as <Grid size={{ xs: 12, md: 6 }}> — the older syntax with xs and md directly will not do.

Features live in features/{feature-name}/ with api/, components/, hooks/, helpers/ and types/ subfolders, while shared pieces belong in components/. The aliases @/, ~types, ~components and ~features are declared in vite.config.ts, so a project without them will need the examples adjusted. Heavy components such as tables and charts load through React.lazy and get wrapped in SuspenseLoader.

What it helps with

lay out the folder structure for a new feature
move data requests to useSuspenseQuery
drop early spinner returns that shift the layout
split styles onto sx and pull them into a separate file
set up lazy loading for heavy components

Example prompts for the agent

Create the billing feature using the skill's layout: api/, components/, hooks/, types/
Rewrite this component with useSuspenseQuery and remove the isLoading check
Set up the /billing/ route with createFileRoute and lazy-load the page

How to install frontend-dev-guidelines

1claude-code-templates

npx claude-code-templates@latest --skill development/frontend-dev-guidelines

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill frontend-dev-guidelines -a claude-code

3Manually: put the files in place

~/.claude/skills/frontend-dev-guidelines/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/frontend-dev-guidelines/

Manually: put the files in place

.agents/skills/frontend-dev-guidelines/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/frontend-dev-guidelines/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates frontend-dev-guidelines

2Manually: put the files in place

.github/skills/frontend-dev-guidelines/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/frontend-dev-guidelines

Manually: put the files in place

.devin/skills/frontend-dev-guidelines/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about frontend-dev-guidelines

How do I install frontend-dev-guidelines in Claude?

Use the author's templates: npx claude-code-templates@latest --skill development/frontend-dev-guidelines. The other route is npx skills add davila7/claude-code-templates --skill frontend-dev-guidelines -a claude-code. The file then sits at ~/.claude/skills/frontend-dev-guidelines/SKILL.md.

What does frontend-dev-guidelines do?

It hands the agent a rulebook for React and TypeScript: component patterns, data fetching with TanStack Query, the features/ layout, MUI v7 styling, TanStack Router routing, loading and error states, and performance work.

Which import aliases does the skill use?

@/ maps to src/, ~types to src/types, ~components to src/components, and ~features to src/features. They are declared in vite.config.ts, so projects without them need the examples edited.

Similar skills

Everything for Frontend and UI →

frontend-dev-guidelines by other authors comes first.

frontend-dev-guidelines sickn33 Sets strict React and TypeScript conventions for feature structure, Suspense data fetching, MUI styling, and performance-focused reviews. CX Codex +1 1,500installs tanstack-store tanstack-skills A skill covering TanStack Store: a framework-agnostic reactive store with adapters for React, Vue, Solid, Angular and Svelte. Useful when your agent writes state with @tanstack/store. CX Codex +1 1,800installs frontend-developer sickn33 Guides an agent through React and Next.js interface work, from responsive components to client-side state and accessibility. Use it when building pages or fixing UI issues. CX Codex +1 1,300installs router-core TanStack Entry skill for TanStack Router that points a task at the right sub-skill and pins the type-inference and client-first rules agents keep breaking. CX Codex +1 589installs dynamic-import patterns.dev Teaches coding agents on-demand module loading with dynamic import(). It helps cut initial bundle sizes by deferring non-critical components. CX Codex +1 1,500installs nextjs-use-search-params-suspense wsimmonds A skill that shows how to read URL query parameters in Next.js client components: the 'use client' directive plus a Suspense wrapper. CX Codex +1 311installs clerk-tanstack-patterns clerk Walks your agent through Clerk auth in TanStack React Start: route guards, createServerFn, loaders and request middleware. CX Codex +1 15,500installs

From the same set205

The whole set →

scientific-critical-thinking Checks methodology, statistics and bias in research papers using GRADE and Cochrane ROB. Useful for paper reviews and systematic reviews. 644installs test-coverage A Claude slash command that measures test coverage, finds uncovered branches and suggests which tests to add. 637installs graphql-performance-optimizer A subagent that digs into slow GraphQL queries: finds N+1 patterns, wires up DataLoader, sets caching. Useful when a user list page drags for seconds. 599installs nextjs-bundle-analyzer A Claude slash command that breaks down your Next.js bundle size and points at what to trim. 560installs text-comparison-validator A subagent that checks extracted text against an existing markdown file, line by line. It flags missing words, typos, formatting drift and paragraph structure problems, then reports them with line numbers. 545installs claude-d3js-skill Tells the agent how to build non-standard d3.js visualisations: network graphs, geographic maps, choreographed transitions. Useful when off-the-shelf charting libraries fall short. 531installs ocr-grammar-fixer A Claude subagent that fixes OCR output: character recognition errors, broken spacing, punctuation and grammar, with the original meaning kept intact. 522installs implement-caching-strategy A Claude slash command that reads your architecture and lays out caching layers: browser, application, database, API. 520installs