skilld
All skills
mdzubair933 avatar

MDzubair933/web-design-mastery-skills

6 professional Claude skills for full-stack web development — from project planning to production launch.

main Updated last monthGitHub
README badge for mdzubair933/web-design-mastery-skills

Repository statistics

  • Indexed skills

    6

  • Skill groups

    1

  • GitHub stars

    0

  • Forks

    0

Skills

6 total

/anti-vibe-coding

Enforces professional, intentional development mindset on every web coding task — preventing AI slop, unplanned code, and amateur security mistakes. TRIGGER when: user says "build this", "write a component", "add this feature", "create a function", shares code and asks to extend it, or starts any frontend or backend coding task. TRIGGER also when: user asks why their site looks generic, why code is breaking, or wants code reviewed for quality. DO NOT TRIGGER when: user asks a conceptual question with no code to write, requests non-web work like data analysis or writing.

/backend-architecture

Enforces professional Node.js/Express backend architecture — API design, database modeling, security, auth, and production-readiness standards. TRIGGER when: user builds or modifies any backend route, API endpoint, database schema, auth system, middleware, or server configuration. Also trigger when user asks about JWT, CORS, MongoDB, SQL, environment variables, deployment security, or backend file structure. TRIGGER also when: user's backend is crashing, leaking errors, or has security gaps they want to fix. DO NOT TRIGGER when: user is working on frontend components, CSS, React state, or any client-side UI task with no backend involvement.

/frontend-engineering

Enforces professional frontend architecture — component structure, CSS methodology, state management, performance, and React patterns. TRIGGER when: user builds or modifies any React/Next.js component, asks about component structure, state management, CSS architecture, responsive layout, TypeScript typing, lazy loading, or frontend file organization. TRIGGER also when: user asks why frontend is slow, broken on mobile, causing re-render loops, or has hydration errors. DO NOT TRIGGER when: user is working on backend routes, database schemas, server logic, or non-frontend deployment tasks.

/project-delivery

Runs a mandatory pre-launch audit and delivery checklist before any web project goes live — covering QA, security, deployment, docs, and handoff. TRIGGER when: user says "ready to launch", "deploy this", "going live", "project is done", "push to production", "final checks", "deliver to client", "is this ready?", or asks what to do before launching a website. TRIGGER also when: user wants to review code quality, write API docs, set up deployment, or prepare a client handoff package. DO NOT TRIGGER when: user is mid-development building features — this skill is for completion and delivery only, not during active development.

/visual-design-system

Enforces professional visual design standards — typography, color systems, layout hierarchy, components, and animations — on every UI task. TRIGGER when: user asks to style a component, design a page, pick fonts or colors, build a navbar/card/button/modal/form, says "make it look good", "improve the design", "style this", "it looks generic", or starts building any visible UI element. TRIGGER also when: user asks about spacing, layout, animations, or micro-interactions on any web interface. DO NOT TRIGGER when: user is working on backend logic, database schemas, API routes, or any non-visual server-side task.

/web-project-kickstart

Guides a new web project from idea to fully planned foundation — producing a confirmed PRD, stack decision, and scaffold plan before any code is written. TRIGGER when: user says "start a new project", "I want to build a website", "new web app", "begin a project", "help me plan this", "which stack should I use", or describes a website idea they want to build from scratch. DO NOT TRIGGER when: user is mid-project adding a feature, asks a general coding question, or already has a codebase they are modifying.

Add to your README

The badge links readers to this page. It shows the skilld mark and no counts, and it follows the reader's light or dark GitHub theme.

<a href="https://skilld.dev/gh/mdzubair933/web-design-mastery-skills"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/mdzubair933/web-design-mastery-skills?theme=dark"> <source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/mdzubair933/web-design-mastery-skills?theme=light"> <img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/mdzubair933/web-design-mastery-skills?theme=light"> </picture> </a>