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.
Quickly install frontend-dev-guidelines AI skill to your development environment via command line
Source: binjuhor/shadcn-lar.
Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.
| @/ | src/ | import { apiClient } from '@/lib/apiClient' | | types | src/types | import type { User } from 'types/user' | | components | src/components | import { SuspenseLoader } from 'components/SuspenseLoader' | | features | src/features | import { authApi } from 'features/auth' |
| Create a component | component-patterns.md | | Fetch data | data-fetching.md | | Organize files/folders | file-organization.md | | Style components | styling-guide.md | | Set up routing | routing-guide.md | | Handle loading/errors | loading-and-error-states.md | | Optimize performance | performance.md | | TypeScript types | typescript-standards.md |
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. Source: binjuhor/shadcn-lar.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/binjuhor/shadcn-lar --skill frontend-dev-guidelinesFrontend 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. Source: binjuhor/shadcn-lar.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/binjuhor/shadcn-lar --skill frontend-dev-guidelines Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/binjuhor/shadcn-lar