All authors
Claude Skills by layoza
github.com/layoza19 skills0 installs0 views
- Layoza AccessibilityWCAG 2.2 AA accessibility engineering, relative luminance contrast verification, keyboard focus management, ARIA semantics, target size enforcement, and automated vs manual audit separation.Votes: 0GitHub stars: 2
- Layoza AnimationsMotion design for the web. Decide what motion a design needs, then pick the right tool for it (CSS, WAAPI, View Transitions, GSAP + ScrollTrigger/SplitText, Motion, Lenis, canvas/WebGL), with reduced-motion support, visible-without-JS content and clean teardown.Votes: 0GitHub stars: 2
- Layoza Art DirectionWorld-class art direction for new websites, apps and redesigns (Mode A/D): turn a brief into ONE committed visual world that is unmistakably about its subject, build it at studio quality (art, type, colour, layout, motion), and iterate on screenshots until it beats what a top studio would ship, with measured `layoza qa` as the floor. In Mode B/C use only its preservation and finish rules; the existing brand DNA wins.Votes: 0GitHub stars: 2
- Layoza ComponentsFramework-native UI component generation across React, Next.js, Astro, Vue, Nuxt, SvelteKit, semantic HTML/CSS/JS, and WordPress without violating project conventions or clean-room licensing.Votes: 0GitHub stars: 2
- Layoza Creative DirectionReading Layoza's design engine output (industry profiles, 3 structural directions, 0-10 dials for variance, motion and density). The art direction itself lives in layoza-art-direction; load that for any new site or redesign.Votes: 0GitHub stars: 2
- Layoza Design SystemDesign system extraction, Google-spec DESIGN.md authoring, token reference validation, WCAG contrast linting, and version diffing skill. Activate when creating, linting, or diffing DESIGN.md files or design tokens.Votes: 0GitHub stars: 2
- Layoza Discovery AuditProject discovery and comprehensive UI/UX, layout, accessibility, and code quality audit skill. Activate when inspecting an unfamiliar codebase, diagnosing design/usability issues, or establishing a pre-edit quality baseline.Votes: 0GitHub stars: 2
- Layoza Extend WebsiteMode B skill for adding a new page, section, hero, navbar, footer, pricing block, testimonial block, FAQ, or service page to an existing website while strictly preserving its brand identity, tokens, framework, and motion language.Votes: 0GitHub stars: 2
- Layoza FigmaAuthorized Figma token, variable, frame, and component context ingestion into Layoza DESIGN.md and SITE-DNA.json without fabricating missing measurements.Votes: 0GitHub stars: 2
- Layoza New WebsiteMode A: a brand-new website, landing page, web app or dashboard. Routes to layoza-art-direction (the design method) for sites and to layoza-product-ui for apps, dashboards and tools; covers framework choice and delivery.Votes: 0GitHub stars: 2
- Layoza PerformanceCore Web Vitals optimization (LCP, CLS, INP), font loading strategy, image optimization, animation frame-budget discipline, and honest Lab vs Field telemetry reporting.Votes: 0GitHub stars: 2
- Layoza Product UiProduct and application UI: dashboards, SaaS and web-app screens, admin panels, settings, data tables, forms, data visualisation, and mobile app UI. Covers component-library authority (shadcn on Radix / Base UI / React Aria), shell and navigation, density modes, numbers, the per-view state matrix, overlays, dark mode and tool motion. Load instead of layoza-art-direction's world-building whenever the visitor's job is to finish a task rather than be persuaded.Votes: 0GitHub stars: 2
- Layoza RedesignMode C (targeted existing website improvement) and Mode D (full creative redesign) skill with mandatory pre-edit baseline snapshots, regression verification, and instant rollback.Votes: 0GitHub stars: 2
- Layoza RefineTargeted refinement commands for an EXISTING page or component (Mode C): quieter, distill, delight, clarify, onboard, harden, adapt, optimize, audit, plus the type/colour/layout/motion/bolder passes and polish/critique from layoza-art-direction. Every command runs as a measured loop: baseline, `layoza qa` before, one scoped change, `layoza qa` after, regression check, rollback if a measured metric got worse. The site's own brand DNA wins.Votes: 0GitHub stars: 2
- Layoza Site DnaExisting website Design DNA extraction skill. Activate when inspecting a local project, running localhost app, public URL, or screenshot to generate DESIGN.md, BRAND.md, MOTION.md, SITE-DNA.json, COMPONENT-INVENTORY.json, and DESIGN-DECISIONS.md.Votes: 0GitHub stars: 2
- Layoza Threejs WebglInteractive 3D web scenes, Three.js, React Three Fiber (R3F), Drei, custom GLSL shaders, post-processing budgets, GPU disposal, and mobile/reduced-motion fallbacks.Votes: 0GitHub stars: 2
- Layoza Visual QaReal-browser verification with `layoza qa` (headless Chromium at 1440/768/375, scrolled like a visitor), what its measured rules mean, how objective errors differ from design critique, and before/after comparison.Votes: 0GitHub stars: 2
- Layoza WordpressFirst-class WordPress Gutenberg Block Theme engineering (theme.json v3, block patterns, templates, parts) plus Elementor and Bricks builder JSON export adapters.Votes: 0GitHub stars: 2
- LayozaPrimary entry point for Layoza, the AI-native UI/UX design, motion, Site DNA and frontend verification system. Activate first whenever the user asks to create a website, landing page, app or dashboard, add to or improve an existing site, redesign a frontend, build animations, build WordPress block themes, or run browser/accessibility/performance QA.Votes: 0GitHub stars: 2