All authors
Claude Skills by Asymmetric-al
github.com/Asymmetric-al155 skills2 installs225 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
- 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/spec 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
- 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
- Email Best PracticesUse when building email features, emails going to spam, high bounce rates, setting up SPF/DKIM/DMARC authentication, implementing email capture, ensuring compliance (CAN-SPAM, GDPR, CASL), handling webhooks, retry logic, or deciding transactional vs marketing.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
- Payloadcms PayloadPayload CMS application development (collections, fields, hooks, access control, Local/REST/GraphQL queries, adapters, plugins). Vendored from payloadcms/skills. Use when editing payload.config.ts, Payload collections, admin, or debugging validation, security, relationships, transactions, or hooks in this repo.Votes: 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
- Playwright CliAutomates browser interactions for testing and validating your own web applications using playwright-cli. Use when you need terminal-first browser control for navigation, form filling, screenshots, tracing, bound browser sessions, debugging, or generating Playwright test code. Only use against applications you own or have explicit authorization to test.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
- Prd To PlanBridge from PRD to an implementation plan. Upstream mattpocock/skills has no skill by this id—use to-prd, OpenSpec changes, and architecture skills instead.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 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
- 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
- Setup Matt Pocock SkillsSets up an `## Agent skills` block in AGENTS.md/CLAUDE.md and `docs/agents/` so the engineering skills know this repo's issue tracker (GitHub or local markdown), triage label vocabulary, and domain doc layout. Run before first use of `to-issues`, `to-prd`, `triage`, `diagnose`, `tdd`, `improve-codebase-architecture`, or `zoom-out` — or if those skills appear to be missing context about the issue tracker, triage labels, or domain docs.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
- Skill CreatorCreate new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.Votes: 0GitHub stars: 383
- Stripe Best PracticesGuides Stripe integration decisions — API selection (Checkout Sessions vs PaymentIntents), Connect platform setup (Accounts v2, controller properties), billing/subscriptions, Treasury financial accounts, integration surfaces (Checkout, Payment Element), migrating from deprecated Stripe APIs, and security best practices (API key management, restricted keys, webhooks, OAuth). Use when building, modifying, or reviewing any Stripe integration — including accepting payments, building marketplaces,...Votes: 0GitHub stars: 383
- Stripe ProjectsUse when the user needs to provision a third-party service available on https://projects.dev/providers; create or retrieve a provider/service API, key or token; sign up for a service; or references projects.dev. Handles the full flow from checking provider availability through project initialization, then hands off to locally installed skills.Votes: 0GitHub stars: 383