Design & front-end agent skills

582 skills that teach Claude and other agents design & front-end work, from the most-starred GitHub repositories first. Each page explains what the skill does, who it suits, what it needs, and how to install it.

1. 1Frontend Patterns for React · frontend-patternsGuides the agent to write and review React and Next.js components, state, and performance codeaffaan-m/ECC
2. 2Frontend Slides · frontend-slidesBuilds animated, single-file HTML presentations that run in any browseraffaan-m/ECC
3. 3Accessibility (WCAG 2.2) · accessibilityGuides building and auditing UIs to WCAG 2.2 AA with ARIA and iOS/Android accessibility traitsaffaan-m/ECC
4. 4Frontend UI Engineering · frontend-ui-engineeringGuides the agent to build accessible, responsive, production-quality user interfacesaddyosmani/agent-skills
5. 5Design Is · design-isAudit a design against Dieter Rams' ten principles and hand off a /make-plan promptthedotmack/claude-mem
6. 6Directions Lab Scaffolder · directions-labScaffolds a design-exploration page comparing shipped UI with 2-3 design directions in Storybook.paperclipai/paperclip
7. 7Paperclip Design Guide · design-guideBuild UI components for the Paperclip frontend consistently, using its design tokens and conventions.paperclipai/paperclip
8. 8Paperclip Capsules Design Guide · paperclip-capsulesMakes the agent create or review Paperclip brand capsule visuals using the project's rulespaperclipai/paperclip
9. 9Low-fi Wireframe Maker · wireframeDraft black-and-white UI wireframes as SVG files and optional browsable review pages.paperclipai/paperclip
10. 10Product Design Critique · design-critiqueGives structured, prioritized UX feedback on screens, flows, and componentspaperclipai/paperclip
11. 11Taste Skill Frontend Design · design-taste-frontendMakes the agent design distinctive, non-generic websites and app screens using researched art directions and visual checksLeonxlnx/taste-skill
12. 12Aster Atelier Studio Website · aster-atelierBuilds a cinematic, classical-art style creative studio website with scroll motion and serif typographynexu-io/open-design
13. 13Blog Post Writer · blog-postWrites and lays out a full long-form article page as a single HTML filenexu-io/open-design
14. 14Contact Chat Widget · contact-widgetBuilds a single-file floating chat widget with social links and a meeting button for a website.nexu-io/open-design
15. 15Design Critique Review · critiqueScores any HTML design on 5 dimensions and produces a single-file review report with fixesnexu-io/open-design
16. 16Dashboard Designer · dashboardBuilds a single-file admin or analytics dashboard page in HTML with inline SVG chartsnexu-io/open-design
17. 17Dating Dashboard Design · dating-webGenerates an editorial-style dating/matchmaking dashboard as a single HTML pagenexu-io/open-design
18. 18Digital E-Guide Designer · digital-eguideDesigns a two-page digital e-guide preview (cover and inside spread) as a single HTML filenexu-io/open-design
19. 19Docs Page Designer · docs-pageCreates a three-column documentation page as a single HTML file, styled from a design system.nexu-io/open-design
20. 20Product Launch Email Designer · email-marketingGenerates a single-column HTML marketing email for product launches, styled to a design system.nexu-io/open-design
21. 21Engineering Runbook Writer · eng-runbookProduces a single-page HTML engineering runbook with alerts, procedures, on-call and incident stepsnexu-io/open-design
22. 22Finance Report Designer · finance-reportBuilds a one-page quarterly or monthly finance report as a single HTML file with KPIs and chartsnexu-io/open-design
23. 23FlowAI Team Dashboard Template · flowai-live-dashboard-templateBuilds a single-file team admin dashboard with tabs, charts, dark mode and CSV exportnexu-io/open-design
24. 24Gamified App Prototype · gamified-appCreates a three-screen gamified mobile app prototype as a single HTML pagenexu-io/open-design
25. 25Magazine Web Slides · magazine-web-pptBuilds single-file HTML magazine-style swipe decks with a WebGL background and themed layouts.nexu-io/open-design
26. 26HR Onboarding Plan · hr-onboardingCreates a single-page new-hire onboarding plan in HTML with a first-week schedule and milestones.nexu-io/open-design
27. 27Feature Business Case Deck · html-ppt-graphify-dark-graphBuilds an HTML slide deck laying out a feature's user pain, options, tradeoffs and success metricsnexu-io/open-design
28. 28BYOK Model-Choice Deck · html-ppt-hermes-cyber-terminalBuilds an HTML slide deck for choosing and wiring your own AI model (cost, quality, routing).nexu-io/open-design
29. 29Incident Retro Learning Deck · html-ppt-knowledge-arch-blueprintBuilds an HTML slide deck turning an OpenDesign incident retro into a decision-focused learning presentation.nexu-io/open-design
30. 30Enterprise AI Adoption Brief Deck · html-ppt-obsidian-claude-gradientBuilds an HTML slide deck on enterprise AI adoption, risk controls, ROI and rollout for leadershipnexu-io/open-design
31. 31HTML Presenter Mode Deck · html-ppt-presenter-modeBuilds a presenter-style HTML slide deck for a live AI product demo, using a shared template.nexu-io/open-design
32. 32HTML Product Launch Deck · html-ppt-product-launchBuilds a B2B sales-style HTML slide deck for proposing a team tool rolloutnexu-io/open-design
33. 33Tactical CRT Slide Deck · html-ppt-taste-brutalistBuilds 16:9 HTML slide decks in a dark CRT-terminal, monospace, hazard-red stylenexu-io/open-design
34. 34Editorial HTML Deck Style · html-ppt-taste-editorialBuilds 16:9 HTML slide decks in a warm, minimalist print-magazine stylenexu-io/open-design
35. 35HTML Tech Talk Deck · html-ppt-tech-sharingBuilds an HTML slide deck for an engineering tech talk using a preset template and visual stylenexu-io/open-design
36. 36HTML Board Briefing Deck (Testing Safety Alert) · html-ppt-testing-safety-alertLays out a red-amber styled HTML slide deck for a hospital data-governance board briefingnexu-io/open-design
37. 37Personal Manifesto Slide Deck · html-ppt-xhs-pastel-cardBuilds an HTML slide deck telling a personal story in a pastel card stylenexu-io/open-design
38. 38Biennale Yellow Art Deck · html-ppt-zhangzara-biennale-yellowBuilds a single-file HTML curatorial deck for an art biennale in a yellow-on-parchment museum style.nexu-io/open-design
39. 39Board-Grade Deck Rescue · html-ppt-zhangzara-block-frameTurns a messy startup slide deck into a polished, neobrutalist HTML presentationnexu-io/open-design
40. 40Blue Professional Corporate Deck · html-ppt-zhangzara-blue-professionalBuilds a single-file HTML executive quarterly review deck in a cream-and-cobalt corporate style.nexu-io/open-design
41. 41Bold Poster Series A Deck · html-ppt-zhangzara-bold-posterBuilds a magazine-style HTML fundraising pitch deck for Series A investors in one red-accented template.nexu-io/open-design
42. 42Capsule HTML Deck Template · html-ppt-zhangzara-capsuleBuilds a modular, pastel-style HTML slide deck for a year-end self-review.nexu-io/open-design
43. 43Senior Thesis Defense Deck · html-ppt-zhangzara-cartesianBuilds a quiet, serif-styled HTML slide deck for defending an economics thesisnexu-io/open-design
44. 44Coral HTML Growth-Campaign Deck · html-ppt-zhangzara-coralBuilds a single-file, editorial-style HTML slide deck for a marketing or growth campaign plan.nexu-io/open-design
45. 45Visual-Identity Deck Creative Mode · html-ppt-zhangzara-creative-modeBuilds a confident, multi-accent HTML slide deck presenting a brand visual-identity system.nexu-io/open-design
46. 46Daisy Days HTML Training Deck · html-ppt-zhangzara-daisy-daysBuilds a friendly, pastel-styled HTML training slide deck for customer onboarding workshopsnexu-io/open-design
47. 47Editorial Tri-Tone Deck Design · html-ppt-zhangzara-editorial-tri-toneBuilds magazine-style HTML slide decks using a fixed tri-tone palette and serif/sans type systemnexu-io/open-design
48. 48Urban Green-Space Policy Deck · html-ppt-zhangzara-groveBuilds a styled HTML policy briefing deck on urban tree canopy for council decision-makersnexu-io/open-design
49. 49Unit-Economics Deck in Warm Style · html-ppt-zhangzara-long-tableBuilds a warm-styled HTML slide deck presenting a unit-economics and cost model for finance audiences.nexu-io/open-design
50. 50Monochrome HTML Grant Deck · html-ppt-zhangzara-monochromeBuilds a black-and-ivory HTML slide deck for academic or grant review presentations.nexu-io/open-design
51. 51Designer Portfolio Interview Deck · html-ppt-zhangzara-neo-grid-boldBuilds a confident HTML slide deck structuring a designer's portfolio for a senior interview.nexu-io/open-design
52. 52Public-Transit Funding Case Deck · html-ppt-zhangzara-peoples-platformBuilds a styled HTML slide deck pitching public-transit funding to a city council.nexu-io/open-design
53. 53Pin and Paper Defense Deck · html-ppt-zhangzara-pin-and-paperBuilds a hand-crafted HTML slide deck for a student capstone defense in a yellow-paper style.nexu-io/open-design
54. 54Pink Script Anniversary Photo Essay · html-ppt-zhangzara-pink-scriptBuilds a dark, editorial HTML slide deck telling a wedding-anniversary story in scenesnexu-io/open-design
55. 55Playful HTML Sales Training Deck · html-ppt-zhangzara-playfulBuilds a warm, peach-toned HTML slide deck for a retail sales-floor training on consultative selling.nexu-io/open-design
56. 56Poster-Series Case Study HTML Deck · html-ppt-zhangzara-raw-gridBuilds a neo-brutalist HTML slide deck presenting a design case study, staying within one template's visual style.nexu-io/open-design
57. 57Retro Windows HTML Deck · html-ppt-zhangzara-retro-windowsBuilds single-file HTML slide decks in a Windows 95 retro style, including a security-awareness training example.nexu-io/open-design
58. 58Retro Zine HTML Deck · html-ppt-zhangzara-retro-zineBuilds a riso-print style, single-file HTML slide deck for neighborhood stories and zinesnexu-io/open-design
59. 59Cherry-Blossom Photo Essay Deck · html-ppt-zhangzara-sakura-chromaBuilds a vintage-styled HTML photo-essay slide deck about a travel trip, by filling in a fixed templatenexu-io/open-design
60. 60Graduation Defense Deck Template · html-ppt-zhangzara-scatterbrainBuilds a sticky-note style HTML slide deck for a design-school graduation project defensenexu-io/open-design
61. 61Strategy Decision Memo Deck · html-ppt-zhangzara-signalBuilds a navy-and-gold HTML strategy deck that frames a decision, options, risks and a recommendation.nexu-io/open-design
62. 62Digital Transformation Roadmap Deck Template · html-ppt-zhangzara-soft-editorialBuilds a consulting-style HTML slide deck on a digital-transformation roadmap, in a serif editorial look.nexu-io/open-design
63. 63Stencil & Tablet Compliance Deck · html-ppt-zhangzara-stencil-tabletBuilds an archival-styled HTML slide deck for presenting a workplace-safety compliance review.nexu-io/open-design
64. 64Studio Portfolio and Rate Deck · html-ppt-zhangzara-studioBuilds a dark, electric-yellow HTML portfolio and pricing deck for prospective clientsnexu-io/open-design
65. 65Vellum Humanities Lecture Deck · html-ppt-zhangzara-vellumBuilds a calm, scholarly single-file HTML slide deck for academic research talks and reviewsnexu-io/open-design
66. 66IB Pitch Book Builder · ib-pitch-bookBuilds banker-style HTML pitch and discussion decks with comps, football fields and disclaimersnexu-io/open-design
67. 67Image Poster Generator · image-posterGenerate poster, key art, and illustration images from a brief using an image modelnexu-io/open-design
68. 68Invoice Page Designer · invoiceCreates a printable single-page HTML invoice with line items, tax, totals and payment details.nexu-io/open-design
69. 69Lab Meeting Slide Deck Builder · kami-deckBuilds a self-contained, swipeable HTML research-presentation deck in a serif ink-blue style.nexu-io/open-design
70. 70Kami Landing Page · kami-landingBuilds a print-style, single-file HTML one-pager with a warm parchment look and multilingual serif fonts.nexu-io/open-design
71. 71Kanban Board Designer · kanban-boardGenerates a single-screen HTML kanban task board mockup with columns, cards, and a sprint sidebarnexu-io/open-design
72. 72Live Artifact Dashboards · live-artifactBuilds HTML dashboards and reports that can be refreshed from local or connected data without redesign.nexu-io/open-design
73. 73Live Team Dashboard · live-dashboardBuilds a Notion-style team dashboard HTML page with KPIs, sparkline, activity feed and task tablenexu-io/open-design
74. 74Magazine Poster Layout · magazine-posterCreates an editorial newspaper-style poster as a single HTML page with serif headlines and numbered sections.nexu-io/open-design
75. 75Meeting Notes Page · meeting-notesGenerates a single-screen HTML meeting notes page with agenda, decisions, and action items.nexu-io/open-design
76. 76Mobile App Screen Mockup · mobile-appDesign a single mobile app screen shown inside a realistic iPhone 15 Pro framenexu-io/open-design
77. 77Mobile Onboarding Designer · mobile-onboardingCreates a three-screen phone onboarding flow as a single HTML design pagenexu-io/open-design
78. 78Motion Frames Design · motion-framesCreates a looping, animated single-frame hero poster in HTML/CSS for video exportnexu-io/open-design
79. 79Editorial Landing Page Builder · open-design-landingBuilds a single-page editorial landing site in the Atelier Zero style from a brand brief.nexu-io/open-design
80. 80Brand-Story Slide Deck Builder · open-design-landing-deckBuilds a swipeable, self-contained HTML marketing deck from a typed JSON brief.nexu-io/open-design
81. 81PM Spec Writer · pm-specTurns a feature brief into a one-page HTML product spec (PRD) with metrics, scope and open questions.nexu-io/open-design
82. 82Pricing Page Designer · pricing-pageBuilds a single-file HTML pricing page with plan tiers, comparison table and FAQ.nexu-io/open-design
83. 83Replit Deck HTML Slides · replit-deckBuilds a single-file HTML slide deck for product and technical decision documents in one of eight themes.nexu-io/open-design
84. 84SaaS Landing Page Builder · saas-landingBuilds a single-page SaaS marketing landing page as one HTML file, styled from a DESIGN.md file.nexu-io/open-design
85. 85Simple Deck HTML Slides · simple-deckBuilds a single-file, swipeable HTML slide deck for leadership or board pre-reads.nexu-io/open-design
86. 86Social Carousel Designer · social-carouselGenerates a three-card 1080×1080 social media carousel as a single HTML page.nexu-io/open-design
87. 87Social Media Dashboard · social-media-dashboardGenerates a single-file creator analytics dashboard mockup for X, LinkedIn, YouTube and Instagramnexu-io/open-design
88. 88Social Media Matrix Tracker · social-media-matrix-tracker-templateBuilds a single-file, interactive multi-platform social analytics dashboard in HTML.nexu-io/open-design
89. 89Sprite Animation Explainer · sprite-animationGenerates a looping pixel-art animated explainer slide as a single HTML pagenexu-io/open-design
90. 90Team OKRs Tracker · team-okrsBuilds a single-screen OKR tracker page with objectives, key-result progress bars and status pillsnexu-io/open-design
91. 91Trading Analysis Dashboard Template · trading-analysis-dashboard-templateGenerates a single-file HTML trading analytics dashboard with themes, charts and demo/live modesnexu-io/open-design
92. 92Tweaks Live Controls Panel · tweaksWraps an HTML design in a side panel of live sliders and swatches to adjust colors, spacing, and motionnexu-io/open-design
93. 93Waitlist Page Builder · waitlist-pageBuilds a branded pre-launch waitlist landing page with an email signup form from a template.nexu-io/open-design
94. 94Web Prototype Builder · web-prototypeBuilds a single self-contained HTML landing, marketing, or docs page from a bundled template and layouts.nexu-io/open-design
95. 95Brutalist Swiss Print Web Prototype · web-prototype-taste-brutalistBuilds editorial web prototypes in a stark Swiss newsprint style with heavy type and hairline gridsnexu-io/open-design
96. 96Editorial Minimalist Web Prototype · web-prototype-taste-editorialBuilds single-page web prototypes in a warm, editorial minimalist style with strict design rules.nexu-io/open-design
97. 97Soft Premium Web Prototype · web-prototype-taste-softBuilds Apple-style soft, premium landing page prototypes with a defined design system.nexu-io/open-design
98. 98WebGL Experience Builder · webgl-experienceBuilds a full-screen, real-time GPU animation (shaders, 3D, particles) as one HTML filenexu-io/open-design
99. 99Annotated Wireframe Designer · wireframe-annotatedCreates flat annotated landing-page wireframes with numbered pins and a spec panelnexu-io/open-design
100. 100Wireframe Greybox · wireframe-greyboxProduces a grey, blueprint-style lo-fi wireframe page for laying out structure before visual design.nexu-io/open-design
101. 101Mobile Flow Wireframe · wireframe-mobile-flowCreates a lo-fi, multi-screen mobile app flow wireframe as a single HTML boardnexu-io/open-design
102. 102Wireframe Sketch · wireframe-sketchGenerates a hand-drawn, low-fidelity wireframe HTML page with sketch-style visuals.nexu-io/open-design
103. 103Worker Visualizer · worker-visualizerBuilds a smooth real-time particle, simulation or data visualizer with heavy compute moved to a Web Workernexu-io/open-design
104. 104Design Quality Review · critique-theaterReviews a design you just made across five quality areas and fixes the gaps before handing it over.nexu-io/open-design
105. 105Design Token Extractor · design-extractPulls colors, fonts, spacing and radius values out of code, screenshots or Figma exports into one token list.nexu-io/open-design
106. 106Direction Picker · direction-pickerLets the agent choose one visual direction for a design task without asking the user.nexu-io/open-design
107. 107Figma File Extractor · figma-extractPulls a Figma design's structure, tokens and assets into a local project snapshotnexu-io/open-design
108. 108Token Map · token-mapMaps design tokens from Figma or code onto your active design system with a reviewable audit listnexu-io/open-design
109. 109Codex Interactive Capability Map · codex-interactive-capability-mapTurns long articles or threads into a clickable visual map with a workflow loop and detail panel.nexu-io/open-design
110. 110Editorial Marketing Plan Deck · deck-guizang-editorialBuilds a magazine-style HTML slide deck for an annual marketing plan from your content.nexu-io/open-design
111. 111Architecture Review Slide Deck · deck-open-slide-canvasBuilds a 1920x1080 HTML slide deck for an architecture review with a fixed visual style.nexu-io/open-design
112. 112Swiss International Board Deck · deck-swiss-internationalBuilds a sober, grid-based HTML slide deck for a board pre-read from your own numbers and content.nexu-io/open-design
113. 113Design Brief Parser · design-briefTurns a structured or plain-language design brief into a concrete DESIGN.md spec and HTML preview.nexu-io/open-design
114. 114Kami Parchment Document · doc-kami-parchmentLays out warm, print-style one-page documents and reports with a parchment look and one serif font.nexu-io/open-design
115. 115NYT-Style Data Chart Frame · frame-data-chart-nytTurns your data into a single editorial-style chart frame with newsroom typography and reveal animationnexu-io/open-design
116. 116Light-Leak Cinematic Frame · frame-light-leak-cinemaMakes the agent build a film-style title frame with light leaks, grain and letterboxing.nexu-io/open-design
117. 117Liquid Background Hero · frame-liquid-bg-heroCreates a fluid, gradient-animated hero background with a quote overlay as a single HTML filenexu-io/open-design
118. 118Logo Outro Frame · frame-logo-outroBuilds an animated brand closing frame: logo assembly, glow, tagline and CTA in one HTML filenexu-io/open-design
119. 119macOS Notification Banner · frame-macos-notificationCreates realistic macOS-style notification banners for video overlays and product teasersnexu-io/open-design
120. 120Frontend Slides HTML Decks · frontend-slidesBuilds single-file, animated HTML slide decks on a fixed 16:9 stage that run in any browser.nexu-io/open-design
121. 121Editorial Forest Deck Designer · fs-editorial-forestBuilds a magazine-style, single-file HTML slide deck with a locked forest-green, pink and cream design system.nexu-io/open-design
122. 122Academic Review Deck Builder · hps-academic-paperBuilds a single-file, paper-styled HTML academic review slide deck from a template.nexu-io/open-design
123. 123Bauhaus Design Fundamentals Deck · hps-bauhausBuilds a single-file, Bauhaus-styled HTML training slide deck on design fundamentals from your content.nexu-io/open-design
124. 124Memphis Pop HTML Slide Deck · hps-memphis-popBuilds a single-file 1980s Memphis-style HTML slide deck from a seed templatenexu-io/open-design
125. 125KPI Decision Brief Deck · hps-y2k-chromeBuilds a chrome-styled, decision-focused KPI slide deck as one HTML file.nexu-io/open-design
126. 126Impeccable Frontend Design Skill · impeccableMakes the agent design, critique, audit and polish frontend UI with a professional design-director standard.pbakaus/impeccable
127. 127Archify Diagram and Explainer Maker · archifyTurn requirements, code or Mermaid into validated, interactive HTML diagrams and one-page explainers.tt-a1i/archify
128. 128Figma Design Knowledge Graph · understand-figmaMaps a Figma file's pages, screens, components and design tokens into an interactive graphEgonex-AI/Understand-Anything
129. 129Frontend Design Generator · frontend-designBuilds distinctive, production-grade web UIs in HTML, CSS, JS or React that avoid generic AI styling.bytedance/deer-flow
130. 130Web Interface Guidelines Review · web-design-guidelinesReviews UI code against fetched web interface best-practice rules and reports file:line findings.bytedance/deer-flow
131. 131Blueprint Figure SVG Drawer · blueprint-figureDraws consistent, real-named SVG diagrams for lessons, READMEs and manuals.rohitg00/ai-engineering-from-scratch
132. 132Course Style Reference · course-styleApplies the AI Engineering course's colours, fonts, label formats and plain-English writing rules.rohitg00/ai-engineering-from-scratch
133. 133Isometric Explainer · isometric-explainerBuilds an interactive isometric machine page where a tested state model drives each step of a process.rohitg00/ai-engineering-from-scratch
134. 134Motion Figure · motion-figureBuilds animated, slider-driven, and dither-pattern figures for lessons and pagesrohitg00/ai-engineering-from-scratch
135. 135Accessible Authentication Review · accessible-authenticationReviews sign-in, MFA, CAPTCHA and recovery flows for accessibility barriers like blocked paste.thedaviddias/Front-End-Checklist
136. 136Accessible Tables Reviewer · accessible-tablesReviews HTML tables for screen-reader-friendly headers, captions and structurethedaviddias/Front-End-Checklist
137. 137Accessible Tooltips Checker · accessible-tooltipsReviews HTML and components so tooltips work with keyboard and screen readersthedaviddias/Front-End-Checklist
138. 138Accordion Accessibility Checker · accordion-accessibilityReviews accordion markup for keyboard and screen reader accessibility issuesthedaviddias/Front-End-Checklist
139. 139Image Alt Text Checker · alt-textReviews HTML images for missing, generic, or misleading alt text and suggests accessible fixesthedaviddias/Front-End-Checklist
140. 140Anchor Smooth Scroll Checker · anchor-smooth-scrollReviews same-page anchor links so smooth scrolling respects reduced-motion settings and focus moves correctly.thedaviddias/Front-End-Checklist
141. 141Animation Performance Review · animation-performanceFlags CSS animations that animate layout properties and suggests transform/opacity fixes.thedaviddias/Front-End-Checklist
142. 142ARIA Allowed Attributes Checker · aria-allowed-attrFlags ARIA attributes that aren't valid for an element's role so screen readers get accurate info.thedaviddias/Front-End-Checklist
143. 143ARIA Command Name Checker · aria-command-nameReviews interactive HTML so buttons and links have clear accessible names for screen readers.thedaviddias/Front-End-Checklist
144. 144Deprecated ARIA Roles Checker · aria-deprecated-roleSpots outdated ARIA roles in HTML and suggests modern or native replacements.thedaviddias/Front-End-Checklist
145. 145Dialog Accessible Name Checker · aria-dialog-nameChecks that modal dialogs have an accessible name so screen readers announce their purpose.thedaviddias/Front-End-Checklist
146. 146Avoid aria-hidden on Body · aria-hidden-bodyReviews HTML and components to catch aria-hidden on the document body that hides the whole page from screen readers.thedaviddias/Front-End-Checklist
147. 147ARIA Hidden Focus Checker · aria-hidden-focusFlags focusable elements hidden inside aria-hidden containers and suggests accessible fixes.thedaviddias/Front-End-Checklist
148. 148Accessible Form Input Names · aria-input-field-nameChecks that form fields have proper labels so screen reader and voice control users can identify themthedaviddias/Front-End-Checklist
149. 149Accessible Names Checker · aria-labelsReviews interactive elements so buttons and links have clear, descriptive accessible names.thedaviddias/Front-End-Checklist
150. 150ARIA Live Regions Checker · aria-live-regionsReviews web pages so dynamic updates are announced to screen reader users via ARIA live regions.thedaviddias/Front-End-Checklist
151. 151Meter Accessible Names Check · aria-meter-nameFlags meter elements that lack a label so screen reader users know what the value measures.thedaviddias/Front-End-Checklist
152. 152Required ARIA Attributes Checker · aria-required-attrReviews HTML for ARIA roles missing their required attributes, like aria-valuenow on sliders.thedaviddias/Front-End-Checklist
153. 153ARIA Required Children Checker · aria-required-childrenChecks that custom ARIA widgets contain the child roles screen readers need.thedaviddias/Front-End-Checklist
154. 154ARIA Required Parent Checker · aria-required-parentChecks that ARIA child roles like listitem, tab, and menuitem sit inside their required parent roles.thedaviddias/Front-End-Checklist
155. 155ARIA Role Checker · aria-rolesReviews HTML for misspelled or invalid ARIA roles and suggests correct, native-first fixes.thedaviddias/Front-End-Checklist
156. 156Avoid Focusable Inside role=text · aria-textSpot and fix interactive elements hidden from screen readers inside role="text" containers.thedaviddias/Front-End-Checklist
157. 157Accessible Toggle Field Names · aria-toggle-field-nameReviews checkboxes, radios and switches to ensure each has a descriptive accessible name.thedaviddias/Front-End-Checklist
158. 158Accessible Tooltip Names Checker · aria-tooltip-nameReviews tooltips and their triggers so screen reader users can access tooltip information.thedaviddias/Front-End-Checklist
159. 159Accessible tree item names · aria-treeitem-nameChecks that custom tree widgets give every treeitem a clear, screen-reader-friendly name.thedaviddias/Front-End-Checklist
160. 160ARIA Attribute Value Checker · aria-valid-attr-valueReviews HTML so ARIA attributes use valid values that assistive technology can read correctly.thedaviddias/Front-End-Checklist
161. 161Audio Descriptions Review · audio-descriptionsReviews video markup to check audio description tracks for accessibility gapsthedaviddias/Front-End-Checklist
162. 162Avoid Autofocus Checker · autofocus-avoidanceReviews HTML forms and flags autofocus use that disrupts screen reader and keyboard users.thedaviddias/Front-End-Checklist
163. 163Avoid Autoplaying Media · autoplay-mediaChecks and fixes web pages so audio or video does not autoplay and disrupt screen readers and users.thedaviddias/Front-End-Checklist
164. 164AVIF Image Format Review · avif-formatReviews web images and markup to check whether AVIF with fallbacks is used correctly.thedaviddias/Front-End-Checklist
165. 165BreadcrumbList Schema Auditor · breadcrumbAudits pages for valid BreadcrumbList structured data that matches visible breadcrumbsthedaviddias/Front-End-Checklist
166. 166Breadcrumb Navigation Review · breadcrumb-navigationChecks breadcrumb markup for accessible nav, ordered lists, and aria-current on pagesthedaviddias/Front-End-Checklist
167. 167Fix broken images · broken-imagesFinds missing or broken image paths and adds fallbacks so pages don't show broken icons.thedaviddias/Front-End-Checklist
168. 168Button accessible names checker · button-nameReviews buttons so every one has a clear, screen-reader-friendly name and the right semantics.thedaviddias/Front-End-Checklist
169. 169Canonical Chain Auditor · canonical-chainChecks that canonical URLs point straight to a final 200 page, not through redirects.thedaviddias/Front-End-Checklist
170. 170CSS Cascade Layers Reviewer · cascade-layersReviews CSS for specificity problems and sets up explicit @layer cascade order.thedaviddias/Front-End-Checklist
171. 171Color Contrast Checker · color-contrastMakes the agent check and fix text and UI color contrast against WCAG accessibility ratiosthedaviddias/Front-End-Checklist
172. 172OKLCH Colour Palette Guide · color-oklchGuides the agent to build perceptually uniform CSS colour palettes using oklch() and oklab().thedaviddias/Front-End-Checklist
173. 173Consistent Help Checker · consistent-helpAudits multi-page flows so help links and chat stay in the same place on every screen.thedaviddias/Front-End-Checklist
174. 174Container Queries Review · container-queriesReviews CSS for component-level responsiveness and suggests container query fixesthedaviddias/Front-End-Checklist
175. 175Content Without CSS Check · content-without-cssReviews pages to confirm content still makes sense with CSS disabled or replaced.thedaviddias/Front-End-Checklist
176. 176Critical Image Loading Review · critical-imagesReviews hero and above-the-fold images so they load with high priority and improve LCP.thedaviddias/Front-End-Checklist
177. 177CSS @property Registration Guide · css-at-propertyGuides the agent to register CSS custom properties with @property for animation and typed tokensthedaviddias/Front-End-Checklist
178. 178CSS Containment Review · css-containmentReviews stylesheets to find components that can use CSS containment to limit repaint and layout workthedaviddias/Front-End-Checklist
179. 179CSS Custom Properties Review · css-custom-propertiesReviews CSS for hard-coded colors, spacing and font sizes that should become design tokensthedaviddias/Front-End-Checklist
180. 180CSS Grid Layout Checker · css-gridReviews CSS for two-dimensional layouts that should use CSS Grid and proposes fixes.thedaviddias/Front-End-Checklist
181. 181CSS Minification Checker · css-minificationReviews stylesheets and build setup to confirm CSS is minified for production.thedaviddias/Front-End-Checklist
182. 182CSS Print Stylesheet Review · css-printChecks and fixes print stylesheets so web pages print readably with hidden clutter and sensible page breaks.thedaviddias/Front-End-Checklist
183. 183Dark Mode CSS Checker · dark-mode-cssAudits stylesheets for missing prefers-color-scheme dark mode support and hard-coded colorsthedaviddias/Front-End-Checklist
184. 184Decorative Elements Accessibility Check · decorative-elementsReviews HTML for images and icons that screen readers should skip, using alt and aria-hidden rulesthedaviddias/Front-End-Checklist
185. 185Image Dimensions Checker · dimensionsFinds images missing width and height and explains how to fix layout shiftthedaviddias/Front-End-Checklist
186. 186Definition List Wrapping Check · dlitemChecks that HTML definition terms and descriptions sit inside a proper definition list.thedaviddias/Front-End-Checklist
187. 187DOM Performance Review · dom-performanceFinds layout thrashing and non-passive scroll listeners in front-end code and suggests batching fixes.thedaviddias/Front-End-Checklist
188. 188Avoid Inline CSS Review · embedded-or-inline-cssReviews CSS for embedded and inline styles and flags violations of the rulethedaviddias/Front-End-Checklist
189. 189Empty Heading Checker · empty-headingFlags empty heading tags (h1-h6) and suggests accessible fixes for themthedaviddias/Front-End-Checklist
190. 190Empty Link Accessibility Fixer · empty-linksFinds and fixes links that screen readers can't describe, such as empty or icon-only links.thedaviddias/Front-End-Checklist
191. 191Image Error Fallbacks · error-imagesReview a site's images and add graceful fallbacks for images that fail to loadthedaviddias/Front-End-Checklist
192. 192External Links Audit · external-linksAudits web pages for well-sourced outbound links and correct link attributes like noopener and nofollow.thedaviddias/Front-End-Checklist
193. 193FAQ Schema Markup · faqAdds and checks FAQPage JSON-LD structured data for FAQ sections on web pagesthedaviddias/Front-End-Checklist
194. 194Figure and figcaption captions · figure-figcaptionReviews image captions and marks them up with accessible figure/figcaption HTMLthedaviddias/Front-End-Checklist
195. 195File Upload Accessibility Review · file-upload-accessibilityChecks file upload markup for labels, accepted types, progress feedback and keyboard accessthedaviddias/Front-End-Checklist
196. 196Descriptive Image Filenames Checker · filename-qualityAudits image filenames in a codebase and suggests clearer, SEO-friendly names with updated references.thedaviddias/Front-End-Checklist
197. 197Flashing Content Safety Check · flashing-contentReviews pages and animations for seizure-triggering flashing content under WCAG 2.3.1.thedaviddias/Front-End-Checklist
198. 198Flexbox Layout Patterns · flexbox-patternsReviews and fixes CSS Flexbox layouts, spacing with gap, and min-width overflow bugs.thedaviddias/Front-End-Checklist
199. 199Focus Management Reviewer · focus-managementReviews pages and components for keyboard focus handling in modals, views and dynamic updates.thedaviddias/Front-End-Checklist
200. 200Focus Not Obscured Checker · focus-not-obscuredChecks that focused controls aren't hidden behind sticky headers, banners or chat widgetsthedaviddias/Front-End-Checklist
201. 201Logical Focus Order Checker · focus-orderReviews pages and components so keyboard focus moves in a sensible order that matches the visual layout.thedaviddias/Front-End-Checklist
202. 202Visible Focus Styles Checker · focus-stylesFinds CSS that hides keyboard focus outlines and proposes accessible focus ringsthedaviddias/Front-End-Checklist
203. 203Readable Font Sizes Check · font-sizeAudits CSS font-size rules for mobile readability, zoom and WCAG text-resizing compliancethedaviddias/Front-End-Checklist
204. 204Single Label Form Field Check · form-field-multiple-labelsReviews forms so each input has exactly one label, with accessible names verifiedthedaviddias/Front-End-Checklist
205. 205Form Label Checker · form-labelsReviews HTML forms to ensure every input has a proper, accessible label.thedaviddias/Front-End-Checklist
206. 206Iframe Title Checker · frame-titleChecks that iframes and frames have descriptive titles for screen reader users.thedaviddias/Front-End-Checklist
207. 207CSS :has() Parent Styling · has-selectorReplace JavaScript class-toggling with CSS :has() rules that style parents based on their childrenthedaviddias/Front-End-Checklist
208. 208Heading Order Checker · heading-orderReviews HTML headings for logical, non-skipped order to aid screen reader navigationthedaviddias/Front-End-Checklist
209. 209Prevent horizontal scrolling · horizontal-scrollChecks CSS layouts so pages don't force sideways scrolling at narrow widths or high zoom.thedaviddias/Front-End-Checklist
210. 210HTML lang Attribute Checker · html-xml-lang-mismatchChecks that the html lang and xml:lang attributes match in XHTML and polyglot pagesthedaviddias/Front-End-Checklist
211. 211HTML5 Semantic Elements Review · html5-semantic-elementsChecks HTML markup for proper semantic elements like header, main, nav and article instead of generic divs.thedaviddias/Front-End-Checklist
212. 212Identical Links Consistency Check · identical-links-same-purposeReviews pages to flag identical link text that points to different destinations, for screen reader usersthedaviddias/Front-End-Checklist
213. 213Image CDN Review · image-cdnReviews image setup and recommends serving images through an optimizing CDN for smaller, faster loads.thedaviddias/Front-End-Checklist
214. 214Image Compression Review · image-compressionReviews image assets and build setup for compression that keeps visible qualitythedaviddias/Front-End-Checklist
215. 215Image Optimization Checker · image-optimizationAudits a site's images for format, size, lazy loading and layout shift, then proposes fixesthedaviddias/Front-End-Checklist
216. 216Avoid Redundant Image Alt Text · image-redundant-altReviews image alt text and flags wording that repeats 'image of' or duplicates nearby text.thedaviddias/Front-End-Checklist
217. 217Inclusive Language Checker · inclusive-languageReviews web content and UI text for ableist, gendered, or exclusionary wording and suggests neutral fixes.thedaviddias/Front-End-Checklist
218. 218Indexability Conflicts Auditor · indexability-conflictsFinds pages with contradictory robots.txt, noindex, and canonical signals that confuse search enginesthedaviddias/Front-End-Checklist
219. 219Image Button Alt Text Checker · input-image-altChecks that image buttons have meaningful alt text so screen-reader users know what they do.thedaviddias/Front-End-Checklist
220. 220Semantic Input Types Checker · input-typesAudits HTML form inputs for correct type and autocomplete attributes for mobile and autofillthedaviddias/Front-End-Checklist
221. 221Presentation Styling Reference · presentation-stylingGives the agent the CSS classes and HTML patterns for building slides in one specific presentation.shanraisshan/claude-code-best-practice
222. 222Dubai Time SVG Creator · time-svg-creatorTurns a supplied Dubai time into an SVG time card and a markdown summary file.shanraisshan/claude-code-best-practice
223. 223Diagram Design · diagram-designMakes the agent draw 45 kinds of branded diagrams as self-contained HTML/SVG files.cathrynlavery/diagram-design
224. 2243MF Hole Resizer and Mesh Repair · cli-anything-3mfDetect, resize, and repair holes in 3D printing 3MF files, and compare two models.HKUDS/CLI-Anything
225. 2253D & CAD Matrix · cli-hub-matrix-3d-cadRoutes 3D modeling, CAD, point cloud, rendering and print-prep tasks to the right local toolHKUDS/CLI-Anything
226. 226Image & Graphic Design Matrix · cli-hub-matrix-image-designRoutes image generation, editing, diagrams and upscaling to the best available local or API toolHKUDS/CLI-Anything
227. 227CloudCompare Command-Line Harness · cli-anything-cloudcompareLets an agent run CloudCompare 3D point cloud and mesh processing from the command lineHKUDS/CLI-Anything
228. 228ComfyUI Command-Line Control · >-Lets an agent queue ComfyUI image jobs, manage models, and download generated images from the terminal.HKUDS/CLI-Anything
229. 229Draw.io Command-Line Diagrams · >-Lets an agent create, edit and export Draw.io diagrams through a command-line toolHKUDS/CLI-Anything
230. 230GIMP Image Editing CLI · >-Lets an agent create and edit images from the command line using layers, filters, text and export, without a GUIHKUDS/CLI-Anything
231. 231Inkscape Vector Editing CLI · >-Lets an agent create and edit SVG vector graphics through a stateful Inkscape command-line tool.HKUDS/CLI-Anything
232. 232Mermaid Diagram CLI · >-Create, edit and render Mermaid diagrams from the command line via a stateful project file.HKUDS/CLI-Anything
233. 233Blender Scene CLI · cli-anything-blenderLets an agent build, edit and render 3D Blender scenes through a stateful command-line tool.HKUDS/CLI-Anything
234. 234Draw.io Diagram CLI · cli-anything-drawioLets an agent create, edit and export Draw.io diagrams through a command-line tool.HKUDS/CLI-Anything
235. 235GIMP Image Editing CLI · cli-anything-gimpLets an agent edit, layer, filter and export images from the command line via a stateful GIMP-style CLIHKUDS/CLI-Anything
236. 236Inkscape Vector Editing CLI · cli-anything-inkscapeLets an agent create and edit SVG vector graphics in Inkscape through a command-line tool.HKUDS/CLI-Anything
237. 237Mermaid Diagram CLI · cli-anything-mermaidCreate, edit and render Mermaid flowcharts and diagrams from the command line.HKUDS/CLI-Anything
238. 2383MF Mesh Editor · cli-anything-threemfInspect, resize holes in, repair and compare 3D printing (3MF) model files from the command line.HKUDS/CLI-Anything
239. 2393D Web Experiences · 3d-web-experienceGuides building and debugging interactive 3D scenes for websites with Three.js, React Three Fiber, or Splinesickn33/agentic-awesome-skills
240. 240Accessibility Audit · accessibility-compliance-accessibility-auditAudit pages and user journeys against WCAG and record barriers, coverage gaps and fixessickn33/agentic-awesome-skills
241. 2411human Animation Reference Network · agent-reelsSearch a shared animation/video reference network and, only with owner permission, save, recommend or publish creations.sickn33/agentic-awesome-skills
242. 242AI Logo Maker (Beatra) · ai-logo-makerPointer to a pinned, paid AI logo-design package that runs on the Beatra hosted servicesickn33/agentic-awesome-skills
243. 243AI Studio Image · ai-studio-imageGenerates humanized, phone-style photos via Google AI Studio (Gemini/Imagen) from a text request.sickn33/agentic-awesome-skills
244. 244Purposeful Web Animation · animateBuilds restrained, accessible web animations with the right tool, easing and reduced-motion supportsickn33/agentic-awesome-skills
245. 245Expo Motion Animation Builder · animate-expoBuilds smooth, device-tested React Native and Expo animations, gestures and haptics.sickn33/agentic-awesome-skills
246. 246Animated GitHub Profile · animated-github-profileGuides an agent to build animated, theme-aware SVG/CSS profile READMEs for GitHubsickn33/agentic-awesome-skills
247. 247Animation Performance Diagnosis · animation-performanceDiagnose janky web animations and pick cheaper properties and rendering paths for smooth motionsickn33/agentic-awesome-skills
248. 248Animation Vocabulary · animation-vocabularyNames a described motion effect using a reverse-lookup animation glossary.sickn33/agentic-awesome-skills
249. 249Anime.js Animation Helper · animejs-animationWrites complex, staggered and timeline-based web animations using the Anime.js library.sickn33/agentic-awesome-skills
250. 250Anti-Slop Design · anti-slop-designMakes the agent rework UI code to remove generic AI-looking design patterns and add polished, accessible styling.sickn33/agentic-awesome-skills
251. 251Anti-UI-Slop Design Guide · anti-ui-slopMakes the agent build product-specific, non-generic UI that covers required states and is checked in a rendered viewsickn33/agentic-awesome-skills
252. 252Antigravity UI Motion Designer · antigravity-design-expertGuides the agent to build floating, glassmorphism-style web UIs with GSAP and 3D CSS motion.sickn33/agentic-awesome-skills
253. 253Frontend Design · frontend-designGuides the agent to make distinctive, subject-specific visual design choices for web UI instead of generic templates.anthropics/claude-plugins-official
254. 254Interactive Playground Builder · playgroundBuilds single-file HTML explorers with sliders, live previews and a copy-ready promptanthropics/claude-plugins-official
255. 255Hallmark Web Design · hallmarkMakes AI-built web pages look deliberately designed instead of generic, using a fixed quality floor and dealt themes.Nutlope/hallmark
256. 256Diagram Generator · diagram-generatorTurns notes, schemas, or code into editable Mermaid, Graphviz, PlantUML, or SVG diagrams.zhaoxuya520/reverse-skill
257. 257Windows Active Directory Security · windows-adGuides an agent through authorized Active Directory attack-path testing, from enumeration to privilege escalation.zhaoxuya520/reverse-skill
258. 258K-12 核心素养教学设计 · k12-core-literacy-planningDesigns a Chinese K-12 lesson around authentic tasks and core-literacy evidence in OpenMAICTHU-MAIC/OpenMAIC
259. 259Slide Page Design Rules · slide-craftGives an agent layout, text-sizing and contrast rules for editing slide pagesTHU-MAIC/OpenMAIC
260. 260WCAG Audit Patterns · wcag-audit-patternsAudit websites against WCAG 2.2 accessibility rules and get fix guidancewshobson/agents
261. 261Brand Landing Page Designer · brand-landingpageInterviews you about your brand, then generates and refines a landing page via Stitch as deployable HTML.wshobson/agents
262. 262Tailwind Design System · tailwind-design-systemLets the agent build Tailwind CSS v4 design tokens, themes, and component patternswshobson/agents
263. 263Binary Analysis Patterns · binary-analysis-patternsTeaches the agent common assembly and decompilation patterns for reading compiled programswshobson/agents
264. 264Visual Edit Precision · visual-edit-precisionMakes minimal, targeted UI edits when you point at elements, draw annotations, or share screenshotswshobson/agents
265. 265Accessibility Compliance · accessibility-complianceGuides building and auditing WCAG 2.2 accessible interfaces, ARIA patterns and mobile screen reader support.wshobson/agents
266. 266Design System Patterns · design-system-patternsGuides the agent to build design tokens, light/dark theming, and reusable component architecture.wshobson/agents
267. 267Interaction Design · interaction-designAdds motion, feedback, and transition patterns to UI code so interactions feel polished.wshobson/agents
268. 268Android Mobile Design · mobile-android-designGuides the agent to build Android UIs with Material Design 3 and Jetpack Composewshobson/agents
269. 269iOS Mobile Design · mobile-ios-designGuides the agent to build native iOS interfaces in SwiftUI that follow Apple's Human Interface Guidelines.wshobson/agents
270. 270React Native Design · react-native-designGuides an agent through React Native styling, navigation, and Reanimated animation patterns.wshobson/agents
271. 271Responsive Design Patterns · responsive-designGuides the agent to build layouts that adapt across screen sizes using modern CSS techniques.wshobson/agents
272. 272Visual Design Foundations · visual-design-foundationsGives the agent design-system guidance on type scales, spacing, color tokens, contrast and icons.wshobson/agents
273. 273Web Component Design · web-component-designGuides the agent to build reusable React, Vue, and Svelte UI components with sound APIs and styling.wshobson/agents
274. 274Anti-UI-Slop Design Guide · anti-ui-slopMakes an agent build product-specific web or iOS interfaces with a design contract, required states, and a finish check.github/awesome-copilot
275. 275Draw.io Diagram Generator · draw-io-diagram-generatorLets an agent create, edit and validate draw.io diagram files (.drawio) with correct XML structure.github/awesome-copilot
276. 276Draw.io Diagram Export · drawioLets an agent write editable draw.io diagrams and export them as PNG, SVG or PDF.github/awesome-copilot
277. 277Excalidraw Diagram Generator · excalidraw-diagram-generatorTurns plain-language descriptions into editable Excalidraw diagram files.github/awesome-copilot
278. 278FreeCAD Python Scripting · freecad-scriptsWrites FreeCAD Python scripts, macros and parametric objects for CAD modeling tasksgithub/awesome-copilot
279. 279Geofeed Tuner · geofeed-tunerChecks and improves IP geolocation feed CSV files for RFC 8805 compliance and real-world accuracygithub/awesome-copilot
280. 280Loft Design Prototyper · loftBuilds throwaway runnable prototypes so a design question can be settled by reacting to something realYeachan-Heo/oh-my-claudecode
281. 281Visual QA Verdict · visual-verdictScores a UI screenshot against reference images and returns a structured pass/revise/fail verdict.Yeachan-Heo/oh-my-claudecode
282. 282Abusing DPAPI for Credential Access · abusing-dpapi-for-credential-accessGuides an agent through recovering Windows DPAPI-protected passwords and cookies during authorized red-team tests.mukul975/Anthropic-Cybersecurity-Skills
283. 283LNK and Jump List Forensics · analyzing-lnk-file-and-jump-list-artifactsLets an agent analyze Windows shortcut and Jump List files to reconstruct file access and program use.mukul975/Anthropic-Cybersecurity-Skills
284. 284Coercing Authentication with Coercer · coercing-authentication-with-coercer-petitpotamForce a Windows machine account to authenticate to a listener, for authorized relay testingmukul975/Anthropic-Cybersecurity-Skills
285. 285API Security Testing · conducting-api-security-testingLets the agent run structured security tests against REST, GraphQL and gRPC APIs following the OWASP API Top 10.mukul975/Anthropic-Cybersecurity-Skills
286. 286Asset Spec Writer · asset-specWrites per-asset visual specs and AI image prompts from game design docs and the art bibleDonchitos/Claude-Code-Game-Studios
287. 287Review All Game Design Docs · review-all-gddsChecks all your game design documents together for contradictions and design flawsDonchitos/Claude-Code-Game-Studios
288. 288UX Design Spec Authoring · ux-designWrites section-by-section UX specs for game screens, flows, HUDs, and accessibility requirementsDonchitos/Claude-Code-Game-Studios
289. 289UX Spec Review · ux-reviewChecks UX design docs for completeness, accessibility, and readiness before implementation.Donchitos/Claude-Code-Game-Studios
290. 290Invisible Playwright Browser Identities · invisible-playwrightLets an agent drive a stealthy Firefox browser with persistent per-person identities for web tasksfeder-cr/invisible_dots
291. 291Frontend Slides · frontend-slidesBuilds animation-rich, single-file HTML presentations from scratch or from PowerPoint fileszarazhangrui/frontend-slides
292. 292OpenCLI Browser Control · opencli-browserLets an agent drive Chrome to read pages, fill forms, capture API traffic and manage tabsjackwener/OpenCLI
293. 293Epic Design (Cinematic Scroll Sites) · epic-designBuilds scroll-driven, cinematic 2.5D web pages from flat images using CSS and JavaScript, without WebGL.alirezarezvani/claude-skills
294. 294Dataviz Design Guide · datavizGuides agents to pick chart types and colour palettes, and checks palettes for readability.QwenLM/qwen-code
295. 295Huashu Design Studio · huashu-designMakes the agent work like a design studio: explores three directions before building HTML prototypes, decks, animations and reviewsalchaincyf/huashu-design
296. 296Gemini Web Image and Text Generator · baoyu-danger-gemini-webLets an agent generate text and images through the Gemini web interface, using your browser login cookies.JimLiu/baoyu-skills
297. 297SVG Diagram Generator · baoyu-diagramTurns descriptions of systems, flows, and sequences into dark-themed SVG diagram filesJimLiu/baoyu-skills
298. 298Infographic Generator · baoyu-infographicTurns content into publication-ready infographics by choosing a layout and visual style, then generating images.JimLiu/baoyu-skills
299. 299Slide Deck Generator · baoyu-slide-deckTurns content into a reading-style slide deck of generated images, planned outline first.JimLiu/baoyu-skills
300. 300Polish Feature Live · ce-polishRefine a working feature's UX through live browser feedback from you, then commit the fixes locallyEveryInc/compound-engineering-plugin
301. 301Throwaway Prototype Builder · ce-prototypeBuilds a disposable, runnable prototype to settle how a product should work or feel before committing to itEveryInc/compound-engineering-plugin
302. 302FLOW SEO Prompt Library · seo-flowGuides an agent through evidence-led SEO using 41 stage-specific prompts from the FLOW framework.AgriciDaniel/claude-seo
303. 303Image SEO Auditor · seo-imagesAudits web images for alt text, file size, format, lazy loading and layout shift, and can convert files to WebP/AVIF.AgriciDaniel/claude-seo
304. 304Furniture Fit Checker · furniture-fitChecks whether furniture footprints fit a measured Pascal room, with honest limits on what's provenpascalorg/editor
305. 305Pascal 3D Scene Builder · pascal-3dLets an agent build, edit, validate and hand off editable 3D building scenes in the Pascal editor via MCP tools.pascalorg/editor
306. 306Anatomy Isometric Figures · anatomyBuilds detailed isometric SVG explainer figures of physical machines, with optional WebGL effects and A4 PDF export.wheresryan22/anatomy
307. 307SnapDOM Screenshot Capture · snapdomTurn HTML elements into SVG, PNG, JPG or WebP images with styles and fonts kept intact2025Emma/vibe-coding-cn
308. 308UI/UX Pro Max Design Intelligence · ui-ux-pro-maxGives an agent searchable UI/UX rules, palettes, fonts and icon data for designing and reviewing interfacesawesome-dsh-plugin/awesome-dsh-plugin
309. 309Art Image and Diagram Generator · ArtCreates diagrams, infographics, comics, icons and wallpapers by routing requests to image-model intents.danielmiessler/LifeOS
310. 310Art Direction Quality Loop · ArtDirectionRates visual work against a rubric using vision judges, iterates to a bar, and gates delivery.danielmiessler/LifeOS
311. 311Excalidraw Diagram Sketcher · ExcalidrawSketch and edit hand-drawn diagrams on a live Excalidraw canvas and share them as links or files.danielmiessler/LifeOS
312. 312HyperFrames Animation Director · HyperFramesTurns explainers, launch films and content into directed HTML/GSAP animations rendered to MP4.danielmiessler/LifeOS
313. 313Web Design Skill · WebdesignLets an agent design and build web UI, prototypes, and mockups with rendered-browser checksdanielmiessler/LifeOS
314. 314FigureSpec Architecture Diagrams · figure-specTurns structured JSON into editable, deterministic SVG architecture and workflow diagrams.wanshuiyin/Auto-claude-code-research-in-sleep
315. 315Mermaid Diagram Generator · mermaid-diagramTurns plain-language requirements into Mermaid diagram files, checked by rendering them.wanshuiyin/Auto-claude-code-research-in-sleep
316. 316Pixel Art SVG Generator · pixel-artDraws pixel-art SVG illustrations and chat-style scenes for READMEs, docs and slides.wanshuiyin/Auto-claude-code-research-in-sleep
317. 317Mermaid Diagram Generator · mermaid-diagramTurns plain-language requirements into Mermaid diagram files, checked by rendering them.wanshuiyin/Auto-claude-code-research-in-sleep
318. 318CSS Layout Expert · css-expertGuides the agent to write modern, responsive CSS with flexbox, grid, animations and theming.RightNow-AI/openfang
319. 319Figma Expert · figma-expertGuides an agent to design Figma components, auto-layout, tokens and developer handoffRightNow-AI/openfang
320. 320GSAP Core Animation · gsap-coreWrite GSAP tweens, easing, staggers and responsive animations for web pagesgreensock/gsap-skills
321. 321GSAP for Vue and Svelte · gsap-frameworksWrite GSAP animations in Vue, Nuxt, and Svelte with correct mount and cleanup patternsgreensock/gsap-skills
322. 322GSAP for React Animation · gsap-reactWrite GSAP animations in React and Next.js with proper cleanup, scoping, and SSR safetygreensock/gsap-skills
323. 323GSAP ScrollTrigger scroll animations · gsap-scrolltriggerBuild scroll-linked animations, pinned sections and parallax with GSAP's ScrollTriggergreensock/gsap-skills
324. 324GSAP Timeline Sequencing · gsap-timelineTeaches an agent to write GSAP timelines that sequence, nest, and control animationsgreensock/gsap-skills
325. 325BLIP-2 Vision-Language Guide · blip-2-vision-languageCaptions images and answers questions about them using Salesforce's BLIP-2 modelOrchestra-Research/AI-Research-SKILLs
326. 326Stable Diffusion Image Generation · stable-diffusion-image-generationLets the agent generate, edit and inpaint images with Stable Diffusion models via Hugging Face Diffusers.Orchestra-Research/AI-Research-SKILLs
327. 327Product Design Workflows · product-designGuides an agent through UX audits, design ideation, cloning live UIs into code, and design QAXiaomiMiMo/MiMo-Code
328. 328Product Flow Audit · auditAudits a product flow by capturing screenshots of each step, then reports UX, design, and accessibility findings inline.XiaomiMiMo/MiMo-Code
329. 329Design QA Checker · design-qaCompares a built prototype's screenshot against its source design and lists prioritized visual fixes.XiaomiMiMo/MiMo-Code
330. 330Get Context Design Brief · get-contextClarifies the product and goal before UI design work, then plays the brief back before buildingXiaomiMiMo/MiMo-Code
331. 331Ideate Design Concepts · ideateGenerates three distinct image-based design directions from a product design brief before any build work.XiaomiMiMo/MiMo-Code
332. 332Image to Code · image-to-codeTurn a selected design image or mockup into a faithful, responsive frontend and verify it visuallyXiaomiMiMo/MiMo-Code
333. 333Product Design Router · indexRoutes design requests to the right Product Design sub-skill (research, audit, ideate, clone, prototype)XiaomiMiMo/MiMo-Code
334. 334Share Prototype · shareDeploys a runnable design prototype to a hosting tool and returns a shareable link.XiaomiMiMo/MiMo-Code
335. 335URL to Code · url-to-codeRecreate an authorized live website as a runnable, frontend-only local copy, verified against the original.XiaomiMiMo/MiMo-Code
336. 336Product Design User Context · user-contextSaves and recalls your product and design references so Product Design work starts from the right sources.XiaomiMiMo/MiMo-Code
337. 337Web Design Engineer · web-design-engineerBuilds polished, visually refined HTML/CSS/JS/React pages, dashboards, decks and prototypes with design critique and browser QA.ConardLi/garden-skills
338. 338Figma Designer · figma-designerDesign in Figma with real variables, text styles, auto layout and a fixed token systemelayadesign/ai-design-skills
339. 339Landing Page Design · landing-page-designBuilds high-converting landing pages with strategy, copy, SEO and strict visual ruleselayadesign/ai-design-skills
340. 340Fireworks Tech Graph · fireworks-tech-graphMakes the agent draw precise SVG technical diagrams and export them as PNG, offline HTML or GIFyizhiyanhua-ai/fireworks-tech-graph
341. 341GEO Technical SEO Audit · geo-technicalAudits a website's technical health for search and AI-crawler visibility, scored by category.zubair-trabzada/geo-seo-claude
342. 342Visual Explainer · visual-explainerTurns explanations, diffs, plans and data into self-contained HTML visual pages you can open in a browser.nicobailon/visual-explainer
343. 343Scroll-Driven 3D World Landing Page · scroll-worldBuilds a scroll-scrubbed fly-through landing page from AI-generated scenes and camera clipsoso95/scroll-world
344. 344Draw.io Diagram Studio · drawio-skillCreates and edits editable draw.io diagrams from descriptions, code, or infrastructure files.Agents365-ai/drawio-skill
345. 345Better Accessibility · better-accessibilityReviews and fixes keyboard, focus, ARIA, forms and motion issues against WCAG 2.2 criteria.jakubkrehel/skills
346. 346Better Colors · better-colorsBuilds and audits color systems: palettes, semantic tokens, format conversion and measured contrast.jakubkrehel/skills
347. 347Better Interface Review · better-interfaceRuns a cross-discipline review of a screen or flow and returns one ranked report of accessibility, layout, writing, type, color and polish issuesjakubkrehel/skills
348. 348Better Layout · better-layoutMakes layouts hold up when resized, translated or mirrored for RTL languagesjakubkrehel/skills
349. 349Better Typography · better-typographyMakes an AI agent review and fix how text renders: type scale, spacing, wrapping, fonts and punctuation.jakubkrehel/skills
350. 350Better UI Polish · better-uiPolish surfaces, icons and motion in UI code with exact radius, shadow, icon and animation values.jakubkrehel/skills
351. 351Better Writing · better-writingWrites and reviews interface copy so labels, errors and empty states match your product's voice and guide usersjakubkrehel/skills
352. 352Break Component Stress Test · breakRenders one UI component under every realistic worst-case scenario on a temporary page and reports what visibly breaks.jakubkrehel/skills
353. 353Build UI from Figma · build-designBuilds UI matching a Figma file or design image using the project's existing tokens and components.jakubkrehel/skills
354. 354Explain Interface · explain-interfaceExplains how a website, visual effect or animation was built, from a live URL or screenshotjakubkrehel/skills
355. 355Interface Change Review · interface-reviewReviews a branch, PR or uncommitted change for interface regressions and omissionsjakubkrehel/skills
356. 356State Machine Workbench · state-machineRenders a component in every state on a throwaway page with mock data and a state switcherjakubkrehel/skills
357. 357Variant Builder · variantBuilds three distinct UI variants of a component in a picker so you can compare and choose one.jakubkrehel/skills
358. 358Business Logic Attack Testing · offensive-business-logicGuides an agent through testing web, mobile and API apps for business logic flaws like price, coupon and refund abuseSnailSploit/Claude-Red
359. 359Commercial Contract Review Router · reviewRoutes an inbound vendor agreement, NDA, or SaaS contract to the right review skill and returns one memoanthropics/claude-for-legal
360. 360AI Tool Handoff for Legal Review · ai-tool-handoffRoutes bulk contract clause extraction to Luminance or Kira, then applies QA and judgment to the results.anthropics/claude-for-legal
361. 361Diligence Issue Extraction · diligence-issue-extractionScans data-room documents and extracts deal issues into house-format findings memos.anthropics/claude-for-legal
362. 362Trademark Clearance Triage · clearanceRuns a first-pass trademark knockout and similar-marks flag list, never a clearance opinionanthropics/claude-for-legal
363. 363Is This a Problem · is-this-a-problemGives a fast Fine / Needs a look / Hold answer to quick legal questions from Slackanthropics/claude-for-legal
364. 364OpenClaw Brand Identity · openclaw-brandApply OpenClaw's visual identity to logos, type, imagery, voice and launch materialsopenclaw/clawhub
365. 365OpenClaw Carapace UI Design · openclaw-carapaceBuilds OpenClaw app interfaces using shared design tokens, themes and existing UI primitives.openclaw/clawhub
366. 366OpenClaw Design Router · openclaw-designRoutes design work to the right OpenClaw brand, product UI, web page, or audit guidanceopenclaw/clawhub
367. 367OpenClaw Design Audit · openclaw-design-auditAudits OpenClaw frontend code and rendered UIs for design-system drift, accessibility, and copy issues.openclaw/clawhub
368. 368OpenClaw Design System (Compatibility Alias) · openclaw-design-systemApplies OpenClaw's Carapace design tokens, themes and UI primitives to front-end workopenclaw/clawhub
369. 369OpenClaw Marketing Pages · openclaw-marketing-pagesBuilds and polishes OpenClaw public web pages using the project's own layout and design patterns.openclaw/clawhub
370. 370Magazine Article Layout · article-magazineFormats long-form writing into a polished, Substack-style magazine page in HTML.nexu-io/html-anything
371. 371Blog Post Layout · blog-postTurns text into a magazine-style long-form blog post with editorial typography.nexu-io/html-anything
372. 372Admin Dashboard Template · dashboardGenerates a single-page admin analytics dashboard with sidebar, KPI cards and chartsnexu-io/html-anything
373. 373Dating Community Dashboard · dating-webGenerates a consumer-style dating/community matching dashboard in HTMLnexu-io/html-anything
374. 374Blueprint Architecture Deck · deck-blueprintBuilds engineering-style slide decks with a blueprint grid, cream background, and pipeline diagramsnexu-io/html-anything
375. 375Course Module Deck · deck-course-moduleBuilds a warm-paper teaching slide deck with pinned learning objectives and a quiz slide.nexu-io/html-anything
376. 376Dir-Key Nav Minimal Deck · deck-dir-key-navBuilds a minimal, single-color-background slide deck with arrow-key navigation hints.nexu-io/html-anything
377. 377Guizang Editorial E-Ink Deck · deck-guizang-editorialBuilds magazine-style, e-ink-look HTML slide decks with five fixed color palettes and ten layout types.nexu-io/html-anything
378. 378Cyber Terminal Deck · deck-hermes-cyberBuilds a black, terminal-style slide deck for CLI and developer-tool reviewsnexu-io/html-anything
379. 379Magazine Web Deck · deck-magazine-webBuilds a magazine-style, swipeable 16:9 HTML slide deck with serif type and animated backgroundnexu-io/html-anything
380. 380Obsidian Claude Gradient Deck · deck-obsidian-claudeBuilds a dark, GitHub-style developer slide deck with gradient titles and code blocksnexu-io/html-anything
381. 3811920 Canvas Slide Deck · deck-open-slide-canvasBuilds a fixed 1920×1080 HTML slide deck with free layouts and a strict colour palettenexu-io/html-anything
382. 382Investor Pitch Deck · deck-pitchGenerates a 10-slide investor fundraising deck in a clean white and blue-purple stylenexu-io/html-anything
383. 383Replit-Style Slide Deck · deck-replitBuilds a single-file, swipeable slide deck in one of eight Replit-inspired visual themes.nexu-io/html-anything
384. 384Safety Alert Deck · deck-safety-alertBuilds red-and-amber safety-alert slide decks for incident reviews and policy talksnexu-io/html-anything
385. 385Simple Deck Slides · deck-simpleTurns your content into a clean, swipeable 16:9 HTML slide decknexu-io/html-anything
386. 386Tech Sharing Deck · deck-tech-sharingBuilds a dark, code-friendly slide deck for engineering talks with agenda and Q&Anexu-io/html-anything
387. 387Pastel Slow-life Deck · deck-xhs-pastelBuilds soft, pastel lifestyle slide decks with rounded cards and italic serif numberingnexu-io/html-anything
388. 388White Editorial Deck · deck-xhs-whiteMakes the agent build white, magazine-style slide decks and Xiaohongshu image posts with rainbow accents.nexu-io/html-anything
389. 389Digital E-Guide · digital-eguideTurns a topic into a two-page spread e-guide with cover, lesson, quote and stepsnexu-io/html-anything
390. 390Docs Page Template · docs-pageLays out a three-column technical documentation page with navigation, article body, and table of contents.nexu-io/html-anything
391. 391FlowAI Team Dashboard · flowai-team-dashboardGenerates a three-tab team admin dashboard page with charts and CSV exportnexu-io/html-anything
392. 392Gamified App Mockup · gamified-appGenerates three dark-themed phone-screen mockups for an RPG-style habit-tracking app.nexu-io/html-anything
393. 393Kanban Board · kanban-boardGenerates a single-page Trello-style kanban board in HTML with four status columns, cards and swimlanes.nexu-io/html-anything
394. 394Live Team Dashboard · live-dashboardBuilds a Notion-style team dashboard with KPIs, 7-day trends, an activity feed and a task tablenexu-io/html-anything
395. 395Magazine Poster · magazine-posterTurns text into a newspaper-style editorial poster with serif headlines and numbered sectionsnexu-io/html-anything
396. 396iPhone App Screen Mockup · mobile-appGenerates a single iPhone 15 Pro app screen mockup in HTML with status bar, header, content and tab barnexu-io/html-anything
397. 397Mobile Onboarding Screens · mobile-onboardingLays out three side-by-side phone mockups for an app's splash, value-prop and sign-in screensnexu-io/html-anything
398. 398Device 3D Showcase · mockup-device-3dBuilds a 3D iPhone/MacBook product mockup with your UI shown on the screens, in one HTML file.nexu-io/html-anything
399. 399Motion Frames · motion-framesGenerates a looping, animated CSS hero graphic for video intros or landing pages.nexu-io/html-anything
400. 400Marketing Poster Designer · poster-heroTurns content into a bold 1080×1920 vertical poster for social sharingnexu-io/html-anything
401. 401Keynote-style Slides · ppt-keynoteBuilds minimalist, Apple Keynote-style HTML slide decks you present with arrow keys.nexu-io/html-anything
402. 402Pricing Page Template · pricing-pageGenerates a three-tier SaaS pricing page with a feature comparison table and FAQnexu-io/html-anything
403. 403Web Prototype · prototype-webBuilds a clickable, responsive SaaS-style landing page prototype in a single HTML file.nexu-io/html-anything
404. 404SaaS Landing Page · saas-landingTurns your product content into a single-page SaaS marketing landing page with standard sectionsnexu-io/html-anything
405. 405Social Media Dashboard · social-media-dashboardBuilds a creator-style social media analytics dashboard page with platform tabs, KPI cards and growth charts.nexu-io/html-anything
406. 406Spotify Now-Playing Card · social-spotify-cardDesigns a Spotify-style now-playing card as a single HTML file for video overlays or profilesnexu-io/html-anything
407. 407X Post Card Designer · social-x-post-cardTurns a tweet or quote into a realistic X (Twitter) post card image or HTML layoutnexu-io/html-anything
408. 408Pixel Sprite Animation Explainer · sprite-animationCreates a looping, pure-CSS 8-bit pixel-art explainer poster that can be recorded as videonexu-io/html-anything
409. 409Team OKRs Tracker · team-okrsTurns raw OKR content into a one-page quarterly objectives dashboard in HTMLnexu-io/html-anything
410. 410VFX Text Cursor · vfx-text-cursorBuilds an animated typing-reveal title card with a glowing cursor and light streaksnexu-io/html-anything
411. 411Waitlist Page · waitlist-pageCreate a minimal pre-launch waitlist landing page with email capture and decorative visuals.nexu-io/html-anything
412. 412Brutalist Web Prototype · web-proto-brutalistMakes the agent draft web page prototypes in a bold Swiss industrial-print stylenexu-io/html-anything
413. 413Editorial Web Prototype · web-proto-editorialGenerates magazine-style, minimalist web page prototypes with serif headings and warm monochrome styling.nexu-io/html-anything
414. 414Apple-Style Soft Prototype · web-proto-softGenerates soft, Apple-like prototype layouts with silver/cream canvases, squircle cards and spring hover motion.nexu-io/html-anything
415. 415Wireframe Sketch · wireframe-sketchTurns a request into a hand-drawn style, lo-fi wireframe HTML page with sticky notes and tabs.nexu-io/html-anything
416. 416React Native from Stitch Designs · stitch::react-nativeTurns Stitch HTML designs into React Native StyleSheet components and keeps them in syncgoogle-labs-code/stitch-skills
417. 417Stitch to React Dashboard · react-vite-dashboardTurns Stitch design screens into React + Vite dashboards with data fetching and accessible stylinggoogle-labs-code/stitch-skills
418. 418Stitch to Remotion Walkthrough Videos · remotionTurn Stitch app-design screens into a narrated-style walkthrough video with Remotiongoogle-labs-code/stitch-skills
419. 419shadcn/ui Component Integration · shadcn-uiGuides an agent to discover, install, and customize shadcn/ui React components in your projectgoogle-labs-code/stitch-skills
420. 420Code to Stitch Design · stitch::code-to-designTurn an existing React, Vue, Angular or Vite web app into an editable Stitch design project.google-labs-code/stitch-skills
421. 421Extract Design System · stitch::extract-design-mdTurns frontend source code into a DESIGN.md describing its colors, type, spacing and components.google-labs-code/stitch-skills
422. 422Extract Static HTML · stitch::extract-static-htmlSave a running web app page as one self-contained HTML file with styles and images inlinedgoogle-labs-code/stitch-skills
423. 423Generate Stitch Design Screens · stitch::generate-designLets an agent create, edit and download UI screens from text or images using Google Stitch.google-labs-code/stitch-skills
424. 424Manage Stitch Design Systems · stitch::manage-design-systemCreate, update, and apply reusable design systems to Google Stitch projects via MCP tools.google-labs-code/stitch-skills
425. 425Upload to Stitch · stitch::upload-to-stitchUpload local images, HTML, or markdown files into a Stitch design project via a scriptgoogle-labs-code/stitch-skills
426. 426Stitch DESIGN.md Generator · design-mdTurns a Stitch project's screens into a DESIGN.md design-system file for generating matching screensgoogle-labs-code/stitch-skills
427. 427Enhance Prompt for Stitch · enhance-promptTurns vague UI ideas into detailed, structured prompts for Google Stitch design generationgoogle-labs-code/stitch-skills
428. 428Stitch SITE.md Planner · site-mdTurns a project brief into a SITE.md constitution that keeps coding agents aligned across build iterationsgoogle-labs-code/stitch-skills
429. 429Stitch Build Loop · stitch-loopLets an agent build a multi-page website with Stitch, passing the next task forward automaticallygoogle-labs-code/stitch-skills
430. 430Taste Design for Stitch · taste-designGenerates DESIGN.md style guides that steer Google Stitch toward premium, non-generic UI.google-labs-code/stitch-skills
431. 431UI Mockup Designer · ui-mockupCreates ASCII wireframes, standalone HTML mockups, or live prototypes for product requirements.mvschwarz/openrig
432. 432Frontend Design Skill · frontend-designBuilds distinctive, production-grade web UIs with deliberate aesthetic choices instead of generic AI stylingmvschwarz/openrig
433. 433Anti Slop UI Rules · antislopMakes the agent build websites and app interfaces that look designed by a person, not generic AI output.miqdadbadjuber/anti-slop
434. 434Anti-Slop Human Accessibility Skill · antislop-humanMakes the agent check contrast, keyboard use, focus and states so UIs work for more peoplemiqdadbadjuber/anti-slop
435. 435Mobile Layout Rules · antislop-layoutmobileMakes the agent build layouts that reflow properly from phone to desktop, not just shrink.miqdadbadjuber/anti-slop
436. 436Anti-Slop UI Rules · antislop-uiMakes the agent avoid generic AI-looking UI and build interfaces with intentional color, layout and motion.miqdadbadjuber/anti-slop
437. 437ljg-card content caster · ljg-cardTurns text into a styled PNG card, long reading image, full-text layout, comic or whiteboardlijigang/ljg-skills
438. 438Chat Widgets for Inline Display · chat-widgetsLets the agent show images, cards, bar/line charts and input forms directly inside chat repliesxerrors/Yuxi
439. 439Architecture Diagram Generator · architecture-diagramTurns a system description into a polished dark-themed architecture diagram as a single HTML file.Cocoon-AI/architecture-diagram-generator
440. 440UI Design and Visual Polish · uiBuilds or restyles UI with a clear design direction, checked against real screenshots and viewports.tw93/Waza
441. 441Minimal Zine Poster Generator · gc-minimal-zine-poster-v0-3Makes sparse, paper-textured minimal zine poster images and matching image prompts from a theme or photo.LiamGvchi/gc-minimal-zine-poster
442. 442OpenAI Image Generator · openai-image-genGenerates batches of AI images from random or chosen prompts via OpenAI and builds a gallery page.steipete/agent-scripts
443. 4433D Cloth Material · 3d-cloth-materialMakes Three.js cloth look like real woven fabric: weave, sheen, folds, hems and light through thin fabric.MengTo/Skills
444. 4443D Falling Leaves · 3d-falling-leavesBuild realistic 3D falling leaves that tumble, drift with wind, and recycle around the camera.MengTo/Skills
445. 4453D Four Seasons · 3d-four-seasonsLets the agent add coordinated spring, summer, fall and winter states to a 3D sceneMengTo/Skills
446. 4463D High-Poly Models · 3d-high-poly-modelsGuides an agent to build detailed 3D models and prepare efficient runtime versions for web or real-time use.MengTo/Skills
447. 4473D High-Resolution Textures · 3d-high-resolution-texturesGuides an agent to choose, map, filter and stream sharp PBR textures for 3D scenes efficiently.MengTo/Skills
448. 4483D Metal Material · 3d-metal-materialMakes Three.js metal look like real steel, brass, gold or copper with convincing reflectionsMengTo/Skills
449. 4493D Orbit and Inspect · 3d-orbit-inspect-demoMake a 3D object lean on hover and lift into a full inspect view on clickMengTo/Skills
450. 4503D Paper Material · 3d-paper-materialBuilds a Three.js paper sheet with fibres, torn edges, thickness and back-lit translucencyMengTo/Skills
451. 4513D Retina Resolution · 3d-retina-resolutionMakes WebGL/Three.js 3D canvases render sharply on Retina and HiDPI screens, with correct sizing and pointer math.MengTo/Skills
452. 4523D Sky Background · 3d-sky-backgroundBuilds a camera-correct 3D sky with horizon haze, matched sunlight, and day-to-night transitions.MengTo/Skills
453. 4533D Sky Rays · 3d-sky-raysAdds sun shafts and light rays through gaps in 3D scenes (Three.js and similar)MengTo/Skills
454. 4543D Ultra-Realistic Water · 3d-ultra-realistic-waterLets an agent build a realistic open-ocean water surface in Three.js scenesMengTo/Skills
455. 4553D Underwater God Rays · 3d-underwater-god-raysAdds volumetric underwater light shafts, caustics and dappled fish lighting to Three.js scenesMengTo/Skills
456. 4563D Virtual Tour Builder · 3d-virtual-tourGuides an agent to build guided, room-based 3D virtual tours with smooth camera paths and inspection modes.MengTo/Skills
457. 4573D Wood Lighting Scorecard · 3d-wood-lighting-scorecardLight carved wood in three.js and score the render out of 10 against a fixed rubric, iterating until it passes.MengTo/Skills
458. 4583D Wood Material · 3d-wood-materialGives Three.js 3D models realistic procedural wood grain, pores, and finishes without image texturesMengTo/Skills
459. 459Reference Originality Audit · audit-reference-originalityAudit a website against reference sources for originality and plagiarism risk, with evidence-backed fixesMengTo/Skills
460. 460Build Daily Inspiration Sites · build-daily-inspiration-sitesTurns a daily UI inspiration capture into five original, privately deployed landing pages.MengTo/Skills
461. 461Daily UI Inspiration Capture · daily-ui-inspiration-captureBuilds a dated bundle of 5 UI references with screenshots, motion frames and AI-builder promptsMengTo/Skills
462. 462Reference-Inspired Brand Worlds · generate-reference-inspired-brand-worldsGenerate original brand campaign images that echo a visual reference without copying itMengTo/Skills
463. 463HTML To Interaction Prompts · html-to-interaction-promptsTurns a web page into a screenshot-backed article of reusable interaction promptsMengTo/Skills
464. 464Optimize Web Animations · optimize-web-animationsProfile a web page and pause offscreen animations, fix leaks and CPU drainMengTo/Skills
465. 465Stitched Full-Page Capture · stitched-full-page-captureTake reliable full-page screenshots of lazy-loaded, animated web pages by stitching scrolled viewport shots.MengTo/Skills
466. 466Video to Superprompt · video-to-superpromptTurns a reference video into a detailed, paste-ready prompt for rebuilding its page or motionMengTo/Skills
467. 467Fire and Smoke VFX · fire-smoke-skill-vfxMakes an agent build realistic, stylised fire, smoke and ember effects in Three.js for game skillsMengTo/Skills
468. 468Ice and Frost VFX · ice-frost-skill-vfxGives an agent a grown-frost, faceted-ice and blizzard effect language for Three.js skill visualsMengTo/Skills
469. 469Lightning Energy Skill VFX · lightning-energy-skill-vfxGives the agent a consistent recipe for stylised lightning, energy orbs and impact effects in Three.jsMengTo/Skills
470. 470Water and Crystal VFX · water-crystal-skill-vfxMakes an agent write Three.js visual effects for clear water orbs, streams, crystals and shatteringMengTo/Skills
471. 471Bold Pop Illustration · illustration-bold-popDraws chunky navy-outlined pop-geometric SVG spot illustrations for cards and pages.MengTo/Skills
472. 472Flat Vector Illustrations · illustration-flatDraws slim flat-vector people with one hero prop as 480x360 SVG cards for product screensMengTo/Skills
473. 473Flat Illustration with Black · illustration-flat-with-blackDraws flat vector people illustrations with solid black accents, for empty states, headers and cards.MengTo/Skills
474. 474Framed Panel Illustration · illustration-framed-panelDraws pastel framed-panel cartoon scenes of people at work as SVG cardsMengTo/Skills
475. 475Grainy Gouache Animal Illustrations · illustration-grainy-gouacheDraws cosy grainy-gouache animal scenes as hand-authored SVG cards for empty states and headersMengTo/Skills
476. 476Halftone Line Illustrations · illustration-halftone-lineDraws black-and-white halftone line-art SVG illustrations in a consistent editorial styleMengTo/Skills
477. 477Ink Sketch Illustrations · illustration-ink-sketchDraws hand-inked, googly-eyed cartoon critters as SVG cards for playful product momentsMengTo/Skills
478. 478Isometric Mono Illustration · illustration-isometric-monoDraws green-ramp isometric diorama illustrations of dev and design workspaces as SVG.MengTo/Skills
479. 479Line Interior Illustrations · illustration-line-interiorDraws thin-outline indigo SVG office and workspace spot scenes in a calm editorial styleMengTo/Skills
480. 480One-Line Illustration Style · illustration-one-lineMakes the agent draw playful one-continuous-line SVG spot illustrations in a riso-style paletteMengTo/Skills
481. 481Outlined Cartoon Illustrations · illustration-outlined-cartoonDraws hand-inked, outlined cartoon SVG spot illustrations for empty states, errors and success pages.MengTo/Skills
482. 482Teal Spot Illustrations · illustration-teal-spotMakes the agent draw single-object teal-on-white SVG spot illustrations in a fixed styleMengTo/Skills
483. 483Two-Colour Brush Illustrations · illustration-two-colour-brushDraws hand-made marker-style SVG illustrations in black and mint on cream paperMengTo/Skills
484. 484Vintage Emblem Illustration · illustration-vintage-emblemDraws vintage screen-print style SVG badge emblems with a sun disc, splash band and wordmarkMengTo/Skills
485. 485Aura Asset Images · aura-asset-imagesFind stock-style images from Aura's asset library and return direct URLs for mockups.MengTo/Skills
486. 486Unsplash Asset Images · unsplash-asset-imagesPicks Unsplash photos for avatars, headshots and backgrounds, with sizes and ratios.MengTo/Skills
487. 487Audit AI Design Slop · audit-ai-design-slopAudit a UI or design for AI-design clichés and established defects, with removal-first fixesMengTo/Skills
488. 488Design-First UI Prompting · design-first-ui-promptingWrite structured, spec-driven prompts that get more consistent UI designs from AI image or UI generatorsMengTo/Skills
489. 489No Design Slop · no-ai-design-slopMakes the agent catch generic AI design defaults and UI defects while building or reviewing interfacesMengTo/Skills
490. 490Mouse-Driven 3D Orbit · add-mouse-driven-orbitAdds subtle, cursor-responsive camera and object parallax to a Three.js hero scene.MengTo/Skills
491. 491Shader Cursor Trail · add-shader-cursor-trailAdds a WebGPU halftone cursor trail effect to a web hero section, with fallbacksMengTo/Skills
492. 492Minimal Agency Grid Design · agency-grid-layout-minimalGuides the agent to build editorial, grid-based minimal agency-style web pages with oversized type.MengTo/Skills
493. 493Ambient Section Particles · ambient-section-particlesAdds a subtle, bounded particle animation (petals, snow, sparks) behind one page sectionMengTo/Skills
494. 494Scroll Reveal Animations · animation-on-scrollAdds fade-and-slide reveal animations to page elements as they scroll into viewMengTo/Skills
495. 495Animation Systems · animation-systemsGuides agents to design polished, accessible web motion in a Stripe/Linear/Apple/Vercel style.MengTo/Skills
496. 496Atmosphere Background · atmosphere-backgroundAdds a dark, slowly drifting light-fold background with a glowing corner for web designsMengTo/Skills
497. 497WebGL Background Grid · background-grid-webglBuilds a subtle 3D perspective grid background with fading lines, particles and gentle mouse parallax.MengTo/Skills
498. 498Beam Glow States · beam-glow-statesAdd restrained animated edge glows to React cards, buttons and inputs to signal loading or selection.MengTo/Skills
499. 499Beautiful Shadows · beautiful-shadowsApply refined, layered neutral box-shadows to Tailwind CSS interfacesMengTo/Skills
500. 500Blue Cloudy Clean Modern · blue-cloudy-clean-modernGives the agent a luminous blue-sky, airy, premium web design system to apply to pagesMengTo/Skills
501. 501Blue Laser Clean Glass Layout · blue-laser-clean-glass-layoutDesign dark, glassy web layouts with a thin blue laser backdrop and polished dashboard shellsMengTo/Skills
502. 502Book Serif Index Design · book-serif-indexGives the agent a design direction for archival, book-reader style interfaces with serif type and index navigation.MengTo/Skills
503. 503Bright Green Tech WebGL Design · bright-green-tech-system-webglGives the agent a sharp, technical dark-and-neon-green design style with a live WebGL visual panel.MengTo/Skills
504. 504Build Awwwards-Style Websites · build-awwwards-quality-sitesDesign and build distinctive, motion-rich marketing and portfolio sites with GSAP animation and accessibility safeguardsMengTo/Skills
505. 505Interactive Particle Trail Builder · build-interactive-particle-trailGuides an agent to build cursor/touch particle trails with distance-based spacing and a recycled GPU pool.MengTo/Skills
506. 506Build Three.js Scroll Worlds · build-threejs-scroll-worldsLets an agent build scroll-controlled, real-time 3D Three.js websites with one continuous worldMengTo/Skills
507. 507Wireframe Scan Reveal · build-wireframe-scan-revealGives an agent a recipe for animating 3D models in with a wireframe scan that leads the solid surfaceMengTo/Skills
508. 508Cinematic GSAP Motion System · cinematic-gsap-lenis-motion-systemAdds premium scroll, text, parallax and cursor animations to websites using GSAP and Lenis.MengTo/Skills
509. 509Cinematic Scroll Storytelling · cinematic-scroll-storytellingBuild premium, scroll-driven landing pages with smooth scrolling and layered revealsMengTo/Skills
510. 510Clean Minimal Beige Design · clean-minimal-beige-light-modeGuides the agent to build calm, warm-beige, low-contrast light-mode web interfacesMengTo/Skills
511. 511cobe.js Globe Builder · cobejsAdd a lightweight, interactive WebGL globe with markers to a web pageMengTo/Skills
512. 512Company Logos · company-logosRenders brand logos as consistent 64x64 Iconify Simple Icons instead of plain text names.MengTo/Skills
513. 513Container Lines Layout Guides · container-linesAdds thin vertical container guide lines and corner squares to give web layouts a measured, structured look.MengTo/Skills
514. 514Corner Diagonals · corner-diagonalsGives UI buttons, cards and panels sharp diagonal-cut corners and chamfered edges.MengTo/Skills
515. 515Corner Laser Effects · corner-lasersAdds thin, glowing corner-anchored laser beams with bloom and haze to web designsMengTo/Skills
516. 516CSS Alpha Masking · css-alpha-maskingAdds soft CSS gradient fades to element edges using mask-image, with Safari support.MengTo/Skills
517. 517CSS Border Gradient · css-border-gradientGives the agent a recipe for subtle gradient borders on cards, buttons, and modals.MengTo/Skills
518. 518Dark Blue Contrasting Clean Design · dark-blue-contrasting-cleanGuides the agent to build dark-navy, high-contrast web layouts with cobalt feature blocks and thin framing.MengTo/Skills
519. 519Dark Glass Clean Layout · dark-glass-clean-layoutBuilds dark frosted-glass web layouts with clean multi-column structure and restrained depthMengTo/Skills
520. 520Dither Background · dither-backgroundAdds a dark, animated monochrome pixel-dither background behind web page contentMengTo/Skills
521. 521Dither Laser Dark Mode · dither-laser-dark-modeGives the agent a dark, premium UI style with subtle dither texture and a thin accent-colored laser glow.MengTo/Skills
522. 522Documentary Brutalist Agency Site · documentary-brutalist-agencyBuilds bold, black-and-white agency or portfolio websites with accessible menus and FAQsMengTo/Skills
523. 523Editorial Portfolio Website Builder · editorial-portfolio-chaptersGuides an agent to design creative portfolio sites where project work leads the storyMengTo/Skills
524. 524Editorial Service Booking · editorial-service-bookingDesign elegant, trustworthy booking websites for salons, spas, clinics and similar servicesMengTo/Skills
525. 525Editorial Tech Design Style · editorial-techGuides agents to build magazine-style layouts with precise, technical UI detailingMengTo/Skills
526. 526Falling Leaves Animation · falling-leavesMakes an agent build realistic falling leaf or petal animations instead of generic confetti-like particles.MengTo/Skills
527. 527Fire-Paper Loader · fire-paper-loaderBuilds a burning-paper ring loading screen whose flame keeps animating while the page is busy.MengTo/Skills
528. 528Framed Grid Layout · framed-grid-layoutBuilds minimal web layouts with thin frames, corner brackets and a strict grid.MengTo/Skills
529. 529Framed Tech Dark Design · framed-tech-dark-border-gradientStyles web interfaces as dark, monochrome, engineered layouts with gradient borders and mono labelsMengTo/Skills
530. 530Funky Purple Container Tech · funky-purple-container-techGives the agent a dark, purple-accented, container-based web design style for futuristic UI pagesMengTo/Skills
531. 531Glass Dark Mode Clock · glass-dark-mode-clockStyles web pages as a dark, frosted-glass instrument panel with a clock-like dial centerpieceMengTo/Skills
532. 532Glass Dark UI · glass-dark-uiGuides the agent to build dark frosted-glass interfaces with gradient borders and readable contrastMengTo/Skills
533. 533Globe.GL 3D Globe Visualization · globe-glBuild interactive 3D globe data visualizations with globe.gl in plain HTML or ReactMengTo/Skills
534. 534Globe Particles · globe-particlesAdds a glowing 3D particle globe with an orbital ring to web designs using WebGL/Three.jsMengTo/Skills
535. 535Gooey Blob System · gooey-blob-systemMakes the agent build merging, fluid blob animations using SVG filters for web pagesMengTo/Skills
536. 536GSAP Web Animation · gsapTeaches the agent to build and debug GSAP animations: timelines, ScrollTrigger, staggers and easing.MengTo/Skills
537. 537GSAP Scroll Storytelling · gsap-scrolltrigger-storytellingBuilds cinematic, scroll-driven product pages with pinned sections and animated reveals using GSAP ScrollTrigger.MengTo/Skills
538. 538High-Contrast Skeuomorphic Design · high-contrast-skeuomorphic-cleanGuides the agent to build dark, tactile, high-contrast clean UI design systemsMengTo/Skills
539. 539Horizontal Scroll Scenes · horizontal-scroll-scenesBuild chapter-by-chapter pages that move sideways as you scroll down, with reliable reverse, skip and refreshMengTo/Skills
540. 540HTML Demo Windows · html-demoBuilds live, animated HTML app windows that replay a product walkthrough instead of a screen recordingMengTo/Skills
541. 541Image-First Grid Layout · image-first-grid-layoutDesign full-screen, photo-led web pages with structured grid overlays and anchored text.MengTo/Skills
542. 542Landing Page Designer · landing-pagePlans and writes high-converting single-offer landing pages with structure, copy, and SEO guidance.MengTo/Skills
543. 543Light Paper Technical Design · light-mode-paper-technicalBuilds warm, framed light-mode interfaces with paper textures and precise technical detailing.MengTo/Skills
544. 544Liquid Metal Border · liquid-metal-borderAdds animated metallic WebGL borders to React buttons, cards and selected controlsMengTo/Skills
545. 545Marquee Loop · marquee-loopBuild seamless, infinitely scrolling logo or text marquees for web designsMengTo/Skills
546. 546Masked Word Reveal · masked-revealMakes text reveal word by word on scroll using GSAP ScrollTrigger and an overflow mask.MengTo/Skills
547. 547Matter.js Physics Skill · matterjsTeaches the agent to build 2D physics scenes with Matter.js in the browserMengTo/Skills
548. 548Dark Blue Mesh Gradient Design · mesh-gradient-dark-blue-cleanGives the agent a dark navy mesh-gradient design system for futuristic, minimal web pages.MengTo/Skills
549. 549Nested Container Clean Agency · nested-container-clean-agencyGuides the agent to build clean, premium agency web layouts using nested containers and restrained accents.MengTo/Skills
550. 550Nested Container Frames · nested-container-framesBuild layered, inset page layouts with visible outer frames and boxed inner sectionsMengTo/Skills
551. 551Number Details · number-detailsAdds subtle 01, 02, 03 decorative number markers to web section layoutsMengTo/Skills
552. 552Operational Enterprise AI Pages · operational-enterprise-aiDesign enterprise AI product pages that explain permissions, approvals, audit, exceptions and rollbackMengTo/Skills
553. 553Orange Clean Paper SaaS · orange-clean-paper-saasStyles web interfaces in a warm paper-toned SaaS look with orange accents and soft product visualsMengTo/Skills
554. 554Paper Cinder Transition · paper-cinder-transitionAdds a burning-paper scene change where fire eats the old page and reveals the nextMengTo/Skills
555. 555Pointer Trail Emitter · pointer-trail-emitterBuild cursor trails whose spacing stays even at any hand speed.MengTo/Skills
556. 556Pricing Page Designer · pricing-pagePlans, copy, layout and FAQs for a high-converting SaaS pricing pageMengTo/Skills
557. 557Product Proof SaaS Landing Pages · product-proof-saasBuild SaaS and AI product landing pages that lead with a real, labeled product workflow demoMengTo/Skills
558. 558Progressive Blur · progressive-blurAdds a layered CSS progressive blur overlay fading from the top or bottom of a pageMengTo/Skills
559. 559Reveal Hover Effect · reveal-hover-effectBuild cursor-following spotlight reveals that show a second aligned image under the pointerMengTo/Skills
560. 560Scroll Progress Timeline · scroll-progress-timelineBuilds accessible scroll-driven timeline pages that fill a progress line as users read.MengTo/Skills
561. 561Scroll-Scrubbed Visual Sequence · scroll-scrubbed-visual-sequenceBuild scroll-driven visual animations that play forward and backward with native scrollingMengTo/Skills
562. 562Scroll-Scrubbed Word Reveal · scroll-scrubbed-word-revealBuild accessible scroll-linked word-by-word text reveals that keep links and emphasis intactMengTo/Skills
563. 563Scroll World Storytelling · scroll-world-storytellingTurns an article or story into a scroll-driven landing page with video, 3D, or HTML/data visualsMengTo/Skills
564. 564Shaders Cursor Ripples · shaders-cursor-ripplesAdds a cursor-following water-ripple distortion over an existing image using the Shaders WebGPU library.MengTo/Skills
565. 565Skeuomorphic UI Styling · skeuomorphic-uiGives the agent a recipe for tactile, physical-looking web UI surfaces with shadows, gradients and embossed text.MengTo/Skills
566. 566Solar Duotone Bold Icons · solar-duotone-boldGives the agent a consistent, two-tone Solar icon style for UI icon setsMengTo/Skills
567. 567Split Layout Technical · split-layout-technicalDesign two-panel, technical-style web pages with fine frames, mono labels and premium inset surfacesMengTo/Skills
568. 568Staggered Word Reveal · staggered-word-revealGives the agent a recipe for editorial word-by-word text fade-in animations on scroll.MengTo/Skills
569. 569Tailwind CSS Styling · tailwindcssGuides the agent to build web UI with Tailwind CSS utility classes, responsive layouts and clean patternsMengTo/Skills
570. 570Tech Green Dark Mode Design · tech-green-dark-mode-modernStyles web interfaces as a modern dark, technical dashboard with emerald accents and framed cardsMengTo/Skills
571. 571Technical Wireframe Layout · technical-wireframe-info-layoutDesign dark, monochrome technical wireframe web pages with annotated exploded 3D diagramsMengTo/Skills
572. 572Thinking Orbs Loading Indicators · thinking-orbsAdds accessible animated AI activity indicators to React interfaces.MengTo/Skills
573. 573Three.js 3D Scenes · threejsLets the agent build and debug interactive 3D scenes for the web using Three.jsMengTo/Skills
574. 574Three.js Landscape Backdrop · threejs-landscapeBuild a live 3D landscape backdrop with terrain, grass, stones, sky and stars using Three.jsMengTo/Skills
575. 575Three.js Procedural Towers · threejs-towersBuild pagodas, castles and domes procedurally in Three.js with a clipping-plane construction animationMengTo/Skills
576. 576Three.js Weather Effects · threejs-weatherGives an agent know-how to build believable rain, storms, lightning, snow and wet ground in Three.js scenesMengTo/Skills
577. 577Unicorn Studio Embeds · unicorn-studioEmbed and tune no-code WebGL animated scenes from Unicorn Studio on websitesMengTo/Skills
578. 578Vanta.js Animated Backgrounds · vantajsAdds animated WebGL background effects to web pages using Vanta.jsMengTo/Skills
579. 579WebGL 3D Object · webgl-3d-objectBuilds a lit, floating 3D faceted object for web pages using WebGL and Three.jsMengTo/Skills
580. 580WebGL Landing Page Steering · webgl-landing-steeringGuides an agent to plan WebGL landing pages that balance visual wow with conversion and performanceMengTo/Skills
581. 581WebGL Laser Background · webgl-laserBuilds a fixed full-screen WebGL laser beam background with a white core, colored halo and smokeMengTo/Skills
582. 582Replica Design System Builder · replica-designRebuilds an app's design tokens and component specs with original assets, plus a WCAG contrast checkerJakeschincariol/replica-skill