Back to Ashraf
Toolkit

Ready-made tools,categorised.

Packages and reusable snippets I've built for real projects — starting points you can install and ship. Curated, categorised, no filler.

01

Architecture & Scaffolding

Start a project with structure already decided.

  • create-fsd-architecture

    v2.0.1

    Scaffold production-ready projects with Feature-Sliced Design in seconds.

    A CLI that generates a production-ready frontend project already wired with Feature-Sliced Design — layers, slices and segments in place from the first commit. Works with React, Vite and Next.js.

    npm create fsd-architecture@latest
    • Feature-Sliced Design structure out of the box
    • React, Vite and Next.js templates
    • One command, zero manual setup
    • FSD
    • React
    • Vite
    • Next.js
    • CLI
    • Scaffolding
    npmDocsGitHub
02

Routing & Error Handling

Fail loudly in development, gracefully in production.

  • Reusable__FrontendSnippets

    Reusable React error-handling components and UI snippets.

    A collection of copy-in React snippets focused on error handling — styled route-error boundaries (Tailwind and pure CSS) plus a content comparison slider you can drop into any project.

    • Styled route error pages (Tailwind + pure CSS)
    • Error boundary components for React Router
    • Before / after comparison slider component
    • React
    • Error Boundaries
    • React Router
    • Tailwind CSS
    • TypeScript
    GitHub
Back to AshrafAshraf Mohamed — 2026