ZiadNagar

@ziadnagar source repo

53 skills
0 followers
6 hours ago last updated

▌
DOCX · ziadnagar bundle
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.

0
installs
▌
Astro · ziadnagar bundle
Skill for building with the Astro web framework. Use this skill whenever the user mentions Astro, .astro files, static site generation (SSG), islands architecture, content collections, SSR / on-demand rendering, Astro adapters, Astro routing, Astro middleware, Astro API routes, Astro image optimization, Astro view transitions, or deploying an Astro project. Also trigger for questions about Astro config, integrations, Astro components, layouts, slots, client directives, server islands, environment variables in Astro, or any task where the user is working inside an Astro project. When in doubt, use this skill — it covers the full Astro surface area.

0
installs
▌
Devops · ziadnagar bundle
Use this skill when the user asks about Docker, containerization, CI/CD pipelines, GitHub Actions, deployment configurations, hosting setup, environment management, build optimization, CDN configuration, or infrastructure as code. Also triggers for "deploy this", "set up CI", "create a Dockerfile", "configure Vercel/Netlify/Cloudflare", "optimize build times", or "set up preview deployments". Covers frontend deployment workflows including static site hosting, SSR/edge deployment, image optimization pipelines, and performance budgets.

0
installs
▌
Animejs · ziadnagar bundle
Use this skill when building web animations with Anime.js v4 — tweens, timelines, stagger effects, scroll-driven animation, SVG line drawing, and draggable interactions.

0
installs
▌
Testing · ziadnagar bundle
Use this skill when the user asks to write tests, generate test cases, set up a testing framework, analyze test coverage, debug failing tests, or follow TDD/BDD workflows. Covers unit tests (Vitest, Jest), component tests (Testing Library, Storybook), integration tests, end-to-end tests (Playwright, Cypress), visual regression tests, accessibility testing, and animation/interaction testing. Also triggers for "test this component", "add coverage", "set up testing", or "why is this test failing".

0
installs
▌
Threejs · ziadnagar bundle
Use this skill when building 3D web experiences with Three.js — scene setup, cameras, lights, materials, animation loops, model loading, post-processing, shaders, particle systems, and React Three Fiber integration.

0
installs
▌
Vantajs · ziadnagar bundle
Use this skill when adding animated 3D backgrounds to web pages with Vanta.js — setup, effect selection, configuration, cleanup, and framework integration.

0
installs
▌
Jsxgraph · ziadnagar bundle
Expert-level JSXGraph (v1.12+) skill for creating interactive mathematical visualizations, geometric constructions, function graphs, charts, and 3D scenes in the browser. Use this skill whenever the user asks to build or improve anything with JSXGraph — including dynamic geometry, calculus visualizations (integrals, derivatives, Riemann sums), interactive sliders, parametric curves, polar plots, 3D views, charts (bar/pie/line), turtle graphics, or any embed of JSXGraph in HTML, React, or Webflow. Also trigger for questions about JSXGraph API methods, elements, attributes, or performance. Always use this skill before writing any JSXGraph code.

0
installs
▌
Matterjs · ziadnagar bundle
Use this skill when building 2D physics simulations with Matter.js — rigid-body engines, collision detection, constraints, mouse interaction, and canvas rendering.

0
installs
▌
API Design · ziadnagar bundle
Use this skill when the user asks to design a REST API, create API endpoints, write an OpenAPI/Swagger specification, design a GraphQL schema, plan API versioning, or structure request/response payloads. Triggers for 'design an API', 'create endpoints for', 'write an OpenAPI spec', 'REST vs GraphQL', 'API versioning', 'pagination strategy', 'error response format', or 'webhook design'. Covers RESTful conventions, naming, pagination, filtering, error handling, rate limiting, and API documentation.

0
installs
▌
Marp Slide · ziadnagar bundle
Create professional Marp presentation slides with 7 beautiful themes (default, minimal, colorful, dark, gradient, tech, business). Use when users request slide creation, presentations, or Marp documents. Supports custom themes, image layouts, and "make it look good" requests with automatic quality improvements.

0
installs
▌
Code Review · ziadnagar bundle
Use this skill when the user asks to review code, audit a file or PR, find bugs, check for security vulnerabilities, analyze performance bottlenecks, or improve code quality. Also triggers for requests like "what's wrong with this code", "is this secure", "review my component", or "check for accessibility issues". Covers frontend-focused reviews including React/Vue/Svelte component patterns, CSS/animation performance, accessibility (a11y), bundle size impact, and browser compatibility. Produces structured, actionable feedback with severity levels and fix suggestions.

0
installs
▌
Copywriting · ziadnagar bundle
Use this skill when writing conversion-focused web copy — headlines, subheadlines, CTAs, body copy, microcopy, email sequences, product descriptions, and landing page copy flow using proven formulas like PAS, AIDA, and 4U.

