前端開發

This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests "setup Tailwind", "configure shadcn/ui", "add dark mode", "initialize design system", or "setup UI framework" for Next.js projects.

Expert code reviewer for TypeScript + React 19 applications. Use when reviewing React code, identifying anti-patterns, evaluating state management, or assessing code maintainability. Triggers: code review requests, PR reviews, React architecture evaluation, identifying code smells, TypeScript type safety checks, useEffect abuse detection, state management review.

Generate new MCP tools for GitLab operations following the project's standardized pattern. Creates complete TypeScript files with imports, registration functions, Zod schemas, error handling, and format options. Supports simple CRUD operations, complex multi-action tools, and advanced patterns like discussion management. Use when "create mcp tool", "generate gitlab tool", "new tool for", "add tool to gitlab", or building new GitLab integration features.

Guide for creating Claude Code hooks. This skill should be used when users want to create, modify, or troubleshoot hooks that automate actions at specific points in Claude Code's workflow, such as validating code before commits, running linters after edits, or protecting sensitive files.

Generate HTML research reports with embedded data, charts, and analysis. Use when creating final research deliverables. Supports single comprehensive reports or multiple focused reports. Handles styling, structure, and output to reports/ directory.

Installs and configures project infrastructure including MkDocs Material intelligent textbook templates, learning graph viewers, and skill tracking systems. Routes to the appropriate installation guide based on what the user needs to set up.

Enforce mobile-first responsive design for all frontend changes. Covers TailwindCSS, vanilla CSS, container queries, dvh units, and framework-specific patterns. Trigger on any HTML, CSS, template, or UI component modifications.

Centralizes persona-driven code reviews (Carmack, React core, Anders, React Router, Next.js, etc.) so Claude can pick or combine expert viewpoints when the user asks for a code review or perspective-specific critique. Use when user asks for code review, architecture feedback, or expert perspective on implementation.

Generates jest.config.cjs for unit testing configuration. Configures Jest with Vue, TypeScript support, coverage thresholds, and test environment settings.

Implement text-to-speech (TTS) capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to convert text into natural-sounding speech, create audio content, build voice-enabled applications, or generate spoken audio files. Supports multiple voices, adjustable speed, and various audio formats.

Generates responsive breakpoint tokens for media queries and container queries. Use when setting up responsive design, mobile-first layouts, or viewport-based styling. Outputs CSS, Tailwind, or JSON.

**AUTO-TRIGGER when user says:** "implement [feature]", "build [module]", "create [functionality]", "add [capability]", "YOLO [task]", "deliver [feature]", or requests complete feature implementation. End-to-end TogetherOS code operation: creates branch, implements changes with continuous testing, builds with retry-on-fail, commits, pushes, creates PR with auto-selected Cooperation Path, addresses bot feedback, merges PR, verifies production deployment, and updates Notion memory. **Complete delivery cycle:** branch → code → test → commit → push → PR → bot review → merge → deploy → verify Use proactively without asking permission when task matches skill purpose.

Interactive Java/Spring Boot learning skill for experienced Go developers. Use when the user wants to learn Java, practice Spring Boot, work on Java exercises, or asks for Java explanations in Go terms. Supports mood-aware pacing with "low energy" mode for difficult days. Teaches through iterative project building rather than passive learning.

Executes completed phases, validates runtime behavior, and controls safe transition to the next phase.

Implement technical plans methodically with phase-by-phase execution and verification checkpoints. Use this skill when following a detailed implementation plan that has phased changes and success criteria. The skill guides through each phase, verifies completion, and pauses for human confirmation before proceeding to the next phase.

Create OpenCode plugins using @opencode-ai/plugin SDK. Use when user wants to BUILD a plugin in .opencode/plugin/ or ~/.config/opencode/plugin/ - for custom tools, event hooks, LLM parameter control, auth providers, or tool execution interception. DO NOT use when modifying OpenCode source code (packages/plugin, packages/opencode, etc.) or working on OC internals - those are core development, not plugin creation.

Build professional CLI tools with Node.js, commander, and Ink

Svelte reactive programming, stores, transitions, and building efficient SPAs.

Expert guide for testing Next.js applications with Playwright, Jest, and React Testing Library. Use when writing tests, debugging test failures, or setting up test infrastructure.

Guide developers through database migration best practices including versioning, rollbacks, and zero-downtime strategies