ui-ux-design
UI Design Reference - Searchable Pattern Database
Curated reference database of UI/UX patterns, styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. Use this as a lookup tool to find proven design patterns and implementation guidance.
Prerequisites
Check if Python is installed:
python3 --version || python --version
If Python is not installed, install it based on user's OS:
macOS:
brew install python3
More from samhvw8/dot-claude
ui-design-system
React UI component systems with TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (styling), Radix UI (primitives), shadcn/ui (components), React/Next.js. Capabilities: design system architecture, accessible components, responsive layouts, theming, dark mode, component composition. Actions: review, design, build, improve, refactor UI components. Keywords: TailwindCSS, Radix UI, shadcn/ui, design system, component library, accessibility, ARIA, responsive, dark mode, theming, CSS variables, component architecture, atomic design, design tokens, variant, slot, composition. Use when: building component libraries, implementing shadcn/ui, creating accessible UIs, setting up design systems, adding dark mode/theming, reviewing UI component architecture.
2.8Kproject-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