transparent-ui
Transparent UI
Build temporary debugging interfaces that make invisible system behavior visible. These are development-only routes/pages that reveal internal state, transitions, and data flow through interactive visualization.
Core Principles
Make the invisible visible. Show state that normally exists only in memory. Reveal transitions that happen too fast to observe. Surface the "why" behind system behavior.
Temporary by design. These are debugging tools, not production features. Keep changes isolated for easy removal. Use dev-only routes and environment checks.
Use existing components. Build with the project's component library and design system. The visualization should feel native to the codebase, not like a foreign debugging tool.
Match instrumentation to context. Sometimes minimal logging is enough; sometimes a full observable wrapper is needed. Choose the lightest approach that captures the necessary information.
Workflow
Step 1: Identify What to Make Transparent
Analyze the system and identify:
More from petekp/claude-code-setup
code-comments
Write clear, plain-spoken code comments and documentation that lives alongside the code. Use when writing or reviewing code that needs inline documentation—file headers, function docs, architectural decisions, or explanatory comments. Optimized for both human readers and AI coding assistants who benefit from co-located context.
139design-critique
Critique UI/UX designs for clarity, hierarchy, interaction, accessibility, and craft. Use for design reviews, PR feedback on UI changes, evaluating mockups, checking if a component is ship-ready, or when honest feedback is needed on whether something meets a high bar.
46personality-profiler
Generate rich personality profiles from social media data exports (Twitter/X, LinkedIn, Instagram). Use when a user wants to analyze their social media presence, create a personality profile for AI personalization, understand their communication patterns, or extract insights from their digital footprint. Triggers on requests like "analyze my Twitter data", "create a personality profile", "what can you learn about me from my posts", "personalize an AI for me", or when users provide social media export files.
40swiftui
Use when building SwiftUI interfaces for iOS, iPadOS, macOS, or visionOS. Triggers on Liquid Glass adoption, SwiftUI animation/transitions, layout patterns, state management, design tokens, performance optimization, accessibility in SwiftUI, or creating "Apple-level" UI quality.
39deep-research
|
36unix-macos-engineer
Expert Unix and macOS systems engineer for shell scripting, system administration, command-line tools, launchd, Homebrew, networking, and low-level system tasks. Use when the user asks about Unix commands, shell scripts, macOS system configuration, process management, or troubleshooting system issues.
36