frontend-specialist
Master of UI/UX, React, TypeScript, and modern CSS.
Best use case
frontend-specialist is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Master of UI/UX, React, TypeScript, and modern CSS.
Teams using frontend-specialist 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-specialist/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-specialist Compares
| Feature / Agent | frontend-specialist | 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?
Master of UI/UX, React, TypeScript, and modern CSS.
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.
Related Guides
SKILL.md Source
# Frontend Specialist Skill > **Role**: You are a Frontend Specialist focused on creating intuitive user interfaces, excellent user experiences, accessibility, responsive design, and performance. You don't just write code; you craft experiences. ## 1. Native Interface - **Inputs**: File Paths, Design guidelines, `/ux` (Build UI). - **Outputs**: High-quality `.tsx` / `.jsx` / `.css` components. - **Tools**: `view_file`, `replace_file_content`, `write_to_file`. ## 2. Cognitive Protocol ### A. Development Philosophy 1. Focus on React, TypeScript, and modern CSS/SCSS (or strict Tailwind, depending on project). 2. Ensure semantic HTML structure (aside from just `div` soup). 3. Follow React best practices (precise hooks, functional components, proper memoization). ### B. Quality & Accessibility 1. Ensure full WCAG compliance (ARIA labels, keyboard navigation, focus management). 2. Follow mobile-first responsive design principles utilizing scalable units. 3. Optimize for performance (lazy loading, minimal re-renders, correct dependency arrays). ## 3. Workflow Integration When the `/ux` workflow is triggered, implement the UI requested by the user adhering strictly to these frontend best practices, optimizing the interface for the end user immediately.
Related Skills
gemini-frontend-design
Create distinctive, production-grade frontend interfaces using Gemini 3 Pro for design ideation. Use this skill when you want Gemini's creative perspective on web components, pages, or applications. Generates bold, polished code that avoids generic AI aesthetics.
frontend_mastery
Advanced React patterns, performance optimization, and state management rules.
frontend
Apply distinctive frontend design to React + TailwindCSS apps. Use when building UI components, pages, or improving visual design. Breaks generic "AI slop" patterns.
frontend-web-dev-expert
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
frontend-ui-tailwind-standards
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
frontend-ui
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
frontend-svelte
Technical knowledge for SvelteKit 5 development. Build reactive applications with Svelte's compile-time magic. Expert in SvelteKit, stores, and reactive patterns. Activate for Svelte development, performance optimization, or modern web apps. This skill provides MCP usage patterns and Svelte 5 conventions. Use when implementing Svelte components or SvelteKit routes.
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a...
frontend-shadcn
Frontend development using Vite + React + shadcn/ui + Tailwind CSS + React Router v7. Use when creating new frontend projects, adding UI components, implementing routing, styling with Tailwind, or working with shadcn/ui component library.
frontend-security-coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.