saajunaid
@saajunaid
Public Skills
confluence-hla
by saajunaid
Author enterprise High-Level Architecture (HLA) documents in Simplified Technical English and generate Confluence Storage Format XHTML with self-contained PlantUML diagrams, wrapped tables, and zero AI fingerprints. Use when creating high-level architecture designs, architecture documentation for Confluence, or converting markdown architecture to Confluence storage format.
explainer-doc
by saajunaid
Write a document that hands off work to a team who did NOT do the investigation — an external vendor, another team, a contractor — and who must be able to act on it alone. Use when the user says "write a spec for the X team", "document this for someone outside the team", "explainer doc", "implementation spec for a vendor", "hand this off to Y", or is about to write a design doc whose primary reader did not live through the debugging/design process. NOT for internal specs where the reader already has full context (use technical-writing or writing-plans instead) — this is specifically for the "stranger must follow it alone" case.
tech-explainer
by saajunaid
Write a plain-language technical explainer for a smart reader who did NOT do the investigation — a manager, an infra colleague, a stakeholder, the person whose recommendation you are answering. Layered Mermaid diagrams that rank causes by SIZE OF EFFECT, a controlled-vocabulary table, Simplified Technical English, published withdrawn results, and questions back to the reader. Use this skill whenever the user says "explain this to X", "explainer", "write this up for someone non-technical", "plain English", "simplified technical english", "STE", "explain our findings", "write up the benchmark results", "answer my manager's recommendations", "why is it slow — document it", "make a doc with diagrams explaining the stack", or is about to summarise an investigation, a benchmark, a postmortem, an architecture, or a disagreement for a reader who will not read the raw data. NOT for handing off work to be BUILT by a vendor or another team (use explainer-doc for that — it produces an actionable spec); NOT for READMEs or API docs (use technical-writing). This one produces UNDERSTANDING: the reader must finish able to argue with you on the merits.
safe-cleanup
by saajunaid
Use BEFORE deleting any directory tree, clearing a scratchpad, removing git worktrees, or "tidying up" generated folders - especially on Windows, where a recursive delete that meets a junction or symlink destroys the link's TARGET. Also use when verifying that a Python venv or node_modules survived a cleanup, because pip check and file counts both report healthy on a half-deleted environment.
code-review
by saajunaid
Automated code review for pull requests using specialized review patterns. Analyzes code for quality, security, performance, and best practices. Use when reviewing code changes, PRs, or doing code audits.
security-review
by saajunaid
"Security review workflow — OWASP, code scanning, cloud infrastructure"
fastapi-dev
by saajunaid
Build FastAPI backends with standard patterns, error handling, and testing
webapp-development
by saajunaid
End-to-end web application development workflow with brand theming and standard patterns
caching-patterns
by saajunaid
Caching strategies for Streamlit and FastAPI applications
architecture-design
by saajunaid
Design application architecture and system diagrams with layered patterns, Mermaid C4 diagrams, SQL Server data platform, and on-premise deployment considerations.
schema-migration
by saajunaid
Migrate an application's data access layer from one database schema to another. Use when tables are renamed, consolidated, split, or columns change — and the app's queries, mappings, and abstraction layer must be updated without data loss. Read-only against the database.
cross-review
by saajunaid
Cross-vendor code review — have a different vendor's model (DeepSeek/GLM/any OpenAI-compatible endpoint) review the current diff to catch bugs a same-vendor reviewer misses. Use after a phase is green and before commit/merge, or for a second opinion on a risky diff.
writing-plans
by saajunaid
Use when you have a spec or requirements for a multi-step task, before touching code
mermaid-diagrams
by saajunaid
Create software diagrams using Mermaid text-based syntax. Use for class diagrams (domain modeling, OOP design), sequence diagrams (API flows, interactions), flowcharts (processes, algorithms, user journeys), ERD (database schemas), C4 architecture diagrams, state diagrams, git graphs, gantt charts, and data visualization.
dashboard-perf-sweep
by saajunaid
Re-measure an app's dashboard/API endpoints for load-time regressions and decide, with a documented checklist (not a black-box verdict), whether a slow one is a candidate for the rs-kit summary-table refresher pattern — or needs an index, keyset paging, gzip, or nothing at all. Use when the user says "sweep dashboard performance", "check if this app needs rs-kit", "re-measure the perf tracker", "is this endpoint a refresher candidate", or when a dashboard-performance-tracker.md is stale and needs re-validating. Read-only by default (dev servers only; prod requires an explicit opt-in and human confirmation) and human-invoked, never scheduled -- it surfaces candidates, it does not enroll them.
using-git-worktrees
by saajunaid
Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
db-diagram
by saajunaid
Turn a SQL artifact — a stored procedure, view, query, .sql file, or table name — into a diagram that explains it to a human. Use when the user says "diagram this query/proc/view/schema", "explain this SQL visually", "draw the ER diagram", "show me the data flow of this stored proc", "/mermaid-db", or "/excalidraw-db". Produces Mermaid (default, git-diffable) or Excalidraw (for design reviews). Read-only — never touches the database.
architecture-document
by saajunaid
Generate professional enterprise-grade HLD and LLD documents from the living Architecture.md. Outputs DOCX (editable) or PPTX (executive summary) using existing document skills.
responsive-mobile-native
by saajunaid
Use this skill whenever the user wants to make a web app or website work on mobile, adapt a desktop-first app for mobile or tablet, make a site "feel native" on phones, add responsive behaviour, fix a layout that breaks on small screens, or ship a single codebase that works on desktop and mobile without two separate apps. Also triggers for: "make this PWA", "mobile-friendly", "tablet layout", "bottom nav", "touch gestures", "works on iPhone/Android", "responsive design", or any request to support small screens alongside an existing desktop UI. Use this skill proactively — if the user is building or fixing any web UI and mobile support is clearly missing or incomplete, suggest and apply this skill.
design-md
by saajunaid
Google's open DESIGN.md specification for describing visual identities to coding agents. YAML tokens + Markdown rationale + npx CLI for WCAG validation and W3C DTCG/Tailwind export. Use for formal, agent-consumable design system documentation.
popular-web-designs
by saajunaid
54 real-world design systems (Stripe, Linear, Vercel, Supabase, Apple, Notion, Cursor, etc.) as ready-to-use HTML/CSS reference. Exact color palettes, typography hierarchies, component specs, spacing, shadow systems, and font substitutions. Use when building UI that should match a specific company's aesthetic.
windows-deployment
by saajunaid
"Deploy FastAPI + React/Vite apps to Windows Server with NSSM services, reverse proxy (IIS or nginx), and git-pull workflow. Use when deploying any web app to a Windows prod server, setting up NSSM services, configuring IIS or nginx reverse proxy, making code environment-aware for dev/prod, or troubleshooting prod deployment issues."
deploy-local
by saajunaid
End-to-end local deployment loop for Gitea-hosted projects. Use when the user wants to commit on dev, push to remote, monitor the golden CI/build/deploy workflow, validate prod on the configured prod host, and fix lint/test/pipeline failures until deployment is healthy.
particle-art
by saajunaid
Generate animated particle art React/Next.js components — zero dependencies, spring physics, CSS-variable theming, DPR-correct canvas, mouse interaction. Use when the user wants animated hero art, a living logo, a branded initial or monogram, a constellation background, or any "particles that form a shape". Triggers on "particle animation", "node network", "animated letter/logo/initials", "living letter", "morphing particles", "constellation", "neural net art", "dot field", "stipple portrait", "halftone animation", "ASCII art animation", "background art for my site", or "art that reacts to mouse". Covers — text/initials → spring-node letter; preset patterns (constellation, helix, spiral, DNA, hex-grid, wave, infinity); custom SVG paths; custom polygon points; Unicode halftone stipple; Gaussian dot field with sparks; SVG circuit traces; hybrid combos. Outputs a complete, self-contained, copy-paste-ready React component. Prefer this over p5.js (zero-dep, React-native, TypeScript), tsParticles (richer spring physics, CSS-var theming), Three.js (lightweight, no WebGL).