grvpanchal
- 18 skills
- 0 followers
- 2 months ago last updated
- ▌ UI Atom · grvpanchalAtomic-design guidance for UI Atoms — the smallest single-purpose building blocks (buttons, inputs, icons, labels). Use when authoring or reviewing components under ui/atoms, components/atoms, or when deciding whether a component belongs at the atom level.
- ▌ UI Theme · grvpanchalDesign-token systems — semantic CSS custom properties for colours, spacing, typography, and shadows, with light/dark theme switching via `[data-theme]` overrides. Use when setting up a token catalogue, auditing components for hardcoded colours/magic numbers, or adding dark-mode support via token swaps.
- ▌ Server API · grvpanchalAPI service-layer patterns — axios/fetch client with interceptors, domain-scoped service objects (UserService, ProductService), auth-token refresh, request cancellation, and error normalisation. Use when adding or reviewing HTTP call sites, organising services under api/ or services/, or centralising cross-cutting request concerns.
- ▌ State Ajax · grvpanchalAsync data-fetching patterns — Fetch vs Axios, service-layer organisation, AbortController cancellation, and integration with Redux Toolkit's createAsyncThunk for pending/fulfilled/rejected state transitions. Use when writing or reviewing HTTP call sites, standardising loading/error handling, or wiring request cancellation in effects.
- ▌ State Crud · grvpanchalCRUD patterns for state slices — consistent `domain/create|read|update|delete` action naming, request/success/failure triples per operation, and normalised `{ byId, allIds }` entity shapes for O(1) lookups. Use when designing a new entity slice, standardising action-type names, or refactoring array-shaped state.
- ▌ State Saga · grvpanchalRedux-Saga (generator-based) middleware for async side effects — yields declarative effects (call/put/select/takeLatest/delay) instead of imperative async code, watcher-per-slice composition, optimistic updates with rollback. Use when authoring per-slice operations.js, the rootSagas composer, or reviewing saga workers.
- ▌ Server Page · grvpanchalPage components — the thin data-fetching layer that binds a route to a template, invoking getServerSideProps/getStaticProps and passing props down. Use when creating a new route, choosing SSR vs SSG vs ISR for a page, or reviewing whether a page is doing template-level work it shouldn't.
- ▌ State Store · grvpanchalRedux store wiring for the chota-react-saga template — single createStore, combineReducers per domain, applyMiddleware(sagaMiddleware), composeWithDevTools, and a one-line `sagaMiddleware.run(rootSaga)` at boot. Use when scaffolding the root store or auditing how slices and middleware compose.
- ▌ UI Molecule · grvpanchalAtomic-design guidance for Molecules — functional groups of atoms (SearchBar = input + button + icon; FormField = label + input + error) with a single cohesive purpose. Use when authoring or reviewing components under ui/molecules, composing atoms, or deciding atom vs molecule vs organism.
- ▌ UI Organism · grvpanchalAtomic-design guidance for Organisms — complex feature-level sections (Header, ProductGrid, CommentSection) that compose molecules, connect to state, handle loading/error/empty states, and own responsive layout decisions. Use when authoring components under ui/organisms or deciding molecule vs organism boundaries.
- ▌ UI Skeleton · grvpanchalSkeleton loading placeholders — gray-shape stand-ins that mirror final content dimensions, use subtle shimmer/pulse animation, and prevent layout shift. Use when replacing generic spinners with content-shaped placeholders, reducing perceived latency on slow routes, or preventing CLS on image-heavy cards.
- ▌ UI Template · grvpanchalAtomic-design guidance for Templates — page-level wireframes that arrange organisms into layout slots (hero/main/sidebar/footer) without fetching data. Use when authoring components under ui/templates, defining reusable page skeletons, or keeping layout decisions out of pages and organisms.
- ▌ State Actions · grvpanchalPlain-object Redux actions for the chota-react-saga template — three-phase async triples (REQUEST / SUCCESS / ERROR) per CRUD verb, single-phase actions for sync ops, UPPER_SNAKE type constants, and explicit hand-written action creators (no createAsyncThunk).
- ▌ State Reducer · grvpanchalPure switch/case reducers for the chota-react-saga template — initial-state file, three-phase async cases per CRUD verb, optimistic mutations with `previousState<Items>` rollback, fall-through SUCCESS/ERROR for toggle and delete.
- ▌ State Selectors · grvpanchalSelector functions for the chota-react-saga template — colocated with each slice, return derived view-data from the saga state shape (isLoading/isContentLoading/isActionLoading/error/<items>/<current>), filter/sort projections that combine slices (e.g. visibleTodos × selectedFilter).
- ▌ Server App Shell · grvpanchalApp Shell architecture — the cached HTML/CSS/JS skeleton (header, nav, footer) served instantly via Service Worker while dynamic content streams in. Use when building PWAs, wiring service-worker caches, inlining critical CSS, or adding offline fallbacks and skeleton loading states.
- ▌ Server Container · grvpanchalContainer/presentational component split — "smart" containers connect to the store, fetch data, and orchestrate loading/error/empty states; "dumb" children just render props. Use when extracting data logic from views, introducing custom hooks, or reviewing `*Container` components.
- ▌ State Middleware · grvpanchalRedux middleware — the `store => next => action => {}` pipeline for side effects, logging, analytics, and async (thunk/saga). Use when writing custom middleware, wiring async thunks, ordering middleware in configureStore, or keeping side effects out of reducers.