All authors
Claude Skills by thedixitjain
github.com/thedixitjain12,707 skills283 installs48,721 views
- Frontend PatternsFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.Votes: 0GitHub stars: 3
- Frontend Responsive Design StandardsBuild responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop),...Votes: 0GitHub stars: 3
- Frontend Security CoderExpert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.Votes: 0GitHub stars: 3
- Frontend SeoA portable, framework-agnostic SEO system for any React or React Native-for-web frontend. Centralizes site metadata in one constants module, derives canonical URLs from a single base, builds per-route metadata (title, description, canonical, Open Graph, Twitter/X cards), generates...Votes: 0GitHub stars: 3
- Frontend Slides Affaan M 2从零开始或通过转换PowerPoint文件创建令人惊艳、动画丰富的HTML演示文稿。当用户想要构建演示文稿、将PPT/PPTX转换为网页格式，或为演讲/推介创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的美学。Votes: 0GitHub stars: 3
- Frontend Slides Affaan MCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.Votes: 0GitHub stars: 3
- Frontend Slides Sickn33Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.Votes: 0GitHub stars: 3
- Frontend Slides ZarazhangruiCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.Votes: 0GitHub stars: 3
- Frontend Slides Frontend SlidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration...Votes: 0GitHub stars: 3
- Frontend SlidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.Votes: 0GitHub stars: 3
- Frontend Ui Dark Ts Sickn33A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.Votes: 0GitHub stars: 3
- Frontend Ui Dark TsBuild dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.Votes: 0GitHub stars: 3
- Frontend Ui Engineering Sickn33Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.Votes: 0GitHub stars: 3
- Frontend Ui EngineeringBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.Votes: 0GitHub stars: 3
- Frontend Ui Ux System> 提供公司级前端 UI/UX 设计知识库，覆盖产品类型、视觉方向、设计 token、布局、 交互、可访问性、动效与交付检查。当前端任务需要统一设计语言或体验门禁时使用。Votes: 0GitHub stars: 3
- FrontendMUST USE for frontend/web UI/UX/visual work: building, styling, redesigning pages/components, React setup, performance audits, visual QA, taste, and polish. Routes four rulesets: design taste router and brand references; perfection for Playwright/Chromium Lighthouse/Core Web Vitals; ui-ux-db palettes/fonts/guidelines; designpowers personas/accessibility/critique/handoff; plus curl-only lazyweb real-app-screen research for design direction. Triggers: frontend, UI, UX, design, redesign, styling...Votes: 0GitHub stars: 3
- Frontendcomponent Development前端组件开发方法论，包括组件设计原则、状态管理、样式实现和性能优化Votes: 0GitHub stars: 3
- Frutiger AeroWeb and App implementation guide for Frutiger Aero. Trigger when user wants glossy gradients, early 2000s nature-inspired tech, glass, and water motifs.Votes: 0GitHub stars: 3
- FuturisticForward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.Votes: 0GitHub stars: 3
- Game Prototype LoopTurn a game idea into a focused design problem, risk-first prototype plan, and iteration loop. Use when starting a game, choosing what to build first, scoping an MVP, defining design questions, planning prototypes, or deciding whether an idea is ready for production.Votes: 0GitHub stars: 3
- Gcb Study DesignUse when designing the study behind a Global Change Biology (GCB) manuscript — manipulative experiments, observational/gradient studies, or process modelling of biological responses to global change. GCB reviewers probe scale, replication, realism, and causal inference. Guides design choices; it does not collect or simulate data.Votes: 0GitHub stars: 3
- Generate Canvas AppGenerate a complete, visually distinctive Power Apps canvas app with YAML. USE WHEN the user wants to create, build, or generate a Canvas App or pa.yaml files.Votes: 0GitHub stars: 3
- Generate Doc Template| Generates on-brand document and deck templates — letterhead, slide, and one-pager — as SVG from the active brand profile, with editable title, subtitle, and body zones. Vector output needs no account, key, or network. Use when a user asks for a letterhead, a slide or deck master, or a branded one-pager. Trigger with \"make a letterhead\", \"branded slide\", or \"/brand-make letterhead\".Votes: 0GitHub stars: 3
- Generate Logo| Generates on-brand, editable SVG logo assets — wordmark, monogram, and favicon — from the active brand profile, reusing its exact palette and heading font. Vector output needs no account, key, or network. Use when a user asks for a logo, wordmark, icon, monogram, or favicon. Trigger with \"make a logo\", \"generate a wordmark\", or \"/brand-make logo\".Votes: 0GitHub stars: 3
- GeometricGeometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way.Votes: 0GitHub stars: 3
- Gestalt SimilarityApply the Gestalt principle of Similarity — elements that share visual attributes (color, shape, size, orientation) are perceived as belonging together, regardless of their physical proximity. Use when grouping related items in a list, status indicators, dashboard cards, navigation, or any context where you want the user to perceive certain items as a set. Similarity is one of the strongest grouping cues; it works even when proximity says otherwise. Color is the strongest similarity cue, then...Votes: 0GitHub stars: 3
- Gif Sticker Maker| Convert photos (people, pets, objects, logos) into 4 animated GIF stickers with captions. Use when: user wants to create cartoon stickers, GIF expressions, emoji packs, animated avatars, or convert photos to Funko Pop / Pop Mart blind box style animations. Triggers: sticker, GIF, cartoon, emoji, expression pack, avatar animation.Votes: 0GitHub stars: 3
- Glassmorphism BergsideFrosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.Votes: 0GitHub stars: 3
- GlassmorphismWeb and App implementation guide for Glassmorphism. Trigger when user wants a frosted glass effect, blurred backgrounds, transparency, or a sleek MacOS-like feel.Votes: 0GitHub stars: 3
- Goframe V2GoFrame development skill. TRIGGER when writing/modifying Go files, implementing services, creating APIs, or database operations. DO NOT TRIGGER for frontend/shell scripts.Votes: 0GitHub stars: 3
- Gpt Taste Sickn33Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless bento grids.Votes: 0GitHub stars: 3
- Gpt TasteElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.Votes: 0GitHub stars: 3
- Gradient DesignWeb and App implementation guide for Gradient Design. Trigger when user wants heavy gradient usage, vibrant transitions, and modern energetic feels.Votes: 0GitHub stars: 3
- Granola Webhooks Events'Build event-driven automations with Granola''s Zapier webhook triggers. Use when creating real-time notification systems, processing meeting events, or building custom integrations that react to Granola note creation. Trigger: \"granola webhooks\", \"granola events\", \"granola triggers\", \"granola real-time\", \"granola event-driven\". 'Votes: 0GitHub stars: 3
- Gsap Framer Scroll Animation>- Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says...Votes: 0GitHub stars: 3
- Gsddiscuss PhaseGather phase context through adaptive questioning before planning. Use --all to skip area selection and discuss all gray areas interactively. Use --auto to skip interactive questions (Claude picks recommended defaults). Use --chain for interactive discuss followed by automatic plan+execute. Use --power for bulk question generation into a file-based UI (answer at your own pace).Votes: 0GitHub stars: 3
- GsdsketchSketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)Votes: 0GitHub stars: 3
- Gsdui PhaseGenerate UI design contract (UI-SPEC.md) for frontend phasesVotes: 0GitHub stars: 3
- Gsdui ReviewRetroactive 6-pillar visual audit of implemented frontend codeVotes: 0GitHub stars: 3
- HallmarkAnti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.Votes: 0GitHub stars: 3
- Healthcare Emr PatternsEMR/EHR development patterns for healthcare applications. Clinical safety, encounter workflows, prescription generation, clinical decision support integration, and accessibility-first UI for medical data entry.Votes: 0GitHub stars: 3
- Hicks Law DefaultsUse this skill when the question is what to *pre-select* in a list of options — radio groups, dropdowns, configuration UIs, plan pickers, sign-up flows, settings. A strong default is the highest-leverage Hick''s Law mitigation: most users accept the default, paying almost no decision cost. Trigger when picking what''s selected on first load, when stakeholders argue \"shouldn''t we let the user choose?\", when designing wizards or onboarding, or when a UI has many options but most users want t...Votes: 0GitHub stars: 3
- Hicks Law MenusUse this skill when designing menus, dropdowns, navigation, command palettes, or any interface where the user picks from a list. Trigger when the menu has more than ~7 items, when navigation feels overwhelming, when designing a cmd-K palette, when picking what goes in a \"More\" overflow, or when arguing about whether to add another menu item. Sub-aspect of `hicks-law`; read that first if you haven''t already.Votes: 0GitHub stars: 3
- Hicks LawUse this skill whenever a design has many options the user must choose among — menus, navigation, pickers, plan tiers, settings panels, action toolbars, lists of templates, anything that asks \"which one?\" Trigger when the user is laying out a navigation menu, designing a settings page, picking the structure of a wizard, building a country/timezone/currency picker, designing a pricing table, or reviewing a UI where users hesitate over which control to use. Trigger when there''s debate about ...Votes: 0GitHub stars: 3
- Hierarchy Color And ToneUse this skill when constructing visual hierarchy through color and tone (value, contrast, saturation) — picking which elements get full-color emphasis and which recede into greys, building a tone ladder, and deciding when color should *be* the hierarchy versus when it should *support* a size/weight hierarchy. Trigger when picking the primary color, building a neutral palette, designing a status badge system, or fixing a UI where color is \"too loud\" or \"too flat.\" Sub-aspect of the broade...Votes: 0GitHub stars: 3
- Hierarchy SpatialUse this skill when constructing visual hierarchy through layout, position, size, and whitespace — not type, not color. Trigger when laying out a page or section and deciding what gets the dominant region, where to place the focal element, how much breathing room to give it, and how secondary elements should arrange around it. Trigger when reviewing a layout that \"feels cramped\" or \"feels lost,\" when a hero''s CTA is competing with surrounding content, or when a dashboard''s primary KPI i...Votes: 0GitHub stars: 3
- Hierarchy TypographicUse this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type. Trigger when designing type systems, choosing fonts, picking heading sizes, defining a design system''s typographic tokens, fixing a \"no clear focal point in the headline area\" issue, or reviewing why a long-form page feels like a wall of text. Sub-aspe...Votes: 0GitHub stars: 3
- HierarchyUse this skill whenever a design has more than one element competing for the viewer''s attention — which is essentially every design. Trigger when laying out a screen, page, slide, poster, dashboard, or any composition where you must decide what gets seen first, what supports it, and what recedes. Trigger when reviewing a design and the user says \"everything looks the same,\" \"I don''t know where to look,\" \"the page feels flat,\" or \"what''s the most important thing here?\" Trigger when ...Votes: 0GitHub stars: 3
- Hig Components LayoutApple Human Interface Guidelines for layout and navigation components.Votes: 0GitHub stars: 3
- Hig Components StatusApple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.Votes: 0GitHub stars: 3