All authors
Claude Skills by Asymmetric-al
github.com/Asymmetric-al155 skills2 installs225 views
- 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
- WayfinderPlan a huge chunk of work — more than one agent session can hold — as a shared map of investigation tickets on your issue tracker, and resolve them one at a time until the way to the destination is clear.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
- Base UiBuild accessible, composable UI with @base-ui/react primitives and project styling tokens. Use when creating or refining unstyled primitive components and behavior-heavy UI such as overlays, menus, popovers, dialogs, and form controls, or defining custom component APIs. Prefer the moai-library-shadcn skill when copied-in shadcn components are the primary implementation path.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
- Better FormsComplete guide for building accessible, high-UX forms in modern stacks (React/Next.js, Tailwind, Zod). Includes specific patterns for clickable areas, range sliders, output-inspired design, and WCAG compliance.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
- Code ReviewReview the changes since a fixed point (commit, branch, tag, or merge-base) along two axes — Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what the originating issue/PRD asked for?). Runs both reviews in parallel sub-agents and reports them side by side. Use when the user wants to review a branch, a PR, work-in-progress changes, or asks to "review since X".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
- Components BuildBuild modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.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
- Emil Design EngThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. Use as a craft companion after Core's frontend, emil-design-engineering, and anim guidance.Votes: 0GitHub stars: 383
- InngestRouter for official Inngest agent skills. Use when you are unsure which specific Inngest skill applies.Votes: 0GitHub stars: 383
- Moai Library ShadcnBuild UI with Core's shadcn/Base UI system. Use for selecting, installing, composing, or customizing shadcn/ui, registry items, themes, and wrappers. Always preserve exact style `base-maia`, Zinc-oriented semantic CSS-variable tokens, and Base UI primitives. Do not use to switch styles, run `shadcn init`, or introduce Radix/React Aria. Pair with `packages/ui/AGENTS.md`.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
- React DoctorInstalls and runs Million's React Doctor to audit a React or Next.js codebase for performance, security, correctness, and architecture issues. Use when the user mentions react-doctor, React Doctor, millionco/react-doctor, performance audits, code health, bundle size, or suspicious React patterns.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
- Setup Matt Pocock SkillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.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
- SupabaseUse when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector).Votes: 0GitHub stars: 383
- Tailwind Design SystemBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.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
- TddTest-driven development for substantive feature, bug-fix, and behavior-changing work. Use automatically when implementing features, fixing bugs, or changing behavior (red → green → refactor). Also use when the user mentions TDD, /tdd, /TDD, or red-green-refactor. Do not use for documentation-only, formatting-only, exact generated-mirror, or provenance-only changes.Votes: 0GitHub stars: 383
- TriageMove issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.Votes: 0GitHub stars: 383
- Vercel React View TransitionsGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions v...Votes: 0GitHub stars: 383
- repo-entryPointer to the canonical agent instruction and skill system for this monorepoVotes: 0GitHub stars: 383
- Systematic DebuggingUse when encountering any bug, test failure, or unexpected behavior, before proposing fixesVotes: 0GitHub stars: 383
- Nextjs App ArchitectureBuild or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or following Cache Components Inst...Votes: 0GitHub stars: 383
- Animate ExpoBuild animations for Expo and React Native only, using Reanimated, Gesture Handler, Expo Router, and expo-haptics. Use when the target runtime is an Expo or React Native app. Do not use it for Core Next.js web motion; use `animate` for web. Only runs when explicitly invoked; it does not trigger on its own.Votes: 0GitHub stars: 382
- AnimateBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations. Only runs when explicitl...Votes: 0GitHub stars: 382
- Ask SonnerGuide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.Votes: 0GitHub stars: 382
- Better AccessibilityHelps your project comply with accessibility standards and best practices.Votes: 0GitHub stars: 382
- Better InterfaceCombines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.Votes: 0GitHub stars: 382
- Better LayoutExplicit layout reference for grouping, alignment, reading order, and progressive disclosure. Use only after Core frontend rules. Do not restyle product apps from these examples.Votes: 0GitHub stars: 382
- Better WritingFocuses on improving product copy in your project.Votes: 0GitHub stars: 382
- Claude HandoffHand the current conversation off to a fresh background agent that picks up the work immediately.Votes: 0GitHub stars: 382
- Emil PrototypeBuild multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.Votes: 0GitHub stars: 382
- Inngest Api CliUse when operating Inngest API resources from the terminal with `npx inngest-cli@latest api`: Cloud/local run debugging, event-run lookup, function traces, function invocation, app syncs, webhooks, environments, keys, account checks, and Insights queries. Provides prescriptive command routing for agents: which CLI command to run for a run ID, event ID, app ID, function ID, Cloud environment, API key, missing ID, or potentially mutating operation. Use `inngest-cli` for dev server setup/general...Votes: 0GitHub stars: 382
- Loop MeGrill me about specs for the workflows I want to build, within this workspace.Votes: 0GitHub stars: 382
- Next Cache Components AdoptionTurn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.Votes: 0GitHub stars: 382
- Pick Ui LibraryPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.Votes: 0GitHub stars: 382
- Redesign Existing ProjectsUpgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.Votes: 0GitHub stars: 382
- Samson FactoryCoordinator-only native Codex issue-to-develop workflow. Specialists use only their assigned role and task.Votes: 0GitHub stars: 382