Claude Skills by EthanY33

github.com/EthanY33

8 skillsA× 82 installs3 views

Accessibility Design AuditAWCAG 2.1 A and AA accessibility audit of a URL or local HTML file with axe-core in headless Chromium. Writes a markdown report grouped by impact plus raw JSON and exits 1 on critical or serious violations, so it doubles as a CI gate. Use after design changes (colors, contrast, typography, forms, modals), before shipping a page, or when asked to check a11y, WCAG, ADA or Section 508.designrustgoVotes: 0GitHub stars: 2
Brand Asset PipelineARender one SVG logo mark into a PNG brand asset pack (favicons 16 to 180 px, apple-touch-icon and Android Chrome icons, Open Graph, Twitter and LinkedIn covers, Steam store capsules). With --root it takes the background color, mark path and Steam target from .atelier/brand.json. Use when bootstrapping site icons, rebranding, or making social or Steam store art.designgoshellVotes: 0GitHub stars: 2
Brand MemoryACreate, read, update, validate and audit the project's brand file, .atelier/brand.json (studio, product, voice, hex palette, font stacks, logos, social handles, deploy target, motion and surface tokens). Use when starting a design workflow, running /brand-init, /brand-get, /brand-set or /brand-audit, changing a brand color or font, or checking brand.json against its schema.designgoshellVotes: 0GitHub stars: 2
Design Token SyncAGenerate design tokens from the atelier brand file (.atelier/brand.json): CSS custom properties, a Tailwind theme config, typed JS constants (tokens.js + tokens.d.ts) and a Figma Variables REST API body. Use when creating or regenerating design tokens, CSS variables, a Tailwind config, TypeScript color constants or Figma variables after brand colors or fonts change.designtypescriptbashVotes: 0GitHub stars: 2
Html To VideoARecord an HTML page, local .html file or URL as an MP4 (H.264) or WebM (VP9) video with frame-exact timing (virtual clock), optional muxed audio and a JPG poster. Use for product or game trailers, animated demo clips, screencasts of a local dev server, changelog or social videos, and turning CSS/JS animations into a video or GIF.designshellbashVotes: 0GitHub stars: 2
Og Card GeneratorARender 1200x630 Open Graph and Twitter card PNGs, one per page, from .atelier/brand.json colors, fonts, logo and studio name; single card from flags or a batch from a pages.json manifest. Use when adding og:image or twitter:image meta tags, setting up social link previews for a site or blog, or regenerating cards after a brand color or font change.designjavascriptgoVotes: 0GitHub stars: 2
Skills DirectorySkills Directory Look up any of 103,619 scanned skills — grade, score, and every finding. Free.Check a skill
Responsive Image PipelineAResize PNG/JPG/WebP images into AVIF and WebP srcset variants (EXIF-rotated, never upscaled), a fallback <img> file and a base64 LQIP placeholder, then print a copy-paste <picture> snippet with truthful srcset widths. Cached per source. Use for site images, hero art, gallery screenshots, srcset, page-weight or LCP work, or reprocessing after swapping an asset.designgobashVotes: 0GitHub stars: 2
Runtime Ux AuditAAudit a URL or local HTML file for runtime UX problems that WCAG checks miss. Back/forward cache blockers, view transitions, speculation rules, INP and main-thread smells, dialog, popover, z-index and motion issues, and mobile viewport bugs (100vh, safe areas, tap targets, scroll hijacking). Static pass for CI; --dynamic adds Chromium INP, bfcache and focus probes. Exits 1 on critical or serious.designrustgoVotes: 0GitHub stars: 2