前端開發

Create and manage Lola modules for multi-assistant AI context distribution. Use when building portable AI skills with multi-assistant support (Claude Code, Cursor, Gemini CLI). This skill is triggered when users say "create a lola module", "build a lola skill", "write a module.yml", "add slash commands to lola", or "distribute skills to multiple assistants".

Diagnose and fix common MobX reactivity problems including components not updating, state changes not triggering re-renders, and async update issues. Use when UI doesn't respond to state changes, computed values don't recalculate, or observer components don't re-render.

This skill should be used when converting Figma designs to Flutter code. Trigger this skill when users say "convert this Figma design to Flutter", "run Figma workflow", "implement this Figma screen", or provide Figma links requesting Flutter UI implementation. The skill handles the complete workflow from extracting Figma metadata to implementing pixel-perfect Flutter UIs with iterative testing.

Guide for using WebViewBridge Swift package to build WebPage (macOS 26.0+) bridges with JavaScript injection and bidirectional communication. Use when integrating WebPage with Swift, injecting JavaScript, or handling JS↔Swift messaging.

フロントエンド UI/UX 実装と最適化を支援します。React/Vue/Next.jsでの実装、パフォーマンス最適化、アクセシビリティを提供します。ユーザーインターフェース開発、Web アプリケーション構築が必要な場合に使用してください。

Converts highlighted text (typically bullet lists or paragraphs) into an expandable HTML <details> dropdown with a custom summary. Use this skill when the user wants to make content collapsible/expandable in their MDX files.

Create distinctive, production-grade frontend interfaces (components, pages, apps) with a bold, intentional aesthetic; avoid generic AI layouts and follow ResiDesk typography/theme tokens when applicable.

Validates specs have required frontmatter, links, and compliance. Use before commits or during code review.

Test TUI (Text User Interface) applications using tmux. Use this skill when you need to automate testing of terminal-based applications by sending keystrokes and capturing pane output.

Guide for using the Dagu Web UI to manage, monitor, and execute workflows through the browser interface

Builds real-time applications with Socket.IO including events, rooms, namespaces, and acknowledgements. Use when implementing real-time features, chat applications, live updates, or multiplayer functionality.

Provides Git repository workflow guidelines including branch management, testing practices (TDD), Docker environment handling, and PR workflow. Use this skill when implementing features, fixing bugs, or making any code changes in a Git repository.

Generate A2UI 0.8 protocol compliant UI code. Use when building agent-driven interfaces, generating JSONL messages for surfaceUpdate/dataModelUpdate/beginRendering, creating forms, lists, cards, or any UI components that render across web/mobile/desktop platforms.

Apply DDD tactical patterns (Entities, Value Objects, Aggregates, Domain Services, Repositories) and strategic design (Ubiquitous Language, Bounded Contexts). Use when modeling complex business logic.

Build a WebF bridge module/native plugin using the module-codegen workflow (*.module.d.ts → codegen → Dart implementation → registration → JS usage). Use when the user mentions module-codegen, bridge module, native plugin, *.module.d.ts, or registering a module.

Create CRPO-compliant welcome email sequences for therapy practices that build trust and reduce no-show rates. Use when new leads fill out contact form but before first appointment. Creates 5-7 email nurture sequence that educates, builds connection, and gently encourages booking. Triggers on: create welcome sequence, nurture new leads, reduce no-shows, warm up cold leads. Outputs education-focused sequence with NO high-pressure tactics, NO outcome promises, and proper CRPO compliance.

Use PROACTIVELY when working with projects that have docs/lessons-learned/ directories to transform Claude Code explanatory insights into reusable, production-ready skills. Analyzes insight files, clusters related content, and generates interactive skills following Anthropic's standards.

Extracts design tokens from images and generates CSS custom properties, atomic utility classes (Tailwind-style), and platform-specific formats following W3C standards and modern CSS best practices.

Testing patterns for React Native with Jest and React Native Testing Library. Use when writing tests, mocking Expo modules, testing Zustand stores, or debugging test failures.

Use when completing implementation in worktree to create review document for coordinator to route to review agent - documents what was built, test results, and suggested documentation updates