THE UNIVERSAL AGENT SKILLS LIBRARY
Skills are reusable capabilities for AI agents. Install them with a single command, then load them into any framework to enhance your agents with carefully prompt-engineered procedural knowledge.
$ npm install universal-agent-skills
| # | SKILL | CATEGORY |
|---|---|---|
| 1 | code-reviewer rakibulism/agent-skills-os Reviews code for bugs, security, and performance — prioritized findings with file:line citations and fixes. | ENG |
| 2 | test-writer rakibulism/agent-skills-os Generates unit and integration tests covering the happy path, edge cases, and error conditions. | ENG |
| 3 | refactorer rakibulism/agent-skills-os Refactors in small, safe steps while preserving behavior — with a behavior-equivalence argument. | ENG |
| 4 | debugger rakibulism/agent-skills-os Diagnoses errors with a root-cause hypothesis, a minimal verification step, and a concrete fix. | ENG |
| 5 | doc-writer rakibulism/agent-skills-os Generates READMEs, API references, and inline JSDoc/docstrings targeted at the actual reader. | ENG |
| 6 | component-designer rakibulism/agent-skills-os Specs a UI component end to end — anatomy, states, variants, props/API, accessibility, edge cases. | DES |
| 7 | visual-polish-reviewer rakibulism/agent-skills-os Reviews UI for alignment, spacing, typography, and shadows — the details that separate fine from great. | DES |
| 8 | interaction-designer rakibulism/agent-skills-os Designs micro-interactions with timing, easing, and purpose, and outputs the animation code. | DES |
| 9 | design-token-architect rakibulism/agent-skills-os Designs primitive, semantic, and component token layers with theme and dark-mode support. | DES |
| 10 | design-to-code rakibulism/agent-skills-os Translates a Figma spec, screenshot, or description into accessible, responsive, token-driven code. | DES |
| 11 | summarizer rakibulism/agent-skills-os Faithful summaries at TLDR, short, medium, or long lengths — preserving key facts and action items. | RES |
| 12 | researcher rakibulism/agent-skills-os Decomposes a question, gathers cited sources, and synthesizes a brief that separates fact from claim. | RES |
| 13 | data-analyst rakibulism/agent-skills-os Profiles, analyzes, and reports on tabular data — patterns, outliers, distributions — with caveats. | RES |
| 14 | design-engineer rakibulism/agent-skills-os Orchestrates elite design engineering across all 9 tracks — fuses visual taste with GPU-level 120fps performance. | DENG |
| 15 | de1-aesthetic-deconstruction rakibulism/agent-skills-os Reverse-engineers premium interactions into exact timing curves, easing, shadows, and type values. | DENG |
| 16 | de1-grid-spacing rakibulism/agent-skills-os Geometric spacing scales, spacing-as-hierarchy, fluid clamp() layouts, deliberate grid-breaking. | DENG |
| 17 | de1-micro-typography rakibulism/agent-skills-os Size-responsive tracking/line-height curves, orphan/widow control, OpenType features. | DENG |
| 18 | de1-optical-alignment rakibulism/agent-skills-os Rules for nudging icons and shapes off mathematical center so they read as balanced. | DENG |
| 19 | de1-perceptual-color rakibulism/agent-skills-os Builds OKLCH/HCT palettes with uniform perceptual contrast across light and dark modes. | DENG |
| 20 | de2-figma-to-code rakibulism/agent-skills-os Structures Figma files with auto-layout, components, and variables as a direct DOM mirror. | DENG |
| 21 | de2-interaction-storyboarding rakibulism/agent-skills-os Cell-by-cell keyframe specs for animation — timing, easing, interruption behavior. | DENG |
| 22 | de2-motion-prototyping rakibulism/agent-skills-os Validates motion with After Effects, Spline, or Rive before writing shader or animation code. | DENG |
| 23 | de2-perspective-sketching rakibulism/agent-skills-os 1/2/3-point perspective sketching to block out 3D scenes before building. | DENG |
| 24 | de3-asset-pipeline rakibulism/agent-skills-os Low-poly modeling, lighting bakes, and GLTF/GLB compression to under 500kb. | DENG |
| 25 | de3-glsl-shaders rakibulism/agent-skills-os Vertex/fragment shader writing — SDFs, raymarching, procedural noise. | DENG |
| 26 | de3-linear-algebra rakibulism/agent-skills-os Vector/matrix math for graphics — dot/cross products, transforms, quaternions. | DENG |
| 27 | de3-threejs-r3f rakibulism/agent-skills-os Three.js/R3F scene architecture — cameras, lighting, materials, draw-call budgets. | DENG |
| 28 | de4-bezier-splines rakibulism/agent-skills-os Bezier/spline math — cubic-bezier easing, Catmull-Rom paths, arc-length reparameterization. | DENG |
| 29 | de4-collision-detection rakibulism/agent-skills-os AABB/SAT collision tests, resolution, and spatial-hash broad-phase for UI physics. | DENG |
| 30 | de4-euler-integration rakibulism/agent-skills-os Real-time physics loops with delta-time, dt clamping, frame-rate independence. | DENG |
| 31 | de4-momentum-inertia rakibulism/agent-skills-os Pointer velocity tracking, friction glide, snap-point projection, rubber-band overscroll. | DENG |
| 32 | de4-spring-damper rakibulism/agent-skills-os Custom spring-mass-damper solvers, damping presets, interruptible retargeting. | DENG |
| 33 | de5-canvas-2d rakibulism/agent-skills-os Production-quality Canvas 2D — high-DPI setup, offscreen pre-rendering, particle batching. | DENG |
| 34 | de5-critical-rendering-path rakibulism/agent-skills-os Diagnoses jank via JS→Style→Layout→Paint→Composite; eliminates layout thrashing. | DENG |
| 35 | de5-gpu-compositing rakibulism/agent-skills-os Promotes elements to GPU compositor layers with transform/will-change/opacity. | DENG |
| 36 | de5-lowlevel-js rakibulism/agent-skills-os Typed arrays, zero-allocation render loops, Web Workers, the canonical RAF ticker. | DENG |
| 37 | de5-pointer-gestures rakibulism/agent-skills-os Unified Pointer Events, capture, velocity tracking, multi-touch pinch/rotate math. | DENG |
| 38 | de6-component-composition rakibulism/agent-skills-os Isolated, accessible drop-in components — compound patterns, headless-core/styled-shell. | DENG |
| 39 | de6-state-systems rakibulism/agent-skills-os Interaction state without re-render storms — Zustand, XState, Signals, re-render audits. | DENG |
| 40 | de6-token-pipeline rakibulism/agent-skills-os Automates Figma-variable exports into Tailwind/CSS/SCSS/TS design token pipelines. | DENG |
| 41 | de6-typescript rakibulism/agent-skills-os Strict typing for animation/gesture code — discriminated unions, branded types, generics. | DENG |
| 42 | de7-core-web-vitals rakibulism/agent-skills-os Elite LCP/INP/CLS on animation-heavy sites — poster LCP, hydration, layout reservation. | DENG |
| 43 | de7-profiling rakibulism/agent-skills-os Chrome DevTools profiling — flame charts, Long Tasks, heap-snapshot leak hunting. | DENG |
| 44 | de7-resource-budgets rakibulism/agent-skills-os Concrete JS/3D/image/font budgets, lazy-loading, KTX2/AVIF asset strategy. | DENG |
| 45 | de7-webgl-fallbacks rakibulism/agent-skills-os Device-tiered quality, FPS-monitored degradation, WebGL context-loss recovery. | DENG |
| 46 | de8-bundling rakibulism/agent-skills-os Vite/Rollup/Webpack setup — three.js tree-shaking, code splitting, bundle analysis. | DENG |
| 47 | de8-cicd rakibulism/agent-skills-os GitHub Actions pipelines — perf budgets, Lighthouse CI, visual regression, auto deploys. | DENG |
| 48 | de8-edge-deployment rakibulism/agent-skills-os Static-first edge architecture — platform choice, CDN caching, preview deployments. | DENG |
| 49 | de8-telemetry rakibulism/agent-skills-os Production monitoring — Sentry, WebGL error capture, RUM Core Web Vitals, FPS sampling. | DENG |
| 50 | webgl-motion-stack rakibulism/agent-skills-os Chooses the rendering/animation library layer — GSAP, PixiJS, Theatre.js, batching. | DENG |
| 51 | wgl-creative-vision rakibulism/agent-skills-os Concepts a visual mechanism before code — feeling → mechanism → illusion over brute force. | DENG |
| 52 | wgl-draw-call-batching rakibulism/agent-skills-os Deep draw-call reduction — instancing, texture atlases, frustum culling, LOD. | DENG |
| 53 | wgl-gsap-motion rakibulism/agent-skills-os GSAP timelines, ScrollTrigger, custom easing, syncing to WebGL/Canvas render loops. | DENG |
| 54 | wgl-pixijs-2d-engine rakibulism/agent-skills-os PixiJS 2D WebGL engine — ParticleContainer, sprite batching, custom GLSL filters. | DENG |
| 55 | wgl-theatrejs-editor rakibulism/agent-skills-os Theatre.js scrubbable timeline editor bound to Three.js/R3F objects and uniforms. | DENG |
| 56 | webgl-creative-animator rakibulism/agent-skills-os The systems-thinking mental model and exact formulas behind elite creative WebGL — SDFs, GPGPU particles, noise displacement, post-processing, fluid dynamics. | DENG |
| 57 | elite-website-ux-ui-designer rakibulism/agent-skills-os The mindset, frameworks, and pixel-level standards that separate the top 1% of website UX/UI designers — psychology, visual craft, conversion, and deliberate practice. | DES |
| No skills match your search. | ||
Choose from 55 ready-made skills, or author your own by dropping a SKILL.md into the skills directory.
One function per framework returns exactly the object that runtime wants — system prompt, instructions, template, or backstory.
Hand the result to your agent. No build step, no lock-in — the same skill works everywhere.
import Anthropic from "@anthropic-ai/sdk";
import { forClaude } from "universal-agent-skills";
const anthropic = new Anthropic();
const { system } = forClaude("code-reviewer");
const msg = await anthropic.messages.create({
model: "claude-opus-4-7",
max_tokens: 4096,
system,
messages: [{ role: "user", content: "Review this diff:\n\n" + diff }],
});
import OpenAI from "openai";
import { forOpenAI } from "universal-agent-skills";
const openai = new OpenAI();
const assistant = await openai.beta.assistants.create({
model: "gpt-4o",
...forOpenAI("researcher"),
});
import { PromptTemplate } from "@langchain/core/prompts";
import { forLangChain } from "universal-agent-skills";
const tw = forLangChain("test-writer");
const prompt = PromptTemplate.fromTemplate(tw.template);
const formatted = await prompt.format({
target_code: "...",
framework: "vitest",
existing_tests: "",
});
# The markdown skills are framework-neutral.
# After npm install, read the file directly:
# node_modules/universal-agent-skills/skills/<name>/SKILL.md
# Strip the frontmatter and use the body as your backstory.
from crewai import Agent
agent = Agent(
role="Researcher",
goal="Produce a cited research brief",
backstory=open("…/skills/researcher/SKILL.md").read(),
)
# Generate a JSON catalog from Node, hand it to Python:
# node -e "import('universal-agent-skills').then(...)"
import json
from autogen import AssistantAgent
skills = { s["name"]: s for s in json.load(open("skills.json")) }
agent = AssistantAgent(
name="debugger",
system_message=skills["debugger"]["instructions"],
)
loadAllSkills(): Skill[]
getSkill(name): Skill
listSkills(): SkillSummary[]
asSystemPrompt(name): string
forClaude(name): { system, metadata }
forOpenAI(name): { name, description, instructions }
forLangChain(name): { template, inputVariables }
forCrewAI(name): { role, goal, backstory }
forAutoGen(name): { name, system_message }
forGeneric(name): { name, description, version, … }
$ npm install universal-agent-skills