Web & Frontend

shipshitdev Skill

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

shipshitdev Bundle

Architectural refactoring guide for React applications covering component architecture, state architecture, hook patterns, component decomposition, coupling and cohesion, data flow, and refactoring safety. Use when refactoring React codebases, reviewing PRs for architectural issues, decomposing oversized components, or improving module boundaries. Does NOT cover React 19 API usage (see react skill) or performance optimization (see react-optimise skill).

shipshitdev Bundle

Expert in testing strategies for React, Next.js, and NestJS applications covering unit tests, integration tests, E2E tests, and testing best practices

shipshitdev Bundle

React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, and useFieldArray. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).

shipshitdev Bundle

Expert in application security, OWASP Top 10, authentication, authorization, data protection, and security best practices for React, Next.js, and NestJS applications

shipshitdev Bundle

Expert in performance optimization for React, Next.js, NestJS applications covering frontend rendering, API response times, database queries, and infrastructure optimization

shipshitdev Bundle

Expert in error handling patterns, exception management, error responses, logging, and error recovery strategies for React, Next.js, and NestJS applications

shipshitdev Bundle

React Testing Library best practices for writing maintainable, user-centric tests. Use when writing, reviewing, or refactoring RTL tests. Triggers on test files, testing patterns, getBy/queryBy queries, userEvent, waitFor, and component testing.

shipshitdev Bundle

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

shipshitdev Bundle

Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples

shipshitdev Bundle

Diagnose slow React components and suggest targeted performance fixes.

peterish8 Bundle

Comprehensive Google HTML/CSS style rules with section-level guidance. Use when google-html-css-style is insufficient, for thorough reviews, or when the user names this skill.

thiientv Bundle

Audits an existing rendered interface or frontend diff for hierarchy, content clarity, interaction states, accessibility, responsive behavior, visual consistency, performance-sensitive UI patterns, and anti-generic design defects. Use for a UI/UX review, redesign audit, screenshot review, pre-release visual check, or design-system consistency pass. Not for building a new interface from scratch or for backend-only review.

thiientv Bundle

Tests a real web user flow with a browser by asserting semantic behavior, network and loading states, keyboard access, responsive layouts, and stable visual evidence. Use for browser bugs, end-to-end UI behavior, responsive or accessibility checks, and screenshot baselines. Not for static source review without a browser or for backend-only tests.

thiientv Bundle

Designs or reviews HTTP, REST, GraphQL, RPC, CLI, webhook, event, and service interfaces with explicit inputs, outputs, errors, compatibility, idempotency, pagination, authentication, versioning, and observability. Use when introducing or changing an API or cross-component contract. Not for internal implementation details with no boundary or for debugging one API failure; use root-cause-debugging there.

thiientv Bundle

Designs or reviews logs, metrics, traces, alerts, correlation, dashboards, and diagnostic instrumentation so failures and performance changes can be detected and explained at component boundaries. Use for observability work, incident readiness, instrumentation, or production diagnostics. Not for fixing a specific incident before reproducing it or for adding noisy logging without an operational question.

vasuag09 Skill

Measure whether a harness component (a skill, agent, or rule) actually earns its keep — run the same task k times with and without it, in isolated git worktrees, and report pass@k (works once) and pass^k (works consistently). Opt-in; not wired into the default pipeline. Use to decide keep-vs-cut on evidence, or to fill the R5 benchmark for a /extract proposal.

vasuag09 Skill

Craft + UX review of a user-facing change before merge — visual hierarchy, accessibility floor, and AI-slop tells, against an approval bar. Use in the VERIFY phase for any change that touched a UI surface, parallel to /security-review. Judges by default; reports severity-tagged findings, does not rebuild unless asked.

valorisa Skill

À utiliser quand on demande de lancer une Storm Recherche, d'utiliser le skill storm-research, d'appliquer la méthode STORM à un sujet, dit « storm recherche sur X » / « briefing STORM sur X ». Ce skill exécute la méthode STORM en plusieurs phases et produit un briefing HTML vérifié.

shawnclybor Bundle

Generate a session output — a report of what a working session actually did — in one of two modes. Default mode emits a polished self-contained HTML dashboard (light and dark, validated palette) for a technical decision-maker, a client, or your own record. Plain-language mode, invoked as "/session-output simplify" or by asking for plain English, no jargon, or a readable recap, emits prose instead — what was asked for, what the session did, where things stand now, what is still open, and the recommended next step, in complete sentences that name every subject and referent. Use when the user says "session output", "session report", "summarize this session", "recap what you did", "simplify the output", "explain that in plain English", or "no jargon". Both modes report MEASURED outcomes only, never invented, list the skills and tools used, and run the file-hygiene gate over every file the session touched.

ferocknew Bundle

