21 focused modules · MIT licensed
Practical agent skills for web engineering, performance, design, security, GPU work, and WebView2—kept as readable Markdown and maintained in the open.
npx skills add shreyam1008/shre-skills
Repository catalog
Each card links directly to its source file. The install slug, folder name, and frontmatter name are validated together in CI.
Cache correctly across every layer — HTTP/Cache-Control, CDN, browser, service worker, and app/query caches. Use when setting cache headers, deploying static assets, designing API freshness, debugging stale content, or planning invalidation.
npx skills add shreyam1008/shre-skills@caching
General programming conventions and code-quality discipline — what to do and what to avoid when writing, reviewing, or refactoring code in any language. Use when authoring features, reviewing diffs, or before handoff.
npx skills add shreyam1008/shre-skills@code-quality
Write modern, maintainable, performant CSS. Use when styling UI, building layouts, setting up design tokens/theming, fixing responsiveness or specificity issues, or reviewing CSS — including inside React/Tailwind projects.
npx skills add shreyam1008/shre-skills@css
Build and apply a coherent visual design language — design tokens, color, typography, spacing, elevation, and motion systems. Use when establishing a design system, theming, choosing type/color scales, or making a UI feel intentional rather than templated.
npx skills add shreyam1008/shre-skills@design-language
Use Git well — commits, branching, history, rebase/merge, recovery, and collaboration hygiene. Use when committing, branching, resolving conflicts, cleaning history, undoing mistakes, or setting up a team workflow.
npx skills add shreyam1008/shre-skills@git
Write semantic, accessible, SEO-friendly HTML. Use when authoring markup, structuring pages/forms, fixing accessibility or document structure, or reviewing HTML — even when the task is framed as "a component" or "a page" rather than "HTML".
npx skills add shreyam1008/shre-skills@html
Write modern, correct, performant JavaScript/TypeScript. Use when authoring or reviewing JS/TS logic, async code, modules, or data handling, and to avoid common language footguns — applies in browser, Node, and bundler contexts.
npx skills add shreyam1008/shre-skills@javascript
Choose and engineer the browser rendering path across DOM/CSS, SVG, Canvas 2D, OffscreenCanvas, WebGL, WebGPU, and WASM. Use for render-pipeline diagnosis, DOM-vs-canvas decisions, HTML-in-Canvas experiments, DPR scaling, worker rendering, and production fallback design.
npx skills add shreyam1008/shre-skills@low-level-web-rendering
Write the least code and the least prose that fully solves the task. Use on every coding and review task, and whenever the user says "be concise", "less code", "minimal", "simplest", "yagni", "stop over-engineering", or complains about bloat, boilerplate, verbosity, or unnecessary dependencies.
npx skills add shreyam1008/shre-skills@minimalism
React performance and maintainability guidelines. Use when writing, reviewing, or refactoring React code: data fetching, rendering, state, hooks, and bundle size.
npx skills add shreyam1008/shre-skills@react-best-practices
Diagnose and fix React rendering performance — dropped frames, jank, slow lists, expensive re-renders, and slow interactions. Use when a React UI feels slow or profiling shows long renders.
npx skills add shreyam1008/shre-skills@react-rendering-performance
Build performant 3D scenes with React Three Fiber (@react-three/fiber) and drei. Use when creating or optimizing R3F/Three.js scenes, animations, loaders, or controlling draw calls and frame cost.
npx skills add shreyam1008/shre-skills@react-three-fiber
Web application security — what to do and never do for input validation, output encoding, auth, secrets, and common vulns (XSS, CSRF, injection, SSRF). Use when handling user input, building auth/APIs, managing secrets, or reviewing code for security.
npx skills add shreyam1008/shre-skills@security
Build service workers and PWAs — offline support, caching strategies, background sync, installability, and updates. Use when adding offline/PWA capability, intercepting fetches, precaching assets, or debugging a stale/broken service worker.
npx skills add shreyam1008/shre-skills@service-worker
Build React apps the TanStack way — Query for server state, Router for routing/data loading, Table/Form/Virtual for UI, Start for SSR. Use when fetching data, managing server state, routing, large tables/lists, or replacing ad-hoc useEffect/useState data code.
npx skills add shreyam1008/shre-skills@tanstack
Move hot computation to Rust + WebAssembly with wasm-bindgen / wasm-pack. Use when offloading CPU-heavy work (parsing, image/audio, simulation, crypto, math) from JS to WASM, and for the JS<->WASM boundary.
npx skills add shreyam1008/shre-skills@wasm-rust
The web "rules" for UI quality — where controls go, color and contrast, accessibility, responsive layout, and UX states. Use when reviewing or building web UI.
npx skills add shreyam1008/shre-skills@web-design-guidelines
Make web apps load quickly and render smoothly at the display's refresh rate. Use for Core Web Vitals, refresh-rate-aware frame budgets, jank, main-thread scheduling, loading optimization, and rendering loops whenever a page feels slow or fails a Lighthouse/Vitals check.
npx skills add shreyam1008/shre-skills@web-performance
Raw WebGL / GPU rendering guidance — context setup, shaders, buffers, draw-call budgets, state management, and performance. Use when writing WebGL directly or debugging GPU rendering and frame cost.
npx skills add shreyam1008/shre-skills@webgl
Build and review browser WebGPU rendering or compute paths. Use when code touches navigator.gpu, WGSL, GPU pipelines, buffers, textures, bind groups, compute shaders, WebGL-to-WebGPU migration, device loss, or target-device GPU performance. Do not use for ordinary DOM or CSS animation.
npx skills add shreyam1008/shre-skills@webgpu
Best practices for embedding WebView2 in WinUI 3 desktop apps — virtual host mapping, React SPA integration, messaging, performance, and production bundling.
npx skills add shreyam1008/shre-skills@webview2-winui