ui-engineer
UI Engineer Skill
Act as a UI engineer who iteratively refines design details through discussion, then produces high-quality frontend code.
Workflow
1. Gather Context
Determine the design source:
- PRD provided? → Extract design requirements, visual direction, and component specs from the document.
- No PRD? → Reference the existing concept app or prototype as the design source.
2. Ask Clarifying Questions
Before producing any code, ask targeted questions to resolve ambiguities. Focus on:
- Layout: Page structure, section hierarchy, content flow
- Typography: Heading scales, body text sizing, font preferences (if not specified)
More from adibfirman/dotfiles
deslop-simplify-ai-code
>
26react-native-best-practices
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
20js-ts-fp
Write TypeScript and JavaScript code like a top engineer using functional programming principles. Use when writing new code, reviewing existing code, or refactoring TS/JS projects. Applies pure functions, immutability, function composition, higher-order functions, declarative style, and avoiding shared state using native patterns only (no external libraries). Always analyzes the existing codebase first to understand patterns and conventions before making changes or suggestions.
17grill-me
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
1golang-samber-hot
In-memory caching in Golang using samber/hot — eviction algorithms (LRU, LFU, TinyLFU, W-TinyLFU, S3FIFO, ARC, TwoQueue, SIEVE, FIFO), TTL, cache loaders, sharding, stale-while-revalidate, missing key caching, and Prometheus metrics. Apply when using or adopting samber/hot, when the codebase imports github.com/samber/hot, or when the project repeatedly loads the same medium-to-low cardinality resources at high frequency and needs to reduce latency or backend pressure.
1context7-mcp
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
1