All authors
Claude Skills by Asymmetric-al
github.com/Asymmetric-al147 skills4 installs233 views
- Anim**Name:** `anim` **Purpose:** Tasteful, subtle web animations following Emil Kowalski's philosophy and animations.dev principles. Use this skill when adding motion to interfaces — hover states, page transitions, micro-interactions, loading states, or any UI animation — so motion stays refined and purposeful, not decorative noise. **Applies when:** Adding or reviewing UI motion (CSS, Web APIs, or React); hover and press feedback; entrances/exits; modals, toasts, menus; loading and skeleton pat...Votes: 0GitHub stars: 383
- Api Design PrinciplesMaster REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.Votes: 0GitHub stars: 383
- Architecture PatternsImplement proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design. Use when architecting complex backend systems or refactoring existing applications for better maintainability.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
- Bats Testing PatternsMaster Bash Automated Testing System (Bats) for comprehensive shell script testing. Use when writing tests for shell scripts, CI/CD pipelines, or requiring test-driven development of shell utilities.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 Components**Name:** `cache-components` **Purpose:** Build correct cached/dynamic boundaries in Next.js App Router when Cache Components or PPR are in use. Use this skill to avoid request-context leaks and to enforce proper cache invalidation. **Applies when:** `cacheComponents: true`, Partial Prerendering (PPR), `'use cache'`, `cacheLife`, `cacheTag`, `updateTag`, `revalidateTag`. **Do not use when:** Working in the Pages Router or when Cache Components/PPR are not enabled.Votes: 0GitHub stars: 383
- Clean CodeApplies principles from Robert C. Martin's 'Clean Code'. Use this skill when writing, reviewing, or refactoring code to ensure high quality, readability, and maintainability. Covers naming, functions, comments, error handling, and class design.Votes: 0GitHub stars: 383
- Cms MigrationUse when user wants to migrate content from another CMS (WordPress, Contentful, Strapi, Sanity, Webflow, etc.) to Payload CMSVotes: 0GitHub stars: 383
- Code Review ExcellenceMaster effective code review practices to provide constructive feedback, catch bugs early, and foster knowledge sharing while maintaining team morale. Use when reviewing pull requests, establishing review standards, or mentoring developers.Votes: 0GitHub stars: 383
- CommitRetained for reference only. This skill is not part of the active repo routing and should not be used unless a user explicitly asks for this commit workflow. **Name:** `commit` **Purpose:** Create a Conventional Commit message for staged changes and run `git commit`. Use this skill when you are ready to commit work in this repo. **Applies when:** Changes are staged and you need a commit message. **Do not use when:** Nothing is staged or you are not using Git.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 ubiquitous-language (DDD glossary / domain terminology). See ubiquitous-language for full workflow.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
- Emil Design EngineeringDesign engineering principles and patterns for building polished, accessible web interfaces. Use this skill when building UI components, reviewing frontend code, implementing forms, handling touch interactions, optimizing performance, or creating marketing pages. Triggers on: design engineering, UI polish, input fields, form validation, button states, touch devices, mobile UX, accessibility, a11y, keyboard navigation, aria labels, font rendering, typography, layout shift, z-index, animations,...Votes: 0GitHub stars: 383
- Find SkillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.Votes: 0GitHub stars: 383
- InngestRouter for official Inngest agent skills. Use when you are unsure which specific Inngest skill applies.Votes: 0GitHub stars: 383
- Interface DesignThis skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).Votes: 0GitHub stars: 383
- Lint And ValidateAutomatic quality control, linting, and static analysis procedures. Use after every code modification to ensure syntax correctness and project standards. Triggers onKeywords: lint, format, check, validate, types, static analysis.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
- Motion**Name:** `motion` **Purpose:** Implement smooth, accessible animations with `motion/react` in React. Use this skill whenever adding animations, gestures, or layout transitions. **Applies when:** Using `motion/react` (`motion`, `AnimatePresence`, `useScroll`, etc.). **Do not use when:** No animations are needed or the component is strictly server-rendered.Votes: 0GitHub stars: 383
- Nextjs App Router**Name:** `nextjs-app-router` **Purpose:** Ensure correct App Router architecture, rendering strategy, and data fetching in Next.js. Use this skill whenever working under `/app`. **Applies when:** Routing, layouts, server/client boundaries, data fetching, Suspense, Server Actions. **Do not use when:** Working in the Pages Router (`/pages`) or non-Next.js projects.Votes: 0GitHub stars: 383
- Nextjs Supabase AuthIntegrate Supabase Auth with Next.js App Router using middleware, callback handling, protected routes, and server/client client boundaries.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
- PayloadUse when working with Payload projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.Votes: 0GitHub stars: 383
- Payloadcms Cms MigrationUse when user wants to migrate content from another CMS (WordPress, Contentful, Strapi, Sanity, Webflow, etc.) to Payload CMSVotes: 0GitHub stars: 383
- Playwright SkillBattle-tested Playwright patterns for writing, debugging, and scaling reliable test suites. Use when you need guidance for E2E, API, component, visual, accessibility, or security testing, plus CI/CD, CLI automation, page objects, and migration from Cypress or Selenium. TypeScript and JavaScript.Votes: 0GitHub stars: 383
- CiProduction-ready CI/CD configurations for Playwright — GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, parallel sharding, reporting, code coverage, and global setup/teardown.Votes: 0GitHub stars: 383
- CoreBattle-tested Playwright patterns for writing and debugging reliable E2E, API, component, visual, accessibility, and security tests. Use when you need locator strategy, assertions, fixtures, network mocking, auth flows, trace debugging, or framework recipes for React, Next.js, Vue, and Angular. TypeScript and JavaScript.Votes: 0GitHub stars: 383
- MigrationStep-by-step migration guides for moving to Playwright from Cypress or Selenium/WebDriver — command mappings, architecture changes, and incremental adoption strategies.Votes: 0GitHub stars: 383
- PomPage Object Model patterns for Playwright — when to use POM, how to structure page objects, and when fixtures or helpers are a better fit.Votes: 0GitHub stars: 383
- React Component Dev**Name:** `react-component-dev` **Purpose:** Build reusable, accessible React components with predictable APIs and ref forwarding. Use this skill when creating or refactoring components. **Applies when:** Building new components, refactoring UI components, or defining component APIs. **Do not use when:** Only editing styles or content in existing components without API changes.Votes: 0GitHub stars: 383
- React EmailUse when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component. # pragma: allowlist secretVotes: 0GitHub stars: 383
- Rechart**Name:** `recharts` **Purpose:** Build responsive, readable charts with Recharts using correct data mapping and composition. Use this skill whenever creating charts with Recharts. **Applies when:** Using `LineChart`, `BarChart`, `AreaChart`, `PieChart`, `ResponsiveContainer`. **Do not use when:** Charts are not built with Recharts.Votes: 0GitHub stars: 383
- Remotion Best PracticesBest practices for Remotion - Video creation in ReactVotes: 0GitHub stars: 383
- Repo EntryDefault orientation skill for work in this monorepo. Pointer to AGENTS.md, canonical skills under docs/ai/skills/, and the skills:sync / skills:verify workflow for mirror directories.Votes: 0GitHub stars: 383
- Resend CliOperate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, templates, webhooks, API keys, logs, automations, and events via the `resend` CLI. Use when the user wants to run Resend commands in the shell, scripts, or CI/CD pipelines, or send/preview React Email templates. Always load this skill before running `resend` commands — it contains the non-interactive flag contract and gotchas that prevent ...Votes: 0GitHub stars: 383
- ResendUse when working with the Resend email API — sending transactional emails (single or batch), receiving inbound emails via webhooks, managing email templates, tracking delivery events, managing domains, contacts, broadcasts, webhooks, API keys, automations, events, viewing API request logs, or setting up the Resend SDK. Always use this skill when the user mentions Resend, even for simple tasks like "send an email with Resend" — the skill contains critical gotchas (idempotency keys, webhook ver...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
- Supabase Postgres Best PracticesPostgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and scheduled jobs (pg_cron, pgmq), vector/semantic search (pgvector), and restoring dumps (pg_restore) or im...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, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); ...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
- TiptapHelps coding agents integrate and work with the Tiptap rich text editor. Use when building or modifying a rich text editor with Tiptap, installing Tiptap extensions, or implementing features like collaboration, comments, AI, or document conversion.Votes: 0GitHub stars: 383
- TurborepoTurborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.Votes: 0GitHub stars: 383
- Typescript ExpertTypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling. Use PROACTIVELY for any TypeScript/JavaScript issues including complex type gymnastics, build performance, debugging, and architectural decisions. If a specialized expert is a better fit, I will recommend switching and stop.Votes: 0GitHub stars: 383
- Upgrade StripeGuide for upgrading Stripe API versions and SDKsVotes: 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
- Generate TranslationsUse when new translation keys are added to packages to generate new translations stringsVotes: 0GitHub stars: 383
- Triage Ci FlakeUse when CI tests fail on main branch after PR merge, or when investigating flaky test failures in CI environmentsVotes: 0GitHub stars: 383