Security guidelines for frontend code. Covers token storage, XSS prevention, authorization, and secure coding practices. CRITICAL INSTRUCTION You MUST ALWAYS use this skill before editing/writing any file matching "**/frontend/**/*.{ts,tsx}".
Provides micro-frontend architecture vocabulary, principles, and decisions framework grounded in Building Micro-Frontends (O'Reilly). Use when a user asks "should we use micro-frontends?", "how do I split my frontend into MFEs?", "what is a micro-frontend?", "help me define MFE boundaries", "should I use horizontal or vertical split?", "how do micro-frontends communicate?", or "is my architecture a distributed monolith?". Requires independent deployment or multi-team scaling as the explicit context. Does not activate for single-team frontend architecture, component design, or build tooling questions with no cross-team deployment angle.
5339d agoReviewMountCreate a free account to mount
Reviews and generates micro-frontend code against eight boundary rules from Building Micro-Frontends (O'Reilly), plus governance extensions for feature-flag scope, edge strategy, SSR ownership, and boundary fitness functions. Use when a user says "review my shell code", "is this a boundary violation?", "generate a Module Federation shell", "how do I mount this MFE?", "review my micro-frontend architecture", "set up event communication between MFEs", "create a new micro-frontend", "how should we use edge with MFEs?", "where should feature flags live?", or "how do I enforce boundaries in a monorepo?". Loads automatically when the user pastes shell integration code, Module Federation config, Single SPA registration, or Native Federation routes. Does not activate for component-level code within a single deployed unit, or for generic React, Vue, or Angular questions with no cross-team deployment angle.
5339d agoReviewMountCreate a free account to mount
Senior Frontend Developer persona — implements frontend user stories, UI code, manages dev server workflow. Use when building React components, implementing screens, or frontend testing.
Authoring and configuration guidance for building React/Next.js frontend applications well from the start — component composition, UX/interaction recipes, Vite config, HeroUI setup, and AI-slop detection (see the Reference files table below for the full breakdown). A companion to language-code-review-edho-ferdian (which reviews code after it's written) — use this when DESIGNING or WRITING new frontend code, not when reviewing existing code. Trigger phrases: \"bagaimana cara structure component ini\", \"best practice React untuk X\", \"setup Vite untuk Y\", \"biar UI-nya gak keliatan AI banget\", \"kok hasil desainnya generic/template banget\", or when starting a new frontend feature.
2123d agoReviewMountCreate a free account to mount