All authors
Claude Skills by nota-america
github.com/nota-america1,679 skills4 installs2,242 views
- Pointer Trail EmitterBuild a cursor trail whose spacing stays constant at any handVotes: 0GitHub stars: 63
- Pricing PageUse when designing or rewriting a high-converting SaaS pricing pageVotes: 0GitHub stars: 63
- Product Proof SaasCreate or redesign SaaS and AI product landing pages where a realVotes: 0GitHub stars: 63
- Progressive BlurCreate a layered CSS progressive blur (top or bottom) usingVotes: 0GitHub stars: 63
- Reveal Hover EffectBuild cursor-following spotlight reveals that expose a secondVotes: 0GitHub stars: 63
- Scroll Progress TimelineTurn any ordered process into a data-driven vertical or horizontalVotes: 0GitHub stars: 63
- Scroll Scrubbed Visual SequenceBuild reversible scroll-controlled visual transformations with aVotes: 0GitHub stars: 63
- Scroll Scrubbed Word RevealReveal marked-up text word by word as scroll progress advances,Votes: 0GitHub stars: 63
- Shaders Cursor RipplesAdd cursor-following fluid WebGPU distortion over an existing imageVotes: 0GitHub stars: 63
- Skeuomorphic UiCreate skeuomorphic web UI surfaces with layered gradients, stackedVotes: 0GitHub stars: 63
- Solar Duotone BoldUse Iconify Solar Duotone Bold icon style.Votes: 0GitHub stars: 63
- Split Layout TechnicalCreate a technical split-screen design system with dual panels,Votes: 0GitHub stars: 63
- Staggered Word RevealCreate subtle editorial word-by-word text reveal animations whereVotes: 0GitHub stars: 63
- TailwindcssUse when designing/implementing UI with Tailwind CSS (layout,Votes: 0GitHub stars: 63
- Tech Green Dark Mode ModernCreate a modern dark-mode technical design system with matte-blackVotes: 0GitHub stars: 63
- Technical Wireframe Info LayoutCreate a monochrome technical wireframe design system with explodedVotes: 0GitHub stars: 63
- Thinking OrbsAdd accessible animated AI loading and agent-status indicators withVotes: 0GitHub stars: 63
- Threejs LandscapeBuild a live Three.js landscape that stays quiet behind a subject —Votes: 0GitHub stars: 63
- Threejs TowersGenerate architecture procedurally in Three.js and film itVotes: 0GitHub stars: 63
- Threejs WeatherPut weather into a Three.js scene that reads as weather — rainVotes: 0GitHub stars: 63
- ThreejsUse when building or debugging interactive 3D scenes on the webVotes: 0GitHub stars: 63
- Unicorn StudioUse when embedding and customizing Unicorn Studio interactiveVotes: 0GitHub stars: 63
- VantajsUse when adding animated WebGL background effects with Vanta.jsVotes: 0GitHub stars: 63
- Webgl 3d ObjectCreate a real 3D WebGL object with geometric mesh depth, physicallyVotes: 0GitHub stars: 63
- Webgl Landing SteeringUse when creating or refining WebGL-heavy landing pages and youVotes: 0GitHub stars: 63
- Webgl LaserCreate a fixed full-screen WebGL laser background effect with aVotes: 0GitHub stars: 63
- Add Shader Cursor TrailAdd the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain, and protected by static, touch, accessibility, SSR, and performance fallbacks. Use when a user asks for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero/contact background, or a reusable cursor-following shader layer in React, Next.js, Vue, Svelte, Solid, or plai...Votes: 0GitHub stars: 63
- Agency Grid Layout MinimalCreate a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.Votes: 0GitHub stars: 63
- Ambient Section ParticlesAdd a restrained particle atmosphere inside one section with configurable shapes, density, gravity, wind, sway, rotation, recycling or settling, pointer disturbance, visibility pausing, responsive limits, and reduced-motion fallbacks. Use for petals, leaves, snow, sparks, confetti, dots, paper, icons, or brand fragments that support a section's mood without obscuring content.Votes: 0GitHub stars: 63
- Animation SystemsUse when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.Votes: 0GitHub stars: 63
- Atmosphere BackgroundCreate a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.Votes: 0GitHub stars: 63
- Background Grid WebglCreate a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.Votes: 0GitHub stars: 63
- Beam Glow StatesCreate React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.Votes: 0GitHub stars: 63
- Blue Cloudy Clean ModernCreate a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.Votes: 0GitHub stars: 63
- Blue Laser Clean Glass LayoutCreate a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.Votes: 0GitHub stars: 63
- Book Serif IndexCreate an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.Votes: 0GitHub stars: 63
- Bright Green Tech System WebglCreate a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.Votes: 0GitHub stars: 63
- Build Awwwards Quality SitesArt-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards. Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or explicitly requests this visual and motion system.Votes: 0GitHub stars: 63
- Cinematic Gsap Lenis Motion SystemCreate premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.Votes: 0GitHub stars: 63
- Cinematic Scroll StorytellingCreate cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.Votes: 0GitHub stars: 63
- Clean Minimal Beige Light ModeCreate a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.Votes: 0GitHub stars: 63
- CobejsUse when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).Votes: 0GitHub stars: 63
- Company LogosUse Iconify Simple Icons logos (64x64) instead of text logos.Votes: 0GitHub stars: 63
- Container LinesAdd vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details.Votes: 0GitHub stars: 63
- Corner DiagonalsApply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.Votes: 0GitHub stars: 63
- Corner LasersCreate a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.Votes: 0GitHub stars: 63
- Css Alpha MaskingApply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.Votes: 0GitHub stars: 63
- Css Border GradientApply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.Votes: 0GitHub stars: 63
- Dark Blue Contrasting CleanCreate a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.Votes: 0GitHub stars: 63
- Dark Glass Clean LayoutCreate a dark glass layout system with frosted premium shells, clean multi-column workspace structure, floating data cards, and restrained atmospheric depth.Votes: 0GitHub stars: 63