All authors
Claude Skills by youlianvr
github.com/youlianvr269 skills0 installs0 views
- Modal And Overlay PatternsOverlays — modals, drawers, bottom sheets, popovers — interrupt or augment the main flow. Each type has a different scope, blocking level, and appropriate use case. Use when designing dialogs, confirmation prompts, side panels, action sheets, or any UI element that appears above the main content layer.Votes: 0GitHub stars: 15
- Modular Scale TypographyTypography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the others. Use when defining type scales, setting up design tokens, reviewing font size choices, or when typography feels inconsistent or arbitrary.Votes: 0GitHub stars: 15
- Motion And StorytellingDisney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive, intentional, and emotionally resonant. Use when designing transitions, micro-interactions, onboarding flows, scroll animations, or any motion in the UI.Votes: 0GitHub stars: 15
- Nielsen Usability HeuristicsUI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and improving usability. Use when auditing an interface, designing interaction flows, writing error messages, or reviewing any UI for usability issues.Votes: 0GitHub stars: 15
- Notifications And RecoveryWhen something goes wrong, the user must be able to recover or try again. Toasts, inline errors, banners, and notification patterns each have a specific role. Use when designing error states, success confirmations, async feedback, in-place editing, or any system that communicates state changes to the user.Votes: 0GitHub stars: 15
- Operational Expert Tool UiOperational expert tools — used by domain specialists for hours every day — require a different design approach than consumer or occasional-use software. Information density, workflow linearity, and at-a-glance status take priority over whitespace and discoverability. Use when designing dispatch tools, warehouse management, logistics, scheduling, or any B2B tool whose primary users are trained specialists.Votes: 0GitHub stars: 15
- Performance And Web VitalsAudit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX. Use when optimising page load, fixing layout shift, reducing input delay, improving Lighthouse scores, or reviewing images, fonts, and render-blocking resources.Votes: 0GitHub stars: 15
- Real World MetaphorsUI patterns borrowed from the physical world feel immediately intuitive — cards feel graspable, carousels feel scrollable, drawers feel pullable. Use real-world metaphors deliberately to reduce the learning curve and make interactions feel natural. Use when designing layout patterns, gestures, or navigation paradigms.Votes: 0GitHub stars: 15
- Repeated Component AlignmentAny component rendered many times — cards, list rows, table cells, nav items, tiles, KPI widgets, feed entries — is a fixed slot model, not a free-form box. The same slots appear in the same place in every instance and stay aligned across siblings even when text and values vary in length. Reserve space for optional slots, pin anchor elements (CTA, price, value), clamp overflowing text, and give the full value back via title/tooltip. Use when building or reviewing any repeated component whose ...Votes: 0GitHub stars: 15
- Responsive ParadigmsMobile, tablet, and desktop are different interaction paradigms — not the same layout scaled up or down. Sections can be hidden, repositioned, or made sticky on mobile. Navigation and primary actions move. Use when designing responsive layouts, adapting desktop UI for mobile, or deciding what to show on each breakpoint.Votes: 0GitHub stars: 15
- Saas ScaffolderGenerates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe. Use when the user wants to create a new SaaS app, start a subscription-based web project, scaffold a Next.js application, or mentions terms like starter template, boilerplate, new project, or wiring up auth and payments.Votes: 0GitHub stars: 15
- Scroll AreasScroll areas inside a layout should be avoided wherever possible. When unavoidable, allow only one scroll axis at a time and always keep the user in control. Use when designing layouts, data tables, panels, or any component that might introduce an inner scroll container.Votes: 0GitHub stars: 15
- Semantic Html And SeoSemantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness. Good HTML is the foundation of accessibility, SEO, and resilient UI. Use when building any web UI, reviewing markup quality, or optimising for search and accessibility.Votes: 0GitHub stars: 15
- Senior FrontendFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.Votes: 0GitHub stars: 15
- Status Colors And ErrorsKeep status and error colours minimal and consistent — too many semantic colours confuse users. Each colour must mean exactly one thing. Errors should be recoverable, large failures must be prevented, and the UI should always give the user a path forward. Use when designing status indicators, error states, form validation, alerts, or any feedback system.Votes: 0GitHub stars: 15
- Sticky And Fixed ElementsSticky and fixed positioning keeps critical UI persistent as the user scrolls — headers at the top, toolbars at the bottom on mobile. Use deliberately: too many fixed layers create visual noise and reduce content area. Use when designing navigation headers, bottom toolbars, floating action buttons, or table column headers.Votes: 0GitHub stars: 15
- System FeedbackLoad when the user asks to make it clear what happened after an action: save/copy/delete/send/download/sync confirmation, loading indicator, error handling, empty list state, operation progress; or to analyze an interface that seems unresponsive/unclear — even if they don't call it 'feedback' but ask 'what does the user see', 'what to show', 'what's happening'. Do not use for visual polish and aesthetics, for navigation/screen transitions (ux-navigation-context), and for product promises (pro...Votes: 0GitHub stars: 15
- Tab NavigationTabs organise related content under a shared context — switching tabs swaps the view without leaving the page. Use when a screen has multiple distinct content areas that share a common header or action set, and when the user needs to switch between them frequently. Use when designing tabbed layouts, content panels, settings pages, detail views, or dashboards with multiple data views.Votes: 0GitHub stars: 15
- Ui Context And ScopeUI should make it immediately clear where the user is, what context they are operating in, and what their actions will affect. Use lines, regions, colour areas, breadcrumbs, and scope labels to communicate hierarchy and context — especially in deep navigation structures or multi-section layouts.Votes: 0GitHub stars: 15
- Ui DensityUI density — how much information and how many features appear at once — should match the primary platform and user type. Desktop supports dense, feature-rich interfaces; mobile requires focused, reduced layouts. Enterprise power users tolerate higher density than occasional users. Use when designing data tables, dashboards, toolbars, or adapting a desktop product for mobile.Votes: 0GitHub stars: 15
- Ui StylingCreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.Votes: 0GitHub stars: 15
- Ui Ux Pro MaxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js, and HTML/CSS). Use when designing, building, or reviewing UI: page...Votes: 0GitHub stars: 15
- User Flows And Guided PathsRelated features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as natural, guided paths that feel coherent and fit the product hierarchy. Use wizards for complex sequential tasks. Use when designing flows, onboarding, checkout, setup sequences, or any multi-step user journey.Votes: 0GitHub stars: 15
- Ux Navigation ContextUse when the user wants to: go "back" after viewing/action, understand why the wrong screen opened, rework menu/buttons (many commands in /help), remove emoji from buttons, add "Cancel" to input mode, or when navigation breaks on reopen (fresh vs history). Covers: states and return context, context flags through layers, inline menu, two-tier navigation, button semantics, emoji discipline, callback delegation, pagination with context, UI tests presence+routing. Do not use for promises/copy (pr...Votes: 0GitHub stars: 15
- Visual Emphasis And HierarchyThe most important actions and content in a UI should be visually prominent — through size, colour, weight, and position. Visual hierarchy guides the user's eye to what matters most and signals which action is primary. Use when designing button groups, CTAs, dashboards, cards, or any layout where actions or content have different importance levels.Votes: 0GitHub stars: 15
- Wcag AccessibilityUI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate without deliberate justification. Disabled UI elements are explicitly exempt from colour contrast requirements. Use when designing, building, or reviewing any user-facing interface for accessibility compliance.Votes: 0GitHub stars: 15
- Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".Votes: 0GitHub stars: 15
- Web Design ToolkitUse when creating a UI/web interface, layout, selecting colors/components/animations, generating DESIGN.md from someone else's site, cloning a style. Covers: design token generation from URL, UI component libraries, animations, inspiration, 3D mockups. Do not use for bot navigation (ux-navigation-context) and content delivery (content-delivery-format).Votes: 0GitHub stars: 15
- DesktopDesktop and workstation environment: Windows dev-env patterns, system optimization and cleanup, console encoding fixes (cp1251/CRLF), Windows 11 theming for Linux tools, Wine and game setup on Linux, Firefox performance and extensions, zram swap, disk formatting, and PipeWire mic noise suppression.Votes: 0GitHub stars: 15
- Disk FormattingFormat, repartition and mount disks/partitions on Fedora Linux (ext4, btrfs, NTFS, FAT32, exFAT). Use when the user asks to format a disk, create a partition, fix a read-only NTFS drive, wipe a disk, make a USB stick, or mount a formatted disk with fstab.Votes: 0GitHub stars: 15
- Fedora Warm ColorsMake a Fedora GNOME (Wayland) display look warm and pleasant like Windows instead of cold/washed out. Use when the user asks to fix cold colors, set up gamma, night light, color temperature, or "make it like Windows" on Fedora/GNOME/Wayland.Votes: 0GitHub stars: 15
- Firefox ExtensionsVerified Firefox extension bundle for speed boost and eye protection: YourCodecs (force YouTube to serve H.264 when GPU can't handle VP9/AV1), uBlock Origin (ads/trackers), Dark Background and Light Text (dark mode), RedDarkMode theme. Use when the user asks about Firefox extensions for speed/video codecs/dark mode, YouTube stutters despite hardware decoding, or to add/review this bundle. GOTCHA: install only via the AMO button — sideload and policies do NOT work.Votes: 0GitHub stars: 15
- Firefox OptimizationOptimize Firefox on Fedora/Linux for performance and stability ("no glitches, but holds up"): about:config tweaks via user.js (Betterfox/Fastfox verified list), hardware acceleration, WebRender check, uBlock Origin, profile location gotchas, slow-video diagnosis (VA-API/NVIDIA, Flatpak GOTCHA). Use when the user asks to speed up Firefox, fix browser glitches/lag/video freezes/stuttering streams, or apply Firefox performance tweaks.Votes: 0GitHub stars: 15
- Gta4 Wine FixPlaybook for fixing GTA IV (repack/Complete Edition) under Wine: RGL error, FusionFix, DXVK, shaders, windowed. Diagnostics + verified fixes.Votes: 0GitHub stars: 15
- Mic Noise SuppressionUse when the user wants to fix a noisy microphone on Fedora/Linux with PipeWire: background noise, hum, muddiness, or make the voice clearer. Sets up EasyEffects + RNNoise (neural noise suppression) with the community NPR voice preset and a virtual "Easy Effects Source" microphone, with autostart.Votes: 0GitHub stars: 15
- ThemesMake Linux desktop tools look like Windows 11: Dolphin file manager, Konsole terminal, and the omp CLI TUI — dark gray background, blue selection, One Half-style schemes. One contract; the parts under parts/ carry the exact configs.Votes: 0GitHub stars: 15
- Dolphin Windows ThemeMake the Dolphin file manager (flatpak on GNOME/Fedora) look like Windows 11 File Explorer — dark gray #1F1F1F background, white text, blue #0078D4 selection. Use when the user says "dolphin dark theme", "dolphin like on Windows", "like Windows Explorer", "white text dolphin", "dolphin not dark", "theme dolphin dark", "windows 11 dark dolphin", or a flatpak Qt/KDE app ignores ~/.config/kdeglobals and stays light. Covers kdeglobals/color-scheme placement inside the flatpak sandbox, QT_QPA_PLAT...Votes: 0GitHub stars: 15
- Konsole Windows ThemeSet up a Windows Terminal-style dark theme in Konsole on Fedora (KDE). Use when the user says "set dark theme in console/konsole", "dark theme", "like Windows", "windows terminal", "One Half Dark", "black background in terminal", or asks to change Konsole colors/font/profile. Covers installing .colorscheme files, creating a profile, setting the default in konsolerc, and safely restarting Konsole.Votes: 0GitHub stars: 15
- Omp Windows DarkUse when the user wants a dark Windows-style theme in the omp CLI (Oh My Pi coding agent TUI) — "change the theme in omp cli", "dark theme like on windows", "windows terminal", "One Half Dark", "omp theme", "dark theme in omp", "config.yml theme.dark", or omp shows the default "titanium" theme. Creates a custom One Half Dark theme for omp (~/.omp/agent/themes/), enables it via theme.dark in ~/.omp/agent/config.yml, and fixes the missing PATH for the omp binary (~/.bun/bin/omp).Votes: 0GitHub stars: 15
- Windows Encoding FixesUse when working with Windows (cmd/PowerShell console, MINGW64, script installation): stdout encoding (cp1251 vs UTF-8, UnicodeEncodeError on ✓/Cyrillic), CRLF/LF when writing files (md5 mirror checks), UTF-8 BOM for PowerShell 5.1, npm.cmd instead of npm, venv Scripts vs bin, PYTHONIOENCODING/PYTHONUTF8, subprocess child output encoding. Verified on Windows 10 bug reports (2 installs + v2.4 BUG-1/4).Votes: 0GitHub stars: 15
- Windows EnvWindows-specific development environment patterns — paths, package managers, shell differences from Linux/macOS. Use when: Windows, installing on Windows, choco, winget, win paths, PowerShell, CMD.Votes: 0GitHub stars: 15
- Windows OptimizeWindows system optimization and cleanup. Removes bloatware, cleans temp/cache files, optimizes autostart, disables unnecessary services, tunes visual performance, configures page file, DNS, telemetry, and network settings. Use when: "optimize system", "clean up windows", "speed up PC", "remove bloatware", "clean temp", "fix autostart", "system cleanup", "performance tweak", "remove junk". NOT for: Linux/macOS, code refactoring, or application-level optimization.Votes: 0GitHub stars: 15
- Wine SetupFull Wine setup on Fedora for Windows games and repacks: install wine/winetricks + missing components (MFC42, VC++ runtimes, DirectX, corefonts, d3dx), map a folder as an extra drive (D:/E: → the configured mount point via dosdevices symlinks), and diagnose/fix broken installers (Inno Setup/xatab repacks: \"MFC42.DLL not found\", isskin.dll, silent exit of setup.exe). Use when the user says wine won't run, a game setup.exe doesn't start, a repack fails, needs to install to another drive, or \...Votes: 0GitHub stars: 15
- Zram OptimizeOptimize zram compressed swap on any Linux (Fedora/Arch/CachyOS/RHEL with systemd-zram-generator, Ubuntu with zram-tools). Use when the user says "configure zram", "compressed swap", "like on CachyOS", "swappiness for zram", "page-cluster", "zram-generator.conf", "VPS 16GB swap", "swap not working/low memory", or asks to speed up swapping. Covers the sizing formula (zram-size = RAM/2), zstd algorithm, swappiness 150/180, page-cluster 0, verification, and safe-apply rules (reboot for zram rege...Votes: 0GitHub stars: 15
- DevWriting and changing code: Ponytail simplicity, grounded style rules, local and feature-wide systematic debugging, completion verification, architecture improvements, defensive bash, API/database design, money-path safety, hardening and observability, RAG pipelines. One contract; the parts under parts/ carry the rules — open the ones the task needs.Votes: 0GitHub stars: 15
- Agent Refactor SafetyUse when extracting modules, splitting a monolith, merging versions, moving symbols or repairing behavior lost after an edit. Trace affected callers, preserve public contracts and shared-state identity, change coherent slices and verify after the last edit. Stack-specific techniques are examples, not a required Python workflow for every language.Votes: 0GitHub stars: 15
- Api Design ReviewerComprehensive REST API design review with automated linting, breaking-change detection, and design scorecards. Catches inconsistent conventions, missing versioning, and design smells before APIs ship. Use when reviewing a PR that adds or changes API endpoints, auditing an existing API for v2 migration, or establishing API standards for a team.Votes: 0GitHub stars: 15
- Architecture SimplicityUse when the user wants to: design/redesign modules and layers, choose between a library and own code, understand why a project became a god-file, add an abstraction "for growth," update a DB schema without data loss, or during architecture review. Covers: YAGNI until second need, stdlib-first, modules by change reason, shared core + thin adapters, config outside repo + defaults in code, schema evolution without DROP, provider fallback chain, non-representable invalid states, dead code remova...Votes: 0GitHub stars: 15
- Bash Defensive PatternsMaster defensive Bash programming techniques for production-grade scripts. Use when writing robust shell scripts, CI/CD pipelines, or system utilities requiring fault tolerance and safety.Votes: 0GitHub stars: 15
- Changelog DisciplineLoad when the user asks to maintain/update/create a CHANGELOG as a decision log: after code changes, when setting up changelog in a new project, when preparing a release, when asking 'why was it done this way' without an answer in code, or when a taken decision and rejected alternatives need to be documented — even if they don't call the file CHANGELOG but ask 'record what we decided / why this way / what we rejected'. Do not use for commit messages, PR descriptions, and user-facing release n...Votes: 0GitHub stars: 15