前端開發

Guide for building Phoenix web applications with LiveView, contexts, channels, and following Phoenix best practices

Use when building SaaS applications needing data isolation between customers - implements owner-based filtering for secure multi-tenant document storage and search with workspace, organization, or tenant-level separation

CTO's deputy for software architecture using Clean/Hexagonal Architecture principles. Socratic approach - asks probing questions to help YOU make informed design decisions. Guides through Discovery → Modeling → Boundaries → Scaffolding phases. Outputs TypeScript scaffolds with ports, adapters, and domain layers. USE WHEN user says 'architect', 'system design', 'hexagonal', 'clean architecture', 'ports and adapters', 'design this system', 'structure this project', or needs help thinking through complex software structure.

Teach cache lifecycle APIs in Next.js 16 - cacheLife(), cacheTag(), updateTag(), refresh(), revalidateTag(). Use when managing cache invalidation, setting cache policies, or implementing cache tags.

CellChat 包源码随附的本地教程 + Rd 转换的函数文档 + R 源码 HTML - 完整覆盖173个文件

UI component patterns for TSH Clients Console (Next.js, shadcn/ui, RTL). Use when: (1) Creating new React components (2) Building pages with proper structure (3) Implementing loading skeletons (4) Adding responsive design (5) Supporting dark mode and RTL (6) Using shadcn/ui components correctly

Performance optimization for React web applications. Use when optimizing renders, implementing virtualization, memoizing components, or debugging performance issues.

Use this skill whenever the user wants to set up, configure, or refactor shadcn/ui in a Vite + React + TypeScript project (non-Next.js), including Tailwind, components.json, theming, and component structure.

Use PROACTIVELY this agent when you need to design and create optimal Claude Code subagents, update existing agents with new capabilities, revise agent configurations, analyze project requirements to identify specialized roles, or craft precise agent configurations with appropriate tool permissions and model tiers. When the user specify "Create or Update subagent [name]", this skill must be triggered.

SQLite best practices including WAL checkpoint timing for multiprocessing, stateful batch connections for atomicity, and performance configuration. Use when working with SQLite in Python projects requiring concurrent access, multi-table atomicity, or multiprocessing.

Standard project layout and Spec-Kit usage patterns for AI-driven, spec-driven monorepos that host frontend, backend, and specs in a single repository.

Ensure mobile-first responsive design for all frontend changes. Trigger on any HTML, CSS, template, or UI component modifications.

Comprehensive weekly review with rollup, reflection, wins/challenges, and next week planning

Use SvelteKit remote functions (query, form, command, prerender) for type-safe client-server communication, data fetching, form handling, and mutations.

MoAI-ADK's foundational principles - TRUST 5, SPEC-First TDD, delegation patterns, token optimization, progressive disclosure, modular architecture, agent catalog, command reference, and execution rules for building AI-powered development workflows

Enterprise Convex Real-Time Backend with AI-powered reactive database architecture, Context7 integration, and intelligent synchronization orchestration for collaborative applications

Guide for distinguishing Claude Code features (Commands, Skills, Agents, Hooks, Rules) and selection criteria. Use when decomposing context files, deciding where to add new features, or customizing Claude Code.

CodeGenAgent スキル - Claude Sonnet 4によるAI駆動コード生成。 GitHub Issueの内容を解析し、TypeScriptコード・ユニットテスト・型定義を自動生成。 Use when: - 新しいコードを生成する時 - Issue内容からコード実装が必要な時 - TypeScript/Vitestテストの自動生成が必要な時 - BaseAgentパターンに従った実装が必要な時 - "コード生成", "実装", "feature", "bug fix" がキーワードに含まれる時

WebGPU fundamentals for high-performance canvas rendering. Covers device initialization, buffer management, WGSL shaders, render pipelines, compute shaders, and web component integration. Use when building GPU-accelerated graphics, particle systems, or compute-intensive visualizations.

Strategic creative direction for brand identity, design systems, and visual strategy. Use when creating brand guidelines, design system documentation, visual identity, mood/aesthetic direction, or any upstream creative work that will inform implementation. Produces documentation, style guides, and implementation briefs for Claude Code - not code itself. Sits upstream of frontend-design and frontend-designer skills. Triggers include requests for branding, visual identity, design systems, style guides, aesthetic direction, look-and-feel, or creative strategy.