skills.rest
AhmedElbialy148
AhmedElbialy148COMMUNITY
Explore all skills by this author β†’
GitHub

react-fsd

Enforces Feature-Sliced Design architecture and strict TypeScript standards for Vite React SPAs.

Updated Oct 7, 2023
Search Tags:#typescript#architecture#code review#react#eslint#vite#feature-sliced-design
One-click install
npx skills add https://github.com/AhmedElbialy148/Portfolio --skill react-fsd-ahmedelbialy148
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: react-fsd
Source: https://github.com/AhmedElbialy148/Portfolio/tree/main/.cursor/skills/react-fsd
Command: npx skills add https://github.com/AhmedElbialy148/Portfolio --skill react-fsd-ahmedelbialy148

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill includes references (resource) and assets (resource) components.

What problem does it solve? React codebases often degrade into inconsistent folder structures, untyped code, and unmaintainable imports. This Skill provides a complete architectural contract for Vite + React + TypeScript SPAs, enforcing Feature-Sliced Design layers, strict TypeScript, mandatory docstrings, and named function expressions in hooks. ## Core Features & Use Cases - FSD Architecture Enforcement: Organizes code into app, views, widgets, features, entities, and shared layers with strict downward-only import rules and public API boundaries per slice. - Strict TypeScript Standards: Ships a tsconfig with strict mode, noUncheckedIndexedAccess, exactOptionalPropertyTypes, and bans any in favor of unknown with narrowing. - Docstring & Hook Conventions: Requires file-level @file docstrings, TSDoc blocks on every export, and named function expressions in useEffect/useMemo/useCallback, enforced via ESLint and Steiger configs. - Use Case: When bootstrapping a new React SPA or adding a feature like login, the Skill provides the folder scaffold, component/hook templates, ESLint config, and a PR review checklist to keep the codebase compliant. ## Quick Start Ask the AI to scaffold a new Vite React TypeScript app following the react-fsd standard, or to review an existing component for FSD layer and docstring compliance.

Frequently Asked Questions about react-fsd

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a React app with Feature-Sliced Design?β–Ό

Organize src/ into layers: app (router, providers), views (page compositions), widgets (reusable UI blocks), features (user actions), entities (business entities), and shared (generic infra). Imports flow downward only, and each slice exposes a public index.ts.

How to enforce FSD import boundaries with ESLint?β–Ό

Use eslint-plugin-import with no-restricted-paths zones blocking upward and same-layer imports, plus the Steiger linter with @feature-sliced/steiger-plugin for full FSD-aware rules like public-api and no-cross-imports.

Why use named function expressions in useEffect instead of arrows?β–Ό

Named function expressions appear in stack traces and React DevTools Profiler instead of showing as anonymous, making debugging and profiling easier. They also improve code readability by stating the effect's intent on the first line.

Does Feature-Sliced Design work with react-router v6?β–Ό

Yes. The router lives in src/app/router.tsx as thin URL-to-view wiring, while page composition and business logic live in FSD views/ slices. Lazy routes with Suspense are supported for code-splitting.

What TypeScript strict settings should a React SPA use?β–Ό

Enable strict, noUncheckedIndexedAccess, exactOptionalPropertyTypes, noImplicitOverride, and verbatimModuleSyntax. Ban any in favor of unknown with narrowing, require import type for type-only imports, and validate boundary data with Zod.

When should logic move from features to entities or shared layers?β–Ό

When two features need the same logic, extract it down to entities/ or shared/ since same-layer cross-imports are forbidden. If a widget needs network access, it is actually a feature and should be moved down a layer.

Related Skills

Explore More Software Engineering Skills→
aaronbassettaaronbassett
4

dev-specialisms:init-local-tooling

Initialize linting, formatting, type checking, and testing tooling across TypeScript, Rust, and Python projects.

Community
Advanced
madlado87madlado87

ssr-data-fetching

Enable SSR-first data fetching and hydration for Next.js apps with TanStack Query v5.

Community
Advanced
posit-devposit-dev
4.2k

author-vitest-tests

Writes and reviews Vitest tests for Positron src/vs/ source code and React components.

Official
Advanced
dev-goraebapdev-goraebap

framework-adapter

Generate a framework-specific folder tree from an FSD blueprint.

Community
Advanced