All authors
Claude Skills by thedixitjain
github.com/thedixitjain12,707 skills283 installs48,721 views
- Styleseed Design Judgment Engine- Color discipline — #2A2A2A as refined black, 5-level grayscale, one accent color maximum - Spatial rhythm — alternating section heights, 2:1 number-to-unit ratios - Information hierarchy — card/background separation, progressive density - Shadow & elevation — 4% opacity ceiling, dark mode border substitution - Component variance — never 4 identical KPI cards, stagger content typesVotes: 0GitHub stars: 3
- Styleseed Design ReviewReviews UI/frontend code and tells you exactly why it \"looks AI-generated\" — then how to fix it. Use it when a React/Tailwind/HTML interface looks off, generic, or unfinished, when you want a design score before shipping, or when asked to make UI look more professional, polished, or...Votes: 0GitHub stars: 3
- Superloopy FrontendUse only after explicit Codex `$superloopy:superloopy-frontend` or Claude Code `/superloopy:superloopy-frontend` invocation for supported screen-based application UI across browser-hosted Web, interactive deployed content-led Web, desktop, mobile/tablet, embedded/hybrid, Qt, custom-rendered, or mixed targets, such a task started with a leading `loopy` or `루피`, or an active Superloopy loop explicitly routing it here. Do not activate from UI, frontend, desktop, mobile, or framework vocabulary a...Votes: 0GitHub stars: 3
- Svg Icon Generator'Generate svg icon generator operations. Auto-activating skill for Visual Content. Triggers on: svg icon generator, svg icon generator Part of the Visual Content skill category. Use when working with svg icon generator functionality. Trigger with phrases like \"svg icon generator\", \"svg generator\", \"svg\". 'Votes: 0GitHub stars: 3
- Svg VisualsSVG generation via DAX measures and extension measures with ImageUrl data category for inline visualizations in PBIR reports. Automatically invoke when the user mentions \"SVG visual\", \"DAX sparkline\", \"SVG measure\", \"inline graphics with DAX\", \"ImageUrl data category\", \"extension measure\", or asks to create any DAX-generated chart (progress bars, bullet charts, KPI indicators, data bars, gauges, donut charts, lollipop charts, dumbbell charts, status pills, overlapping bars, boxplo...Votes: 0GitHub stars: 3
- Swiftui Ui Patterns DimillianBest practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive layouts with stacks and grids. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens with VStack/HStack, managing @State or @Binding, building declarative iOS interfaces, or needing component-specific patterns and examples.Votes: 0GitHub stars: 3
- Swiftui Ui PatternsApply proven SwiftUI UI patterns for navigation, sheets, async state, and reusable screens.Votes: 0GitHub stars: 3
- Swiss DesignWeb and App implementation guide for Swiss Design (International Typographic Style). Trigger when user wants strict grid systems, strong typography, and clean, asymmetrical alignment.Votes: 0GitHub stars: 3
- SynthwaveWeb and App implementation guide for Synthwave. Trigger when user wants 80s-inspired neon, dark backgrounds, outrun grids, and Miami Vice aesthetics.Votes: 0GitHub stars: 3
- Tailwind Class Optimizer'Optimize tailwind class optimizer operations. Auto-activating skill for Frontend Development. Triggers on: tailwind class optimizer, tailwind class optimizer Part of the Frontend Development skill category. Use when working with tailwind class optimizer functionality. Trigger with phrases like \"tailwind class optimizer\", \"tailwind optimizer\", \"tailwind\". 'Votes: 0GitHub stars: 3
- Tailwind Design System WshobsonBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.Votes: 0GitHub stars: 3
- Tailwind Design SystemBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.Votes: 0GitHub stars: 3
- Tailwind PatternsTailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.Votes: 0GitHub stars: 3
- Tanstack Query ExpertExpert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration.Votes: 0GitHub stars: 3
- Team UiOrchestrate the UI team through the full UX pipeline: from UX spec authoring through visual design, implementation, review, and polish. Integrates with /ux-design, /ux-review, and studio UX templates.Votes: 0GitHub stars: 3
- Technical Book Lab DesignDesign hands-on technical nonfiction chapters as runnable labs, worked examples, exercises, checkpoints, troubleshooting paths, and reader outcomes. Use when turning technical book sections, tutorials, self-hosting chapters, DevOps guides, programming lessons, or infrastructure explanations into practical labs that readers can complete and verify.Votes: 0GitHub stars: 3
- Technology Stack Blueprint GeneratorComprehensive technology stack blueprint generator that analyzes codebases to create detailed architectural documentation. Automatically detects technology stacks, programming languages, and implementation patterns across multiple platforms (.NET, Java, JavaScript, React, Python). Generates configurable blueprints with version information, licensing details, usage patterns, coding conventions, and visual diagrams. Provides implementation-ready templates and maintains architectural consistency...Votes: 0GitHub stars: 3
- Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.Votes: 0GitHub stars: 3
- Threejs 3d GeneratorGenerate, texture, rig, animate, stylize, convert, and download 3D assets for Three.js games using the Tripo API. Use for text-to-3D, image-to-3D, 2D concept to 3D conversion, game-ready GLB/FBX assets, characters, creatures, buildings, props, weapons, terrain pieces, auto-rigging, animation retargeting, model texturing, LEGO/voxel/Minecraft-style stylization, low-poly/quad conversion, and browser asset pipelines. Pair with threejs-image-generator for concepts, texture references, sky/backgro...Votes: 0GitHub stars: 3
- Threejs Aaa Graphics BuilderUpgrade Three.js games from basic/prototype visuals to premium AAA-inspired browser graphics. Combines art-direction critique, procedural model building, technical art, mandatory external asset sourcing decisions, threejs-3d-generator assets, threejs-image-generator concept/texture workflows, scene visual polish, material/texture libraries, world prop kits, shaders, VFX readability, render budgets, LOD/instancing, render pipeline, and visual scorecard gates. For premium games with characters,...Votes: 0GitHub stars: 3
- Threejs AnimationThree.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.Votes: 0GitHub stars: 3
- Threejs Audio GeneratorGenerate, convert, clean, and prepare audio assets for Three.js browser games using ElevenLabs. Use for sound effects, looping ambience, UI sounds, impact/weapon/vehicle audio, creature or boss stingers, announcer/dialogue TTS, scratch-performance voice conversion, voice cleanup/isolation, audio manifests, and game-ready web audio integration.Votes: 0GitHub stars: 3
- Threejs FundamentalsThree.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.Votes: 0GitHub stars: 3
- Threejs Game DirectorPrimary entrypoint for complete Three.js browser game creation and premium iteration. Use by default for build-a-game, upgrade, polish, premium, AAA, high-fidelity, showcase, from-scratch, endless runner, arcade, action, or release-ready requests. Orchestrates sibling skills for gameplay, AAA graphics, UI, debug/profile, and QA/release, plus 3D/image/audio generators for characters, vehicles, weapons, buildings, props, skies, textures, logos, icons, GUI art, and SFX/voice. Keeps skill-loading...Votes: 0GitHub stars: 3
- Threejs Game Ui DesignerDesign premium Three.js game UI. Use for HUDs, menus, overlays, pause/win/lose screens, settings, icon controls, touch UI, typography, responsive layout, safe areas, text fit, and UI/world cohesion.Votes: 0GitHub stars: 3
- Threejs Gameplay SystemsBuild and iterate playable Three.js game systems. Combines starter scaffold creation, architecture, game design, level design, gameplay implementation, combat/encounter design, and game-feel tuning (hitstop, screenshake, easing, impact feedback). Use for first playable slices, new Vite/TypeScript/Three.js game setup, design briefs, core loops, level/arena/track/wave/hole/puzzle design, game loops, entity systems, input, collision/physics, scoring, objectives, audio hooks, camera, controls, di...Votes: 0GitHub stars: 3
- Threejs GeometryThree.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.Votes: 0GitHub stars: 3
- Threejs Image GeneratorGenerate and edit 2D image assets for Three.js games using Google's Gemini image API. Use for concept sheets, image-to-3D inputs, texture references, sky/background plates, decals, logos, icons, GUI art, title/menu art, thumbnails, marketing stills, and source images that feed threejs-3d-generator. Also use for direct image editing when the user provides an image path.Votes: 0GitHub stars: 3
- Threejs InteractionThree.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.Votes: 0GitHub stars: 3
- Threejs LightingThree.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.Votes: 0GitHub stars: 3
- Threejs LoadersThree.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.Votes: 0GitHub stars: 3
- Threejs MaterialsThree.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.Votes: 0GitHub stars: 3
- Threejs PostprocessingThree.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.Votes: 0GitHub stars: 3
- Threejs ShadersThree.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.Votes: 0GitHub stars: 3
- Threejs SkillsCreate 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.Votes: 0GitHub stars: 3
- Threejs TexturesThree.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.Votes: 0GitHub stars: 3
- Tile DesignWeb and App implementation guide for Tile Design. Trigger when user wants Microsoft Metro style, sharp square information units, and horizontal scrolling grids.Votes: 0GitHub stars: 3
- Tmux LayoutUse this skill when the operator wants a prepared tmux visualization layout for the session's side-channels (STATE.md tail, CI-watch, events.jsonl tail). Renders a 4-pane default layout or debug layout. Read-only side-channel observability — the coordinator chat stays in the operator's original terminal. Trigger phrases: \"tmux layout\", \"split panes for ci watch\", \"visualize session side-channels\", \"show me state-md tail and ci\".Votes: 0GitHub stars: 3
- Tool DesignBuild tools that agents can use effectively, including architectural reduction patterns. Use when creating new tools for agent systems, debugging tool-related failures or misuse, or optimizing existing tool sets for better agent performance.Votes: 0GitHub stars: 3
- Top DesignCreate award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions \"Awwwards quality\", \"make my site stunning\", \"scroll animations\", \"parallax storytelling\", \"cinematic web design\", \"portfolio site\", or \"brand experience\". Also trigger when elevating a standard landing page into a memorable digital experience. Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For found...Votes: 0GitHub stars: 3
- Touch Ui| Use when asked about mobile UI guidelines, touch targets, platform-specific UI rules, or mobile interaction patterns. Examples: \"iOS touch targets\", \"Android UI guidelines\", \"mobile form design\"Votes: 0GitHub stars: 3
- Trend ResearcherResearch latest UI/UX trends from Dribbble and design communities. Use when starting a design project to understand current visual trends, color palettes, and layout patterns.Votes: 0GitHub stars: 3
- Trpc FullstackBuild end-to-end type-safe APIs with tRPC — routers, procedures, middleware, subscriptions, and Next.js/React integration patterns.Votes: 0GitHub stars: 3
- Typography FirstWeb and App implementation guide for Typography First Design. Trigger when user wants text as the absolute main visual element, with minimal UI chroming.Votes: 0GitHub stars: 3
- Typography SelectorBrowse and select fonts from Google Fonts or curated pairings. Use to find the perfect typography for a design project.Votes: 0GitHub stars: 3
- Ui A11yAudit a component or page for accessibility issues and fix themVotes: 0GitHub stars: 3
- Ui ComponentGenerate a new UI component following the StyleSeed design conventionsVotes: 0GitHub stars: 3
- Ui Craft| Authoritative guide for implementing stunning, accessible, performant UI. Synthesizes design engineering philosophy, accessibility standards, animation principles, spatial design, typography, color systems, and component craft into a single actionable reference. Complements the design-system skill (which covers DESIGN.md spec writing) by covering the HOW of implementation. Trigger phrases: \"build UI\", \"create component\", \"landing page\", \"make it look good\", \"frontend\", \"design\",...Votes: 0GitHub stars: 3
- Ui Demo Affaan M 2Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.Votes: 0GitHub stars: 3
- Ui Demo Affaan M使用 Playwright 录制精美的 UI 演示视频。当用户要求创建 Web 应用的演示、导览、屏幕录制或教程视频时使用。生成带有可见光标、自然节奏和专业感的 WebM 视频。Votes: 0GitHub stars: 3