Dev Tool UI

Dev Tool UI Skill

Development Workflow

Follow this workflow exactly as a professional developer would:

1. Requirements & Planning

• Clarify the UI purpose, user needs, and feature set
• Identify which components are needed (forms, tables, modals, dashboards, etc.)
• Define the information hierarchy and user flow
• Gather any specific design references or brand guidelines

2. Project Setup

• Initialize Next.js project with TypeScript
• Install dependencies: npm install tailwindcss shadcn-ui lucide-react framer-motion
• Configure Tailwind CSS for dark mode (class strategy)
• Set up next.config.js and tsconfig.json
• Create folder structure: app/, components/, lib/, hooks/

3. Design System Implementation

• Create components/ui/ for shadcn/ui components
• Build lib/cn.ts for class name merging (clsx + tailwind-merge)
• Define theme tokens in tailwind.config.ts (colors, spacing, typography)
• Create reusable component patterns and layouts

4. Component Development

• Start with base components first: buttons, inputs, cards, badges
• Build container layouts: grids, flex layouts, sections
• Compose feature components: forms, tables, navigation, modals
• Add interactive elements: animations, transitions, hover states
• Implement accessibility: ARIA labels, semantic HTML, keyboard nav

5. Testing & Refinement

• Test responsive behavior at all breakpoints (mobile, tablet, desktop)
• Verify accessibility with keyboard navigation and screen readers
• Check performance (Lighthouse, animation smoothness)
• Refine based on user feedback and usability testing

6. Documentation & Handoff

• Document component APIs (props, usage examples)
• Create Storybook stories or component showcase
• Provide implementation guidelines for other developers

Tech Stack Rules

• Framework: Next.js App Router with TypeScript
• Styling: Tailwind CSS
• Component Library: shadcn/ui (built on Radix primitives)
• Icons: lucide-react
• Animation: framer-motion
• Utilities: clsx, tailwind-merge for class composition

Design System

Color & Atmosphere

• Dark Mode First: Default background bg-zinc-950
• Borders: Thin, subtle border-zinc-800 or border-zinc-700
• Glassmorphic Cards: bg-zinc-900/40 backdrop-blur-md border border-zinc-800 rounded-xl
• Ambient Effects: Radial background glows using CSS gradients for visual depth
• Accent Colors: Use white/neutral for primary actions, subtle grays for secondary elements

Typography

• Font Pairing: Inter/Geist Sans for UI, JetBrains Mono/Fira Code for code
• Hierarchy: Use size and weight to establish clear visual hierarchy
• Contrast: Maintain WCAG AA+ contrast ratios (4.5:1 minimum for text)
• Line Height: 1.5-1.6 for body text, tighter for headings

Spacing & Layout

• Spacing Scale: Use Tailwind's standard scale (4px, 8px, 12px, 16px, 24px, 32px)
• Grid System: 12-column grid for larger layouts, flex for flexible components
• Padding: Consistent internal spacing within components
• Gaps: Use gap utility for spacing between flex/grid children

Component Specifications

Buttons

// Primary: High contrast, action-oriented
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

// 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

// Sizes: sm (px-3 py-1.5), md (px-4 py-2), lg (px-6 py-3)
// States: disabled (opacity-50 cursor-not-allowed), loading (spinner icon)

Inputs & Forms

// Text inputs, selects, textareas
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

// Labels: text-sm font-medium text-zinc-200
// Error states: border-red-500 focus:ring-red-500/20
// Success states: border-green-500/50 focus:ring-green-500/20

Cards & Containers

// Standard card
bg-zinc-900/40 backdrop-blur-md border border-zinc-800 rounded-xl p-6

// Elevated card (for emphasis)
bg-zinc-900/60 border border-zinc-700 shadow-lg rounded-xl p-6

// Hover effects: hover:border-zinc-700 hover:shadow-xl transition-all duration-200

Layout Patterns

• Sidebar Navigation: Fixed or collapsible, vertical stacking
• Top Bar: Header with logo, nav, user menu
• Dashboard Grid: Responsive card grid (1-2-3 columns by breakpoint)
• Modal Overlays: Dark backdrop with centered/stacked dialog
• Data Tables: Striped rows, sticky headers, action menus

Animation & Motion

• Framer Motion: Use for complex animations, entrance effects, interactions
• Tailwind Transitions: Default for simple hover/focus state transitions (transition-all duration-200)
• Performance: Use will-change, hardware acceleration, reduce-motion respect
• Entrance Animations: Subtle fade-in, slide-up for page loads (150-300ms)
• Micro-interactions: Quick feedback for clicks (scale, color change, icon swap)
• Respect Preferences: Always check prefers-reduced-motion media query

Accessibility Standards

• Semantic HTML: Use <button>, <input>, <nav>, <main>, <section> correctly
• ARIA Labels: Add aria-label, aria-describedby where needed
• Keyboard Navigation: Tab order, focus visible, keyboard shortcuts documented
• Color Contrast: Minimum 4.5:1 for text, 3:1 for UI components
• Images & Icons: Provide alt text or aria-labels
• Forms: Label all inputs, error messages linked with aria-describedby
• Focus Management: Focus trap in modals, focus restoration on close

Output Expectations

• Production-Ready: All components are fully functional, tested, and ready for production
• Responsive: Works flawlessly on mobile (320px), tablet (768px), desktop (1440px+)
• Type-Safe: Full TypeScript coverage, no any types, proper prop interfaces
• Performance: Optimized re-renders, lazy loading where appropriate, bundle-size conscious
• Code Quality: Clean, well-organized, following React/Next.js best practices
• Documentation: Code comments, prop descriptions, usage examples
• Testing Ready: Structured for unit tests, integration tests, and visual regression testing
• Maintainability: Reusable patterns, consistent file structure, easy to extend

File Structure Template

project/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── (routes)/
├── components/
│   ├── ui/               # shadcn/ui components
│   ├── layout/           # Layout components (header, sidebar, etc.)
│   ├── sections/         # Page sections (hero, features, etc.)
│   └── [FeatureName]/    # Feature-specific components
├── lib/
│   ├── cn.ts            # Class name utility
│   └── constants.ts     # App constants
├── hooks/               # Custom React hooks
├── public/              # Static assets
├── styles/
│   └── globals.css
├── tailwind.config.ts
├── tsconfig.json
└── next.config.js

Common Pitfalls to Avoid

• ❌ Not planning layout before coding (start with wireframe/mockup)
• ❌ Hardcoding colors instead of using Tailwind classes
• ❌ Ignoring mobile-first responsive design
• ❌ Missing focus states for keyboard users
• ❌ Over-animating, causing performance issues
• ❌ Inconsistent spacing and sizing throughout the UI
• ❌ Not testing actual user interactions and edge cases
• ❌ Skipping accessibility features and ARIA attributes

Best Practices Checklist

✅ Plan before coding (user flows, component inventory) ✅ Use Tailwind classes consistently, no inline styles ✅ Implement dark mode from the start, not as an afterthought ✅ Test on real devices and browsers, not just desktop ✅ Use relative sizing (rem/em) for better scalability ✅ Create component variations using Tailwind's modifiers ✅ Keep components small and single-responsibility ✅ Document component props with TypeDoc comments ✅ Use proper semantic HTML ✅ Optimize bundle size and performance