Dev Tool UI

Skill: dev-tool-ui

When to Use This Skill

Use this skill when:

• Designing or building a new web dashboard, landing page, or SaaS interface
• Creating React UI components for a developer tool or internal application
• User says "build a UI" or "design this interface"
• Building admin panels, data dashboards, or configuration pages
• Prototyping a new product interface

The Workflow

Follow this exact workflow as a professional frontend developer would:

1. Requirements & Planning

• Clarify the UI purpose, user needs, and feature set
• Identify which components are needed (forms, tables, modals, dashboards, cards, etc.)
• Define the information hierarchy and user flow
• Gather any specific design references or brand guidelines
• Do not start coding yet — planning prevents rework

2. Design System & Architecture

• Define a reusable color palette (dark mode first)
• Establish typography hierarchy and font pairings
• Create consistent spacing and sizing rules
• Plan component composition (atoms → molecules → organisms)
• Sketch layout patterns (sidebar + main, top nav + grid, etc.)

3. Project Setup (Next.js)

• Initialize: npx create-next-app@latest --typescript
• Install: npm install tailwindcss shadcn-ui lucide-react framer-motion clsx tailwind-merge
• Configure Tailwind for dark mode (class strategy in tailwind.config.ts)
• Create folder structure: app/, components/, lib/, hooks/, public/
• Set up lib/cn.ts for class name merging

4. Build in Layers

• Layer 1 (Primitives): Base components first — buttons, inputs, cards, badges (use shadcn/ui)
• Layer 2 (Containers): Layout components — grids, flex containers, sections
• Layer 3 (Features): Compose feature components — forms, tables, navigation, modals
• Layer 4 (Pages): Wire features into full pages
• Layer 5 (Polish): Animations, transitions, micro-interactions

5. Test & Refine

• Test responsive behavior (mobile 320px, tablet 768px, desktop 1440px+)
• Verify accessibility (keyboard nav, screen readers, ARIA labels, contrast)
• Check performance (Lighthouse score, animation smoothness, no jank)
• Test on real devices if possible, not just browser DevTools

6. Document & Deliver

• Document component props with TypeDoc comments
• Provide usage examples in code
• Create a visual component guide or Storybook
• Hand off with clear structure and naming conventions

Design System Rules

Color & Atmosphere

• Dark Mode First: Default background bg-zinc-950
• Borders: Thin, subtle using border-zinc-800 or border-zinc-700
• Glassmorphic Cards: bg-zinc-900/40 backdrop-blur-md border border-zinc-800 rounded-xl
• Accent Colors: White/neutral for primary actions, subtle grays for secondary
• Glows: Use radial CSS gradients for ambient lighting effects

Typography

• Sans-serif (Inter, Geist, SF Pro): UI text, labels, body copy
• Monospace (JetBrains Mono, Fira Code): Code blocks, technical content
• Contrast: Maintain WCAG AA+ ratios (4.5:1 minimum for text)
• Line Height: 1.5-1.6 for body text, tighter (1.2-1.3) for headings

Spacing & Layout

• Scale: Use Tailwind's default scale (4px baseline: 4, 8, 12, 16, 24, 32, 40, 48, 64...)
• Grid System: 12-column grid for dashboards, flex for flexible components
• Consistency: All padding/margins should follow the scale
• Gaps: Use gap-* utilities between flex/grid children

Component Specifications

Buttons

Primary (Action-oriented, highest contrast):

bg-white text-black hover:bg-gray-100 active:bg-gray-200
focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-zinc-950
font-medium px-4 py-2 rounded-lg transition-colors

Secondary (Subtle, less prominent):

bg-zinc-800 text-white hover:bg-zinc-700 active:bg-zinc-600
focus:outline-none focus:ring-2 focus:ring-zinc-500
font-medium px-4 py-2 rounded-lg transition-colors

Sizes: sm (px-3 py-1.5 text-sm) | md (px-4 py-2) | lg (px-6 py-3 text-lg)

States:

• Disabled: opacity-50 cursor-not-allowed
• Loading: Show spinner icon, disable interaction

Inputs & Forms

bg-zinc-900 border border-zinc-800 text-white placeholder-zinc-500
focus:border-zinc-600 focus:ring-2 focus:ring-white/20 focus:outline-none
rounded-lg px-3 py-2 transition-all

Labels: text-sm font-medium text-zinc-200

Error States: border-red-500 focus:ring-red-500/20 + error message below input

Success States: border-green-500/50 focus:ring-green-500/20

Cards & Containers

Standard Card (Default for most content):

bg-zinc-900/40 backdrop-blur-md border border-zinc-800 rounded-xl p-6
hover:border-zinc-700 transition-all duration-200

