DEV Community: Muhammad Asif

Stop 'Chatting' with Your AI. Start 'Directing' It.

Muhammad Asif — Wed, 22 Oct 2025 19:41:31 +0000

Getting generic, unusable code from your AI? The problem isn't the AI; it's how we ask.

Many of us treat AI like a vague search engine. I was getting bad responses until I stopped 'chatting' and started 'directing'. I developed a 5-step framework that completely changed the quality of my results. If you follow this, you'll see the difference immediately.

The Golden Rule: Always Set the Role First

Before you write a single command, tell the AI 'who it is'. This sets the context for its entire response.

Example:You are a senior full-stack engineer assigned to build a modern web application from scratch.

Now, 5-Step Prompt Framework

I structure my prompts using these five sections. This forces the AI to be specific and build exactly what I need.

1. Objective

State the "big picture" goal in one or two sentences.

Create a secure REST API for a blog platform. It will handle user authentication and CRUD operations for posts.

2. Structure

Define your tech stack and architecture. Don't let the AI guess.

Tech Stack: Use the MERN stack (MongoDB, Express.js, React
Authentication: Use JSON Web Tokens (JWT).
Backend: Follow a controller-service pattern.

3. Tasks

This is the most critical part. Break the objective down into small, clear, actionable chunks.

Create 'User' and 'Post' MongoDB models.
Implement user registration (with password hashing) and login (issuing a JWT).
Create a middleware to verify the JWT for protected routes.
Implement full CRUD operations for the 'Post' controller.

4. Output Requirements

Tell the AI *exactly* how you want the answer delivered.

Provide complete code for each file (models, controllers, middleware).
Use ES6 module syntax (import/export).
Add brief inline comments for complex logic.

5. Notes

Add any final rules, constraints, or specifics.

All async functions must use try/catch blocks for error handling.
Do not return the user's password in any API response.

Setting up JetBrains Mono font on Ubuntu is straightforward

Muhammad Asif — Mon, 13 May 2024 19:42:51 +0000

Open Terminal:
- Press Ctrl + Alt + T to open a terminal window.
Navigate to the Font Directory:
- Use the cd command to navigate to the directory where your font files are located. In your case:
```
 cd /home/asif/Downloads/JetBrainsMono-2.304/fonts/ttf
```
Copy Font Files to System Fonts Directory:
- Copy the font files to your system's TrueType fonts directory using the sudo cp command:
```
 sudo cp *.ttf /usr/share/fonts/truetype/
```
Update Font Cache:
- Update the font cache so that Ubuntu recognizes the new fonts:
```
 sudo fc-cache -f -v
```
Verify Installation:
- Open a text editor or any application where you can select fonts.
- Look for "JetBrains Mono" in the font selection list. If you see it, then the font has been successfully installed.

After completing these steps, you should have JetBrains Mono font installed and ready to use on your Ubuntu system.

Step-by-Step Guide to Setting Up Husky, ESLint, and Prettier in a Next.js TypeScript Project

Muhammad Asif — Tue, 30 Apr 2024 18:47:47 +0000

1. Install Required Packages

First, ensure you have Node.js installed. Initialize your project using:

npm init -y
# OR
yarn init -y

Next, install the necessary packages:

npm install --save-dev husky lint-staged eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-unused-imports @typescript-eslint/parser @typescript-eslint/eslint-plugin
# OR
yarn add --dev husky lint-staged eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-unused-imports @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Setup husky

Use the husky init command to set up husky in your project:

npx husky init

This command creates a pre-commit script in .husky/ and updates the prepare script in package.json. You can later modify these scripts as per your workflow.

3. Setup pre-commit

Create a pre-commit script in .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

4. Setup ESLint

Create an .eslintrc.json file in your project's root directory with ESLint configurations:

{
  "$schema": "https://json.schemastore.org/eslintrc.json",
  "env": {
    "browser": false,
    "es2021": true,
    "node": true
  },
  "extends": [
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "react",
    "unused-imports",
    "import",
    "@typescript-eslint",
    "jsx-a11y",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "no-console": "warn",
    "react/prop-types": "off",
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "react-hooks/exhaustive-deps": "off",
    "jsx-a11y/click-events-have-key-events": "warn",
    "jsx-a11y/interactive-supports-focus": "warn",
    "prettier/prettier": "warn",
    "no-unused-vars": "off",
    "unused-imports/no-unused-vars": "off",
    "unused-imports/no-unused-imports": "warn",
    "object-curly-spacing": [
      "error",
      "never"
    ],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "args": "after-used",
        "ignoreRestSiblings": false,
        "argsIgnorePattern": "^_.*?$"
      }
    ],
    "import/order": [
      "warn",
      {
        "groups": [
          "type",
          "builtin",
          "object",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "~/**",
            "group": "external",
            "position": "after"
          }
        ],
        "newlines-between": "always"
      }
    ],
    "react/self-closing-comp": "warn",
    "react/jsx-sort-props": [
      "warn",
      {
        "callbacksLast": true,
        "shorthandFirst": true,
        "noSortAlphabetically": false,
        "reservedFirst": true
      }
    ],
    "padding-line-between-statements": [
      "warn",
      {
        "blankLine": "always",
        "prev": "*",
        "next": "return"
      },
      {
        "blankLine": "always",
        "prev": [
          "const",
          "let",
          "var"
        ],
        "next": "*"
      },
      {
        "blankLine": "any",
        "prev": [
          "const",
          "let",
          "var"
        ],
        "next": [
          "const",
          "let",
          "var"
        ]
      }
    ]
  }
}

5. Setup ESLint Ignore

Create an .eslintignore file to ignore specific files from ESLint:

.next/*
*.css
dist
esm/*
public/*
tests/*
scripts/*
*.config.js
node_modules
coverage
.next
build

6. Setup Prettier

Create a .prettierrc.json file with Prettier configurations:

{
  "$schema": "https://json.schemastore.org/prettierrc.json",
  "tabWidth": 2,
  "printWidth": 100,
  "semi": true,
  "useTabs": false,
  "singleQuote": false,
  "bracketSpacing": false,
  "endOfLine": "auto",
  "arrowParens": "always",
  "trailingComma": "all"
}

7. Setup Prettier Ignore

Create a .prettierignore file to ignore specific files from Prettier:

dist
node_modules
.next
build
scripts

8. Configure Husky and lint-staged

Update your package.json with Husky and lint-staged configurations:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "eslint --fix",
    "prettier --write"
  ]
}

9. Add Scripts

Optionally, add scripts to your package.json for easier usage:

"scripts": {
  "eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write ."
}

Now, you can run npm run eslint to check for linting errors and npm run format to format your code with Prettier. Before committing your code, Husky will automatically run lint-staged, fixing linting errors and formatting your code.