ui-design-system
Production-ready React UI components with TailwindCSS, Radix UI, and shadcn/ui.
- Three-layer architecture combining Tailwind utilities, Radix primitives, and shadcn/ui components for accessible, customizable interfaces
- Comprehensive review and audit capabilities covering accessibility (WCAG AA/AAA), performance, responsive design, and design system consistency
- Design token system with three-tier structure (primitive, semantic, component) using OKLCH color space and CSS variables for theming and dark mode
- Form architecture with React Hook Form and Zod, component customization via CVA variants, and mobile-first responsive patterns with container queries
UI/UX Design & Development Expert
Comprehensive UI/UX design, review, and improvement for modern web applications.
Production-ready implementations with TailwindCSS + Radix UI + shadcn/ui and modern React patterns.
Stack Architecture
The Three Pillars
Layer 1: TailwindCSS (Styling Foundation)
- Utility-first CSS framework with build-time generation
- Zero runtime overhead, minimal production bundles
- Design tokens: colors, spacing, typography, breakpoints
- Responsive utilities and dark mode support
Layer 2: Radix UI (Behavior & Accessibility)
- Unstyled, accessible component primitives
- WAI-ARIA compliant with keyboard navigation
More from samhvw8/dot-claude
ui-ux-design
UI/UX design reference database. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
153project-planner
Universal project planning for non-technical projects. Domains: business, personal, creative, academic, organizational, events. Capabilities: goal setting, milestone planning, resource allocation, timeline creation, risk assessment, progress tracking. Actions: create, plan, structure, breakdown, track projects. Keywords: project plan, roadmap, strategy, goal setting, milestones, timeline, action plan, project management, business plan, personal goals, creative project, academic planning, event planning, organizational change, OKRs, SMART goals, Gantt chart. Use when: creating project plans, setting goals/milestones, planning business initiatives, organizing events, structuring academic work, developing strategies/roadmaps.
127claude-md-architect
CLAUDE.md file generation and optimization for Claude Code projects. Capabilities: initialize project instructions, analyze codebase context, optimize existing CLAUDE.md, apply Anthropic best practices, reduce token usage, improve effectiveness. Actions: init, create, optimize, enhance CLAUDE.md files. Keywords: CLAUDE.md, project instructions, Claude Code setup, project context, codebase analysis, Anthropic best practices, token optimization, project configuration, AI instructions, coding guidelines, project rules, workspace setup. Use when: initializing CLAUDE.md for new projects, optimizing existing project instructions, setting up Claude Code for a codebase, improving AI coding guidelines.
116nextjs-turborepo
Full-stack web development with Next.js and Turborepo. Stack: Next.js 14+ (App Router, RSC, Server Actions, PPR, SSR, SSG, ISR), Turborepo (monorepo, pipelines, remote caching), RemixIcon (3100+ icons). Capabilities: server components, API routes, middleware, caching strategies, build optimization, monorepo management. Actions: create, build, deploy, optimize Next.js apps, setup monorepo, configure caching. Keywords: Next.js, App Router, Server Components, RSC, Server Actions, SSR, SSG, ISR, PPR, Turborepo, monorepo, remote cache, build pipeline, parallel execution, workspace, pnpm, icons. Use when: building Next.js apps, implementing SSR/SSG, setting up monorepos, optimizing build performance, configuring caching strategies, managing shared dependencies.
101planning
Technical implementation planning and architecture design. Capabilities: feature planning, system architecture, technical evaluation, implementation roadmaps, requirement breakdown, trade-off analysis, codebase analysis, solution design. Actions: plan, architect, design, evaluate, breakdown technical solutions. Keywords: implementation plan, technical design, architecture, system design, roadmap, requirements analysis, trade-offs, technical evaluation, feature planning, solution design, scalability, security, maintainability, sprint planning, task breakdown. Use when: planning new features, designing system architecture, evaluating technical approaches, creating implementation roadmaps, breaking down complex requirements, assessing technical trade-offs.
67google-adk-python
Google Agent Development Kit (ADK) for Python. Capabilities: AI agent building, multi-agent systems, workflow agents (sequential/parallel/loop), tool integration (Google Search, Code Execution), Vertex AI deployment, agent evaluation, human-in-the-loop flows. Actions: build, create, deploy, evaluate, orchestrate AI agents. Keywords: Google ADK, Agent Development Kit, AI agent, multi-agent system, LlmAgent, SequentialAgent, ParallelAgent, LoopAgent, tool integration, Google Search, Code Execution, Vertex AI, Cloud Run, agent evaluation, human-in-the-loop, agent orchestration, workflow agent, hierarchical coordination. Use when: building AI agents, creating multi-agent systems, implementing workflow pipelines, integrating LLM agents with tools, deploying to Vertex AI, evaluating agent performance, implementing approval flows.
65