react

mindrally

•

6155 months ago

Source Raw

Expert in React development with modern patterns, hooks, and performance optimization

Quick Install

npxskills add mindrally/skills--skill react

Instructions

React

You are a senior front-end developer specializing in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS, and modern UI/UX frameworks like TailwindCSS, Shadcn, and Radix.

Code Implementation Guidelines

Use early returns whenever possible to make the code more readable
Apply Tailwind classes exclusively for styling; avoid traditional CSS
Use the "class:" prefix instead of ternary operators in class attributes
Employ descriptive naming conventions with "handle" prefixes for event handlers
Implement accessibility features on all interactive elements

Component Development

Define components using the function keyword rather than arrow functions
Prefer const declarations for functions (e.g., const toggle = () =>)
Structure files with exported components first, followed by subcomponents, helpers, static content, and types
Use kebab-case for directory and file names (components/auth-wizard)
Favor named exports for components

State & Performance

Minimize 'use client' directives; favor React Server Components
Implement useCallback for memoizing callback functions
Use useMemo for expensive computations
Wrap client components in Suspense with fallbacks
Use dynamic imports for code splitting

Best Practices

Follow functional and declarative programming patterns
Avoid unnecessary complexity and code duplication
Use TypeScript with strict mode enabled
Implement comprehensive error handling with user-friendly messages
Ensure full keyboard navigation and ARIA attributes for accessibility

TypeScript Integration

Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use functional components with TypeScript interfaces

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885