Elevated Card (For emphasis, featured content):

bg-zinc-900/60 border border-zinc-700 shadow-lg rounded-xl p-6
hover:shadow-xl transition-all duration-200

Container Spacing: Consistent padding and margins, no hardcoded pixels

Layout Patterns

• Header + Sidebar: Fixed header (h-16), sidebar (w-64, fixed left), main content area (flex-1)
• Dashboard Grid: Responsive grid (1 col mobile, 2 cols tablet, 3 cols desktop)
• Modal: Dark overlay (bg-black/50), centered dialog, focus trap
• Data Table: Striped rows (hover:bg-zinc-800/50), sticky headers, sortable columns
• Form: Vertical stacking, labels above inputs, error messages inline

Animation & Motion Rules

Framer Motion (Complex animations):

• Page entrance: fade-in + slide-up (150-300ms)
• Modal entrance: scale + fade (200ms)
• List items: staggered entrance (50ms between items)

Tailwind Transitions (Simple state changes):

• Default: transition-all duration-200
• Hover/focus: Use for button, card, input interactions
• Never use durations > 300ms for UI feedback

Performance:

• Use will-change on animated elements
• Respect prefers-reduced-motion media query
• Test 60fps on real devices (not just dev machine)

Micro-interactions:

• Button click: Subtle scale (0.98) or brightness shift
• Icon swap: Fade transition between states
• Loading: Spinning icon with subtle rotation

Accessibility Checklist

• ✅ Semantic HTML: <button>, <input>, <nav>, <main>, <section> used correctly
• ✅ ARIA Labels: Add aria-label, aria-describedby on interactive elements
• ✅ Keyboard Navigation: Tab order logical, all actions keyboard-accessible
• ✅ Focus Visible: Always show focus state with focus:ring-* or focus:outline-*
• ✅ Color Contrast**: 4.5:1 for text, 3:1 for UI components (use WebAIM checker)
• ✅ Form Labels: Every input has a label, error messages linked with aria-describedby
• ✅ Image Alt Text: All images and icons have alt text or aria-labels
• ✅ Focus Management: Modal focus trap, focus restoration on close
• ✅ Testing: Test with keyboard only, test with screen reader (VoiceOver/NVDA)

Tech Stack Rules

• Framework: Next.js App Router (latest, TypeScript always)
• Styling: Tailwind CSS (never inline styles, use utility classes)
• UI Components: shadcn/ui (Radix primitives + Tailwind)
• Icons: lucide-react (100+ icon options)
• Animation: framer-motion (for complex animations only)
• Utilities: clsx + tailwind-merge for safe class composition

File Structure Template

project/
├── app/
│   ├── layout.tsx          # Root layout, metadata
│   ├── page.tsx            # Home page
│   ├── globals.css         # Tailwind directives
│   └── (routes)/
│       ├── dashboard/
│       │   └── page.tsx
│       └── settings/
│           └── page.tsx
├── components/
│   ├── ui/                 # shadcn/ui components (button, input, card, etc.)
│   ├── layout/             # Header, Sidebar, Footer
│   ├── sections/           # Page sections (Hero, Features, etc.)
│   └── dashboard/          # Dashboard-specific components
├── lib/
│   ├── cn.ts              # Class name utility
│   └── constants.ts       # Colors, strings, config
├── hooks/                  # Custom React hooks
├── public/                 # Static assets
├── tailwind.config.ts
├── tsconfig.json
└── next.config.js

Common Pitfalls to Avoid

• ❌ No planning: Jumping to code without wireframes or hierarchy
• ❌ Hardcoded colors: Using hex/rgb instead of Tailwind classes
• ❌ Missing mobile design: Desktop-first instead of mobile-first
• ❌ No focus states: Keyboard users get lost
• ❌ Over-animation: Smooth ≠ good, excessive motion hurts performance
• ❌ Inconsistent spacing: Random px values instead of following the scale
• ❌ No semantic HTML: Using <div> for everything
• ❌ Skipping accessibility: ARIA labels take 30 seconds, pay off big
• ❌ No testing on real devices: Browser DevTools lie about responsiveness

Delivery Checklist

Before shipping:

• ✅ Responsive: Works on 320px (phone), 768px (tablet), 1440px+ (desktop)
• ✅ Accessible: Passes keyboard navigation test, ARIA labels present
• ✅ Performant: Lighthouse score > 90, animations smooth (60fps)
• ✅ Type-Safe: Full TypeScript, no any types
• ✅ Documented: Component props documented, usage examples provided
• ✅ Tested: Tested on real browsers (Chrome, Safari, Firefox)
• ✅ Themeable: Design system tokens defined, easy to customize
• ✅ Maintainable: Clean folder structure, reusable components, clear naming