UI Components
Code-based UI component generation and styling
accelint-persona-review
by gohypergiant
Evaluate Figma designs from operator persona perspectives through design critique and user experience evaluation. Use when reviewing UX for specific user roles (e.g., air-surveillance-tech, weapons-director), conducting design reviews, or evaluating operator interfaces. Analyzes cognitive load, communication patterns, pain points, and system visibility. Works with Figma MCP (desktop/URL) and Outline docs.
accelint-react-best-practices
by gohypergiant
React performance optimization and best practices. Use when writing React components, hooks, or JSX; refactoring React code; optimizing re-renders, memoization, or state management; reviewing React code for performance issues; fixing hydration mismatches; or implementing transitions, lazy initialization, or effect dependencies. Covers React 19+ features including useEffectEvent, Activity component, and ref props.
accelint-nextjs-best-practices
by gohypergiant
Next.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.
accelint-react-testing
by gohypergiant
Use when writing, reviewing, or refactoring React component tests with Testing Library. Load when you see render(), screen, fireEvent, userEvent, waitFor, or *.test.tsx files. Covers query priority (getByRole > getByLabelText > getByText), user-centric testing patterns, async utilities, custom renders with providers, and accessibility-first assertions. Keywords include RTL, Testing Library, screen, getByRole, findBy, queryBy, userEvent, waitFor, toBeInTheDocument, testing-library/react, testing-library/user-event, jest-dom.
Web Interface Guidelines
by quran
Frontend build on next.js
style-guide
by DaleSeo
문서 내부 또는 프로젝트 전체에서 일관된 작성 스타일을 유지하도록 돕는 검사기. 어조(경어체/반말), 용어(사용자/유저), 숫자 형식, 목록 스타일, 따옴표, 날짜/시간 형식의 불일치를 감지합니다. 다중 작성자 문서 검토 시, 프로젝트 전체 용어 표준 유지 시, 공식 문서 준비 시, 브랜드 일관성을 위한 문서 작업 시 사용하세요.
Vercel React Best Practices
by quran
Frontend build on next.js
vercel-react-best-practices
by quran
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should
Vercel React Best Practices
by quran
Frontend build on next.js
erpnext-syntax-jinja
by OpenAEC-Foundation
Deterministic Jinja template syntax for ERPNext/Frappe Print Formats, Email Templates, and Portal Pages
clone-website
by julianromli
Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".
swift-architecture-skill
by efremidze
Agent Skill for Swift architecture design and implementation patterns, with architecture-specific playbooks and review checklists. Use when designing new features, refactoring existing modules, reviewing pull requests, or debugging maintainability issues in SwiftUI/UIKit projects and you need concrete guidance for MVVM, MVI, TCA, Clean Architecture, VIPER, or Reactive patterns.
code-simplifier
by steveclarke
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise.
domain-name-brainstormer
by steveclarke
Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.
tanstack-query
by tenequm
Master TanStack Query (React Query) v5 for server state management in React applications. Use when fetching data from APIs, managing server state, caching, handling mutations, streaming AI responses, or integrating with tRPC v11. Triggers on phrases like "react query", "tanstack query", "data fetching", "cache management", "server state", "streamed query", "streaming data", or file patterns like query.ts, Query.tsx, queryClient.ts.
ruby-cli
by steveclarke
Build and maintain Ruby CLI tools using Thor and Zeitwerk. Use when creating new Ruby CLI gems, adding commands, editing CLI code, refactoring, or enhancing existing CLI tools. Triggers on "Ruby CLI", "Thor CLI", "command-line tool in Ruby", or when working on files in a Thor/Zeitwerk CLI codebase.
chrome-extension-wxt
by tenequm
Build Chrome extensions using WXT framework with TypeScript, React, Vue, or Svelte. Use when creating browser extensions, developing cross-browser add-ons, or working with Chrome Web Store projects. Triggers on phrases like "chrome extension", "browser extension", "WXT framework", "manifest v3", or file patterns like wxt.config.ts.
tanstack-router
by tenequm
Build type-safe React applications with TanStack Router. Use when implementing file-based or code-based routing, type-safe navigation, search params validation, data loading, code splitting, or route-level error handling. Triggers on "tanstack router", "file-based routing", "type-safe routing", "search params", "route loader", or file patterns like routes/*.tsx, __root.tsx, routeTree.gen.ts.
guided-config
by steveclarke
Guide through service/tool configuration step-by-step while maintaining clean documentation of the successful setup path. Captures screenshots, filters failed attempts, and produces a polished README. Use when setting up integrations, configuring services, or documenting setup processes. Triggers on "help me configure", "set up integration", "guided setup".
better-stimulus
by steveclarke
Apply Better Stimulus best practices for writing maintainable, reusable StimulusJS controllers following SOLID principles
nuxt-ui
by steveclarke
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
tanstack-start
by tenequm
Build full-stack React applications with TanStack Start. Use when creating SSR/SSG apps, server functions, API routes, middleware, or deploying to Cloudflare/Vercel/Node. Triggers on "tanstack start", "server functions", "createServerFn", "full-stack react", "SSR framework", or file patterns like vite.config.ts with tanstackStart, src/server.ts, *.server.ts.
styling-with-tailwind
by tenequm
Creates UIs using Tailwind CSS utility classes and shadcn/ui patterns. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tailwind, styling shadcn/ui components, implementing themes, or working with utility-first CSS.
feature-spec
by steveclarke
Technical Specification