All authors
Claude Skills by Asymmetric-al
github.com/Asymmetric-al147 skills4 installs233 views
- Accessibility ReviewAudit and fix accessibility in Core UI. Use when changing or reviewing buttons, links, forms, validation, dialogs, menus, tabs, tables, keyboard interactions, focus management, accessible names, announcements, contrast, touch targets, reduced motion, or WCAG/a11y behavior.Votes: 0GitHub stars: 383
- Animation VocabularyReverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.Votes: 0GitHub stars: 383
- Apple DesignApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.Votes: 0GitHub stars: 383
- Ask MattAsk which skill or flow fits your situation. A router over the skills in this repo.Votes: 0GitHub stars: 383
- Control UiBuild or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI. Use for local UI verification, screenshots, accessibility snapshots, perf profiles, visual diffs, or reproducing UI bugs.Votes: 0GitHub stars: 383
- Create AgentGuides a one-question-at-a-time design interview, captures alignment in agent/EVE-BRIEF.md, then scaffolds and implements a runnable eve agent with verbose teaching comments. Use when the user wants to create a new eve agent, build an agent from scratch, or invokes /create-agent.Votes: 0GitHub stars: 383
- Design System PatternsBuild scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.Votes: 0GitHub stars: 383
- EveBuild durable backend AI agents with the eve framework. Use when creating, editing, or debugging an eve project — agent instructions, skills, tools, connections, channels, sandboxes, subagents, schedules, or evals.Votes: 0GitHub stars: 383
- Grill For UnknownsUse only when the user explicitly invokes grill-for-unknowns or asks for a map-vs-territory unknowns pass, blindspot discovery, unknown-known prototypes, or a subagent launch packet before implementation.Votes: 0GitHub stars: 383
- Idempotency HandlingImplement idempotency keys and handling to ensure operations can be safely retried without duplicate effects. Use when building payment systems, APIs with retries, or distributed transactions.Votes: 0GitHub stars: 383
- ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing,...Votes: 0GitHub stars: 383
- Improve AnimationsSurvey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.Votes: 0GitHub stars: 383
- ImproveSurvey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or where to take the project next (roadmap, product direction), or generate handoff plans for another agent to i...Votes: 0GitHub stars: 383
- Inngest AgentsUse when building durable AI agents or agentic workflows with Inngest and AgentKit, including model calls, tool calls, multi-agent networks, human approval, realtime progress, provider rate limits, crash-safe execution, and Agent Evals handoff. Covers AgentKit, `step.ai`, `step.run`, `step.waitForEvent`, native realtime, and when to use lower-level Inngest primitives instead of an in-memory agent loop. Use `inngest-agent-evals` with this skill when the user wants scoring, sessions, experiment...Votes: 0GitHub stars: 383
- Inngest ApiUse when the user explicitly asks for the Inngest REST API v2, raw HTTP, OpenAPI, API docs, API authentication, or an endpoint that the Inngest CLI does not expose. Covers api-docs.inngest.com, llms.txt, the OpenAPI v2 spec, Bearer authentication with API keys or signing keys, production and local base URLs, raw curl/fetch requests, request-shape discovery, pagination, secret redaction, and when to prefer the `inngest-api-cli` skill instead.Votes: 0GitHub stars: 383
- Inngest Brownfield AuditUse when analyzing an existing TypeScript or JavaScript codebase to decide where and how to introduce Inngest. Covers repository discovery, framework and package detection, finding durability gaps in HTTP handlers, webhooks, cron jobs, queues, long-running jobs, AI agents, Agent Evals, polling loops, eval loops, and side-effect-heavy code, then producing and implementing an incremental integration plan.Votes: 0GitHub stars: 383
- Inngest EventsUse when designing event-driven workflows, decoupling services, implementing fan-out patterns (one trigger, many downstream handlers), implementing idempotent event handling with IDs (24-hour dedupe window), or handling at-least-once delivery from external sources like Stripe webhooks. Covers Inngest event schema, payload format, naming conventions, IDs for idempotency, the ts param, fan-out patterns, and system events like inngest/function.failed.Votes: 0GitHub stars: 383
- Inngest Flow ControlUse when handling external API rate limits (e.g., OpenAI 429s, HubSpot or Stripe rate limits), preventing duplicate work from rapid event bursts (debouncing user actions), spreading load over time, ensuring per-tenant fairness, processing events in batches, limiting concurrent runs of the same operation, or assigning priority to important runs. Covers Inngest flow control: concurrency limits with keys, throttling, rate limiting, debounce, priority, singleton, and event batching.Votes: 0GitHub stars: 383
- Inngest MiddlewareUse when adding cross-cutting concerns to durable functions — structured logging or tracing across all functions, error tracking with Sentry, payload encryption for sensitive data, dependency injection of clients (DB, Stripe, etc.) into function handlers, custom telemetry, or behavior that should apply uniformly across many functions. Covers Inngest middleware lifecycle, creating custom middleware, dependencyInjectionMiddleware, @inngest/middleware-encryption, @inngest/middleware-sentry, and ...Votes: 0GitHub stars: 383
- Inngest RealtimeUse when streaming durable workflow updates to a UI in real time — live order status pages that animate as steps complete, AI agent token streaming from a function to the browser, log tailing for long-running jobs, or human-in-the-loop approval flows that publish a prompt and wait for a user reply. Covers Inngest v4 native realtime: defining typed channels, publishing from inside step.run, minting subscription tokens via server actions, and consuming the stream from React/Next.js client compo...Votes: 0GitHub stars: 383
- Inngest SetupUse when adding durable execution to a TypeScript project — building retry-safe webhook handlers, background jobs that survive crashes, scheduled tasks, or long-running workflows that outlive a single request. Covers Inngest SDK installation, client config, environment variables, serve endpoints (Next.js, Express, Hono, Fastify), connect-as-worker mode, and the local dev server.Votes: 0GitHub stars: 383
- Inngest StepsUse when implementing delays that must survive process restarts (e.g., 24-hour cart abandonment, scheduled follow-ups), waiting for human approval or external events with timeouts (review gates, webhook callbacks, async API completion), polling external services without losing state on crashes, calling other functions and awaiting their results, memoizing expensive operations so they don't re-run on retry, or running async work in parallel inside a workflow. Covers Inngest step methods: step....Votes: 0GitHub stars: 383
- Inngest V3 V4 MigrationUse when upgrading an existing TypeScript codebase from Inngest SDK v3 to v4, or when fixing mixed v3/v4 API usage. Covers detecting current SDK usage, moving triggers into createFunction options, replacing EventSchemas with eventType/staticSchema, moving serve options to the client, updating realtime imports, rewriting step.invoke string IDs, checkpointing/serverless runtime settings, Connect option changes, and verification.Votes: 0GitHub stars: 383
- Next Cache Components OptimizerDrive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then guards against regression. Use when asked to make a route's navigation instant (its static shell commits immediately), fix a route whose static shell isn't prerendered/served/pre...Votes: 0GitHub stars: 383
- Openspec Apply ChangeImplement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.Votes: 0GitHub stars: 383
- Openspec Archive ChangeArchive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.Votes: 0GitHub stars: 383
- Openspec ExploreEnter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.Votes: 0GitHub stars: 383
- Openspec ProposePropose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.Votes: 0GitHub stars: 383
- Openspec Sync SpecsSync delta specs from a change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change.Votes: 0GitHub stars: 383
- Openspec Update ChangeUpdate an OpenSpec change by revising its existing planning artifacts and keeping them coherent with one another. Use when the user wants to revise a change's plan, fold new decisions into it, or reconcile its artifacts after an edit. Never edits code.Votes: 0GitHub stars: 383
- Openspec Verify ChangeVerify implementation matches change artifacts. Use when the user wants to validate that implementation is complete, correct, and coherent before archiving.Votes: 0GitHub stars: 383
- Playwright CliUse Playwright CLI for ad hoc browser automation and interactive verification of Core UI: opening local routes, navigating, inspecting snapshots, using element refs, checking console/network activity, capturing evidence, tracing, and reproducing flows. Do not use it as a substitute for committed `@playwright/test` coverage or for non-browser unit tests.Votes: 0GitHub stars: 383
- Pr Review CanvasGenerate an interactive PR review walkthrough as an HTML page. Fetches PR data via gh API, categorizes files into core vs mechanical changes, adds reviewer annotations, and renders diffs with moved-code detection. Use when the user pastes a GitHub PR URL and asks for a review, walkthrough, or summary, or says "review this PR".Votes: 0GitHub stars: 383
- ReuiUse the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 17 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs.Votes: 0GitHub stars: 383
- Review AnimationsReviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.Votes: 0GitHub stars: 383
- VitestWrite, review, filter, mock, and debug Core unit tests with the repository's installed Vitest 4 configuration. Use for tests under Core's Vitest include paths, `vi.mock`/spies/timers, jsdom component tests, coverage output, focused reruns, or unit-test failures. Do not use for browser E2E flows or async Next.js Server Components.Votes: 0GitHub stars: 383
- AnimTasteful, subtle web UI animation following Emil Kowalski / animations.dev principles. Use when adding or reviewing interface motion — hover and press feedback, entrances and exits, modals, toasts, menus, loading and skeleton states, staggered reveals, page or view transitions — so motion stays refined and purposeful, not decorative. Covers CSS, Web Animations, and React timing/easing. Pair with the motion skill for motion/react API specifics.Votes: 0GitHub stars: 383
- Bendc Frontend GuidelinesHTML, CSS, and JavaScript craft guidelines from bendc/frontend-guidelines — semantics, a11y basics, selector discipline, motion-friendly CSS, and readable JS. Use for markup review, static HTML/CSS, email HTML, or general front-end hygiene; pair with repo frontend rules and TypeScript lint policy.Votes: 0GitHub stars: 383
- Cache ComponentsBuild correct cached/dynamic boundaries in the Next.js App Router when Cache Components or PPR are enabled. Use when working with cacheComponents, Partial Prerendering (PPR), 'use cache', cacheLife, cacheTag, updateTag, or revalidateTag, to avoid request-context leaks and enforce proper cache invalidation. Not for the Pages Router or when Cache Components/PPR are off.Votes: 0GitHub stars: 383
- CommitCreate a Conventional Commit message for staged changes and run git commit. Use when changes are staged and you need a commit message in the form type(scope): subject, with a <=100 character imperative header and optional 'ref AL-###' body line. Retained for reference; use only when explicitly asked for this commit workflow.Votes: 0GitHub stars: 383
- Domain ModelAlias for domain-modeling. Use when the user asks for domain modeling, ubiquitous language, domain terminology, glossary work, or DDD vocabulary.Votes: 0GitHub stars: 383
- MotionImplement smooth, accessible animations with motion/react (Framer Motion) in React. Use when adding animations, gestures, or layout transitions with motion, AnimatePresence, useScroll, and related APIs. Requires a 'use client' boundary; not for strictly server-rendered components or when no animation is needed.Votes: 0GitHub stars: 383
- Nextjs App RouterEnsure correct Next.js App Router architecture, rendering strategy, and data fetching. Use whenever working under /app — routing, layouts, server/client component boundaries, data fetching, Suspense, and Server Actions. Defaults to Server Components and adds 'use client' only for interactivity. Not for the Pages Router (/pages).Votes: 0GitHub stars: 383
- Npm Deps CleanupAudit and reduce JavaScript package dependency footprint across npm, pnpm, Yarn, and Bun projects. Use when asked to remove unused dependencies, deduplicate workspace dependency versions, lockfiles or node_modules, analyze direct dependencies' transitive lockfile closure, find low-risk upgrades that reduce dependency trees, inline trivial dependencies, or apply e18e dependency replacement recommendations.Votes: 0GitHub stars: 383
- Prd To PlanLegacy router from PRD/spec intent to the current Matt Pocock spec and ticket flow. Prefer to-spec and to-tickets.Votes: 0GitHub stars: 383
- React Component DevBuild reusable, accessible React components with predictable APIs and ref forwarding. Use when creating or refactoring components or defining component APIs, favoring composition over configuration and slots/children over many boolean props. Not needed for style-only or content-only edits that do not change a component API.Votes: 0GitHub stars: 383
- RechartBuild responsive, readable charts with Recharts using correct data mapping and composition. Use whenever creating charts with Recharts — LineChart, BarChart, AreaChart, PieChart, wrapped in ResponsiveContainer with a fixed-height parent. Not for charts built with other libraries.Votes: 0GitHub stars: 383
- Repo EntryAudit or update Core's repository instruction system and skill mirrors. Use for AGENTS.md architecture, canonical skill ownership, skills:sync, or skills:verify; do not invoke for ordinary application work.Votes: 0GitHub stars: 383
- Shadcn UiExpert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.Votes: 0GitHub stars: 383
- Tailwind V4 ShadcnSet up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.Votes: 0GitHub stars: 383