# Dev Tool UI > Generates clean, modern, dark-mode-first developer tool and SaaS interfaces inspired by bypass.tools using Next.js, Tailwind CSS, shadcn/ui, Lucide Icons, and Framer Motion. Use when designing or building web pages, dashboards, landing sections, or React UI components. - Skill: `tyecode/dev-tool-ui-2` (Agent Skill) - Install (CLI): `npx skillmds@latest add tyecode/dev-tool-ui-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/tyecode/dev-tool-ui-2/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tyecode (https://skillmd.com/u/tyecode) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tyecode/dev-tool-ui-2 --- # 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: `