0
installs
▌
Refactoring · ziadnagar bundle
Use this skill when the user asks to refactor code, clean up a file, reduce complexity, extract components, split a large file, modernize legacy code, migrate between frameworks or APIs, detect code smells, or improve code architecture. Also triggers for "this file is too long", "simplify this", "extract this into a hook/component", "migrate from X to Y", or "reduce duplication". Covers React/Vue/Svelte component decomposition, CSS refactoring, animation system cleanup, and design system extraction.

0
installs
▌
UI Designer · ziadnagar bundle
Expert visual design craft, UI systems, and pixel-perfect implementation. Activates when building, styling, reviewing, or polishing any interface -- websites, apps, dashboards, component libraries, design systems, landing pages, or any screen needing visual polish. Triggers on: CSS styling, component design, layout, spacing, typography, color, dark mode, responsive design, design tokens, Figma, UI audits, visual hierarchy, icons, shadows, border-radius, animations. Also activates on: 'make it look good', 'improve the design', 'it looks off', 'spacing', 'colors', 'typography', 'design system', 'component library', 'pixel perfect', 'modern design', 'layout', 'responsive', 'dark mode', 'style this'. Applies whenever a visual interface is created or refined, even without saying 'UI'. Hands off to ux-designer for flow strategy and to ux-copywriter for interface text. Do NOT activate for user research methodology, psychology theory, backend logic, database schemas, API design without UI, or DevOps.

0
installs
▌
UX Designer · ziadnagar bundle
Expert UX design thinking, user psychology, and experience strategy. Activates when building, reviewing, or discussing any user-facing interface -- websites, apps, dashboards, forms, onboarding, checkout, sign-up, settings, landing pages, modals, navigation. Triggers on: user flows, wireframes, prototypes, usability, information architecture, content strategy, error handling, accessibility, interaction design, user testing, conversion. Also activates on: 'how should this flow', 'user experience', 'make it easier', 'onboarding', 'conversion', 'drop-off', 'friction', 'confusing', 'intuitive', 'usability', 'user journey'. Applies whenever a human uses an interface, even without saying 'UX'. Hands off to ux-copywriter for detailed microcopy work and to ui-designer for visual styling. Do NOT activate for purely visual styling, backend logic, database schemas, API design without UI, or DevOps.

0
installs
▌
Cobejs Globe · ziadnagar bundle
Use this skill when building lightweight interactive WebGL globe visualizations with cobe.js — marker placement, auto-rotation, responsive sizing, and framework integration.

0
installs
▌
Image Assets · ziadnagar bundle
Use this skill when finding, optimizing, and integrating images into web projects — covers responsive images, lazy loading, WebP/AVIF optimization, blur-up placeholders, art direction, SVG sprites, favicons, and Open Graph images.

0
installs
▌
Features Page · ziadnagar bundle
Use this skill when designing and building product features pages — bento grids, alternating image-text rows, icon feature grids, scroll-triggered animations, integration logo showcases, metric sections, and responsive layouts with Tailwind CSS.

0
installs
▌
Skill Creator · ziadnagar bundle
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

0
installs
▌
Gsap Animation · ziadnagar bundle
Use this skill when building web animations with GSAP — tweens, timelines, ScrollTrigger scroll-driven effects, stagger sequences, and easing curves.

0
installs
▌
Nothing Design · ziadnagar bundle
This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.

0
installs
▌
Security Audit · ziadnagar bundle
Use this skill when the user asks to review code for security vulnerabilities, harden an application, audit authentication or authorization logic, check for OWASP Top 10 issues, review secrets management, or assess dependency security. Triggers for 'is this secure', 'security review', 'find vulnerabilities', 'audit this code', 'check for injection', 'harden this', 'review auth logic', or 'check dependencies for CVEs'. Covers web application security, API security, input validation, cryptography usage, and secure configuration.

0
installs
▌
Webapp Testing · ziadnagar bundle
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

0
installs
▌
Doc Coauthoring · ziadnagar bundle
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

0
installs
▌
Brand Guidelines · ziadnagar bundle
Applies a company's brand colors and typography to any sort of artifact that may benefit from having the company's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

0
installs
▌
Mermaid Diagrams · ziadnagar bundle
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

0
installs
▌
Progressive Blur · ziadnagar bundle
Use this skill when creating smooth progressive blur effects on images or sections using layered backdrop-filter with CSS mask-image gradients.

0
installs
▌
Project Scaffold · ziadnagar bundle
Use this skill when the user asks to bootstrap a new project, initialize a codebase, create a starter template, set up a new app, scaffold a component library, or generate project boilerplate. Covers Next.js, React, Vite, Astro, Remix, and static sites with TypeScript, Tailwind CSS, ESLint, Prettier, testing setup, and CI/CD config. Also triggers for "start a new project", "set up a monorepo", "create a design system", "init a CLI tool", or "generate a project structure".

