Frontend

Use this skill when you need to structure data in `srs/data` for the Next.js app

Next.js App RouterのServer/Client Components、データフェッチ、ルーティングパターン。ページやコンポーネント作成時に使用。

Implements atomic CSS with UnoCSS using on-demand generation, custom rules, and presets. Use when wanting instant atomic CSS, custom utility frameworks, or Tailwind alternatives with more flexibility.

個性的で本格的なフロントエンドのユーザーインターフェースを高いデザイン品質で作成。ユーザーがWebコンポーネント、ページ、アプリケーションの構築を依頼した際に使用。汎用的なAI臭さを避けた、創造的で洗練されたコードを生成。

List Python symbols (classes/functions) quickly via AST to discover real identifiers before using `def`/`ctx`.

Integration guide for using detective skills across plugins. Maps agent roles from frontend, bun, and other plugins to appropriate detective skills. Developer agents should use developer-detective, architect agents should use architect-detective, etc.

Expert on Shelby Protocol decentralized blob storage on Aptos blockchain. Coordinates 7 specialized sub-skills covering protocol architecture, SDK usage, smart contracts, CLI tools, RPC infrastructure, dApp building, and storage integration. Triggers on keywords Shelby Protocol, Shelby storage, decentralized storage, Aptos storage, blob storage, Shelby.

Vueコンポーネント設計、単一責任、props/emit設計、レイアウト分離のガイド。コンポーネント作成、UI実装、レイアウト調整、リファクタリングの際に自動参照。

Configures esbuild for extremely fast JavaScript/TypeScript bundling with plugins, code splitting, and build optimization. Use when building libraries, rapid prototyping, or optimizing build performance.

This skill should be used when generating React forms with React Hook Form, Zod validation, and shadcn/ui components. Applies when creating entity forms, character editors, location forms, data entry forms, or any form requiring client and server validation. Trigger terms include create form, generate form, build form, React Hook Form, RHF, Zod validation, form component, entity form, character form, data entry, form schema.

Harness CD (Continuous Delivery) for Kubernetes, Helm, Terraform, ECS, and serverless deployments with GitOps, approval gates, rollback strategies, and multi-environment promotion

Guides learning through the 4 layers in proper sequence (Logic → Concepts → Important Details → Arbitrary Details). Use when studying complex topics, building understanding, or when user appears to be jumping to details prematurely without foundational understanding.

React 18+ patterns with Vite bundler, TypeScript, hooks, component design, and state management. Activate for React apps, Vite configuration, TypeScript, frontend development, and modern React patterns.

Next.js 14+ development with App Router, React Server Components, Server Actions, client components, streaming SSR, metadata API, parallel routes, intercepting routes, TypeScript best practices, TanStack Query for data fetching, Zustand state management, shadcn/ui components, Tailwind CSS styling, authentication patterns, API routes, middleware, error handling, performance optimization, SEO, and production deployment strategies.

Generate Nuxt 3 page components with Vue 3 Composition API. Triggers on "create nuxt page", "generate nuxt component", "nuxt 3 page", "nuxt file".

Guide for using Repomix - a powerful tool that packs entire repositories into single, AI-friendly files. Use when packaging codebases for AI analysis, generating context for LLMs, creating codebase snapshots, analyzing third-party libraries, or preparing repositories for security audits.

Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive

Create Cell Press-style publication tables for HTML documents. Use when formatting statistical comparisons, timelines, reagent lists, or any tabular scientific data.

Guide for working with DevSpace, a Kubernetes development tool that automates building, deploying, and developing applications. Use when users need to create or modify devspace.yaml configuration files, build and deploy images to Kubernetes, manage multi-environment deployments with profiles, upload files to pods, or troubleshoot DevSpace workflows. Includes patterns for CI/CD integration, image tagging strategies, and secret management.

Gestion d'état React avec Zustand, hooks personnalisés, et patterns de cleanup. MANDATORY pour state management. À utiliser lors de state global, custom hooks, ou quand l'utilisateur mentionne "state", "zustand", "useState", "useEffect", "cleanup".