UI Components
Code-based UI component generation and styling
react-modernization
by HermeticOrmus
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
action-mailer-patterns
by ThibautBaissac
Implements transactional emails with Action Mailer and TDD. Use when creating email templates, notification emails, password resets, email previews, or when user mentions mailer, email, notifications, or transactional emails.
deep-investigation
by scitix
Structured hypothesis-driven investigation for complex infrastructure issues. Triggered by /dp command or [Deep Investigation] UI toggle.
angular-component
by zard-ui
Create modern Angular standalone components following v20+ best practices. Use for building UI components with signal-based inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks. Triggers on component creation, refactoring class-based inputs to signals, adding host bindings, or implementing accessible interactive components.
pr-review
by OneKeyHQ
Security-first PR review checklist for this repo. Use when reviewing diffs/PRs, especially changes involving auth, networking, sensitive data, or dependency/lockfile updates. Focus on secret/PII leakage risk, supply-chain risk (npm + node_modules inspection), cross-platform architecture (extension/mobile/desktop/web), and React performance (hooks + re-render hotspots). Avoid UI style nitpicks. PR Review.
1k-cross-platform
by OneKeyHQ
Cross-platform development patterns — platform-specific code (.native.ts/.web.ts/.desktop.ts/.ext.ts) and platformEnv usage.
1k-coding-patterns
by OneKeyHQ
Coding patterns and best practices — React components, promise handling, and TypeScript conventions.
1k-ui-recipes
by OneKeyHQ
UI recipes for scroll offset (useScrollContentTabBarOffset), view transitions (startViewTransition), horizontal scroll in collapsible tab headers (CollapsibleTabContext), and Android bottom tab touch interception workaround.
1k-sentry
by OneKeyHQ
Sentry error tracking and monitoring for OneKey. Use when configuring Sentry, filtering errors, analyzing crash reports, or debugging production issues. Covers platform-specific setup (desktop/mobile/web/extension) and error filtering strategies.
alphabetically-ordered-aliases
by blockscout
Ensure that aliases are alphabetically ordered within their groups to maintain consistent code style and address Credo readability warnings.
best-practices
by addyosmani
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
tailwindcss-development
by spatie
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
livewire-development
by spatie
Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior; writing Livewire tests; or when the user mentions Livewire, component, counter, or reactive UI.
bulk-rna-seq-differential-expression-with-omicverse
by Starlitnightly
Guide Claude through omicverse's bulk RNA-seq DEG pipeline, from gene ID mapping and DESeq2 normalization to statistical testing, visualization, and pathway enrichment. Use when a user has bulk count matrices and needs differential expression analysis in omicverse.
Remotion
by danielmiessler
Programmatic video creation with React. USE WHEN video, animation, motion graphics, video rendering, React video, intro video, YouTube video, TikTok video, video production, render video.
building-blocks
by adobe
Guide for implementing code changes in AEM Edge Delivery Services. Handles block development (new or modified), core functionality changes (scripts.js, styles, delayed.js, etc.), or both. Use this skill for all implementation work guided by the content-driven-development workflow.
angular-ssr
by zard-ui
Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handling browser-only APIs. Triggers on SSR configuration, fixing hydration mismatches, prerendering routes, or making code SSR-compatible.
jira-epic
by Gentleman-Programming
Creates Jira epics for large features following Prowler's standard format. Trigger: When user asks to create an epic, large feature, or multi-task initiative.
react-19
by Gentleman-Programming
React 19 patterns with React Compiler. Trigger: When writing React components - no useMemo/useCallback needed.
jira-epic
by Gentleman-Programming
Creates Jira epics for large features following Prowler's standard format. Trigger: When user asks to create an epic, large feature, or multi-task initiative.
sdd-apply
by Gentleman-Programming
Implement tasks from the change, writing actual code following the specs and design. Trigger: When the orchestrator launches you to implement one or more tasks from a change.
sdd-propose
by Gentleman-Programming
Create a change proposal with intent, scope, and approach. Trigger: When the orchestrator launches you to create or update a proposal for a change.
react-19
by Gentleman-Programming
React 19 patterns with React Compiler. Trigger: When writing React components - no useMemo/useCallback needed.
sdd-tasks
by Gentleman-Programming
Break down a change into an implementation task checklist. Trigger: When the orchestrator launches you to create or update the task breakdown for a change.