0
installs
▌
UI Design System · ziadnagar bundle
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

0
installs
▌
Animation Systems · ziadnagar bundle
Use this skill when designing a motion design system — defining duration scales, easing tokens, choreography patterns, performance budgets, and reduced-motion support for product UI.

0
installs
▌
CSS Alpha Masking · ziadnagar bundle
Use this skill when creating content fade effects, vignettes, or scroll indicators using CSS mask-image with linear-gradient alpha masking.

0
installs
▌
Responsive Design · ziadnagar bundle
Use this skill when implementing responsive layouts, fluid typography, container queries, responsive navigation, or adaptive image strategies.

0
installs
▌
Scroll Experience · ziadnagar
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.

0
installs
▌
Analytics Tracking · ziadnagar bundle
Use this skill when implementing analytics and tracking — GA4 setup, event taxonomy, conversion tracking, Google Tag Manager, dataLayer, UTM strategies, consent management, server-side tracking, and debugging with DebugView.

0
installs
▌
Data Visualization · ziadnagar bundle
Use this skill when the user asks to create charts, graphs, dashboards, data visualizations, or interactive data displays. Triggers for 'create a chart', 'visualize this data', 'make a dashboard', 'plot this', 'bar chart', 'line graph', 'pie chart', 'heatmap', 'scatter plot', 'data dashboard', or 'show me a graph of'. Covers chart type selection, data transformation for visualization, color schemes, accessibility in charts, responsive layouts, and interactive features. Produces standalone HTML artifacts using lightweight charting libraries.

0
installs
▌
Interaction Design · ziadnagar bundle
Use this skill when implementing microinteractions, motion design, state transitions, loading states, gesture interactions, or animation accessibility.

0
installs
▌
CSS Border Gradient · ziadnagar bundle
Use this skill when creating gradient borders on elements using the pseudo-element mask technique or border-image approach in CSS.

0
installs
▌
Karpathy Guidelines · ziadnagar
Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions, and define verifiable success criteria.

0
installs
▌
Landing Page Design · ziadnagar bundle
Use this skill when designing and building high-conversion landing pages — hero sections, social proof, feature grids, CTAs, FAQ accordions, responsive layout, copywriting patterns, and performance optimization with Tailwind CSS.

0
installs
▌
Persistent Planning · ziadnagar bundle
Use this skill when working on multi-step tasks, complex projects, or any work that spans multiple interactions. Triggers for 'plan this project', 'break this down', 'track progress', 'continue where we left off', 'what is the status', or any task requiring more than 3 steps to complete. Provides a filesystem-based planning system where the AI agent writes plans, tracks progress, and maintains context across sessions using structured markdown files. Essential for long-running tasks like migrations, refactors, feature builds, and multi-file changes.

0
installs
▌
Pricing Page Design · ziadnagar bundle
Use this skill when designing and building pricing pages — tier card layouts, plan comparison tables, billing toggle switches, feature checklists, recommended plan highlighting, enterprise CTAs, and conversion-optimized responsive designs with Tailwind CSS.

0
installs
▌
Marketing Psychology · ziadnagar bundle
Use this skill when applying behavioral science and persuasion principles to marketing, product design, pricing, and copy — covers 50+ mental models organized by buyer psychology, pricing, decision making, trust, urgency, and messaging.

0
installs
▌
Accessibility Auditor · ziadnagar
Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing WCAG 2.1 AA/AAA standards, testing with screen readers, or ensuring ADA compliance. Expert in semantic HTML, keyboard navigation, and assistive technology compatibility.

0
installs
▌
Interactive Portfolio · ziadnagar
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

0
installs
▌
Web Artifacts Builder · ziadnagar bundle
Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

0
installs
▌
Design System Patterns · ziadnagar bundle
Use this skill when building design system architecture, defining token hierarchies, implementing theme switching, or creating variant-based component APIs.

0
installs
▌
Figma Implement Design · ziadnagar bundle
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

0
installs
▌
Tailwind Design System · ziadnagar bundle
Use this skill when building design systems with Tailwind CSS v4, configuring CSS-first themes, creating variant-based components, or migrating from Tailwind v3 to v4.

0
installs
▌
UX Researcher Designer · ziadnagar bundle
UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis. Use for user research, persona creation, journey mapping, and design validation.

0
installs
▌
Web Interface Guidelines · ziadnagar bundle
Use this skill when building polished, accessible web interfaces — interaction patterns, animation guidelines, layout systems, form design, dark mode, typography scales, color systems, and Core Web Vitals optimization.

0
installs
▌
Academic Researcher Writing · ziadnagar bundle
Academic Researcher & Writer

0
installs
▌
Executing Marketing Campaigns · ziadnagar bundle
Plans, creates, and optimizes marketing campaigns including content strategy, social media, email, and analytics. Helps develop go-to-market strategies, campaign messaging, and performance measurement.

0
installs

53 published skills