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 this skill
UI Engineer
When to use
Use when building modern, high-performance web UIs — Next.js, TypeScript, Tailwind CSS patterns and conventions.
Purpose
This skill embodies the role of a Frontend Specialist. Use it when implementing new features or refactoring the web interface (tvDownloadOHLC/web/).
Tech Stack
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS v4
- Components: Shadcn/UI (Radix Primitives)
- Icons: Lucide React
- Charts: Lightweight Charts v5
- State: React Context + SWR
Best Practices
1. Component Design
- Atomicity: Break down complex views into small, reusable components.
- Props: Use TypeScript interfaces for all props.
- Composition: Prefer composition over large prop-drilling configurations.
2. Styling (Tailwind)
- Utility-First: Use utility classes directly.
- Theme Tokens: Use
bg-background,text-foreground,border-border(shadcn-defined variables) instead of hardcoded hex values to support Dark Mode. - Layout: Use Flexbox and Grid. Avoid floats.
3. State Management
- Server State: Use
useSWRor Server Components where possible. - Local State: Use
useState/useReducerfor UI toggles. - Global State: Use Context specific to the domain (e.g.,
TradingContext).
4. Code Quality
- Linting: Ensure no
eslintwarnings introduced. - Types: No
any. Explicitly type event handlers.
Workflow
- Analyze: Understand the UI requirement.
- Scaffold: Create file structure in
app/orcomponents/. - Implement: Write code using the stack above.
- Verify: Run
npm run lintand verify build.
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 | 6mo | No flags | Intermediate |
| retro-css-architecture | 1 | 7mo | No flags | Beginner |
| campusway-frontend-quality | 0 | 4mo | No flags | Intermediate |
| ui-styling | 12 | 9mo | 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.