UI Engineer
Implements modern web interfaces focusing on component design and state management.
Install
mkdir -p .claude/skills/ui-engineer && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13373" && unzip -o skill.zip -d .claude/skills/ui-engineer && rm skill.zipInstalls to .claude/skills/ui-engineer
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Specialized skill for building modern, high-performance web UIs using Next.js, Tailwind, and Shadcn/UI.Key capabilities
- →Implement new features in web interfaces
- →Refactor existing web interfaces
- →Design atomic, reusable UI components
- →Apply Tailwind CSS utility classes for styling
- →Manage server state using `useSWR` or Server Components
- →Manage local UI state with `useState` / `useReducer`
How it works
The skill follows a workflow of analyzing requirements, scaffolding file structures, implementing code using Next.js, Tailwind, and Shadcn/UI, and verifying the build with linting and types.
Inputs & outputs
When to use UI Engineer
- →Building UI components
- →Refactoring web interfaces
- →Managing UI state
About UI Engineer
Builds and refactors frontend interfaces using Next.js, Tailwind CSS, and Shadcn/UI, focusing on atomic component structure and robust state management.
Specialized skill for building modern, high-performance web UIs using Next.js, Tailwind, and Shadcn/UI.
When not to use it
- →The task does not involve Next.js, Tailwind, or Shadcn/UI
- →The task requires using `any` types or introducing `eslint` warnings
Limitations
- →It is specialized for Next.js 16 (App Router), Tailwind CSS v4, and Shadcn/UI
- →It requires using TypeScript interfaces for all props
- →It does not permit `any` types or `eslint` warnings
How it compares
This skill enforces a specific, modern tech stack and best practices for UI development, ensuring consistency and high performance, unlike a generic approach.
Compared to similar skills
UI Engineer side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| UI Engineer (this skill) | 0 | 8mo | No flags | Intermediate |
| retro-css-architecture | 1 | 8mo | No flags | Beginner |
| campusway-frontend-quality | 0 | 6mo | No flags | Intermediate |
| ui-styling | 12 | 10mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
retro-css-architecture
TheOrcDev
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
campusway-frontend-quality
md-muntasir-shihab
CampusWay frontend quality workflow for Vite React and Tailwind with optional Next.js surface. Use when: improve UI, refactor components, fix layout, optimize bundle, enforce design consistency, prepare frontend PR.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.