当用户要求"发送邮件"或需要在 JavaScript/Node.js 环境中通过 SMTP 发送邮件时使用此 skill。支持纯文本、HTML、Markdown 格式邮件，以及多收件人和附件功能。

ferocknew Bundle

当用户要求"读取 Word 文档"、"解析 DOCX 文件"、"将 Word 转换为 Markdown"、"提取文档内容"、"读取 docx"时，或者需要在 JavaScript/Node.js 环境中读取 Microsoft Word 文档（.docx）并转换为 Markdown、HTML 或纯文本格式时使用此 skill。

dtsong Skill

Use when a user reports a frontend bug, visual defect, or unexpected behavior in a Next.js/TypeScript application. Orchestrates a multi-phase QA pipeline — component mapping, diagnosis, fix, and regression testing — by classifying symptoms and dispatching to the appropriate specialist skill. Does not perform diagnosis or fixes directly; delegates all domain work to specialists. Not for backend-only issues, infrastructure problems, or build/deployment failures.

jh941213 Skill

빅테크 스타일(Stripe, Vercel, Apple) UI 개발. 플래닝 → 구현까지 한 번에. 트리거: "프론트엔드", "UI 만들어", "페이지 만들어", "컴포넌트 만들어", "랜딩 페이지", "대시보드 UI" 안티-트리거: "백엔드 API", "데이터베이스", "CLI 도구"

jh941213 Bundle

Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts. 안티-트리거: "Material UI", "Chakra UI", "순수 CSS 컴포넌트"

jh941213 Skill

Stitch를 사용하여 자율적으로 멀티 페이지 웹사이트를 생성하는 반복 빌드 루프 패턴 — 바통 시스템으로 지속적 웹사이트 개발. Triggers on: Stitch 루프, 웹사이트 생성, 멀티 페이지, 빌드 루프. NOT for: 단일 페이지, React 앱.

jh941213 Skill

Stitch 스크린을 React 컴포넌트 시스템으로 변환합니다 — 디자인 토큰 추출, 컴포넌트 분해, TypeScript 타입 생성, 자동 검증 포함. Triggers on: Stitch React, 컴포넌트 변환, React 변환, HTML to React. NOT for: 새 React 앱 생성, API 구현.

jh941213 Bundle

Comprehensive React 19 patterns expert covering Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and modern TypeScript development. 트리거: "React", "컴포넌트", "hooks", "JSX/TSX", "상태 관리" 안티-트리거: "Vue", "Svelte", "Angular", "백엔드"

jh941213 Skill

Stitch 프로젝트를 분석하여 DESIGN.md 파일을 생성합니다 — 디자인 시스템을 시맨틱하고 자연스러운 언어로 문서화하여 일관된 UI 생성을 지원합니다. Triggers on: Stitch, 디자인 시스템, DESIGN.md, Stitch 디자인 분석. NOT for: React 컴포넌트 변환, 코드 구현.

jh941213 Bundle

REST 및 GraphQL API 설계 원칙 가이드. 새로운 API 설계, API 스펙 리뷰, API 설계 표준 수립 시 활용. 트리거: "API 설계", "REST", "GraphQL", "엔드포인트 설계", "API versioning", "API 패턴" 안티-트리거: "프론트엔드 UI", "데이터베이스 스키마만", "CSS/스타일링", "배포/인프라"

jh941213 Skill

모호한 UI 아이디어를 Stitch에 최적화된 상세 프롬프트로 변환합니다 — 구체성 향상, UI/UX 키워드 추가, 디자인 시스템 컨텍스트 주입. Triggers on: 프롬프트 향상, Stitch 프롬프트, UI 아이디어, 프롬프트 개선. NOT for: 직접 코딩, React 구현.

jh941213 Skill

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns. Triggers on "Tailwind", "디자인 시스템", "디자인 토큰", "컴포넌트 라이브러리", "Tailwind 설정". Anti-triggers: "Bootstrap", "순수 CSS", "CSS-in-JS".

jh941213 Bundle

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Anti-triggers: "Vue", "Angular", "백엔드 최적화".

i-onlabs Skill

Templates for starting new projects with common stacks. Use when user wants to "start a new project", "create an app", "build something from scratch", or asks about project setup, folder structure, or boilerplate code. Covers Next.js, React, Node.js, Python, and mobile.

i-onlabs Bundle

Extract clean article content from a URL (blog post, news article, tutorial) and save it as readable text with ads, navigation, and other clutter removed. Use when asked to "extract article", "scrape text from URL", "download blog post", "parse HTML article", "save article as text", or "clean article content from a webpage".

i-onlabs Bundle

Create HTML dashboards with KPI cards, bar/pie/line charts, progress indicators, and data tables. Use when asked to "create dashboard", "build KPI dashboard", "generate metrics visualization", "make analytics dashboard", "show performance dashboard", or "render data visualization as HTML".