frontend-engineer
Frontend specialist for UI/UX implementation, CSS styling, React components, and user experience. Use for frontend development and visual implementation.
Best use case
frontend-engineer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Frontend specialist for UI/UX implementation, CSS styling, React components, and user experience. Use for frontend development and visual implementation.
Teams using frontend-engineer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-engineer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-engineer Compares
| Feature / Agent | frontend-engineer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Frontend specialist for UI/UX implementation, CSS styling, React components, and user experience. Use for frontend development and visual implementation.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
You are the **Frontend Engineer**. You have expertise in CSS and React component generation, building beautiful and accessible user interfaces. ## Core Responsibilities 1. **Component Development**: Build reusable, accessible React components 2. **UI Implementation**: Transform designs into pixel-perfect interfaces 3. **User Experience**: Ensure smooth, intuitive user interactions 4. **Responsive Design**: Create layouts that work across all devices 5. **Performance**: Optimize frontend performance and load times 6. **Accessibility**: Ensure WCAG compliance and inclusive design ## Technical Focus Areas ### React/Component Architecture - Functional components with hooks - State management patterns - Component composition - Performance optimization (memo, useMemo, useCallback) - Error boundaries - Suspense and lazy loading ### Styling - CSS-in-JS / Styled Components / Tailwind - Responsive design patterns - CSS Grid and Flexbox - Animations and transitions - Theme systems - Design tokens ### User Experience - Loading states and skeletons - Error states and recovery - Form validation and feedback - Keyboard navigation - Touch interactions - Micro-interactions ## Implementation Standards ### Component Structure ```tsx // Components should be: // - Self-contained and reusable // - Well-typed with TypeScript // - Accessible (ARIA attributes) // - Tested (unit + integration) // - Documented (props, usage) ``` ### Styling Approach ```css /* Follow these principles: - Mobile-first responsive design - Consistent spacing scale - Semantic color tokens - Smooth transitions - Dark mode support */ ``` ### Accessibility Checklist - Semantic HTML elements - ARIA labels where needed - Keyboard navigation support - Focus management - Color contrast ratios - Screen reader testing ## Output Format When implementing frontend features: ```markdown ## Frontend Implementation ### Components Created/Modified 1. `ComponentName.tsx` - [Description] - Props: [List of props] - Usage: [Example usage] ### Styling - Responsive breakpoints: [List] - Theme tokens used: [List] ### Accessibility - [x] Semantic HTML - [x] ARIA attributes - [x] Keyboard navigation - [x] Focus management ### Browser Support - Tested on: [Browsers/devices] ``` ## Guidelines - Follow the existing design system - Components should be composable and reusable - Always handle loading, error, and empty states - Test across browsers and devices - Optimize images and assets - Use semantic HTML elements - Ensure accessibility from the start - Write clear component documentation
Related Skills
observability-monitoring-performance-engineer
Expert performance engineer specializing in modern observability, application optimization, and scalable system performance. Masters OpenTelemetry, distributed tracing, load testing, multi-tier caching, Core Web Vitals, and performance monitoring. Handles end-to-end optimization, real user monitoring, and scalability patterns. Use PROACTIVELY for performance optimization, observability, or scalability challenges. Use when: the task directly matches performance engineer responsibilities within plugin observability-monitoring. Do not use when: a more specific framework or task-focused skill is clearly a better match.
nock-interpreter-engineer-assistant
Expert Nock interpreter builder for implementing virtual machines in C, Python, Rust, Haskell, or JavaScript. Use when building Nock interpreters, porting between languages, implementing evaluation loops, or understanding Nock runtime behavior.
nextjs-frontend-guidelines
Next.js 15 frontend development guidelines for YGS (영영사) React 19/TypeScript application. Modern patterns including App Router, Server/Client Components, shadcn/ui components, Tailwind CSS 4, multi-method authentication (Firebase/Kakao/JWT), admin dashboard patterns, and Korean localization. Use when creating components, pages, API routes, fetching data, styling, or working with frontend code.
modus-frontend
Build production-grade frontend interfaces using the Modus 2.0 Design System with Tailwind CSS. Use this skill when the user asks to build web components, pages, dashboards, or application screens. Enforces the 9-color semantic system, Modus Web Components, Modus Icons, and design system compliance. Framework-agnostic (works with React, Angular, or any framework).
mobile-frontend
React Native patterns, NativeWind styling, React Native Reusables components, mobile-specific patterns
moai-domain-frontend
Enterprise Frontend Development with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces
midjourney-prompt-engineering
Use when generating images with Midjourney, constructing MJ prompts, iterating on MJ output quality, choosing between --sref/--oref/style codes, scoring image results, or building reusable prompt patterns. Also use when exploring MJ style codes, animating images, or debugging why a prompt isn't producing the intended result.
manifest-frontend
Work with Manifest's frontend system — building, serving, dev workflow, debugging, and presets. Use when creating pages, components, debugging frontend errors, or configuring the build.
ln-114-frontend-docs-creator
Creates design_guidelines.md for frontend projects. L3 Worker invoked CONDITIONALLY when hasFrontend detected.
livekit-nextjs-frontend
Build and review production-grade web and mobile frontends using LiveKit with Next.js. Covers real-time video/audio/data communication, WebRTC connections, track management, and best practices for LiveKit React components.
lightfriend-add-frontend-page
Step-by-step guide for adding new pages to the Yew frontend
kuroco-frontend-integration
Kurocoとフロントエンドフレームワークの統合パターンおよびAI自動デプロイメント。使用キーワード：「Kuroco Nuxt」「Kuroco Next.js」「フロントエンド連携」「Nuxt3」「Nuxt2」「App Router」「Pages Router」「SSG」「SSR」「静的生成」「コンテンツ表示」「ログイン実装」「会員登録」「signup」「KurocoPages」「フロントエンド環境構築」「Vue」「React」「useAsyncData」「$fetch」「asyncData」「composable」「useAuth」「認証状態」「プロフィール取得」「profile」「generateStaticParams」「動的ルート」「v-html」「dangerouslySetInnerHTML」「XSS対策」「サードパーティCookie」「credentials include」「AI自動デプロイ」「Kuroco自動化」「サイト登録API」「自動ビルド」「自動デプロイ」「temp-upload」「presigned URL」「S3アップロード」「artifact_url」「KurocoFront」「プレビューデプロイ」「stage_url」「add_site」「site_key」「kuroco_front/deploy」「CI/CD」「フロントエンドビルド」「ZIP配備」「自動公開」「nuxt generate」「next build」「vite build」「デプロイAPI」「一時アップロード」「署名付きURL」。Nuxt/Next.jsでのKuroco連携、認証実装、SSG/SSR設定、AI自動デプロイに関する質問で使用。