loxihart-design

Plugin loxihart-design from marketplace loxihart-skills in Krosebrook/loxihart-skills. Commands read from the repo's manifest — today.

Skills (17)

• advanced-ux-patterns

  Comprehensive UX best practices including accessibility (WCAG 2.2), interaction patterns, user research methods, and usability principles. Use when designing user interfaces, conducting UX audits, or implementing accessible, user-centered designs. Also triggers on WCAG, ARIA, keyboard navigation, sc

• advanced-visual-design

  Advanced visual design techniques including typography systems, color theory, grid-based layouts, visual hierarchy, and composition principles. Use when creating high-quality visual designs, establishing design foundations, or implementing sophisticated design systems. Also triggers on type scale, f

• applying-web-design-standards

  Applies web design standards covering typography systems, color theory, grid layouts, design tokens, component library architecture, responsive CSS, and performance optimization. Use when the user mentions: type scale, font pairing, color palette, HSL color, 8-point grid, design tokens, component AP

• building-parallax-scroll-effects

  Builds scroll-linked motion effects — depth-layer parallax, sticky pinning, scroll-triggered reveals, horizontal scroll-jacking, pointer/mouse parallax, scale-on-scroll, velocity-aware marquees, and native CSS scroll-driven animation (animation-timeline) — with performance and accessibility handled

• compiling-brand-design-systems

  Use whenever the user says "compile the design system", "build a design system", "build the brand system", "make me a token system", "turn this brand into tokens", "design tokens for", "component library for my brand", or names a brand plus "design system" — even if they don't say "tokens" or "compo

• design-system-builder

  Build cohesive, scalable design systems with design tokens, component libraries, documentation, and governance. Use when creating company-wide design systems, style guides, or component libraries for product teams. Also triggers on requests mentioning design tokens, component API design, Storybook s

• designing-abstrekkt-systems

  Compiles and applies the Abstrekkt brand design system — token-driven, accessibility-first, state-machine-correct UI architecture for Abstrekkt and FlashFusion products. Use when building UI, designing components, generating design tokens, applying Abstrekkt visual identity, implementing Fraunces di

• elite-ui-design

  End-to-end product design orchestrator for opinionated, human-crafted UI — not generic AI output. Covers experience thesis, design system definition, interaction modeling, component architecture, screen design, and mandatory anti-slop audit. Use when the deliverable is a DESIGN SPEC or a design-led

• executing-branded-frontends

  Executes production HTML and React artifacts from Loxihart or FlashFusion brand token profiles. Runs mandatory 5-question design gate and 4-gate anti-slop audit before every output. Use when the user mentions: build a dashboard, make a component, create an artifact, code this UI, HTML artifact, Reac

• frontend-design

  Production-grade frontend code generation for Claude artifacts and plugins. This skill is the code execution layer — it takes a confirmed design brief, locked tokens, and a brand profile and ships working, distinctive frontend code. Mandatory design gate runs before any code generation. Integrates w

• managing-design-briefs

  Brief-before-generation system with locked design tokens and anti-slop enforcement for Loxihart and FlashFusion brand profiles. Use this skill whenever someone asks to build, spec, audit, or generate any UI — component, dashboard, panel, landing page, browser extension, artifact, or design system. A

• producing-graphics

  Create export-ready graphics for web, print, and social media with correct formats, color spaces, resolution, and optimization. Use when preparing assets for production, exporting from Figma or Sketch, creating marketing materials, converting image formats, optimizing file sizes, generating responsi

• professional-web-design

  Industry-standard web design practices including responsive design, performance optimization, modern CSS techniques, and production-ready workflows. Use when building professional websites, web applications, or implementing advanced CSS/HTML patterns. Also triggers on responsive layout, mobile-first

• prototyping-testing

  Prototyping and testing skill set covering prototyping strategy selection, usability test planning, heuristic evaluation, A/B experiment design, tree testing, five-second tests, concept testing, and research metrics frameworks. Use when asked to: choose a prototyping approach, plan or run a usabilit

• purging-icon-slop

  Use whenever Kyle says icon slop, de-slop the icons, visual identity cleanup, icon inventory, icon audit, replace generic icons, custom SVG icons, typed icon registry, ban lucide, ban heroicons, no emoji icons, 'the UI looks like a default shadcn template', 'these icons are generic', 'make the icons

• shipping-cowork-live-artifacts

  Use whenever the user says "make this a live artifact", "make my [thing] a live artifact", "add file upload to my artifact", "add a zip import suite", "let me upload PDFs/docx/spreadsheets to this" — even if "live artifact" isn't said and an HTML file is just attached with a ship/persist instruction

• ui-component-library

  Reusable UI component patterns for React, Vue, and vanilla JavaScript. Includes advanced components beyond basic libraries (shadcn/ui, MUI), complex interactions, and production-ready code patterns. Use when building custom component libraries or implementing sophisticated UI components. Also trigge

Similar plugins