# 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. Trigger automatically whenever creating web pages, dashboards, landing sections, or React UI components. - Skill: `tyecode/dev-tool-ui` (Agent Skill) - Install (CLI): `npx skillmds@latest add tyecode/dev-tool-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/tyecode/dev-tool-ui/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 --- # 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 ```typescript // 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 ```typescript // 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 ```typescript // 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 `